@@ -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/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..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,12 +1,16 @@
+import { useTranslation } from "react-i18next";
import styles from "./RightSideComponents.module.scss";
-
import HelpSvg from "@images/help.svg?react";
+import { useStore_OpenedQuickSetting } from "@store";
+import { useIsEnabledOverlaySmallLog, useEnableVrcMicMuteSync } from "@logics_configs";
+import { OpenQuickSettingButton } from "./_buttons/OpenQuickSettingButton";
+
export const RightSideComponents = () => {
return (
-
VRC mic mute sync
-
Overlay(VR)
+
+
{
);
+};
+
+const OpenOverlayQuickSetting = () => {
+ // const { t } = useTranslation();
+ const { updateOpenedQuickSetting } = useStore_OpenedQuickSetting();
+ const { currentIsEnabledOverlaySmallLog } = useIsEnabledOverlaySmallLog();
+
+ const onClickFunction = () => {
+ updateOpenedQuickSetting("overlay");
+ };
+
+ return (
+
+ );
+};
+
+const OpenVrcMicMuteSyncQuickSetting = () => {
+ const { t } = useTranslation();
+ 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/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..d23eae2c
--- /dev/null
+++ b/src-ui/app/main_page/main_section/top_bar/right_side_components/_buttons/OpenQuickSettingButton.jsx
@@ -0,0 +1,18 @@
+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
+ ?
{t("main_page.state_text_enabled")}
+ :
{t("main_page.state_text_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..762f9fb6
--- /dev/null
+++ b/src-ui/app/modal_controller/ModalController.jsx
@@ -0,0 +1,28 @@
+import styles from "./ModalController.module.scss";
+import { useStore_OpenedQuickSetting } from "@store";
+import { Vr, VrcMicMuteSyncContainer } from "@setting_box";
+export const ModalController = () => {
+ const { currentOpenedQuickSetting, updateOpenedQuickSetting } = useStore_OpenedQuickSetting();
+ if (currentOpenedQuickSetting.data === "") return null;
+ return (
+
+
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
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..b27280ab
--- /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/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,
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"),
},
},