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

[Refactor] ui_configs: rename the keys.

Browse Source
This commit is contained in:
Sakamoto Shiina
2024-11-12 15:23:02 +09:00
parent b503c843b2
commit f835a3be80
4 changed files with 25 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -13,11 +13,11 @@ export const TranslatorSelectorOpenButton = () => {
currentSelectedTranslationEngines, currentSelectedTranslationEngines,
} = useLanguageSettings(); } = useLanguageSettings();
const selected_translator_name = (currentTranslationEngines.state === "pending") const selected_label = (currentTranslationEngines.state === "pending")
? "Loading..." ? "Loading..."
: currentTranslationEngines.data.find( : currentTranslationEngines.data.find(
translator_data => translator_data.translator_id === currentSelectedTranslationEngines.data[currentSelectedPresetTabNumber.data] translator_data => translator_data.id === currentSelectedTranslationEngines.data[currentSelectedPresetTabNumber.data]
)?.translator_name; )?.label;
const { currentIsOpenedTranslatorSelector, updateIsOpenedTranslatorSelector} = useStore_IsOpenedTranslatorSelector(); const { currentIsOpenedTranslatorSelector, updateIsOpenedTranslatorSelector} = useStore_IsOpenedTranslatorSelector();
@@ -30,11 +30,11 @@ export const TranslatorSelectorOpenButton = () => {
<div className={styles.container}> <div className={styles.container}>
<div className={styles.translator_selector_button} onClick={openTranslatorSelector}> <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_translator_name}</p> <p className={styles.label}>{selected_label}</p>
</div> </div>
{currentIsOpenedTranslatorSelector.data && {currentIsOpenedTranslatorSelector.data &&
<TranslatorSelector <TranslatorSelector
selected_translator_id={currentSelectedTranslationEngines} selected_id={currentSelectedTranslationEngines}
translation_engines={currentTranslationEngines} translation_engines={currentTranslationEngines}
/> />
} }

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

@@ -5,7 +5,7 @@ import { chunkArray } from "@utils/chunkArray";
import { useStore_IsOpenedTranslatorSelector } from "@store"; import { useStore_IsOpenedTranslatorSelector } from "@store";
import { useLanguageSettings } from "@logics_main"; import { useLanguageSettings } from "@logics_main";
export const TranslatorSelector = ({selected_translator_id, translation_engines}) => { export const TranslatorSelector = ({selected_id, translation_engines}) => {
const columns = (translation_engines.data !== undefined) ? chunkArray(translation_engines.data, 2) : []; const columns = (translation_engines.data !== undefined) ? chunkArray(translation_engines.data, 2) : [];
return ( return (
@@ -13,13 +13,13 @@ export const TranslatorSelector = ({selected_translator_id, translation_engines}
<div className={styles.wrapper}> <div className={styles.wrapper}>
{columns.map((column, column_index) => ( {columns.map((column, column_index) => (
<div className={styles.column_wrapper} key={`column_${column_index}`}> <div className={styles.column_wrapper} key={`column_${column_index}`}>
{column.map(({ translator_id, translator_name, is_available }) => ( {column.map(({ id, label, is_available }) => (
<TranslatorBox <TranslatorBox
key={translator_id} key={id}
translator_id={translator_id} id={id}
translator_name={translator_name} label={label}
is_available={is_available} is_available={is_available}
is_selected={(translator_id === selected_translator_id)} is_selected={(id === selected_id)}
/> />
))} ))}
</div> </div>
@@ -35,17 +35,17 @@ const TranslatorBox = (props) => {
const box_class_name = clsx( const box_class_name = clsx(
styles.box, styles.box,
{ [styles["is_selected"]]: (currentSelectedTranslationEngines.data[currentSelectedPresetTabNumber.data] === props.translator_id) ? true : false }, { [styles["is_selected"]]: (currentSelectedTranslationEngines.data[currentSelectedPresetTabNumber.data] === props.id) ? true : false },
{ [styles["is_available"]]: (props.is_available === true) ? true : false } { [styles["is_available"]]: (props.is_available === true) ? true : false }
); );
const selectTranslator = () => { const selectTranslator = () => {
setSelectedTranslationEngines(props.translator_id); setSelectedTranslationEngines(props.id);
updateIsOpenedTranslatorSelector(false); updateIsOpenedTranslatorSelector(false);
}; };
return ( return (
<div className={box_class_name} onClick={selectTranslator}> <div className={box_class_name} onClick={selectTranslator}>
<p className={styles.translator_name}>{props.translator_name}</p> <p className={styles.translator_name}>{props.label}</p>
</div> </div>
); );
}; };

4
src-ui/logics/useReceiveRoutes.js
View File

@@ -177,7 +177,7 @@ export const useReceiveRoutes = () => {
const updateTranslatorAvailability = (keys) => { const updateTranslatorAvailability = (keys) => {
return translator_status.map(translator => ({ return translator_status.map(translator => ({
...translator, ...translator,
is_available: keys.includes(translator.translator_id), is_available: keys.includes(translator.id),
})); }));
}; };
const updated_list = updateTranslatorAvailability(payload); const updated_list = updateTranslatorAvailability(payload);
@@ -187,7 +187,7 @@ export const useReceiveRoutes = () => {
const updateTranslatorAvailability = (keys) => { const updateTranslatorAvailability = (keys) => {
return translator_status.map(translator => ({ return translator_status.map(translator => ({
...translator, ...translator,
is_available: keys.includes(translator.translator_id), is_available: keys.includes(translator.id),
})); }));
}; };
const updated_list = updateTranslatorAvailability(payload); const updated_list = updateTranslatorAvailability(payload);

18
src-ui/ui_configs.js
View File

@@ -1,12 +1,3 @@
export const translator_status = [
{ translator_id: "DeepL", translator_name: "DeepL", is_available: false },
{ translator_id: "DeepL_API", translator_name: `DeepL\nAPI`, is_available: false },
{ translator_id: "Google", translator_name: "Google", is_available: false },
{ translator_id: "Bing", translator_name: "Bing", is_available: false },
{ translator_id: "Papago", translator_name: "Papago", is_available: false },
{ translator_id: "CTranslate2", translator_name: `Internal\n(Default)`, is_available: false },
];
export const ui_configs = { export const ui_configs = {
mic_threshold_min: 0, mic_threshold_min: 0,
mic_threshold_max: 2000, mic_threshold_max: 2000,
@@ -20,6 +11,15 @@ 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: "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 },
];
export const ctranslate2_weight_type_status = [ export const ctranslate2_weight_type_status = [
{ id: "small", label: "small", is_downloaded: false, progress: null }, { id: "small", label: "small", is_downloaded: false, progress: null },
{ id: "large", label: "large", is_downloaded: false, progress: null }, { id: "large", label: "large", is_downloaded: false, progress: null },