From 3c769021240f782c43155466e767559c3d21677a Mon Sep 17 00:00:00 2001 From: Sakamoto Shiina <68018796+ShiinaSakamoto@users.noreply.github.com> Date: Wed, 30 Oct 2024 16:01:37 +0900 Subject: [PATCH 1/4] [Update] Quick Settings: Add Overlay settings. --- src-ui/app/App.jsx | 2 ++ .../setting_box/SettingBox.jsx | 16 +++++---- .../setting_section/setting_box/index.js | 7 ++++ .../RightSideComponents.jsx | 24 +++++++++++-- .../RightSideComponents.module.scss | 1 + .../_buttons/OpenQuickSettingButton.jsx | 16 +++++++++ .../OpenQuickSettingButton.module.scss | 34 +++++++++++++++++++ .../app/modal_controller/ModalController.jsx | 15 ++++++++ .../ModalController.module.scss | 29 ++++++++++++++++ src-ui/logics/configs/index.js | 1 + .../configs/vr/useIsEnabledOverlaySmallLog.js | 28 +++++++++++++++ src-ui/store.js | 2 ++ vite.config.js | 2 ++ 13 files changed, 168 insertions(+), 9 deletions(-) create mode 100644 src-ui/app/config_page/setting_section/setting_box/index.js create mode 100644 src-ui/app/main_page/main_section/top_bar/right_side_components/_buttons/OpenQuickSettingButton.jsx create mode 100644 src-ui/app/main_page/main_section/top_bar/right_side_components/_buttons/OpenQuickSettingButton.module.scss create mode 100644 src-ui/app/modal_controller/ModalController.jsx create mode 100644 src-ui/app/modal_controller/ModalController.module.scss create mode 100644 src-ui/logics/configs/vr/useIsEnabledOverlaySmallLog.js diff --git a/src-ui/app/App.jsx b/src-ui/app/App.jsx index 8ed648e8..b9b59e6f 100644 --- a/src-ui/app/App.jsx +++ b/src-ui/app/App.jsx @@ -3,6 +3,7 @@ import { useStartPython } from "@logics/useStartPython"; import { WindowTitleBar } from "./window_title_bar/WindowTitleBar"; import { MainPage } from "./main_page/MainPage"; import { ConfigPage } from "./config_page/ConfigPage"; +import { ModalController } from "./modal_controller/ModalController"; import styles from "./App.module.scss"; export const App = () => { @@ -21,6 +22,7 @@ export const App = () => {
+
); diff --git a/src-ui/app/config_page/setting_section/setting_box/SettingBox.jsx b/src-ui/app/config_page/setting_section/setting_box/SettingBox.jsx index adec9373..fac72e8a 100644 --- a/src-ui/app/config_page/setting_section/setting_box/SettingBox.jsx +++ b/src-ui/app/config_page/setting_section/setting_box/SettingBox.jsx @@ -1,12 +1,14 @@ import { useStore_SelectedConfigTabId } from "@store"; -import { Device } from "./device/Device"; -import { Appearance } from "./appearance/Appearance"; -import { Transcription } from "./transcription/Transcription"; -import { Others } from "./others/Others"; -import { AdvancedSettings } from "./advanced_settings/AdvancedSettings"; -import { Vr } from "./vr/Vr"; -// import { AboutVrct } from "./about_vrct/AboutVrct"; +import { + Device, + Appearance, + Transcription, + Others, + AdvancedSettings, + Vr, + // AboutVrct, +} from "@setting_box"; export const SettingBox = () => { const { currentSelectedConfigTabId } = useStore_SelectedConfigTabId(); diff --git a/src-ui/app/config_page/setting_section/setting_box/index.js b/src-ui/app/config_page/setting_section/setting_box/index.js new file mode 100644 index 00000000..1d8953fd --- /dev/null +++ b/src-ui/app/config_page/setting_section/setting_box/index.js @@ -0,0 +1,7 @@ +export { Device } from "./device/Device"; +export { Appearance } from "./appearance/Appearance"; +export { Transcription } from "./transcription/Transcription"; +export { Others } from "./others/Others"; +export { AdvancedSettings } from "./advanced_settings/AdvancedSettings"; +export { Vr } from "./vr/Vr"; +// export { AboutVrct } from "./about_vrct/AboutVrct"; \ No newline at end of file diff --git a/src-ui/app/main_page/main_section/top_bar/right_side_components/RightSideComponents.jsx b/src-ui/app/main_page/main_section/top_bar/right_side_components/RightSideComponents.jsx index 4ceb31f9..fc05b10a 100644 --- a/src-ui/app/main_page/main_section/top_bar/right_side_components/RightSideComponents.jsx +++ b/src-ui/app/main_page/main_section/top_bar/right_side_components/RightSideComponents.jsx @@ -1,12 +1,15 @@ import styles from "./RightSideComponents.module.scss"; - import HelpSvg from "@images/help.svg?react"; +import { useStore_OpenedQuickSetting } from "@store"; +import { useIsEnabledOverlaySmallLog } from "@logics_configs"; +import { OpenQuickSettingButton } from "./_buttons/OpenQuickSettingButton"; + export const RightSideComponents = () => { return (

VRC mic mute sync

-

Overlay(VR)

+ {
); +}; + +const OpenOverlayQuickSetting = () => { + const { currentOpenedQuickSetting, updateOpenedQuickSetting } = useStore_OpenedQuickSetting(); + const { currentIsEnabledOverlaySmallLog } = useIsEnabledOverlaySmallLog(); + + const onClickFunction = () => { + updateOpenedQuickSetting("overlay"); + }; + + return ( + + ); }; \ No newline at end of file diff --git a/src-ui/app/main_page/main_section/top_bar/right_side_components/RightSideComponents.module.scss b/src-ui/app/main_page/main_section/top_bar/right_side_components/RightSideComponents.module.scss index d3c77d6d..80f64219 100644 --- a/src-ui/app/main_page/main_section/top_bar/right_side_components/RightSideComponents.module.scss +++ b/src-ui/app/main_page/main_section/top_bar/right_side_components/RightSideComponents.module.scss @@ -3,6 +3,7 @@ flex-direction: row; align-items: center; gap: 1rem; + height: 100%; } .help_and_info_button { diff --git a/src-ui/app/main_page/main_section/top_bar/right_side_components/_buttons/OpenQuickSettingButton.jsx b/src-ui/app/main_page/main_section/top_bar/right_side_components/_buttons/OpenQuickSettingButton.jsx new file mode 100644 index 00000000..c3151df3 --- /dev/null +++ b/src-ui/app/main_page/main_section/top_bar/right_side_components/_buttons/OpenQuickSettingButton.jsx @@ -0,0 +1,16 @@ +import clsx from "clsx"; +import styles from "./OpenQuickSettingButton.module.scss"; + +export const OpenQuickSettingButton = (props) => { + return ( +
+
+

{props.label}

+ {props.variable === true + ?

Enabled

+ :

Disabled

+ } +
+
+ ); +}; \ No newline at end of file diff --git a/src-ui/app/main_page/main_section/top_bar/right_side_components/_buttons/OpenQuickSettingButton.module.scss b/src-ui/app/main_page/main_section/top_bar/right_side_components/_buttons/OpenQuickSettingButton.module.scss new file mode 100644 index 00000000..2b542209 --- /dev/null +++ b/src-ui/app/main_page/main_section/top_bar/right_side_components/_buttons/OpenQuickSettingButton.module.scss @@ -0,0 +1,34 @@ +.container { + // height: 100%; +} + +.button_wrapper { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + gap: 0.2rem; + padding: 0.6rem 0.4rem; + border-radius: 0.2rem; + cursor: pointer; + &:hover { + background-color: var(--dark_800_color); + } + &:active { + background-color: var(--dark_900_color); + } +} + +.button_label { + font-size: 1.2rem; +} + +.button_indicator_label { + font-size: 1rem; + &.disabled { + color: var(--dark_600_color); + } + &.enabled { + color: var(--primary_300_color); + } +} \ No newline at end of file diff --git a/src-ui/app/modal_controller/ModalController.jsx b/src-ui/app/modal_controller/ModalController.jsx new file mode 100644 index 00000000..4d2e4e54 --- /dev/null +++ b/src-ui/app/modal_controller/ModalController.jsx @@ -0,0 +1,15 @@ +import styles from "./ModalController.module.scss"; +import { useStore_OpenedQuickSetting } from "@store"; +import { Vr } from "@setting_box"; +export const ModalController = () => { + const { currentOpenedQuickSetting, updateOpenedQuickSetting } = useStore_OpenedQuickSetting(); + if (currentOpenedQuickSetting.data === "") return null; + return ( +
+
updateOpenedQuickSetting("")}>
+
+ +
+
+ ); +}; \ No newline at end of file diff --git a/src-ui/app/modal_controller/ModalController.module.scss b/src-ui/app/modal_controller/ModalController.module.scss new file mode 100644 index 00000000..914fedef --- /dev/null +++ b/src-ui/app/modal_controller/ModalController.module.scss @@ -0,0 +1,29 @@ +.container { + position: relative; + width: 100%; + height: 100%; + display: flex; + justify-content: center; + align-items: center; +} + +.bg_onclick_close_area { + position: absolute; + width: 100%; + height: 100%; + background-color: (#ffffff22); + backdrop-filter: blur(0.2rem); +} + +.wrapper { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + overflow-y: auto; + background-color: var(--dark_875_color); + width: 60%; + height: 96%; + padding: 2rem; + border-radius: 0.6rem; +} \ No newline at end of file diff --git a/src-ui/logics/configs/index.js b/src-ui/logics/configs/index.js index d5cdffab..e290d5d1 100644 --- a/src-ui/logics/configs/index.js +++ b/src-ui/logics/configs/index.js @@ -31,6 +31,7 @@ export { useSpeakerRecordTimeout } from "./transcription/useSpeakerRecordTimeout export { useSpeakerPhraseTimeout } from "./transcription/useSpeakerPhraseTimeout"; export { useSpeakerMaxWords } from "./transcription/useSpeakerMaxWords"; +export { useIsEnabledOverlaySmallLog } from "./vr/useIsEnabledOverlaySmallLog"; export { useOverlaySettings } from "./vr/useOverlaySettings"; export { useOverlaySmallLogSettings } from "./vr/useOverlaySmallLogSettings"; diff --git a/src-ui/logics/configs/vr/useIsEnabledOverlaySmallLog.js b/src-ui/logics/configs/vr/useIsEnabledOverlaySmallLog.js new file mode 100644 index 00000000..cf46ce4e --- /dev/null +++ b/src-ui/logics/configs/vr/useIsEnabledOverlaySmallLog.js @@ -0,0 +1,28 @@ +import { useStore_IsEnabledOverlaySmallLog } from "@store"; +import { useStdoutToPython } from "@logics/useStdoutToPython"; + +export const useIsEnabledOverlaySmallLog = () => { + const { asyncStdoutToPython } = useStdoutToPython(); + const { currentIsEnabledOverlaySmallLog, updateIsEnabledOverlaySmallLog, pendingIsEnabledOverlaySmallLog } = useStore_IsEnabledOverlaySmallLog(); + + const getIsEnabledOverlaySmallLog = () => { + // pendingIsEnabledOverlaySmallLog(); + asyncStdoutToPython("/get/data/overlay_settings"); + }; + + const toggleIsEnabledOverlaySmallLog = () => { + pendingIsEnabledOverlaySmallLog(); + if (currentIsEnabledOverlaySmallLog.data) { + asyncStdoutToPython("/set/disable/overlay_small_log"); + } else { + asyncStdoutToPython("/set/enable/overlay_small_log"); + } + }; + + return { + currentIsEnabledOverlaySmallLog, + getIsEnabledOverlaySmallLog, + updateIsEnabledOverlaySmallLog, + toggleIsEnabledOverlaySmallLog, + }; +}; \ No newline at end of file diff --git a/src-ui/store.js b/src-ui/store.js index 856a24cb..2e775960 100644 --- a/src-ui/store.js +++ b/src-ui/store.js @@ -103,6 +103,7 @@ export const { atomInstance: Atom_MainFunctionsStateMemory, useHook: useStore_Ma transcription_send: false, transcription_receive: false, }, "MainFunctionsStateMemory"); +export const { atomInstance: Atom_OpenedQuickSetting, useHook: useStore_OpenedQuickSetting } = createAtomWithHook("", "OpenedQuickSetting"); // Main Page // Functions @@ -204,6 +205,7 @@ export const { atomInstance: Atom_OverlaySmallLogSettings, useHook: useStore_Ove display_duration: 5, fadeout_duration: 2, }, "OverlaySmallLogSettings"); +export const { atomInstance: Atom_IsEnabledOverlaySmallLog, useHook: useStore_IsEnabledOverlaySmallLog } = createAtomWithHook(false, "IsEnabledOverlaySmallLog"); // Others export const { atomInstance: Atom_EnableAutoClearMessageInputBox, useHook: useStore_EnableAutoClearMessageInputBox } = createAtomWithHook(true, "EnableAutoClearMessageInputBox"); diff --git a/vite.config.js b/vite.config.js index 86f28f71..93057bc4 100644 --- a/vite.config.js +++ b/vite.config.js @@ -43,6 +43,8 @@ export default defineConfig(async () => ({ "@logics_common": path.resolve(__dirname, "src-ui/logics/common"), "@logics_main": path.resolve(__dirname, "src-ui/logics/main"), "@logics_configs": path.resolve(__dirname, "src-ui/logics/configs"), + + "@setting_box": path.resolve(__dirname, "src-ui/app/config_page/setting_section/setting_box/index.js"), }, }, From a3230937f3effcd397d0fec83b119332d5ad55a4 Mon Sep 17 00:00:00 2001 From: Sakamoto Shiina <68018796+ShiinaSakamoto@users.noreply.github.com> Date: Wed, 30 Oct 2024 16:58:54 +0900 Subject: [PATCH 2/4] [Update] Config Page: VR Tab. Add EnabledOverlaySmallLog Switch and connect to backend. --- .../setting_section/setting_box/vr/Vr.jsx | 20 ++++++++++++++++++- .../configs/vr/useIsEnabledOverlaySmallLog.js | 2 +- src-ui/logics/useReceiveRoutes.js | 6 ++++++ 3 files changed, 26 insertions(+), 2 deletions(-) diff --git a/src-ui/app/config_page/setting_section/setting_box/vr/Vr.jsx b/src-ui/app/config_page/setting_section/setting_box/vr/Vr.jsx index 92bc97cf..e49cd033 100644 --- a/src-ui/app/config_page/setting_section/setting_box/vr/Vr.jsx +++ b/src-ui/app/config_page/setting_section/setting_box/vr/Vr.jsx @@ -1,9 +1,13 @@ import React, { useState } from "react"; import { useTranslation } from "react-i18next"; +import { clsx } from "clsx"; import styles from "./Vr.module.scss"; import { Slider } from "../_components/"; -import { clsx } from "clsx"; import { + SwitchBoxContainer, +} from "../_templates/Templates"; +import { + useIsEnabledOverlaySmallLog, useOverlaySettings, useOverlaySmallLogSettings, } from "@logics_configs"; @@ -58,6 +62,7 @@ export const Vr = () => { return (
+
@@ -78,6 +83,19 @@ export const Vr = () => { ); }; +const EnableOverlaySmallLogContainer = () => { + const { t } = useTranslation(); + const { currentIsEnabledOverlaySmallLog, toggleIsEnabledOverlaySmallLog } = useIsEnabledOverlaySmallLog(); + + return ( + + ); +}; + const CommonControls = () => { const { t } = useTranslation(); const { currentOverlaySettings, setOverlaySettings } = useOverlaySettings(); diff --git a/src-ui/logics/configs/vr/useIsEnabledOverlaySmallLog.js b/src-ui/logics/configs/vr/useIsEnabledOverlaySmallLog.js index cf46ce4e..b27280ab 100644 --- a/src-ui/logics/configs/vr/useIsEnabledOverlaySmallLog.js +++ b/src-ui/logics/configs/vr/useIsEnabledOverlaySmallLog.js @@ -6,7 +6,7 @@ export const useIsEnabledOverlaySmallLog = () => { const { currentIsEnabledOverlaySmallLog, updateIsEnabledOverlaySmallLog, pendingIsEnabledOverlaySmallLog } = useStore_IsEnabledOverlaySmallLog(); const getIsEnabledOverlaySmallLog = () => { - // pendingIsEnabledOverlaySmallLog(); + pendingIsEnabledOverlaySmallLog(); asyncStdoutToPython("/get/data/overlay_settings"); }; diff --git a/src-ui/logics/useReceiveRoutes.js b/src-ui/logics/useReceiveRoutes.js index cd109e60..7879b28e 100644 --- a/src-ui/logics/useReceiveRoutes.js +++ b/src-ui/logics/useReceiveRoutes.js @@ -46,6 +46,7 @@ import { useSpeakerPhraseTimeout, useSpeakerMaxWords, useOverlaySettings, + useIsEnabledOverlaySmallLog, useOverlaySmallLogSettings, useOscIpAddress, useOscPort, @@ -117,6 +118,7 @@ export const useReceiveRoutes = () => { const { updateOverlaySettings } = useOverlaySettings(); const { updateOverlaySmallLogSettings } = useOverlaySmallLogSettings(); + const { updateIsEnabledOverlaySmallLog } = useIsEnabledOverlaySmallLog(); const { updateOscIpAddress } = useOscIpAddress(); const { updateOscPort } = useOscPort(); @@ -320,6 +322,10 @@ export const useReceiveRoutes = () => { "/get/data/overlay_settings": updateOverlaySettings, "/set/data/overlay_settings": updateOverlaySettings, + "/get/data/overlay_small_log": updateIsEnabledOverlaySmallLog, + "/set/enable/overlay_small_log": updateIsEnabledOverlaySmallLog, + "/set/disable/overlay_small_log": updateIsEnabledOverlaySmallLog, + "/get/data/overlay_small_log_settings": updateOverlaySmallLogSettings, "/set/data/overlay_small_log_settings": updateOverlaySmallLogSettings, From 51bf5a2e2781870c987a7a937ff6305345b37956 Mon Sep 17 00:00:00 2001 From: Sakamoto Shiina <68018796+ShiinaSakamoto@users.noreply.github.com> Date: Thu, 31 Oct 2024 16:32:53 +0900 Subject: [PATCH 3/4] [Update] Quick Settings: Add Vrc Mic Mute Sync. --- .../setting_section/setting_box/index.js | 2 +- .../setting_box/others/Others.jsx | 2 +- .../RightSideComponents.jsx | 23 ++++++++++++++++--- .../app/modal_controller/ModalController.jsx | 17 ++++++++++++-- 4 files changed, 37 insertions(+), 7 deletions(-) diff --git a/src-ui/app/config_page/setting_section/setting_box/index.js b/src-ui/app/config_page/setting_section/setting_box/index.js index 1d8953fd..a656c23c 100644 --- a/src-ui/app/config_page/setting_section/setting_box/index.js +++ b/src-ui/app/config_page/setting_section/setting_box/index.js @@ -1,7 +1,7 @@ export { Device } from "./device/Device"; export { Appearance } from "./appearance/Appearance"; export { Transcription } from "./transcription/Transcription"; -export { Others } from "./others/Others"; +export { Others, VrcMicMuteSyncContainer } from "./others/Others"; export { AdvancedSettings } from "./advanced_settings/AdvancedSettings"; export { Vr } from "./vr/Vr"; // export { AboutVrct } from "./about_vrct/AboutVrct"; \ No newline at end of file diff --git a/src-ui/app/config_page/setting_section/setting_box/others/Others.jsx b/src-ui/app/config_page/setting_section/setting_box/others/Others.jsx index 2112db2c..da450f77 100644 --- a/src-ui/app/config_page/setting_section/setting_box/others/Others.jsx +++ b/src-ui/app/config_page/setting_section/setting_box/others/Others.jsx @@ -82,7 +82,7 @@ const AutoExportMessageLogsContainer = () => {
); }; -const VrcMicMuteSyncContainer = () => { +export const VrcMicMuteSyncContainer = () => { const { t } = useTranslation(); const { currentEnableVrcMicMuteSync, toggleEnableVrcMicMuteSync } = useEnableVrcMicMuteSync(); diff --git a/src-ui/app/main_page/main_section/top_bar/right_side_components/RightSideComponents.jsx b/src-ui/app/main_page/main_section/top_bar/right_side_components/RightSideComponents.jsx index fc05b10a..3afbb24a 100644 --- a/src-ui/app/main_page/main_section/top_bar/right_side_components/RightSideComponents.jsx +++ b/src-ui/app/main_page/main_section/top_bar/right_side_components/RightSideComponents.jsx @@ -2,13 +2,13 @@ import styles from "./RightSideComponents.module.scss"; import HelpSvg from "@images/help.svg?react"; import { useStore_OpenedQuickSetting } from "@store"; -import { useIsEnabledOverlaySmallLog } from "@logics_configs"; +import { useIsEnabledOverlaySmallLog, useEnableVrcMicMuteSync } from "@logics_configs"; import { OpenQuickSettingButton } from "./_buttons/OpenQuickSettingButton"; export const RightSideComponents = () => { return (
-

VRC mic mute sync

+ { }; const OpenOverlayQuickSetting = () => { - const { currentOpenedQuickSetting, updateOpenedQuickSetting } = useStore_OpenedQuickSetting(); + const { updateOpenedQuickSetting } = useStore_OpenedQuickSetting(); const { currentIsEnabledOverlaySmallLog } = useIsEnabledOverlaySmallLog(); const onClickFunction = () => { @@ -37,4 +37,21 @@ const OpenOverlayQuickSetting = () => { onClickFunction={onClickFunction} /> ); +}; + +const OpenVrcMicMuteSyncQuickSetting = () => { + const { updateOpenedQuickSetting } = useStore_OpenedQuickSetting(); + const { currentEnableVrcMicMuteSync } = useEnableVrcMicMuteSync(); + + const onClickFunction = () => { + updateOpenedQuickSetting("vrc_mic_mute_sync"); + }; + + return ( + + ); }; \ No newline at end of file diff --git a/src-ui/app/modal_controller/ModalController.jsx b/src-ui/app/modal_controller/ModalController.jsx index 4d2e4e54..762f9fb6 100644 --- a/src-ui/app/modal_controller/ModalController.jsx +++ b/src-ui/app/modal_controller/ModalController.jsx @@ -1,6 +1,6 @@ import styles from "./ModalController.module.scss"; import { useStore_OpenedQuickSetting } from "@store"; -import { Vr } from "@setting_box"; +import { Vr, VrcMicMuteSyncContainer } from "@setting_box"; export const ModalController = () => { const { currentOpenedQuickSetting, updateOpenedQuickSetting } = useStore_OpenedQuickSetting(); if (currentOpenedQuickSetting.data === "") return null; @@ -8,8 +8,21 @@ export const ModalController = () => {
updateOpenedQuickSetting("")}>
- +
); +}; + +const QuickSettingsController = () => { + const { currentOpenedQuickSetting, updateOpenedQuickSetting } = useStore_OpenedQuickSetting(); + + switch (currentOpenedQuickSetting.data) { + case "overlay": + return ; + case "vrc_mic_mute_sync": + return ; + default: + return null; + } }; \ No newline at end of file From 30de46cf2cab64b6d507f35e45ed6dd7811fe65b Mon Sep 17 00:00:00 2001 From: Sakamoto Shiina <68018796+ShiinaSakamoto@users.noreply.github.com> Date: Thu, 31 Oct 2024 16:50:21 +0900 Subject: [PATCH 4/4] [Update] Quick Settings: Apply localization. --- .../top_bar/right_side_components/RightSideComponents.jsx | 5 ++++- .../_buttons/OpenQuickSettingButton.jsx | 6 ++++-- 2 files changed, 8 insertions(+), 3 deletions(-) diff --git a/src-ui/app/main_page/main_section/top_bar/right_side_components/RightSideComponents.jsx b/src-ui/app/main_page/main_section/top_bar/right_side_components/RightSideComponents.jsx index 3afbb24a..c16cd4f1 100644 --- a/src-ui/app/main_page/main_section/top_bar/right_side_components/RightSideComponents.jsx +++ b/src-ui/app/main_page/main_section/top_bar/right_side_components/RightSideComponents.jsx @@ -1,3 +1,4 @@ +import { useTranslation } from "react-i18next"; import styles from "./RightSideComponents.module.scss"; import HelpSvg from "@images/help.svg?react"; @@ -23,6 +24,7 @@ export const RightSideComponents = () => { }; const OpenOverlayQuickSetting = () => { + // const { t } = useTranslation(); const { updateOpenedQuickSetting } = useStore_OpenedQuickSetting(); const { currentIsEnabledOverlaySmallLog } = useIsEnabledOverlaySmallLog(); @@ -40,6 +42,7 @@ const OpenOverlayQuickSetting = () => { }; const OpenVrcMicMuteSyncQuickSetting = () => { + const { t } = useTranslation(); const { updateOpenedQuickSetting } = useStore_OpenedQuickSetting(); const { currentEnableVrcMicMuteSync } = useEnableVrcMicMuteSync(); @@ -49,7 +52,7 @@ const OpenVrcMicMuteSyncQuickSetting = () => { return ( diff --git a/src-ui/app/main_page/main_section/top_bar/right_side_components/_buttons/OpenQuickSettingButton.jsx b/src-ui/app/main_page/main_section/top_bar/right_side_components/_buttons/OpenQuickSettingButton.jsx index c3151df3..d23eae2c 100644 --- a/src-ui/app/main_page/main_section/top_bar/right_side_components/_buttons/OpenQuickSettingButton.jsx +++ b/src-ui/app/main_page/main_section/top_bar/right_side_components/_buttons/OpenQuickSettingButton.jsx @@ -1,14 +1,16 @@ +import { useTranslation } from "react-i18next"; import clsx from "clsx"; import styles from "./OpenQuickSettingButton.module.scss"; export const OpenQuickSettingButton = (props) => { + const { t } = useTranslation(); return (

{props.label}

{props.variable === true - ?

Enabled

- :

Disabled

+ ?

{t("main_page.state_text_enabled")}

+ :

{t("main_page.state_text_disabled")}

}