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

[Refactor] (Huge Refactoring 2)

Browse Source 
Consolidated all logic into category-specific files.
Renamed useTranslation from react-i18next to useI18n to avoid a name conflict with our own function.
This commit is contained in:
Sakamoto Shiina
2025-06-19 08:40:45 +09:00
parent 65b5ffb2fa
commit e480c373cd
100 changed files with 1334 additions and 1525 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,4 +1,4 @@
import { useTranslation } from "react-i18next";
import { useI18n } from "@useI18n";
import styles from "./MainSection.module.scss";
import { TopBar } from "./top_bar/TopBar";
@@ -37,7 +37,7 @@ export const MainSection = () => {
const HandleLanguageSelector = () => {
const { t } = useTranslation();
const { t } = useI18n();
const { currentIsOpenedLanguageSelector, updateIsOpenedLanguageSelector } = useStore_IsOpenedLanguageSelector();
const {
currentSelectedPresetTabNumber,

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

@@ -1,11 +1,11 @@
import { useTranslation } from "react-i18next";
import { useI18n } from "@useI18n";
import { useLanguageSettings } from "@logics_main";
import styles from "./LanguageSelector.module.scss";
import { LanguageSelectorTopBar } from "./language_selector_top_bar/LanguageSelectorTopBar";
export const LanguageSelector = ({ title, onClickFunction }) => {
const { t } = useTranslation();
const { t } = useI18n();
const { currentSelectableLanguageList } = useLanguageSettings();
const groupLanguagesByFirstLetter = (languages) => {

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

@@ -1,9 +1,9 @@
import { useTranslation } from "react-i18next";
import { useI18n } from "@useI18n";
import styles from "./LanguageSelectorTopBar.module.scss";
import { useStore_IsOpenedLanguageSelector } from "@store";
export const LanguageSelectorTopBar = (props) => {
const { t } = useTranslation();
const { t } = useI18n();
const { updateIsOpenedLanguageSelector } = useStore_IsOpenedLanguageSelector();
const closeLanguageSelector = () => {
updateIsOpenedLanguageSelector({

4
src-ui/app/main_page/main_section/message_container/log_box/LogBox.jsx
View File

@@ -27,9 +27,9 @@ export const LogBox = () => {
);
};
import { useMessageLogUiScaling } from "@logics_configs";
import { useAppearance } from "@logics_configs";
const MessageLogUiSizeController = () => {
const { currentMessageLogUiScaling } = useMessageLogUiScaling();
const { currentMessageLogUiScaling } = useAppearance();
const font_size = currentMessageLogUiScaling.data / 100;
useEffect(() => {

8
src-ui/app/main_page/main_section/message_container/log_box/message_container/MessageContainer.jsx
View File

@@ -1,18 +1,18 @@
import { useState } from "react";
import { useTranslation } from "react-i18next";
import { useI18n } from "@useI18n";
import clsx from "clsx";
import styles from "./MessageContainer.module.scss";
import { MessageSubMenuContainer } from "./message_sub_menu_container/MessageSubMenuContainer";
import { useMessage } from "@logics_common";
import { useShowResendButton } from "@logics_configs";
import { useAppearance } from "@logics_configs";
export const MessageContainer = ({ messages, status, category, created_at }) => {
const { t } = useTranslation();
const { t } = useI18n();
const {
sendMessage,
updateMessageInputValue,
} = useMessage();
const { currentShowResendButton } = useShowResendButton();
const { currentShowResendButton } = useAppearance();
const [is_hovered, setIsHovered] = useState(false);
const [is_locked, setIsLocked] = useState(false);

4
src-ui/app/main_page/main_section/message_container/log_box/message_container/message_sub_menu_container/MessageSubMenuContainer.jsx
View File

@@ -1,5 +1,5 @@
import React, { useState, useRef } from "react";
import { useTranslation } from "react-i18next";
import { useI18n } from "@useI18n";
import Tooltip, { tooltipClasses } from '@mui/material/Tooltip';
import styles from "./MessageSubMenuContainer.module.scss";
import SendMessageSvg from "@images/send_message.svg?react";
@@ -68,6 +68,6 @@ export const MessageSubMenuContainer = (props) => {
};
const Title_p = () => {
const { t } = useTranslation();
const { t } = useI18n();
return <p className={styles.tooltip_title}>{t("main_page.message_log.resend_button_on_hover_desc")}</p>;
};

6
src-ui/app/main_page/main_section/message_container/message_input_box/MessageInputBox.jsx
View File

@@ -2,7 +2,7 @@ import { useState, useEffect, useLayoutEffect, useRef } from "react";
import styles from "./MessageInputBox.module.scss";
import SendMessageSvg from "@images/send_message.svg?react";
import { useMessage } from "@logics_common";
import { useSendMessageButtonType, useEnableAutoClearMessageInputBox } from "@logics_configs";
import { useAppearance, useOthers } from "@logics_configs";
import { useMessageLogScroll } from "@logics_main";
import { store } from "@store";
@@ -18,8 +18,8 @@ export const MessageInputBox = () => {
stopTyping,
} = useMessage();
const { currentEnableAutoClearMessageInputBox } = useEnableAutoClearMessageInputBox();
const { currentSendMessageButtonType } = useSendMessageButtonType();
const { currentEnableAutoClearMessageInputBox } = useOthers();
const { currentSendMessageButtonType } = useAppearance();
const { scrollToBottom } = useMessageLogScroll();

4
src-ui/app/main_page/main_section/message_container/message_log_settings_container/MessageLogSettingsContainer.jsx
View File

@@ -1,13 +1,13 @@
import { useState } from "react";
import styles from "./MessageLogSettingsContainer.module.scss";
import clsx from "clsx";
import { useTranslation } from "react-i18next";
import { useI18n } from "@useI18n";
import { MessageLogUiScalingContainer } from "@setting_box";
import ConfigSvg from "@images/configuration.svg?react";
export const MessageLogSettingsContainer = (props) => {
const { t } = useTranslation();
const { t } = useI18n();
const [is_opened, setIsOpened] = useState(false);
const [is_hovered, setIsHovered] = useState(false);

20
src-ui/app/main_page/main_section/top_bar/right_side_components/RightSideComponents.jsx
View File

@@ -1,11 +1,11 @@
import { useTranslation } from "react-i18next";
import { useI18n } from "@useI18n";
import styles from "./RightSideComponents.module.scss";
import RefreshSvg from "@images/refresh.svg?react";
import HelpSvg from "@images/help.svg?react";
import { useStore_OpenedQuickSetting } from "@store";
import { useSoftwareVersion } from "@logics_common";
import { useIsEnabledOverlaySmallLog, useIsEnabledOverlayLargeLog, useEnableVrcMicMuteSync } from "@logics_configs";
import { useVr, useOthers } from "@logics_configs";
import { OpenQuickSettingButton } from "./_buttons/OpenQuickSettingButton";
export const RightSideComponents = () => {
@@ -30,10 +30,12 @@ export const RightSideComponents = () => {
};
const OpenOverlayQuickSetting = () => {
// const { t } = useTranslation();
// const { t } = useI18n();
const { updateOpenedQuickSetting } = useStore_OpenedQuickSetting();
const { currentIsEnabledOverlaySmallLog } = useIsEnabledOverlaySmallLog();
const { currentIsEnabledOverlayLargeLog } = useIsEnabledOverlayLargeLog();
const {
currentIsEnabledOverlaySmallLog,
currentIsEnabledOverlayLargeLog,
} = useVr();
const onClickFunction = () => {
updateOpenedQuickSetting("overlay");
@@ -50,7 +52,7 @@ const OpenOverlayQuickSetting = () => {
);
};
const PluginsQuickSetting = () => {
const { t } = useTranslation();
const { t } = useI18n();
const { updateOpenedQuickSetting } = useStore_OpenedQuickSetting();
const onClickFunction = () => {
@@ -66,9 +68,9 @@ const PluginsQuickSetting = () => {
};
const OpenVrcMicMuteSyncQuickSetting = () => {
const { t } = useTranslation();
const { t } = useI18n();
const { updateOpenedQuickSetting } = useStore_OpenedQuickSetting();
const { currentEnableVrcMicMuteSync } = useEnableVrcMicMuteSync();
const { currentEnableVrcMicMuteSync } = useOthers();
const onClickFunction = () => {
updateOpenedQuickSetting("vrc_mic_mute_sync");
@@ -85,7 +87,7 @@ const OpenVrcMicMuteSyncQuickSetting = () => {
const SoftwareUpdateAvailableButton = () => {
const { currentLatestSoftwareVersionInfo } = useSoftwareVersion();
const { t } = useTranslation();
const { t } = useI18n();
if (currentLatestSoftwareVersionInfo.data.is_update_available === false) return null;
const { updateOpenedQuickSetting } = useStore_OpenedQuickSetting();

4
src-ui/app/main_page/main_section/top_bar/right_side_components/_buttons/OpenQuickSettingButton.jsx
View File

@@ -1,9 +1,9 @@
import { useTranslation } from "react-i18next";
import { useI18n } from "@useI18n";
import clsx from "clsx";
import styles from "./OpenQuickSettingButton.module.scss";
export const OpenQuickSettingButton = (props) => {
const { t } = useTranslation();
const { t } = useI18n();
const variable = (typeof props.variable === "boolean") ? props.variable : null;
return (
<div className={styles.container}>

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

@@ -1,4 +1,4 @@
import { useTranslation } from "react-i18next";
import { useI18n } from "@useI18n";
import styles from "./LanguageSettings.module.scss";
import { PresetTabSelector } from "./preset_tab_selector/PresetTabSelector";
import { LanguageSelectorOpenButton } from "./language_selector_open_button/LanguageSelectorOpenButton";
@@ -8,7 +8,7 @@ import { AddRemoveTargetLanguageButtons } from "./add_remove_target_language_but
import { useStore_IsOpenedTranslatorSelector } from "@store";
export const LanguageSettings = () => {
const { t } = useTranslation();
const { t } = useI18n();
const { updateIsOpenedTranslatorSelector } = useStore_IsOpenedTranslatorSelector();
const closeTranslatorSelector = () => updateIsOpenedTranslatorSelector(false);
@@ -26,7 +26,7 @@ import HeadphonesSvg from "@images/headphones.svg?react";
import { useMainFunction } from "@logics_main";
const PresetContainer = () => {
const { t } = useTranslation();
const { t } = useI18n();
const { currentTranscriptionSendStatus, currentTranscriptionReceiveStatus } = useMainFunction();
const yourLanguageSettings = {

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

@@ -1,4 +1,4 @@
import { useTranslation } from "react-i18next";
import { useI18n } from "@useI18n";
import clsx from "clsx";
import styles from "./LanguageSelectorOpenButton.module.scss";
import ArrowLeftSvg from "@images/arrow_left.svg?react";
@@ -8,7 +8,7 @@ import {
} from "@logics_main";
export const LanguageSelectorOpenButton = ({ TurnedOnSvgComponent, is_turned_on, selector_key, target_key }) => {
const { t } = useTranslation();
const { t } = useI18n();
const { updateIsOpenedLanguageSelector, currentIsOpenedLanguageSelector } = useStore_IsOpenedLanguageSelector();
const {

4
src-ui/app/main_page/sidebar_section/language_settings/language_swap_button/LanguageSwapButton.jsx
View File

@@ -1,6 +1,6 @@
import { useState } from "react";
import clsx from "clsx";
import { useTranslation } from "react-i18next";
import { useI18n } from "@useI18n";
import styles from "./LanguageSwapButton.module.scss";
@@ -9,7 +9,7 @@ import { useLanguageSettings } from "@logics_main";
export const LanguageSwapButton = () => {
const [isHovered, setIsHovered] = useState(false);
const { t } = useTranslation();
const { t } = useI18n();
const { swapSelectedLanguages } = useLanguageSettings();
const label = isHovered

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

@@ -1,4 +1,4 @@
import { useTranslation } from "react-i18next";
import { useI18n } from "@useI18n";
import { updateLabelsById } from "@utils";
import styles from "./TranslatorSelectorOpenButton.module.scss";
import { TranslatorSelector } from "./translator_selector/TranslatorSelector";
@@ -7,7 +7,7 @@ import { useLanguageSettings } from "@logics_main";
import WarningSvg from "@images/warning.svg?react";
export const TranslatorSelectorOpenButton = () => {
const { t } = useTranslation();
const { t } = useI18n();
const {
currentSelectedYourLanguages,
currentSelectedTargetLanguages,

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

@@ -1,12 +1,13 @@
import clsx from "clsx";
import styles from "./TranslatorSelector.module.scss";
import { useTranslation } from "react-i18next";
import { useI18n } from "@useI18n";
import { chunkArray } from "@utils";
import { useStore_IsOpenedTranslatorSelector } from "@store";
import { useLanguageSettings } from "@logics_main";
export const TranslatorSelector = ({selected_id, translation_engines, is_selected_same_language}) => { const { t } = useTranslation();
export const TranslatorSelector = ({selected_id, translation_engines, is_selected_same_language}) => {
const { t } = useI18n();
const columns = chunkArray(translation_engines, 2);
return (
@@ -46,7 +47,7 @@ export const TranslatorSelector = ({selected_id, translation_engines, is_selecte
};
const TranslatorBox = (props) => {
const { t } = useTranslation();
const { t } = useI18n();
const { setSelectedTranslationEngines} = useLanguageSettings();
const { updateIsOpenedTranslatorSelector} = useStore_IsOpenedTranslatorSelector();

4
src-ui/app/main_page/sidebar_section/main_function_switch/MainFunctionSwitch.jsx
View File

@@ -1,4 +1,4 @@
import { useTranslation } from "react-i18next";
import { useI18n } from "@useI18n";
import clsx from "clsx";
import styles from "./MainFunctionSwitch.module.scss";
import TranslationSvg from "@images/translation.svg?react";
@@ -11,7 +11,7 @@ import {
} from "@logics_main";
export const MainFunctionSwitch = () => {
const { t } = useTranslation();
const { t } = useI18n();
const {
toggleTranslation, currentTranslationStatus,