From d7243190cb883c2ededbabe5c342c14f84435b62 Mon Sep 17 00:00:00 2001 From: Sakamoto Shiina <68018796+ShiinaSakamoto@users.noreply.github.com> Date: Mon, 9 Dec 2024 10:44:34 +0900 Subject: [PATCH] [Refactor] App.jsx: Distribute controllers to each files. --- src-ui/app/App.jsx | 167 ++---------------- .../ConfigPageCloseTriggerController.jsx | 55 ++++++ .../_app_controllers/FontFamilyController.jsx | 11 ++ .../StartPythonController.jsx | 48 +++++ .../TransparencyController.jsx | 11 ++ .../_app_controllers/UiLanguageController.jsx | 14 ++ .../app/_app_controllers/UiSizeController.jsx | 13 ++ src-ui/app/_app_controllers/index.js | 6 + 8 files changed, 173 insertions(+), 152 deletions(-) create mode 100644 src-ui/app/_app_controllers/ConfigPageCloseTriggerController.jsx create mode 100644 src-ui/app/_app_controllers/FontFamilyController.jsx create mode 100644 src-ui/app/_app_controllers/StartPythonController.jsx create mode 100644 src-ui/app/_app_controllers/TransparencyController.jsx create mode 100644 src-ui/app/_app_controllers/UiLanguageController.jsx create mode 100644 src-ui/app/_app_controllers/UiSizeController.jsx create mode 100644 src-ui/app/_app_controllers/index.js diff --git a/src-ui/app/App.jsx b/src-ui/app/App.jsx index fd2d8701..4374f7a9 100644 --- a/src-ui/app/App.jsx +++ b/src-ui/app/App.jsx @@ -1,7 +1,20 @@ -import { useEffect, useRef } from "react"; import { useTranslation } from "react-i18next"; -import { useStartPython } from "@logics/useStartPython"; +import { + useWindow, +} from "@logics_common"; + +// import React from "react"; + +import { + StartPythonController, + UiLanguageController, + ConfigPageCloseTriggerController, + UiSizeController, + FontFamilyController, + TransparencyController, +} from "./_app_controllers/index.js"; + import { WindowTitleBar } from "./window_title_bar/WindowTitleBar"; import { MainPage } from "./main_page/MainPage"; import { ConfigPage } from "./config_page/ConfigPage"; @@ -53,154 +66,4 @@ const Contents = () => { } ); -}; - -import { - useWindow, - useVolume, - useIsOpenedConfigPage, -} from "@logics_common"; - -import { - useUiLanguage, - useUiScaling, - useSelectedFontFamily, - useTransparency, -} from "@logics_configs"; - -import { - useMainFunction, -} from "@logics_main"; - -const StartPythonController = () => { - const { asyncStartPython } = useStartPython(); - const hasRunRef = useRef(false); - const { asyncFetchFonts } = useAsyncFetchFonts(); - - useEffect(() => { - if (!hasRunRef.current) { - asyncStartPython().then(() => { - startFeedingToWatchDogController(); - asyncFetchFonts(); - }).catch((err) => { - console.error(err); - }); - } - return () => hasRunRef.current = true; - }, []); - - return null; -}; - -const UiLanguageController = () => { - const { currentUiLanguage } = useUiLanguage(); - const { i18n } = useTranslation(); - - useEffect(() => { - i18n.changeLanguage(currentUiLanguage.data); - }, [currentUiLanguage.data]); - return null; -}; - -import { useStore_MainFunctionsStateMemory } from "@store"; - -const ConfigPageCloseTriggerController = () => { - const { currentIsOpenedConfigPage } = useIsOpenedConfigPage(); - const { currentMainFunctionsStateMemory, updateMainFunctionsStateMemory} = useStore_MainFunctionsStateMemory(); - const { - currentTranscriptionSendStatus, - setTranscriptionSend, - currentTranscriptionReceiveStatus, - setTranscriptionReceive, - } = useMainFunction(); - const { - currentMicThresholdCheckStatus, - volumeCheckStop_Mic, - currentSpeakerThresholdCheckStatus, - volumeCheckStop_Speaker, - } = useVolume(); - - - const memorizeLatestMainFunctionsState = () => { - updateMainFunctionsStateMemory({ - transcription_send: currentTranscriptionSendStatus.data, - transcription_receive: currentTranscriptionReceiveStatus.data, - }); - }; - - const restoreMainFunctionState = () => { - if (currentMainFunctionsStateMemory.data.transcription_send === true) setTranscriptionSend(true); - if (currentMainFunctionsStateMemory.data.transcription_receive === true) setTranscriptionReceive(true); - }; - - useEffect(() => { - if (currentIsOpenedConfigPage.data === true) { // When config page is opened. - memorizeLatestMainFunctionsState(); - if (currentTranscriptionSendStatus.data === true) setTranscriptionSend(false); - if (currentTranscriptionReceiveStatus.data === true) setTranscriptionReceive(false); - } else if (currentIsOpenedConfigPage.data === false) { // When config page is closed. - if (currentMicThresholdCheckStatus.data === true) volumeCheckStop_Mic(); - if (currentSpeakerThresholdCheckStatus.data === true) volumeCheckStop_Speaker(); - restoreMainFunctionState(); - } - }, [currentIsOpenedConfigPage.data]); - return null; -}; - -import React from "react"; -const UiSizeController = () => { - const { currentUiScaling } = useUiScaling(); - const font_size = 62.5 * currentUiScaling.data / 100; - - useEffect(() => { - document.documentElement.style.setProperty("font-size", `${font_size}%`); - }, [currentUiScaling.data]); - - return null; -}; - - -const FontFamilyController = () => { - const { currentSelectedFontFamily } = useSelectedFontFamily(); - useEffect(() => { - document.documentElement.style.setProperty("--font_family", currentSelectedFontFamily.data); - }, [currentSelectedFontFamily.data]); - - return null; -}; - -import { useStore_SelectableFontFamilyList } from "@store"; -import { arrayToObject } from "@utils"; - -import { invoke } from "@tauri-apps/api/tauri"; -const useAsyncFetchFonts = () => { - const { updateSelectableFontFamilyList } = useStore_SelectableFontFamilyList(); - const asyncFetchFonts = async () => { - try { - let fonts = await invoke("get_font_list"); - fonts = fonts.sort((a, b) => a.localeCompare(b, undefined, { sensitivity: "base" })); - updateSelectableFontFamilyList(arrayToObject(fonts)); - } catch (error) { - console.error("Error fetching fonts:", error); - } - }; - return { asyncFetchFonts }; -}; - - -const TransparencyController = () => { - const { currentTransparency } = useTransparency(); - useEffect(() => { - document.documentElement.style.setProperty("opacity", `${currentTransparency.data / 100}`); - }, [currentTransparency.data]); - - return null; -}; - -import { useStdoutToPython } from "@logics/useStdoutToPython"; -const startFeedingToWatchDogController = () => { - const { asyncStdoutToPython } = useStdoutToPython(); - setInterval(() => { - asyncStdoutToPython("/run/feed_watchdog"); - }, 20000); // 20000ミリ秒 = 20秒 }; \ No newline at end of file diff --git a/src-ui/app/_app_controllers/ConfigPageCloseTriggerController.jsx b/src-ui/app/_app_controllers/ConfigPageCloseTriggerController.jsx new file mode 100644 index 00000000..7705aecc --- /dev/null +++ b/src-ui/app/_app_controllers/ConfigPageCloseTriggerController.jsx @@ -0,0 +1,55 @@ +import { useEffect } from "react"; + +import { + useVolume, + useIsOpenedConfigPage, +} from "@logics_common"; + +import { + useMainFunction, +} from "@logics_main"; + +import { useStore_MainFunctionsStateMemory } from "@store"; + +export const ConfigPageCloseTriggerController = () => { + const { currentIsOpenedConfigPage } = useIsOpenedConfigPage(); + const { currentMainFunctionsStateMemory, updateMainFunctionsStateMemory} = useStore_MainFunctionsStateMemory(); + const { + currentTranscriptionSendStatus, + setTranscriptionSend, + currentTranscriptionReceiveStatus, + setTranscriptionReceive, + } = useMainFunction(); + const { + currentMicThresholdCheckStatus, + volumeCheckStop_Mic, + currentSpeakerThresholdCheckStatus, + volumeCheckStop_Speaker, + } = useVolume(); + + + const memorizeLatestMainFunctionsState = () => { + updateMainFunctionsStateMemory({ + transcription_send: currentTranscriptionSendStatus.data, + transcription_receive: currentTranscriptionReceiveStatus.data, + }); + }; + + const restoreMainFunctionState = () => { + if (currentMainFunctionsStateMemory.data.transcription_send === true) setTranscriptionSend(true); + if (currentMainFunctionsStateMemory.data.transcription_receive === true) setTranscriptionReceive(true); + }; + + useEffect(() => { + if (currentIsOpenedConfigPage.data === true) { // When config page is opened. + memorizeLatestMainFunctionsState(); + if (currentTranscriptionSendStatus.data === true) setTranscriptionSend(false); + if (currentTranscriptionReceiveStatus.data === true) setTranscriptionReceive(false); + } else if (currentIsOpenedConfigPage.data === false) { // When config page is closed. + if (currentMicThresholdCheckStatus.data === true) volumeCheckStop_Mic(); + if (currentSpeakerThresholdCheckStatus.data === true) volumeCheckStop_Speaker(); + restoreMainFunctionState(); + } + }, [currentIsOpenedConfigPage.data]); + return null; +}; \ No newline at end of file diff --git a/src-ui/app/_app_controllers/FontFamilyController.jsx b/src-ui/app/_app_controllers/FontFamilyController.jsx new file mode 100644 index 00000000..f7110d1d --- /dev/null +++ b/src-ui/app/_app_controllers/FontFamilyController.jsx @@ -0,0 +1,11 @@ +import { useEffect } from "react"; +import { useSelectedFontFamily } from "@logics_configs"; + +export const FontFamilyController = () => { + const { currentSelectedFontFamily } = useSelectedFontFamily(); + useEffect(() => { + document.documentElement.style.setProperty("--font_family", currentSelectedFontFamily.data); + }, [currentSelectedFontFamily.data]); + + return null; +}; diff --git a/src-ui/app/_app_controllers/StartPythonController.jsx b/src-ui/app/_app_controllers/StartPythonController.jsx new file mode 100644 index 00000000..62bf0b28 --- /dev/null +++ b/src-ui/app/_app_controllers/StartPythonController.jsx @@ -0,0 +1,48 @@ +import { invoke } from "@tauri-apps/api/tauri"; +import { useEffect, useRef } from "react"; +import { useStartPython } from "@logics/useStartPython"; +import { useStdoutToPython } from "@logics/useStdoutToPython"; + +import { useStore_SelectableFontFamilyList } from "@store"; +import { arrayToObject } from "@utils"; + +export const StartPythonController = () => { + const { asyncStartPython } = useStartPython(); + const hasRunRef = useRef(false); + const { asyncFetchFonts } = useAsyncFetchFonts(); + + useEffect(() => { + if (!hasRunRef.current) { + asyncStartPython().then(() => { + startFeedingToWatchDogController(); + asyncFetchFonts(); + }).catch((err) => { + console.error(err); + }); + } + return () => hasRunRef.current = true; + }, []); + + return null; +}; + +const useAsyncFetchFonts = () => { + const { updateSelectableFontFamilyList } = useStore_SelectableFontFamilyList(); + const asyncFetchFonts = async () => { + try { + let fonts = await invoke("get_font_list"); + fonts = fonts.sort((a, b) => a.localeCompare(b, undefined, { sensitivity: "base" })); + updateSelectableFontFamilyList(arrayToObject(fonts)); + } catch (error) { + console.error("Error fetching fonts:", error); + } + }; + return { asyncFetchFonts }; +}; + +const startFeedingToWatchDogController = () => { + const { asyncStdoutToPython } = useStdoutToPython(); + setInterval(() => { + asyncStdoutToPython("/run/feed_watchdog"); + }, 20000); // 20000ミリ秒 = 20秒 +}; \ No newline at end of file diff --git a/src-ui/app/_app_controllers/TransparencyController.jsx b/src-ui/app/_app_controllers/TransparencyController.jsx new file mode 100644 index 00000000..46982413 --- /dev/null +++ b/src-ui/app/_app_controllers/TransparencyController.jsx @@ -0,0 +1,11 @@ +import { useEffect } from "react"; +import { useTransparency } from "@logics_configs"; + +export const TransparencyController = () => { + const { currentTransparency } = useTransparency(); + useEffect(() => { + document.documentElement.style.setProperty("opacity", `${currentTransparency.data / 100}`); + }, [currentTransparency.data]); + + return null; +}; \ No newline at end of file diff --git a/src-ui/app/_app_controllers/UiLanguageController.jsx b/src-ui/app/_app_controllers/UiLanguageController.jsx new file mode 100644 index 00000000..5b45c503 --- /dev/null +++ b/src-ui/app/_app_controllers/UiLanguageController.jsx @@ -0,0 +1,14 @@ +import { useEffect } from "react"; + +import { useTranslation } from "react-i18next"; +import { useUiLanguage } from "@logics_configs"; + +export const UiLanguageController = () => { + const { currentUiLanguage } = useUiLanguage(); + const { i18n } = useTranslation(); + + useEffect(() => { + i18n.changeLanguage(currentUiLanguage.data); + }, [currentUiLanguage.data]); + return null; +}; \ No newline at end of file diff --git a/src-ui/app/_app_controllers/UiSizeController.jsx b/src-ui/app/_app_controllers/UiSizeController.jsx new file mode 100644 index 00000000..8b970c0f --- /dev/null +++ b/src-ui/app/_app_controllers/UiSizeController.jsx @@ -0,0 +1,13 @@ +import { useEffect } from "react"; +import { useUiScaling } from "@logics_configs"; + +export const UiSizeController = () => { + const { currentUiScaling } = useUiScaling(); + const font_size = 62.5 * currentUiScaling.data / 100; + + useEffect(() => { + document.documentElement.style.setProperty("font-size", `${font_size}%`); + }, [currentUiScaling.data]); + + return null; +}; \ No newline at end of file diff --git a/src-ui/app/_app_controllers/index.js b/src-ui/app/_app_controllers/index.js new file mode 100644 index 00000000..f91d40ac --- /dev/null +++ b/src-ui/app/_app_controllers/index.js @@ -0,0 +1,6 @@ +export { StartPythonController } from "./StartPythonController"; +export { UiLanguageController } from "./UiLanguageController"; +export { ConfigPageCloseTriggerController } from "./ConfigPageCloseTriggerController"; +export { UiSizeController } from "./UiSizeController"; +export { FontFamilyController } from "./FontFamilyController"; +export { TransparencyController } from "./TransparencyController"; \ No newline at end of file