every_holiday/VRCT
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[Update] Main Page: Add UI, multi language.

Browse Source
This commit is contained in:
Sakamoto Shiina
2024-12-12 16:16:40 +09:00
parent 607c04d7ba
commit a7d094bbcb
12 changed files with 210 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
src-ui/app/main_page/main_section/MainSection.jsx
View File

@@ -1,3 +1,4 @@
import { useTranslation } from "react-i18next";
import styles from "./MainSection.module.scss";
import { TopBar } from "./top_bar/TopBar";
@@ -6,6 +7,7 @@ import { LanguageSelector } from "./language_selector/LanguageSelector";
import { useStore_IsOpenedLanguageSelector } from "@store";
import { useLanguageSettings } from "@logics_main";
import { useEffect } from "react";
export const MainSection = () => {
@@ -20,33 +22,62 @@ export const MainSection = () => {
const HandleLanguageSelector = () => {
const { t } = useTranslation();
const { currentIsOpenedLanguageSelector, updateIsOpenedLanguageSelector } = useStore_IsOpenedLanguageSelector();
const {
currentSelectedPresetTabNumber,
currentSelectedYourLanguages,
setSelectedYourLanguages,
currentSelectedTargetLanguages,
setSelectedTargetLanguages,
} = useLanguageSettings();
useEffect(() => {
updateIsOpenedLanguageSelector({
your_language: false,
target_language: false,
target_key: "1"
});
}, [currentSelectedPresetTabNumber.data, currentSelectedYourLanguages.data, currentSelectedTargetLanguages.data]);
const getTitle = (target_selector_key) => {
if (target_selector_key === "your_language") return t("main_page.language_selector.title_your_language");
if (target_selector_key === "target_language") {
if (currentSelectedTargetLanguages.data[currentSelectedPresetTabNumber.data]["2"].enable === false) return t("main_page.language_selector.title_target_language");
return `${t("main_page.language_selector.title_target_language")} (${currentIsOpenedLanguageSelector.data.target_key})`;
}
};
if (currentIsOpenedLanguageSelector.data.your_language === true) {
const onclickFunction_YourLanguage = (payload) => {
updateIsOpenedLanguageSelector({ your_language: false, target_language: false });
setSelectedYourLanguages(payload);
updateIsOpenedLanguageSelector({ your_language: false, target_language: false, target_key: currentIsOpenedLanguageSelector.data.target_key });
setSelectedYourLanguages({
...payload,
target_key: currentIsOpenedLanguageSelector.data.target_key,
});
};
const title = getTitle("your_language");
return (
<LanguageSelector
id="your_language"
title={title}
onClickFunction={onclickFunction_YourLanguage}
/>
);
} else if (currentIsOpenedLanguageSelector.data.target_language === true) {
const onclickFunction_TargetLanguage = (payload) => {
updateIsOpenedLanguageSelector({ your_language: false, target_language: false });
setSelectedTargetLanguages(payload);
updateIsOpenedLanguageSelector({ your_language: false, target_language: false, target_key: currentIsOpenedLanguageSelector.data.target_key });
setSelectedTargetLanguages({
...payload,
target_key: currentIsOpenedLanguageSelector.data.target_key,
});
};
const title = getTitle("target_language");
return (
<LanguageSelector
id="target_language"
title={title}
onClickFunction={onclickFunction_TargetLanguage}
/>
);

23
src-ui/app/main_page/main_section/language_selector/LanguageSelector.jsx
View File

@@ -4,17 +4,10 @@ import { useSelectableLanguageList } from "@logics_main";
import styles from "./LanguageSelector.module.scss";
import { LanguageSelectorTopBar } from "./language_selector_top_bar/LanguageSelectorTopBar";
export const LanguageSelector = ({ id, onClickFunction }) => {
export const LanguageSelector = ({ title, onClickFunction }) => {
const { t } = useTranslation();
const { currentSelectableLanguageList } = useSelectableLanguageList();
const languageTitles = {
your_language: t("main_page.language_selector.title_your_language"),
target_language: t("main_page.language_selector.title_target_language")
};
const language_selector_title = languageTitles[id] || "";
const groupLanguagesByFirstLetter = (languages) => {
return languages.reduce((acc, { language, country }) => {
const firstLetter = language[0].toUpperCase();
@@ -30,7 +23,7 @@ export const LanguageSelector = ({ id, onClickFunction }) => {
return (
<div className={styles.container}>
<LanguageSelectorTopBar title={language_selector_title}/>
<LanguageSelectorTopBar title={title}/>
<div className={styles.language_list_scroll_wrapper}>
<div className={styles.language_list}>
{Object.entries(groupedLanguages).map(([letter, languages]) => (
@@ -46,25 +39,25 @@ 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} onClickFunction={onClickFunction} languageData={languageData} />
{languages.map((language_data, index) => (
<LanguageButton key={index} onClickFunction={onClickFunction} language_data={language_data} />
))}
</div>
);
};
const LanguageButton = ({ onClickFunction, languageData }) => {
const LanguageButton = ({ onClickFunction, language_data }) => {
const adjustedOnClickFunction = () => {
onClickFunction({
language: languageData.language,
country: languageData.country
language: language_data.language,
country: language_data.country,
});
};
return (
<div className={styles.language_button} onClick={adjustedOnClickFunction}>
<p className={styles.language_label}>{languageData.language} ({languageData.country})</p>
<p className={styles.language_label}>{language_data.language} ({language_data.country})</p>
</div>
);
};

1
src-ui/app/main_page/main_section/language_selector/language_selector_top_bar/LanguageSelectorTopBar.jsx
View File

@@ -9,6 +9,7 @@ export const LanguageSelectorTopBar = (props) => {
updateIsOpenedLanguageSelector({
your_language: false,
target_language: false,
target_key: "1"
});
};

54
src-ui/app/main_page/sidebar_section/language_settings/LanguageSettings.jsx
View File

@@ -4,6 +4,7 @@ import { PresetTabSelector } from "./preset_tab_selector/PresetTabSelector";
import { LanguageSelectorOpenButton } from "./language_selector_open_button/LanguageSelectorOpenButton";
import { LanguageSwapButton } from "./language_swap_button/LanguageSwapButton";
import { TranslatorSelectorOpenButton } from "./translator_selector_open_button/TranslatorSelectorOpenButton";
import { AddRemoveTargetLanguageButtons } from "./add_remove_target_language_buttons/AddRemoveTargetLanguageButtons";
import { useStore_IsOpenedTranslatorSelector } from "@store";
export const LanguageSettings = () => {
@@ -22,69 +23,32 @@ export const LanguageSettings = () => {
import MicSvg from "@images/mic.svg?react";
import HeadphonesSvg from "@images/headphones.svg?react";
import { useStore_IsOpenedLanguageSelector } from "@store";
import {
useMainFunction,
useLanguageSettings,
} from "@logics_main";
// 言語セレクターをトグルする処理を関数化
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;
};
import { useMainFunction } from "@logics_main";
const PresetContainer = () => {
const { t } = useTranslation();
const { updateIsOpenedLanguageSelector, currentIsOpenedLanguageSelector } = useStore_IsOpenedLanguageSelector();
const { currentTranscriptionSendStatus, currentTranscriptionReceiveStatus } = useMainFunction();
const {
currentSelectedPresetTabNumber,
currentSelectedYourLanguages,
currentSelectedTargetLanguages,
} = useLanguageSettings();
const your_language_data = getSelectedLanguageData(currentSelectedPresetTabNumber.data, currentSelectedYourLanguages.data);
const target_language_data = getSelectedLanguageData(currentSelectedPresetTabNumber.data, currentSelectedTargetLanguages.data);
const yourLanguageSettings = {
title: t("main_page.your_language"),
is_opened: currentIsOpenedLanguageSelector.data.your_language,
onClickFunction: () => toggleSelector("your_language", currentIsOpenedLanguageSelector.data.your_language, updateIsOpenedLanguageSelector),
TurnedOnSvgComponent: MicSvg,
is_turned_on: currentTranscriptionSendStatus.data,
variable: your_language_data?.primary,
};
const targetLanguageSettings = {
title: t("main_page.target_language"),
is_opened: currentIsOpenedLanguageSelector.data.target_language,
onClickFunction: () => toggleSelector("target_language", currentIsOpenedLanguageSelector.data.target_language, updateIsOpenedLanguageSelector),
TurnedOnSvgComponent: HeadphonesSvg,
is_turned_on: currentTranscriptionReceiveStatus.data,
variable: target_language_data?.primary,
};
return (
<div className={styles.preset_container}>
<LanguageSelectorOpenButton {...yourLanguageSettings} />
<LanguageSelectorOpenButton {...yourLanguageSettings} selector_key="your_language" target_key="1"/>
<LanguageSwapButton />
<LanguageSelectorOpenButton {...targetLanguageSettings} />
<div className={styles.target_language_containers}>
<LanguageSelectorOpenButton {...targetLanguageSettings} selector_key="target_language" target_key="1" />
<LanguageSelectorOpenButton {...targetLanguageSettings} selector_key="target_language" target_key="2" />
<LanguageSelectorOpenButton {...targetLanguageSettings} selector_key="target_language" target_key="3" />
</div>
<AddRemoveTargetLanguageButtons />
<TranslatorSelectorOpenButton />
</div>
);

8
src-ui/app/main_page/sidebar_section/language_settings/LanguageSettings.module.scss
View File

@@ -18,4 +18,12 @@
display: flex;
flex-direction: column;
align-items: center;
}
.target_language_containers {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.2rem;
}

34
src-ui/app/main_page/sidebar_section/language_settings/add_remove_target_language_buttons/AddRemoveTargetLanguageButtons.jsx Normal file
View File

@@ -0,0 +1,34 @@
import clsx from "clsx";
import styles from "./AddRemoveTargetLanguageButtons.module.scss";
import RemoveSvg from "@images/remove.svg?react";
import AddSvg from "@images/add.svg?react";
import { useLanguageSettings } from "@logics_main";
export const AddRemoveTargetLanguageButtons = () => {
const {
currentSelectedPresetTabNumber,
// currentSelectedYourLanguages,
currentSelectedTargetLanguages,
removeTargetLanguage,
addTargetLanguage,
} = useLanguageSettings();
const remove_button_class = clsx(styles.remove_target_language_button, {
[styles.is_disabled]: !currentSelectedTargetLanguages.data[currentSelectedPresetTabNumber.data]["2"].enable,
});
const add_button_class = clsx(styles.add_target_language_button, {
[styles.is_disabled]: currentSelectedTargetLanguages.data[currentSelectedPresetTabNumber.data]["3"].enable,
});
return (
<div className={styles.add_remove_target_language_container}>
<div className={remove_button_class} onClick={removeTargetLanguage}>
<RemoveSvg className={styles.remove_svg} />
</div>
<div className={add_button_class} onClick={addTargetLanguage}>
<AddSvg className={styles.add_svg} />
</div>
</div>
);
};

32
src-ui/app/main_page/sidebar_section/language_settings/add_remove_target_language_buttons/AddRemoveTargetLanguageButtons.module.scss Normal file
View File

@@ -0,0 +1,32 @@
.add_remove_target_language_container {
width: 100%;
display: flex;
align-items: center;
}
.add_target_language_button, .remove_target_language_button {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
padding: 0.6rem 0;
cursor: pointer;
background-color: var(--dark_825_color);
&:hover {
background-color: var(--dark_875_color);
}
&:active {
background-color: var(--dark_900_color);
}
&.is_disabled {
pointer-events: none;
.remove_svg, .add_svg {
color: var(--dark_700_color);
}
}
}
.remove_svg, .add_svg {
width: 0.8rem;
color: var(--dark_200_color);
}

57
src-ui/app/main_page/sidebar_section/language_settings/language_selector_open_button/LanguageSelectorOpenButton.jsx
View File

@@ -1,18 +1,61 @@
import { useTranslation } from "react-i18next";
import clsx from "clsx";
import styles from "./LanguageSelectorOpenButton.module.scss";
import ArrowLeftSvg from "@images/arrow_left.svg?react";
import { useStore_IsOpenedLanguageSelector } from "@store";
import {
useLanguageSettings,
} from "@logics_main";
export const LanguageSelectorOpenButton = ({ TurnedOnSvgComponent, is_turned_on, selector_key, target_key }) => {
const { t } = useTranslation();
const { updateIsOpenedLanguageSelector, currentIsOpenedLanguageSelector } = useStore_IsOpenedLanguageSelector();
const {
currentSelectedPresetTabNumber,
currentSelectedYourLanguages,
currentSelectedTargetLanguages,
} = useLanguageSettings();
const toggleSelector = () => {
if (currentIsOpenedLanguageSelector.data[selector_key] === true && currentIsOpenedLanguageSelector.data.target_key === target_key) { // Close Language Selector
updateIsOpenedLanguageSelector({ your_language: false, target_language: false, target_key: "1" });
} else { // Open Language Selector
updateIsOpenedLanguageSelector({
your_language: selector_key === "your_language",
target_language: selector_key === "target_language",
target_key: target_key,
});
}
};
export const LanguageSelectorOpenButton = ({ title, onClickFunction, is_opened, TurnedOnSvgComponent, is_turned_on, variable }) => {
const arrow_class_names = clsx(styles.arrow_left_svg, {
[styles.reverse]: is_opened,
[styles.reverse]: (currentIsOpenedLanguageSelector.data[selector_key] === true && currentIsOpenedLanguageSelector.data.target_key === target_key),
});
const category_class_names = clsx(styles.category_svg, {
[styles.is_turned_on]: is_turned_on,
});
const languageText = variable?.language ?? "Loading...";
const countryText = variable?.country ?? "Loading...";
const getVariable = (target_selector_key) => {
if (target_selector_key === "your_language") return currentSelectedYourLanguages.data[currentSelectedPresetTabNumber.data];
if (target_selector_key === "target_language") return currentSelectedTargetLanguages.data[currentSelectedPresetTabNumber.data];
};
const getTitle = (target_selector_key) => {
if (target_selector_key === "your_language") return t("main_page.your_language");
if (target_selector_key === "target_language") {
if (currentSelectedTargetLanguages.data[currentSelectedPresetTabNumber.data]["2"].enable === false) return t("main_page.target_language");
return `${t("main_page.target_language")} ${target_key}`;
}
};
const title = getTitle(selector_key);
if (getVariable(selector_key)[target_key].enable === false) return null;
const language_text = getVariable(selector_key)[target_key].language ?? "Loading...";
const country_text = getVariable(selector_key)[target_key].country ?? "Loading...";
return (
<div className={styles.container}>
@@ -20,9 +63,9 @@ export const LanguageSelectorOpenButton = ({ title, onClickFunction, is_opened,
<TurnedOnSvgComponent className={category_class_names} />
<p className={styles.title}>{title}</p>
</div>
<div className={styles.dropdown_menu_container} onClick={onClickFunction}>
<p className={styles.selected_language}>{languageText}</p>
<p className={styles.selected_language}>({countryText})</p>
<div className={styles.dropdown_menu_container} onClick={toggleSelector}>
<p className={styles.selected_language}>{language_text}</p>
<p className={styles.selected_language}>({country_text})</p>
<ArrowLeftSvg className={arrow_class_names} />
</div>
</div>