From 7cacdae46b6afcd6d4b57128e7c7c9ede0a5ceb6 Mon Sep 17 00:00:00 2001 From: Sakamoto Shiina <68018796+ShiinaSakamoto@users.noreply.github.com> Date: Thu, 14 Nov 2024 05:47:41 +0900 Subject: [PATCH 1/4] [Update] Config Page: Transcription Tab. Add section label. --- .../setting_box/_components/index.js | 1 + .../SectionLabelComponent.jsx | 11 +++++++++ .../SectionLabelComponent.module.scss | 16 +++++++++++++ .../transcription/Transcription.jsx | 23 ++++++++++++------- .../transcription/Transcription.module.scss | 5 ++++ 5 files changed, 48 insertions(+), 8 deletions(-) create mode 100644 src-ui/app/config_page/setting_section/setting_box/_components/section_label_component/SectionLabelComponent.jsx create mode 100644 src-ui/app/config_page/setting_section/setting_box/_components/section_label_component/SectionLabelComponent.module.scss diff --git a/src-ui/app/config_page/setting_section/setting_box/_components/index.js b/src-ui/app/config_page/setting_section/setting_box/_components/index.js index ffd9fa96..d702c1ee 100644 --- a/src-ui/app/config_page/setting_section/setting_box/_components/index.js +++ b/src-ui/app/config_page/setting_section/setting_box/_components/index.js @@ -5,6 +5,7 @@ export { DropdownMenu } from "./dropdown_menu/DropdownMenu"; export { Entry } from "./entry/Entry"; export { LabelComponent } from "./label_component/LabelComponent"; export { RadioButton } from "./radio_button/RadioButton"; +export { SectionLabelComponent } from "./section_label_component/SectionLabelComponent"; export { Slider } from "./slider/Slider"; export { SwitchBox } from "./switch_box/SwitchBox"; export { ThresholdComponent } from "./threshold_component/ThresholdComponent"; diff --git a/src-ui/app/config_page/setting_section/setting_box/_components/section_label_component/SectionLabelComponent.jsx b/src-ui/app/config_page/setting_section/setting_box/_components/section_label_component/SectionLabelComponent.jsx new file mode 100644 index 00000000..7b79ebef --- /dev/null +++ b/src-ui/app/config_page/setting_section/setting_box/_components/section_label_component/SectionLabelComponent.jsx @@ -0,0 +1,11 @@ +import styles from "./SectionLabelComponent.module.scss"; +import clsx from "clsx"; + +export const SectionLabelComponent = (props) => { + return ( +
+ +
+
+ ); +}; \ No newline at end of file diff --git a/src-ui/app/config_page/setting_section/setting_box/_components/section_label_component/SectionLabelComponent.module.scss b/src-ui/app/config_page/setting_section/setting_box/_components/section_label_component/SectionLabelComponent.module.scss new file mode 100644 index 00000000..93be3c4b --- /dev/null +++ b/src-ui/app/config_page/setting_section/setting_box/_components/section_label_component/SectionLabelComponent.module.scss @@ -0,0 +1,16 @@ +.container { + display: flex; + justify-content: center; + align-items: center; + gap: 2rem; + padding-bottom: 2rem; +} +.section_label { + font-size: 2rem; + flex-shrink: 0; +} +.section_line { + width: 100%; + height: 0.1rem; + background: linear-gradient(90deg, var(--dark_400_color) 0%, var(--dark_600_color) 35%, var(--dark_800_color) 100%); +} \ No newline at end of file diff --git a/src-ui/app/config_page/setting_section/setting_box/transcription/Transcription.jsx b/src-ui/app/config_page/setting_section/setting_box/transcription/Transcription.jsx index 9d11bd9f..86dd6bea 100644 --- a/src-ui/app/config_page/setting_section/setting_box/transcription/Transcription.jsx +++ b/src-ui/app/config_page/setting_section/setting_box/transcription/Transcription.jsx @@ -24,25 +24,30 @@ import { RadioButtonContainer, } from "../_templates/Templates"; +import { + SectionLabelComponent, +} from "../_components/"; + export const Transcription = () => { return ( - <> +
- +
); }; const Mic_Container = () => { return ( - <> +
+ - +
); }; @@ -144,11 +149,12 @@ const MicWordFilter_Box = () => { const Speaker_Container = () => { return ( - <> +
+ - +
); }; @@ -238,10 +244,11 @@ const SpeakerMaxWords_Box = () => { const TranscriptionEngine_Container = () => { return ( - <> +
+ - +
); }; diff --git a/src-ui/app/config_page/setting_section/setting_box/transcription/Transcription.module.scss b/src-ui/app/config_page/setting_section/setting_box/transcription/Transcription.module.scss index e69de29b..1170a41c 100644 --- a/src-ui/app/config_page/setting_section/setting_box/transcription/Transcription.module.scss +++ b/src-ui/app/config_page/setting_section/setting_box/transcription/Transcription.module.scss @@ -0,0 +1,5 @@ +.container { + display: flex; + flex-direction: column; + gap: 6.4rem; +} \ No newline at end of file From 4b8b098c5796fa208bc878241d7b724f1ce4d76e Mon Sep 17 00:00:00 2001 From: Sakamoto Shiina <68018796+ShiinaSakamoto@users.noreply.github.com> Date: Thu, 14 Nov 2024 06:59:41 +0900 Subject: [PATCH 2/4] [Update] Config Page: Others Tab: Add EnableSendReceivedMessageToVrc(Speaker2Chatbox). --- locales/en.json | 2 +- .../setting_box/others/Others.jsx | 41 +++++++++++++++---- .../setting_box/others/Others.module.scss | 8 +++- src-ui/logics/configs/index.js | 1 + .../useEnableSendReceivedMessageToVrc.js | 28 +++++++++++++ src-ui/logics/useReceiveRoutes.js | 6 +++ src-ui/store.js | 1 + 7 files changed, 76 insertions(+), 11 deletions(-) create mode 100644 src-ui/logics/configs/others/useEnableSendReceivedMessageToVrc.js diff --git a/locales/en.json b/locales/en.json index f3399a70..c25b22f3 100644 --- a/locales/en.json +++ b/locales/en.json @@ -270,7 +270,7 @@ }, "send_received_message_to_vrc": { "label": "Send Received Message To VRChat", - "desc": "Send the message you received from the speaker's sound to VRChat's chatbox. However, this feature is intended for users who genuinely need it. Please consult with the developer." + "desc": "Send the message you received from the speaker's sound to VRChat's chatbox." }, "osc_ip_address": { "label": "OSC IP Address" 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 da450f77..96d96d17 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 @@ -8,6 +8,7 @@ import { useEnableAutoExportMessageLogs, useEnableVrcMicMuteSync, useEnableSendMessageToVrc, + useEnableSendReceivedMessageToVrc, } from "@logics_configs"; import { @@ -18,19 +19,26 @@ import { LabelComponent, Checkbox, ActionButton, + SectionLabelComponent, } from "../_components/"; import OpenFolderSvg from "@images/open_folder.svg?react"; export const Others = () => { return ( - <> - - - - - - +
+
+ + + + + +
+
+ + +
+
); }; @@ -64,12 +72,12 @@ const AutoExportMessageLogsContainer = () => { const { openFolder_MessageLogs } = useOpenFolder(); return ( -
+
-
+
{ toggleFunction={toggleEnableSendMessageToVrc} /> ); +}; + + +const SendReceivedMessageToVrcContainer = () => { + const { t } = useTranslation(); + const { currentEnableSendReceivedMessageToVrc, toggleEnableSendReceivedMessageToVrc } = useEnableSendReceivedMessageToVrc(); + + return ( + + ); }; \ No newline at end of file diff --git a/src-ui/app/config_page/setting_section/setting_box/others/Others.module.scss b/src-ui/app/config_page/setting_section/setting_box/others/Others.module.scss index fa5eefb3..acd7ac93 100644 --- a/src-ui/app/config_page/setting_section/setting_box/others/Others.module.scss +++ b/src-ui/app/config_page/setting_section/setting_box/others/Others.module.scss @@ -1,4 +1,10 @@ .container { + display: flex; + gap: 6.4rem; + flex-direction: column; +} + +.auto_export_message_logs_container { display: flex; width: 100%; justify-content: space-between; @@ -12,7 +18,7 @@ border-bottom: solid 0.1rem var(--dark_800_color); } -.switch_section_container { +.auto_export_message_logs_switch_section_container { display: flex; width: 100%; justify-content: space-between; diff --git a/src-ui/logics/configs/index.js b/src-ui/logics/configs/index.js index 989621c2..bd98e122 100644 --- a/src-ui/logics/configs/index.js +++ b/src-ui/logics/configs/index.js @@ -19,6 +19,7 @@ export { useUiScaling } from "./appearance/useUiScaling"; export { useEnableAutoClearMessageInputBox } from "./others/useEnableAutoClearMessageInputBox"; export { useEnableAutoExportMessageLogs } from "./others/useEnableAutoExportMessageLogs"; export { useEnableSendMessageToVrc } from "./others/useEnableSendMessageToVrc"; +export { useEnableSendReceivedMessageToVrc } from "./others/useEnableSendReceivedMessageToVrc"; export { useEnableSendOnlyTranslatedMessages } from "./others/useEnableSendOnlyTranslatedMessages"; export { useEnableVrcMicMuteSync } from "./others/useEnableVrcMicMuteSync"; diff --git a/src-ui/logics/configs/others/useEnableSendReceivedMessageToVrc.js b/src-ui/logics/configs/others/useEnableSendReceivedMessageToVrc.js new file mode 100644 index 00000000..5eeeb102 --- /dev/null +++ b/src-ui/logics/configs/others/useEnableSendReceivedMessageToVrc.js @@ -0,0 +1,28 @@ +import { useStore_EnableSendReceivedMessageToVrc } from "@store"; +import { useStdoutToPython } from "@logics/useStdoutToPython"; + +export const useEnableSendReceivedMessageToVrc = () => { + const { asyncStdoutToPython } = useStdoutToPython(); + const { currentEnableSendReceivedMessageToVrc, updateEnableSendReceivedMessageToVrc, pendingEnableSendReceivedMessageToVrc } = useStore_EnableSendReceivedMessageToVrc(); + + const getEnableSendReceivedMessageToVrc = () => { + pendingEnableSendReceivedMessageToVrc(); + asyncStdoutToPython("/get/data/send_received_message_to_vrc"); + }; + + const toggleEnableSendReceivedMessageToVrc = () => { + pendingEnableSendReceivedMessageToVrc(); + if (currentEnableSendReceivedMessageToVrc.data) { + asyncStdoutToPython("/set/disable/send_received_message_to_vrc"); + } else { + asyncStdoutToPython("/set/enable/send_received_message_to_vrc"); + } + }; + + return { + currentEnableSendReceivedMessageToVrc, + getEnableSendReceivedMessageToVrc, + toggleEnableSendReceivedMessageToVrc, + updateEnableSendReceivedMessageToVrc, + }; +}; \ No newline at end of file diff --git a/src-ui/logics/useReceiveRoutes.js b/src-ui/logics/useReceiveRoutes.js index 6f1a4df4..24f5ee26 100644 --- a/src-ui/logics/useReceiveRoutes.js +++ b/src-ui/logics/useReceiveRoutes.js @@ -32,6 +32,7 @@ import { useEnableAutoExportMessageLogs, useEnableVrcMicMuteSync, useEnableSendMessageToVrc, + useEnableSendReceivedMessageToVrc, useSelectedFontFamily, useUiLanguage, useUiScaling, @@ -97,6 +98,7 @@ export const useReceiveRoutes = () => { const { updateEnableAutoExportMessageLogs } = useEnableAutoExportMessageLogs(); const { updateEnableVrcMicMuteSync } = useEnableVrcMicMuteSync(); const { updateEnableSendMessageToVrc } = useEnableSendMessageToVrc(); + const { updateEnableSendReceivedMessageToVrc } = useEnableSendReceivedMessageToVrc(); const { updateSendMessageButtonType } = useSendMessageButtonType(); const { updateUiLanguage } = useUiLanguage(); @@ -396,6 +398,10 @@ export const useReceiveRoutes = () => { "/set/enable/send_message_to_vrc": updateEnableSendMessageToVrc, "/set/disable/send_message_to_vrc": updateEnableSendMessageToVrc, + "/get/data/send_received_message_to_vrc": updateEnableSendReceivedMessageToVrc, + "/set/enable/send_received_message_to_vrc": updateEnableSendReceivedMessageToVrc, + "/set/disable/send_received_message_to_vrc": updateEnableSendReceivedMessageToVrc, + // Advanced Settings "/get/data/osc_ip_address": updateOscIpAddress, "/set/data/osc_ip_address": updateOscIpAddress, diff --git a/src-ui/store.js b/src-ui/store.js index 4fd682fc..4af181d3 100644 --- a/src-ui/store.js +++ b/src-ui/store.js @@ -227,6 +227,7 @@ export const { atomInstance: Atom_EnableSendOnlyTranslatedMessages, useHook: use export const { atomInstance: Atom_EnableAutoExportMessageLogs, useHook: useStore_EnableAutoExportMessageLogs } = createAtomWithHook(false, "EnableAutoExportMessageLogs"); export const { atomInstance: Atom_EnableVrcMicMuteSync, useHook: useStore_EnableVrcMicMuteSync } = createAtomWithHook(false, "EnableVrcMicMuteSync"); export const { atomInstance: Atom_EnableSendMessageToVrc, useHook: useStore_EnableSendMessageToVrc } = createAtomWithHook(true, "EnableSendMessageToVrc"); +export const { atomInstance: Atom_EnableSendReceivedMessageToVrc, useHook: useStore_EnableSendReceivedMessageToVrc } = createAtomWithHook(false, "EnableSendReceivedMessageToVrc"); // Advanced Settings export const { atomInstance: Atom_OscIpAddress, useHook: useStore_OscIpAddress } = createAtomWithHook("127.0.0.1", "OscIpAddress"); From c374a2dc03663d30ce85a276ce6fa457abf25587 Mon Sep 17 00:00:00 2001 From: Sakamoto Shiina <68018796+ShiinaSakamoto@users.noreply.github.com> Date: Thu, 14 Nov 2024 08:05:26 +0900 Subject: [PATCH 3/4] [bugfix] fix error log(console) --- src-ui/logics/useReceiveRoutes.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src-ui/logics/useReceiveRoutes.js b/src-ui/logics/useReceiveRoutes.js index 24f5ee26..30b9b2d6 100644 --- a/src-ui/logics/useReceiveRoutes.js +++ b/src-ui/logics/useReceiveRoutes.js @@ -427,7 +427,7 @@ export const useReceiveRoutes = () => { const initDataSyncProcess = (payload) => { for (const [endpoint, value] of Object.entries(payload)) { const route = routes[endpoint]; - (route) ? route(value) : console.error(`Invalid endpoint: ${endpoint}\vvalue: ${JSON.stringify(value)}`); + (route) ? route(value) : console.error(`Invalid endpoint: ${endpoint}\nvalue: ${JSON.stringify(value)}`); } }; From 4b92c210d6a53d0f53515f81a78b467b5dad615e Mon Sep 17 00:00:00 2001 From: Sakamoto Shiina <68018796+ShiinaSakamoto@users.noreply.github.com> Date: Thu, 14 Nov 2024 10:07:09 +0900 Subject: [PATCH 4/4] [Update] Main Page: Add the software update available button. --- .../RightSideComponents.jsx | 16 ++++++++++++ .../RightSideComponents.module.scss | 25 +++++++++++++++++++ src-ui/assets/refresh.svg | 1 + src-ui/logics/common/index.js | 1 + .../common/useIsSoftwareUpdateAvailable.js | 10 ++++++++ src-ui/logics/useReceiveRoutes.js | 3 +++ src-ui/store.js | 1 + 7 files changed, 57 insertions(+) create mode 100644 src-ui/assets/refresh.svg create mode 100644 src-ui/logics/common/useIsSoftwareUpdateAvailable.js 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 c16cd4f1..e78d3ef6 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,8 +1,10 @@ import { useTranslation } from "react-i18next"; import styles from "./RightSideComponents.module.scss"; +import RefreshSvg from "@images/refresh.svg?react"; import HelpSvg from "@images/help.svg?react"; import { useStore_OpenedQuickSetting } from "@store"; +import { useIsSoftwareUpdateAvailable } from "@logics_common"; import { useIsEnabledOverlaySmallLog, useEnableVrcMicMuteSync } from "@logics_configs"; import { OpenQuickSettingButton } from "./_buttons/OpenQuickSettingButton"; @@ -11,6 +13,7 @@ export const RightSideComponents = () => {
+ { onClickFunction={onClickFunction} /> ); +}; + +const SoftwareUpdateAvailableButton = () => { + const { currentIsSoftwareUpdateAvailable } = useIsSoftwareUpdateAvailable(); + const { t } = useTranslation(); + if (currentIsSoftwareUpdateAvailable.data === false) return null; + + 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 80f64219..e0295e73 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 @@ -21,4 +21,29 @@ .help_svg { width: 2.4rem; color: var(--dark_400_color); +} + +.software_update_button { + display: flex; + justify-content: center; + align-items: center; + gap: 0.4rem; + color: var(--primary_300_color); + padding: 1rem 0.4rem; + cursor: pointer; + &:hover { + background-color: var(--dark_800_color); + } + &:active { + background-color: var(--dark_900_color); + } +} + +.refresh_svg { + width: 1.8rem; + transform: rotate(-30deg); +} + +.software_update_label { + font-size: 1.2rem; } \ No newline at end of file diff --git a/src-ui/assets/refresh.svg b/src-ui/assets/refresh.svg new file mode 100644 index 00000000..42841d22 --- /dev/null +++ b/src-ui/assets/refresh.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src-ui/logics/common/index.js b/src-ui/logics/common/index.js index 1895d8df..cd14847f 100644 --- a/src-ui/logics/common/index.js +++ b/src-ui/logics/common/index.js @@ -1,5 +1,6 @@ export { useWindow } from "./useWindow"; export { useIsOpenedConfigPage } from "./useIsOpenedConfigPage"; +export { useIsSoftwareUpdateAvailable } from "./useIsSoftwareUpdateAvailable"; export { useOpenFolder } from "./useOpenFolder"; export { useMessage } from "./useMessage"; export { useVolume } from "./useVolume"; \ No newline at end of file diff --git a/src-ui/logics/common/useIsSoftwareUpdateAvailable.js b/src-ui/logics/common/useIsSoftwareUpdateAvailable.js new file mode 100644 index 00000000..569a3949 --- /dev/null +++ b/src-ui/logics/common/useIsSoftwareUpdateAvailable.js @@ -0,0 +1,10 @@ +import { useStore_IsSoftwareUpdateAvailable } from "@store"; + +export const useIsSoftwareUpdateAvailable = () => { + const { currentIsSoftwareUpdateAvailable, updateIsSoftwareUpdateAvailable } = useStore_IsSoftwareUpdateAvailable(); + + return { + currentIsSoftwareUpdateAvailable, + updateIsSoftwareUpdateAvailable, + }; +}; \ No newline at end of file diff --git a/src-ui/logics/useReceiveRoutes.js b/src-ui/logics/useReceiveRoutes.js index 30b9b2d6..977e98b0 100644 --- a/src-ui/logics/useReceiveRoutes.js +++ b/src-ui/logics/useReceiveRoutes.js @@ -5,6 +5,7 @@ import { useWindow, useMessage, useVolume, + useIsSoftwareUpdateAvailable, } from "@logics_common"; import { @@ -81,6 +82,7 @@ export const useReceiveRoutes = () => { addSentMessageLog, addReceivedMessageLog, } = useMessage(); + const { updateIsSoftwareUpdateAvailable } = useIsSoftwareUpdateAvailable(); const { updateSoftwareVersion } = useSoftwareVersion(); const { updateEnableAutoMicSelect } = useEnableAutoMicSelect(); const { updateEnableAutoSpeakerSelect } = useEnableAutoSpeakerSelect(); @@ -154,6 +156,7 @@ export const useReceiveRoutes = () => { "/set/data/main_window_geometry": () => {}, "/run/open_filepath_logs": () => console.log("Opened Directory, Message Logs"), "/run/open_filepath_config_file": () => console.log("Opened Directory, Config File"), + "/run/update_software_flag": updateIsSoftwareUpdateAvailable, // Main Page // Page Controls diff --git a/src-ui/store.js b/src-ui/store.js index 4af181d3..8a7f3c98 100644 --- a/src-ui/store.js +++ b/src-ui/store.js @@ -108,6 +108,7 @@ export const { atomInstance: Atom_MainFunctionsStateMemory, useHook: useStore_Ma transcription_receive: false, }, "MainFunctionsStateMemory"); export const { atomInstance: Atom_OpenedQuickSetting, useHook: useStore_OpenedQuickSetting } = createAtomWithHook("", "OpenedQuickSetting"); +export const { atomInstance: Atom_IsSoftwareUpdateAvailable, useHook: useStore_IsSoftwareUpdateAvailable } = createAtomWithHook(false, "IsSoftwareUpdateAvailable"); // Main Page // Functions