Merge branch 'ui' into develop

locales/en.yml

@@ -17,10 +17,10 @@ main_page:
     swap_button_label: "Swap Languages"
     target_language: "Target Language"
     translator: "Translator"
-    translator_ctranslate2: "Internal (Default)"
+    # translator_label_default: "Default"
 
     translator_selector:
-        is_selected_same_language: "Since the same language is selected for both '{{your_language}}' and '{{target_language}}', only '{{translator_ctranslate2}}' is available."
+        is_selected_same_language: "Since the same language is selected for both '{{your_language}}' and '{{target_language}}', only '{{ctranslate2}}' is available."
 
     message_log:
         all: "All"
@@ -59,12 +59,9 @@ config_page:
         appearance: "Appearance"
         translation: "Translation"
         transcription: "Transcription"
-        vr: "VR"
         others: "Others"
         hotkeys: "Hotkeys"
         advanced_settings: "Advanced Settings"
-        supporters: "Supporters"
-        about_vrct: "About VRCT"
 
     device:
         check_volume: "Check Volume"
@@ -112,12 +109,12 @@ config_page:
 
     translation:
         ctranslate2_weight_type:
-            label: "Internal Translation Model"
+            label: "{{ctranslate2}} Model"
             desc: "You can choose the translation model to use for the internal translation engine."
             small: "Basic model ({{capacity}})"
             large: "High accuracy model ({{capacity}})"
         ctranslate2_compute_device:
-            label: "Internal Translation Compute Device"
+            label: "{{ctranslate2}} Compute Device"
         deepl_auth_key:
             label: "DeepL Auth Key"
             desc: "Please select {{translator}} on the main screen with DeepL_API when using. ※Some languages may not be supported."

locales/ja.yml

@@ -10,17 +10,17 @@ main_page:
     translation: "翻訳"
     transcription_send: "音声認識（マイク）"
     transcription_receive: "音声認識（スピーカー）"
-    foreground: "最前面表示"
+    foreground: "最前面固定"
     language_settings: "言語設定"
     your_language: "あなたの言語"
     translate_each_other_label: "双方向に翻訳"
     swap_button_label: "言語を入れ替え"
     target_language: "相手の言語"
     translator: "翻訳エンジン"
-    translator_ctranslate2: "オフライン翻訳 (Default)"
+    # translator_label_default: "Default"
 
     translator_selector:
-        is_selected_same_language: "{{your_language}}」と「{{target_language}}」に同じ言語が選択がされているため、「{{translator_ctranslate2}}」のみが使用できます。"
+        is_selected_same_language: "「{{your_language}}」と「{{target_language}}」に同じ言語が選択がされているため、「{{ctranslate2}}」のみが使用できます。"
 
     message_log:
         all: "全て"
@@ -98,7 +98,7 @@ config_page:
             desc: "ログに表示されるフォントのサイズを、UIサイズを基準にして倍率を変えられます。"
         send_message_button_type:
             label: "メッセージ送信ボタン"
-            hide: "非表示 (エンターキーを使って送信)"
+            hide: "非表示 （エンターキーを使って送信）"
             show: "表示"
             show_and_disable_enter_key: "表示し、エンターキーでの送信を無効"
         font_family:
@@ -108,14 +108,14 @@ config_page:
 
     translation:
         ctranslate2_weight_type:
-            label: "オフライン翻訳のタイプ"
+            label: "AI翻訳 {{ctranslate2}} のモデルタイプ"
-            desc: "翻訳エンジン（オフライン翻訳）で翻訳する際に、使用する翻訳モデルを選択できます。"
+            desc: "翻訳エンジン「{{ctranslate2}}」で翻訳する際に、使用する翻訳モデルを選択できます。"
             small: "通常モデル ({{capacity}})"
             large: "高精度モデル ({{capacity}})"
         ctranslate2_compute_device:
-            label: "オフライン翻訳の処理デバイス"
+            label: "AI翻訳 {{ctranslate2}} の処理デバイス"
         deepl_auth_key:
-            label: "DeepL 認証キー"
+            label: "DeepL API 認証キー"
             desc: "使用の際は、メイン画面にある {{translator}} をDeepL_APIに変更してください。\n※対応していない言語もあります。"
             open_auth_key_webpage: "DeepLアカウントページを開く"
             save: "保存"

locales/ko.yml

@@ -17,7 +17,7 @@ main_page:
     swap_button_label: "언어 교체"
     target_language: "상대방의 언어"
     translator: "번역 엔진"
-    translator_ctranslate2: "오프라인 번역 (기본값)"
+    # translator_label_default: "기본값"
 
     message_log:
         all: "전체"

locales/zh-Hans.yml

@@ -17,7 +17,7 @@ main_page:
     swap_button_label: "互换"
     target_language: "目标语言"
     translator: "翻译器"
-    translator_ctranslate2: "离线翻译(默认)"
+    # translator_label_default: "默认"
 
     message_log:
         all: "全部"

locales/zh-Hant.yml

@@ -17,7 +17,7 @@ main_page:
     swap_button_label: "交換語言"
     target_language: "目標語言"
     translator: "翻譯器"
-    translator_ctranslate2: "離線翻譯（預設）"
+    # translator_label_default: "預設"
 
     message_log:
         all: "全部"

src-ui/app/config_page/setting_section/setting_box/_components/word_filter/WordFilter.jsx

@@ -1,3 +1,4 @@
+import { useTranslation } from "react-i18next";
 import styles from "./WordFilter.module.scss";
 import { _Entry } from "../_atoms/_entry/_Entry";
 import { useState } from "react";
@@ -5,6 +6,8 @@ import { useStore_IsOpenedMicWordFilterList } from "@store";
 import { useMicWordFilterList } from "@logics_configs";
 
 export const WordFilter = () => {
+    const { t } = useTranslation();
+
     const [input_value, setInputValue] = useState("");
     const { currentMicWordFilterList, updateMicWordFilterList, setMicWordFilterList } = useMicWordFilterList();
     const { currentIsOpenedMicWordFilterList, updateIsOpenedMicWordFilterList } = useStore_IsOpenedMicWordFilterList();
@@ -82,7 +85,7 @@ export const WordFilter = () => {
             }
             <div className={styles.entry_section_wrapper}>
                 <_Entry width="30rem" onChange={onChangeEntry} ui_variable={input_value}/>
-                <button className={styles.add_button} onClick={addWords}>Add</button>
+                <button className={styles.add_button} onClick={addWords}>{t("config_page.transcription.mic_word_filter.add_button_label")}</button>
             </div>
         </div>
     );
@@ -121,8 +124,6 @@ const WordFilterItem = (props) => {
     );
 };
 
-import { useTranslation } from "react-i18next";
-
 import ArrowLeftSvg from "@images/arrow_left.svg?react";
 export const WordFilterListToggleComponent = (props) => {
     const { t } = useTranslation();

src-ui/app/config_page/setting_section/setting_box/transcription/Transcription.jsx

@@ -1,7 +1,6 @@
-import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import styles from "./Transcription.module.scss";
-import { updateLabelsById } from "@utils";
+import { updateLabelsById, genNumObjArray } from "@utils";
 
 import {
     useMicRecordTimeout,
@@ -21,7 +20,6 @@ import {
 } from "@logics_configs";
 
 import {
-    EntryContainer,
     WordFilterContainer,
     DownloadModelsContainer,
     RadioButtonContainer,
@@ -59,82 +57,61 @@ const Mic_Container = () => {
 
 const MicRecordTimeout_Box = () => {
     const { t } = useTranslation();
-    const [ui_variable, setUiVariable] = useState("");
     const { currentMicRecordTimeout, setMicRecordTimeout } = useMicRecordTimeout();
-    const onChangeFunction = (e) => {
+
-        const value = e.currentTarget.value;
+    const selectFunction = (selected_data) => {
-        if (value === "") {
+        setMicRecordTimeout(selected_data.selected_id);
-            setUiVariable("");
-        } else {
-            setUiVariable(value);
-            setMicRecordTimeout(value);
-        }
     };
 
-    useEffect(()=> {
-        setUiVariable(currentMicRecordTimeout.data);
-    }, [currentMicRecordTimeout]);
-
     return (
-        <EntryContainer
+        <DropdownMenuContainer
+            dropdown_id="mic_record_timeout"
             label={t("config_page.transcription.mic_record_timeout.label")}
             desc={t("config_page.transcription.mic_record_timeout.desc")}
-            ui_variable={ui_variable}
+            selected_id={currentMicRecordTimeout.data}
-            onChange={onChangeFunction}
+            list={genNumObjArray(31)}
+            selectFunction={selectFunction}
+            state={currentMicRecordTimeout.state}
         />
     );
 };
 const MicPhraseTimeout_Box = () => {
     const { t } = useTranslation();
-    const [ui_variable, setUiVariable] = useState("");
     const { currentMicPhraseTimeout, setMicPhraseTimeout } = useMicPhraseTimeout();
-    const onChangeFunction = (e) => {
+
-        const value = e.currentTarget.value;
+    const selectFunction = (selected_data) => {
-        if (value === "") {
+        setMicPhraseTimeout(selected_data.selected_id);
-            setUiVariable("");
-        } else {
-            setUiVariable(value);
-            setMicPhraseTimeout(value);
-        }
     };
 
-    useEffect(()=> {
-        setUiVariable(currentMicPhraseTimeout.data);
-    }, [currentMicPhraseTimeout]);
-
     return (
-        <EntryContainer
+        <DropdownMenuContainer
+            dropdown_id="mic_phrase_timeout"
             label={t("config_page.transcription.mic_phrase_timeout.label")}
             desc={t("config_page.transcription.mic_phrase_timeout.desc")}
-            ui_variable={ui_variable}
+            selected_id={currentMicPhraseTimeout.data}
-            onChange={onChangeFunction}
+            list={genNumObjArray(31)}
+            selectFunction={selectFunction}
+            state={currentMicPhraseTimeout.state}
         />
     );
 };
 const MicMaxWords_Box = () => {
     const { t } = useTranslation();
-    const [ui_variable, setUiVariable] = useState("");
     const { currentMicMaxWords, setMicMaxWords } = useMicMaxWords();
-    const onChangeFunction = (e) => {
+
-        const value = e.currentTarget.value;
+    const selectFunction = (selected_data) => {
-        if (value === "") {
+        setMicMaxWords(selected_data.selected_id);
-            setUiVariable("");
-        } else {
-            setUiVariable(value);
-            setMicMaxWords(value);
-        }
     };
 
-    useEffect(()=> {
-        setUiVariable(currentMicMaxWords.data);
-    }, [currentMicMaxWords]);
-
     return (
-        <EntryContainer
+        <DropdownMenuContainer
+            dropdown_id="mic_max_phrase"
             label={t("config_page.transcription.mic_max_phrase.label")}
             desc={t("config_page.transcription.mic_max_phrase.desc")}
-            ui_variable={ui_variable}
+            selected_id={currentMicMaxWords.data}
-            onChange={onChangeFunction}
+            list={genNumObjArray(31)}
+            selectFunction={selectFunction}
+            state={currentMicMaxWords.state}
         />
     );
 };
@@ -167,82 +144,60 @@ const Speaker_Container = () => {
 
 const SpeakerRecordTimeout_Box = () => {
     const { t } = useTranslation();
-    const [ui_variable, setUiVariable] = useState("");
     const { currentSpeakerRecordTimeout, setSpeakerRecordTimeout } = useSpeakerRecordTimeout();
-    const onChangeFunction = (e) => {
+
-        const value = e.currentTarget.value;
+    const selectFunction = (selected_data) => {
-        if (value === "") {
+        setSpeakerRecordTimeout(selected_data.selected_id);
-            setUiVariable("");
-        } else {
-            setUiVariable(value);
-            setSpeakerRecordTimeout(value);
-        }
     };
 
-    useEffect(()=> {
-        setUiVariable(currentSpeakerRecordTimeout.data);
-    }, [currentSpeakerRecordTimeout]);
-
     return (
-        <EntryContainer
+        <DropdownMenuContainer
-            label={t("config_page.transcription.speaker_record_timeout.label")}
+            dropdown_id="speaker_record_timeout"
             desc={t("config_page.transcription.speaker_record_timeout.desc")}
-            ui_variable={ui_variable}
+            label={t("config_page.transcription.speaker_record_timeout.label")}
-            onChange={onChangeFunction}
+            selected_id={currentSpeakerRecordTimeout.data}
+            list={genNumObjArray(31)}
+            selectFunction={selectFunction}
+            state={currentSpeakerRecordTimeout.state}
         />
     );
 };
 const SpeakerPhraseTimeout_Box = () => {
     const { t } = useTranslation();
-    const [ui_variable, setUiVariable] = useState("");
     const { currentSpeakerPhraseTimeout, setSpeakerPhraseTimeout } = useSpeakerPhraseTimeout();
-    const onChangeFunction = (e) => {
+
-        const value = e.currentTarget.value;
+    const selectFunction = (selected_data) => {
-        if (value === "") {
+        setSpeakerPhraseTimeout(selected_data.selected_id);
-            setUiVariable("");
-        } else {
-            setUiVariable(value);
-            setSpeakerPhraseTimeout(value);
-        }
     };
-
-    useEffect(()=> {
-        setUiVariable(currentSpeakerPhraseTimeout.data);
-    }, [currentSpeakerPhraseTimeout]);
-
     return (
-        <EntryContainer
+        <DropdownMenuContainer
+            dropdown_id="speaker_phrase_timeout"
             label={t("config_page.transcription.speaker_phrase_timeout.label")}
             desc={t("config_page.transcription.speaker_phrase_timeout.desc")}
-            ui_variable={ui_variable}
+            selected_id={currentSpeakerPhraseTimeout.data}
-            onChange={onChangeFunction}
+            list={genNumObjArray(31)}
+            selectFunction={selectFunction}
+            state={currentSpeakerPhraseTimeout.state}
         />
     );
 };
 const SpeakerMaxWords_Box = () => {
     const { t } = useTranslation();
-    const [ui_variable, setUiVariable] = useState("");
     const { currentSpeakerMaxWords, setSpeakerMaxWords } = useSpeakerMaxWords();
-    const onChangeFunction = (e) => {
+
-        const value = e.currentTarget.value;
+    const selectFunction = (selected_data) => {
-        if (value === "") {
+        setSpeakerMaxWords(selected_data.selected_id);
-            setUiVariable("");
-        } else {
-            setUiVariable(value);
-            setSpeakerMaxWords(value);
-        }
     };
 
-    useEffect(()=> {
-        setUiVariable(currentSpeakerMaxWords.data);
-    }, [currentSpeakerMaxWords]);
-
     return (
-        <EntryContainer
+        <DropdownMenuContainer
+            dropdown_id="speaker_max_phrase"
             label={t("config_page.transcription.speaker_max_phrase.label")}
             desc={t("config_page.transcription.speaker_max_phrase.desc")}
-            ui_variable={ui_variable}
+            selected_id={currentSpeakerMaxWords.data}
-            onChange={onChangeFunction}
+            list={genNumObjArray(61)}
+            selectFunction={selectFunction}
+            state={currentSpeakerMaxWords.state}
         />
     );
 };

src-ui/app/config_page/setting_section/setting_box/translation/Translation.jsx

@@ -56,7 +56,10 @@ const CTranslate2WeightType_Box = () => {
     return (
         <>
             <DownloadModelsContainer
-                label={t("config_page.translation.ctranslate2_weight_type.label")}
+                label={t(
+                    "config_page.translation.ctranslate2_weight_type.label",
+                    {ctranslate2: "CTranslate2"}
+                )}
                 desc={t(
                     "config_page.translation.ctranslate2_weight_type.desc",
                     {translator: t("main_page.translator")}
@@ -89,10 +92,13 @@ const CTranslation2ComputeDevice_Box = () => {
 
 
     const { currentComputeMode } = useComputeMode();
+    const ctranslate2_compute_device_label = t("config_page.translation.ctranslate2_compute_device.label", {
+        ctranslate2: "Ctranslate2"
+    });
     if (currentComputeMode.data === "cpu") {
         return (
             <ComputeDeviceContainer
-                label={t("config_page.translation.ctranslate2_compute_device.label")}
+                label={ctranslate2_compute_device_label}
                 selected_id={target_index}
                 list={list_for_ui}
                 selectFunction={selectFunction}
@@ -104,8 +110,7 @@ const CTranslation2ComputeDevice_Box = () => {
     return (
         <DropdownMenuContainer
             dropdown_id="ctranslate2_compute_device"
-            label={t("config_page.translation.ctranslate2_compute_device.label")}
+            label={ctranslate2_compute_device_label}
-            // desc={t("config_page.translation.ctranslate2_compute_device.label")}
             selected_id={target_index}
             list={list_for_ui}
             selectFunction={selectFunction}

src-ui/app/config_page/sidebar_section/SidebarSection.jsx

@@ -42,9 +42,16 @@ const Tab = (props) => {
         [styles["is_selected"]]: (currentSelectedConfigTabId.data === props.tab_id) ? true : false
     });
 
+    const getLabel = () => {
+        if (props.tab_id === "vr") return "VR";
+        if (props.tab_id === "supporters") return "Supporters";
+        if (props.tab_id === "about_vrct") return "About VRCT";
+        return t(`config_page.side_menu_labels.${props.tab_id}`);
+    };
+
     return (
         <div className={tab_container_class_names} onClick={onclickFunction}>
-            <p className={styles.tab_text}>{t(`config_page.side_menu_labels.${props.tab_id}`)}</p>
+            <p className={styles.tab_text}>{getLabel()}</p>
             <div className={switch_indicator_class_names}></div>
         </div>
     );

src-ui/app/config_page/sidebar_section/SidebarSection.module.scss

@@ -9,6 +9,7 @@
     flex-direction: column;
     justify-content: space-between;
     overflow-y: auto;
+    // overflow-x: hidden;
     height: 100%;
     max-height: 60rem;
 }
@@ -59,7 +60,9 @@
 }
 
 .tab_text {
+    overflow: hidden;
     font-size: 1.6rem;
+    text-overflow: ellipsis;
 }
 
 .separated_tabs_wrapper {

src-ui/app/main_page/main_section/language_selector/language_selector_top_bar/LanguageSelectorTopBar.module.scss

@@ -16,7 +16,12 @@
     position: absolute;
     left: 0;
     background-color: var(--dark_800_color);
-    padding: 1.2rem;
+    padding: 0 2rem 0 1.6rem;
+    height: 100%;
+    min-width: 8rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
     cursor: pointer;
     &:hover{
         background-color: var(--dark_750_color);

src-ui/app/main_page/sidebar_section/language_settings/translator_selector_open_button/TranslatorSelectorOpenButton.jsx

@@ -16,11 +16,12 @@ export const TranslatorSelectorOpenButton = () => {
         currentSelectedTranslationEngines,
     } = useLanguageSettings();
 
-    const new_labels = [
+    // const new_labels = [
-        {id: "CTranslate2", label: t("main_page.translator_ctranslate2")}
+    //     {id: "CTranslate2", label: "AI\nCTranslate2"}
-    ];
+    // ];
 
-    const translation_engines = updateLabelsById(currentTranslationEngines.data, new_labels);
+    const translation_engines = currentTranslationEngines.data;
+    // const translation_engines = updateLabelsById(currentTranslationEngines.data, new_labels);
 
     const selected_engine_id = currentSelectedTranslationEngines.data[currentSelectedPresetTabNumber.data];
 
@@ -74,7 +75,7 @@ export const TranslatorSelectorOpenButton = () => {
     return (
         <div className={styles.container}>
             <div className={styles.translator_selector_button} onClick={openTranslatorSelector}>
-                <p className={styles.label}>{t("main_page.translator")}: </p>
+                <p className={styles.label}>{t("main_page.translator")}:</p>
                 <p className={styles.label}>{selected_label}</p>
                 {is_selected_same_language
                     ? <WarningSvg className={styles.warning_svg}/>

src-ui/app/main_page/sidebar_section/language_settings/translator_selector_open_button/translator_selector/TranslatorSelector.jsx

@@ -33,7 +33,7 @@ export const TranslatorSelector = ({selected_id, translation_engines, is_selecte
                             {t("main_page.translator_selector.is_selected_same_language", {
                                 your_language: t("main_page.your_language"),
                                 target_language: t("main_page.target_language"),
-                                translator_ctranslate2: t("main_page.translator_ctranslate2"),
+                                ctranslate2: "CTranslate2",
                             })}
                         </p>
                     </div>

src-ui/app/main_page/sidebar_section/language_settings/translator_selector_open_button/translator_selector/TranslatorSelector.module.scss

@@ -34,9 +34,9 @@
     gap: 1rem;
 }
 
-$box_size: 6.8rem;
+$box_size: 6rem;
 .box {
-    width: $box_size;
+    width: 9.2rem;
     height: $box_size;
     background-color: var(--dark_875_color);
     display: flex;
@@ -44,7 +44,7 @@ $box_size: 6.8rem;
     align-items: center;
     white-space: pre-wrap;
     text-align: center;
-    border-radius: 0.6rem;
+    border-radius: 0.2rem;
     cursor: pointer;
     &:hover {
         background-color: var(--dark_825_color);

src-ui/ui_configs.js

@@ -54,11 +54,11 @@ export const ui_configs = {
 
 export const translator_status = [
     { id: "DeepL", label: "DeepL", is_available: false },
-    { id: "DeepL_API", label: `DeepL\nAPI`, is_available: false },
+    { id: "DeepL_API", label: `DeepL API`, is_available: false },
     { id: "Google", label: "Google", is_available: false },
     { id: "Bing", label: "Bing", is_available: false },
     { id: "Papago", label: "Papago", is_available: false },
-    { id: "CTranslate2", label: `Internal\n(Default)`, is_available: false },
+    { id: "CTranslate2", label: `AI\nCTranslate2`, is_available: false, is_default: true },
 ];
 
 export const ctranslate2_weight_type_status = [

src-ui/utils.js

@@ -49,4 +49,12 @@ export const updateLabelsById = (data_array, updates) => {
         const update = updates.find(update_item => update_item.id === item.id);
         return update ? { ...item, label: update.label } : item;
     });
+};
+
+export const genNumArray = (count, start_from = 0) => {
+    return [...Array(count).keys()].map(i => i + start_from);
+};
+
+export const genNumObjArray = (count, start_from = 0) => {
+    return arrayToObject(genNumArray(count, start_from));
 };