Merge branch 'ui' into for_webui

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 = () => {
             <div className={styles.pages_wrapper}>
                 <ConfigPage />
                 <MainPage />
+                <ModalController />
             </div>
         </div>
     );

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();

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, VrcMicMuteSyncContainer } from "./others/Others";
+export { AdvancedSettings } from "./advanced_settings/AdvancedSettings";
+export { Vr } from "./vr/Vr";
+// export { AboutVrct } from "./about_vrct/AboutVrct";

src-ui/app/config_page/setting_section/setting_box/others/Others.jsx

@@ -82,7 +82,7 @@ const AutoExportMessageLogsContainer = () => {
         </div>
     );
 };
-const VrcMicMuteSyncContainer = () => {
+export const VrcMicMuteSyncContainer = () => {
     const { t } = useTranslation();
     const { currentEnableVrcMicMuteSync, toggleEnableVrcMicMuteSync } = useEnableVrcMicMuteSync();
 

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 (
         <div className={styles.container}>
+            <EnableOverlaySmallLogContainer />
             <CommonControls />
             <div className={styles.controller_type_switch} onClick={toggleController}>
                 <div className={toggle_button_class_names__position}>
@@ -78,6 +83,19 @@ export const Vr = () => {
     );
 };
 
+const EnableOverlaySmallLogContainer = () => {
+    const { t } = useTranslation();
+    const { currentIsEnabledOverlaySmallLog, toggleIsEnabledOverlaySmallLog } = useIsEnabledOverlaySmallLog();
+
+    return (
+        <SwitchBoxContainer
+            label={t("config_page.enable_overlay_small_log.label")}
+            variable={currentIsEnabledOverlaySmallLog}
+            toggleFunction={toggleIsEnabledOverlaySmallLog}
+        />
+    );
+};
+
 const CommonControls = () => {
     const { t } = useTranslation();
     const { currentOverlaySettings, setOverlaySettings } = useOverlaySettings();

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 (
         <div className={styles.container}>
-            <p>VRC mic mute sync</p>
-            <p>Overlay(VR)</p>
+            <OpenVrcMicMuteSyncQuickSetting />
+            <OpenOverlayQuickSetting />
             <a
             className={styles.help_and_info_button}
             href="https://mzsoftware.notion.site/VRCT-Documents-be79b7a165f64442ad8f326d86c22246"
@@ -17,4 +21,40 @@ export const RightSideComponents = () => {
             </a>
         </div>
     );
+};
+
+const OpenOverlayQuickSetting = () => {
+    // const { t } = useTranslation();
+    const { updateOpenedQuickSetting } = useStore_OpenedQuickSetting();
+    const { currentIsEnabledOverlaySmallLog } = useIsEnabledOverlaySmallLog();
+
+    const onClickFunction = () => {
+        updateOpenedQuickSetting("overlay");
+    };
+
+    return (
+        <OpenQuickSettingButton
+            label="Overlay(VR)"
+            variable={currentIsEnabledOverlaySmallLog.data}
+            onClickFunction={onClickFunction}
+        />
+    );
+};
+
+const OpenVrcMicMuteSyncQuickSetting = () => {
+    const { t } = useTranslation();
+    const { updateOpenedQuickSetting } = useStore_OpenedQuickSetting();
+    const { currentEnableVrcMicMuteSync } = useEnableVrcMicMuteSync();
+
+    const onClickFunction = () => {
+        updateOpenedQuickSetting("vrc_mic_mute_sync");
+    };
+
+    return (
+        <OpenQuickSettingButton
+            label={t("config_page.vrc_mic_mute_sync.label")}
+            variable={currentEnableVrcMicMuteSync.data}
+            onClickFunction={onClickFunction}
+        />
+    );
 };

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 {

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 (
+        <div className={styles.container}>
+            <div className={styles.button_wrapper} onClick={props.onClickFunction}>
+                <p className={styles.button_label}>{props.label}</p>
+                {props.variable === true
+                    ? <p className={clsx(styles.button_indicator_label, styles.enabled)}>{t("main_page.state_text_enabled")}</p>
+                    : <p className={clsx(styles.button_indicator_label, styles.disabled)}>{t("main_page.state_text_disabled")}</p>
+                }
+            </div>
+        </div>
+    );
+};

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);
+    }
+}

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 (
+        <div className={styles.container}>
+            <div className={styles.bg_onclick_close_area} onClick={() => updateOpenedQuickSetting("")}></div>
+            <div className={styles.wrapper}>
+                <QuickSettingsController />
+            </div>
+        </div>
+    );
+};
+
+const QuickSettingsController = () => {
+    const { currentOpenedQuickSetting, updateOpenedQuickSetting } = useStore_OpenedQuickSetting();
+
+    switch (currentOpenedQuickSetting.data) {
+        case "overlay":
+            return <Vr />;
+        case "vrc_mic_mute_sync":
+            return <VrcMicMuteSyncContainer />;
+        default:
+            return null;
+    }
+};

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;
+}

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";
 

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,
+    };
+};

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,
 

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");

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"),
         },
     },