From c0ba530d328e6bb3749cd661f4bfeae69d889686 Mon Sep 17 00:00:00 2001 From: Sakamoto Shiina <68018796+ShiinaSakamoto@users.noreply.github.com> Date: Mon, 23 Sep 2024 10:21:49 +0900 Subject: [PATCH] [Update] Main Page: Connect to backend. IsMainPageCompactMode. --- src-ui/app/App.jsx | 3 +++ .../SidebarCompactModeButton.jsx | 10 +++---- .../sidebar_section/SidebarSection.jsx | 5 ++-- .../main_page/sidebar_section/logo/Logo.jsx | 4 +-- .../MainFunctionSwitch.jsx | 4 +-- .../logics/main/useIsMainPageCompactMode.js | 26 +++++++++++++++++++ src-ui/logics/useReceiveRoutes.js | 7 +++++ 7 files changed, 46 insertions(+), 13 deletions(-) create mode 100644 src-ui/logics/main/useIsMainPageCompactMode.js diff --git a/src-ui/app/App.jsx b/src-ui/app/App.jsx index 73a7ec06..e0c514e1 100644 --- a/src-ui/app/App.jsx +++ b/src-ui/app/App.jsx @@ -31,6 +31,7 @@ import { useEnableAutoClearMessageBox } from "@logics_configs/useEnableAutoClear import { useSendMessageButtonType } from "@logics_configs/useSendMessageButtonType"; import { useUiLanguage } from "@logics_configs/useUiLanguage"; +import { useIsMainPageCompactMode } from "@logics_main/useIsMainPageCompactMode"; import { useLanguageSettings } from "@logics_main/useLanguageSettings"; import { useSelectableLanguageList } from "@logics_main/useSelectableLanguageList"; @@ -39,6 +40,7 @@ const StartPythonFacadeComponent = () => { const hasRunRef = useRef(false); const main_page = getCurrent(); + const { getIsMainPageCompactMode } = useIsMainPageCompactMode(); const { getSoftwareVersion } = useSoftwareVersion(); const { getEnableAutoMicSelect } = useEnableAutoMicSelect(); const { getEnableAutoSpeakerSelect } = useEnableAutoSpeakerSelect(); @@ -67,6 +69,7 @@ const StartPythonFacadeComponent = () => { if (!hasRunRef.current) { asyncStartPython().then((result) => { getUiLanguage(); + getIsMainPageCompactMode(); getSoftwareVersion(); diff --git a/src-ui/app/main_page/main_section/top_bar/sidebar_compact_mode_button/SidebarCompactModeButton.jsx b/src-ui/app/main_page/main_section/top_bar/sidebar_compact_mode_button/SidebarCompactModeButton.jsx index f275e3c2..83dfdd12 100644 --- a/src-ui/app/main_page/main_section/top_bar/sidebar_compact_mode_button/SidebarCompactModeButton.jsx +++ b/src-ui/app/main_page/main_section/top_bar/sidebar_compact_mode_button/SidebarCompactModeButton.jsx @@ -1,22 +1,18 @@ import clsx from "clsx"; import styles from "./SidebarCompactModeButton.module.scss"; -import { useStore_IsMainPageCompactMode } from "@store"; +import { useIsMainPageCompactMode } from "@logics_main/useIsMainPageCompactMode"; import ArrowLeftSvg from "@images/arrow_left.svg?react"; export const SidebarCompactModeButton = () => { - const { updateIsMainPageCompactMode, currentIsMainPageCompactMode } = useStore_IsMainPageCompactMode(); - - const toggleCompactMode = () => { - updateIsMainPageCompactMode(!currentIsMainPageCompactMode.data); - }; + const { toggleIsMainPageCompactMode, currentIsMainPageCompactMode } = useIsMainPageCompactMode(); const class_names = clsx(styles["arrow_left_svg"], { [styles["reverse"]]: currentIsMainPageCompactMode.data }); return ( -
+
); diff --git a/src-ui/app/main_page/sidebar_section/SidebarSection.jsx b/src-ui/app/main_page/sidebar_section/SidebarSection.jsx index ac607a6a..16119c06 100644 --- a/src-ui/app/main_page/sidebar_section/SidebarSection.jsx +++ b/src-ui/app/main_page/sidebar_section/SidebarSection.jsx @@ -1,7 +1,8 @@ import clsx from "clsx"; import styles from "./SidebarSection.module.scss"; -import { useStore_IsMainPageCompactMode, useStore_IsOpenedLanguageSelector } from "@store"; +import { useStore_IsOpenedLanguageSelector } from "@store"; +import { useIsMainPageCompactMode } from "@logics_main/useIsMainPageCompactMode"; import { Logo } from "./logo/Logo"; import { MainFunctionSwitch } from "./main_function_switch/MainFunctionSwitch"; @@ -9,7 +10,7 @@ import { LanguageSettings } from "./language_settings/LanguageSettings"; import { OpenSettings } from "./open_settings/OpenSettings"; export const SidebarSection = () => { - const { currentIsMainPageCompactMode } = useStore_IsMainPageCompactMode(); + const { currentIsMainPageCompactMode } = useIsMainPageCompactMode(); const container_class_name = clsx(styles.container, { [styles.is_compact_mode]: currentIsMainPageCompactMode.data }); diff --git a/src-ui/app/main_page/sidebar_section/logo/Logo.jsx b/src-ui/app/main_page/sidebar_section/logo/Logo.jsx index 6b94eb75..9518c007 100644 --- a/src-ui/app/main_page/sidebar_section/logo/Logo.jsx +++ b/src-ui/app/main_page/sidebar_section/logo/Logo.jsx @@ -11,10 +11,10 @@ export const Logo = () => { import vrct_logo from "@images/vrct_logo_for_dark_mode.png"; import chato_img from "@images/chato_white.png"; -import { useStore_IsMainPageCompactMode } from "@store"; +import { useIsMainPageCompactMode } from "@logics_main/useIsMainPageCompactMode"; export const LogoBox = () => { - const { currentIsMainPageCompactMode } = useStore_IsMainPageCompactMode(); + const { currentIsMainPageCompactMode } = useIsMainPageCompactMode(); if (currentIsMainPageCompactMode.data === true) { return VRCT logo chato; } else { diff --git a/src-ui/app/main_page/sidebar_section/main_function_switch/MainFunctionSwitch.jsx b/src-ui/app/main_page/sidebar_section/main_function_switch/MainFunctionSwitch.jsx index 7e92a574..f1dec68c 100644 --- a/src-ui/app/main_page/sidebar_section/main_function_switch/MainFunctionSwitch.jsx +++ b/src-ui/app/main_page/sidebar_section/main_function_switch/MainFunctionSwitch.jsx @@ -5,7 +5,7 @@ import TranslationSvg from "@images/translation.svg?react"; import MicSvg from "@images/mic.svg?react"; import HeadphonesSvg from "@images/headphones.svg?react"; import ForegroundSvg from "@images/foreground.svg?react"; -import { useStore_IsMainPageCompactMode } from "@store"; +import { useIsMainPageCompactMode } from "@logics_main/useIsMainPageCompactMode"; import { useMainFunction } from "@logics_main/useMainFunction"; @@ -74,7 +74,7 @@ export const SwitchContainer = ({ switchLabel, switch_id, children, currentState const [is_hovered, setIsHovered] = useState(false); const [is_mouse_down, setIsMouseDown] = useState(false); - const { currentIsMainPageCompactMode } = useStore_IsMainPageCompactMode(); + const { currentIsMainPageCompactMode } = useIsMainPageCompactMode(); const getClassNames = (baseClass) => clsx(baseClass, { [styles.is_compact_mode]: currentIsMainPageCompactMode.data, diff --git a/src-ui/logics/main/useIsMainPageCompactMode.js b/src-ui/logics/main/useIsMainPageCompactMode.js new file mode 100644 index 00000000..8cf40ddc --- /dev/null +++ b/src-ui/logics/main/useIsMainPageCompactMode.js @@ -0,0 +1,26 @@ +import { useStore_IsMainPageCompactMode } from "@store"; +import { useStdoutToPython } from "@logics/useStdoutToPython"; + +export const useIsMainPageCompactMode = () => { + const { asyncStdoutToPython } = useStdoutToPython(); + const { currentIsMainPageCompactMode, updateIsMainPageCompactMode } = useStore_IsMainPageCompactMode(); + + const getIsMainPageCompactMode = () => { + asyncStdoutToPython("/get/main_window_sidebar_compact_mode"); + }; + + const toggleIsMainPageCompactMode = () => { + if (currentIsMainPageCompactMode.data) { + asyncStdoutToPython("/set/disable_main_window_sidebar_compact_mode"); + } else { + asyncStdoutToPython("/set/enable_main_window_sidebar_compact_mode"); + } + }; + + return { + currentIsMainPageCompactMode, + getIsMainPageCompactMode, + toggleIsMainPageCompactMode, + updateIsMainPageCompactMode, + }; +}; \ No newline at end of file diff --git a/src-ui/logics/useReceiveRoutes.js b/src-ui/logics/useReceiveRoutes.js index 5bf83b57..6a561da5 100644 --- a/src-ui/logics/useReceiveRoutes.js +++ b/src-ui/logics/useReceiveRoutes.js @@ -5,8 +5,10 @@ import { useMainFunction } from "@logics_main/useMainFunction"; import { useMessage } from "@logics_common/useMessage"; import { useSelectableLanguageList } from "@logics_main/useSelectableLanguageList"; import { useLanguageSettings } from "@logics_main/useLanguageSettings"; +import { useIsMainPageCompactMode } from "@logics_main/useIsMainPageCompactMode"; import { useVolume } from "@logics_common/useVolume"; + import { useSoftwareVersion } from "@logics_configs/useSoftwareVersion"; import { useEnableAutoMicSelect } from "@logics_configs/useEnableAutoMicSelect"; import { useEnableAutoSpeakerSelect } from "@logics_configs/useEnableAutoSpeakerSelect"; @@ -24,6 +26,7 @@ import { useSendMessageButtonType } from "@logics_configs/useSendMessageButtonTy import { useUiLanguage } from "@logics_configs/useUiLanguage"; export const useReceiveRoutes = () => { + const { updateIsMainPageCompactMode } = useIsMainPageCompactMode(); const { updateTranslationStatus, updateTranscriptionSendStatus, @@ -66,6 +69,10 @@ export const useReceiveRoutes = () => { const routes = { // Main Page + // Page Controls + "/get/main_window_sidebar_compact_mode": updateIsMainPageCompactMode, + "/set/enable_main_window_sidebar_compact_mode": updateIsMainPageCompactMode, + "/set/disable_main_window_sidebar_compact_mode": updateIsMainPageCompactMode, // Main Functions "/set/enable_translation": updateTranslationStatus, "/set/disable_translation": updateTranslationStatus,