diff --git a/src-ui/app/App.jsx b/src-ui/app/App.jsx index 95eab896..1e3b57a8 100644 --- a/src-ui/app/App.jsx +++ b/src-ui/app/App.jsx @@ -41,7 +41,11 @@ import { useSelectedSpeakerDevice, useMicThreshold, useSpeakerThreshold, - useEnableAutoClearMessageBox, + useEnableAutoClearMessageInputBox, + useEnableSendOnlyTranslatedMessages, + useEnableAutoExportMessageLogs, + useEnableVrcMicMuteSync, + useEnableSendMessageToVrc, useSendMessageButtonType, useUiLanguage, useUiScaling, @@ -58,6 +62,8 @@ import { useSpeakerRecordTimeout, useSpeakerPhraseTimeout, useSpeakerMaxWords, + useOscIpAddress, + useOscPort, } from "@logics_configs"; import { @@ -88,7 +94,13 @@ const StartPythonFacadeComponent = () => { const { getSelectedSpeakerDevice } = useSelectedSpeakerDevice(); const { getMicThreshold, getEnableAutomaticMicThreshold } = useMicThreshold(); const { getSpeakerThreshold, getEnableAutomaticSpeakerThreshold } = useSpeakerThreshold(); - const { getEnableAutoClearMessageBox } = useEnableAutoClearMessageBox(); + + const { getEnableAutoClearMessageInputBox } = useEnableAutoClearMessageInputBox(); + const { getEnableSendOnlyTranslatedMessages } = useEnableSendOnlyTranslatedMessages(); + const { getEnableAutoExportMessageLogs } = useEnableAutoExportMessageLogs(); + const { getEnableVrcMicMuteSync } = useEnableVrcMicMuteSync(); + const { getEnableSendMessageToVrc } = useEnableSendMessageToVrc(); + const { getSendMessageButtonType } = useSendMessageButtonType(); const { getUiLanguage } = useUiLanguage(); const { getUiScaling } = useUiScaling(); @@ -116,6 +128,8 @@ const StartPythonFacadeComponent = () => { const { getSpeakerPhraseTimeout } = useSpeakerPhraseTimeout(); const { getSpeakerMaxWords } = useSpeakerMaxWords(); + const { getOscIpAddress } = useOscIpAddress(); + const { getOscPort } = useOscPort(); useEffect(() => { if (!hasRunRef.current) { @@ -168,8 +182,16 @@ const StartPythonFacadeComponent = () => { getSpeakerPhraseTimeout(); getSpeakerMaxWords(); - getEnableAutoClearMessageBox(); + getEnableAutoClearMessageInputBox(); getSendMessageButtonType(); + + getEnableSendOnlyTranslatedMessages(); + getEnableAutoExportMessageLogs(); + getEnableVrcMicMuteSync(); + getEnableSendMessageToVrc(); + + getOscIpAddress(); + getOscPort(); }).catch((err) => { console.error(err); }); diff --git a/src-ui/app/config_page/setting_section/setting_box/SettingBox.jsx b/src-ui/app/config_page/setting_section/setting_box/SettingBox.jsx index 29a52268..d78ec87e 100644 --- a/src-ui/app/config_page/setting_section/setting_box/SettingBox.jsx +++ b/src-ui/app/config_page/setting_section/setting_box/SettingBox.jsx @@ -3,7 +3,8 @@ 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 { Others } from "./others/Others"; +import { AdvancedSettings } from "./advanced_settings/AdvancedSettings"; // import { AboutVrct } from "./about_vrct/AboutVrct"; export const SettingBox = () => { @@ -11,12 +12,14 @@ export const SettingBox = () => { switch (currentSelectedConfigTabId.data) { case "device": return ; - // case "others": - // return ; case "appearance": return ; case "transcription": return ; + case "others": + return ; + case "advanced_settings": + return ; // case "about_vrct": // return ; diff --git a/src-ui/app/config_page/setting_section/setting_box/_components/action_button/ActionButton.jsx b/src-ui/app/config_page/setting_section/setting_box/_components/action_button/ActionButton.jsx index 09aab899..d85fce2a 100644 --- a/src-ui/app/config_page/setting_section/setting_box/_components/action_button/ActionButton.jsx +++ b/src-ui/app/config_page/setting_section/setting_box/_components/action_button/ActionButton.jsx @@ -1,9 +1,9 @@ import styles from "./ActionButton.module.scss"; -export const ActionButton = ({IconComponent, OnclickFunction}) => { +export const ActionButton = ({IconComponent, onclickFunction}) => { return (
-
diff --git a/src-ui/app/config_page/setting_section/setting_box/_components/action_button/ActionButton.module.scss b/src-ui/app/config_page/setting_section/setting_box/_components/action_button/ActionButton.module.scss index 0685922d..116feab4 100644 --- a/src-ui/app/config_page/setting_section/setting_box/_components/action_button/ActionButton.module.scss +++ b/src-ui/app/config_page/setting_section/setting_box/_components/action_button/ActionButton.module.scss @@ -11,4 +11,5 @@ .button_svg { width: 2.4rem; + color: var(--dark_400_color); } \ No newline at end of file diff --git a/src-ui/app/config_page/setting_section/setting_box/_components/radio_button/RadioButton.jsx b/src-ui/app/config_page/setting_section/setting_box/_components/radio_button/RadioButton.jsx index d37b97c2..1c83847c 100644 --- a/src-ui/app/config_page/setting_section/setting_box/_components/radio_button/RadioButton.jsx +++ b/src-ui/app/config_page/setting_section/setting_box/_components/radio_button/RadioButton.jsx @@ -9,16 +9,18 @@ export const RadioButton = (props) => { ? <> { props.checked_variable.state === "pending" && } props.selectFunction(option.radio_button_id)} checked /> : props.selectFunction(option.radio_button_id)} /> diff --git a/src-ui/app/config_page/setting_section/setting_box/_components/radio_button/RadioButton.module.scss b/src-ui/app/config_page/setting_section/setting_box/_components/radio_button/RadioButton.module.scss index b8e82e23..04532aa3 100644 --- a/src-ui/app/config_page/setting_section/setting_box/_components/radio_button/RadioButton.module.scss +++ b/src-ui/app/config_page/setting_section/setting_box/_components/radio_button/RadioButton.module.scss @@ -23,12 +23,12 @@ } } -input[type="radio"] { +.radio_button_input { appearance: none; margin: 0; - width: 2.4rem; - height: 2.4rem; - border: 0.3rem solid var(--dark_600_color); + width: 2rem; + height: 2rem; + border: 0.2rem solid var(--dark_600_color); border-radius: 50%; transition: border-color .1s ease, border-width .1s ease; cursor: inherit; diff --git a/src-ui/app/config_page/setting_section/setting_box/_templates/Templates.module.scss b/src-ui/app/config_page/setting_section/setting_box/_templates/Templates.module.scss index 622f5224..4e381a1d 100644 --- a/src-ui/app/config_page/setting_section/setting_box/_templates/Templates.module.scss +++ b/src-ui/app/config_page/setting_section/setting_box/_templates/Templates.module.scss @@ -4,8 +4,6 @@ justify-content: space-between; align-items: center; padding: 2rem; - justify-content: space-between; - align-items: center; gap: 2rem; &.flex_column { flex-direction: column; diff --git a/src-ui/app/config_page/setting_section/setting_box/advanced_settings/AdvancedSettings.jsx b/src-ui/app/config_page/setting_section/setting_box/advanced_settings/AdvancedSettings.jsx new file mode 100644 index 00000000..ab181e61 --- /dev/null +++ b/src-ui/app/config_page/setting_section/setting_box/advanced_settings/AdvancedSettings.jsx @@ -0,0 +1,96 @@ +import { useEffect, useState } from "react"; +import { useTranslation } from "react-i18next"; +import styles from "./AdvancedSettings.module.scss"; + +import { useOpenFolder } from "@logics_common"; +import { + useOscIpAddress, + useOscPort, +} from "@logics_configs"; + +import { + ActionButtonContainer, + EntryContainer, +} from "../_templates/Templates"; + + +import OpenFolderSvg from "@images/open_folder.svg?react"; + +export const AdvancedSettings = () => { + return ( + <> + + + + + ); +}; + +const OscIpAddressContainer = () => { + const { t } = useTranslation(); + const [ui_variable, setUiVariable] = useState(""); + const { currentOscIpAddress, setOscIpAddress } = useOscIpAddress(); + const onChangeFunction = (e) => { + const value = e.currentTarget.value; + if (value === "") { + setUiVariable(""); + } else { + setUiVariable(value); + setOscIpAddress(value); + } + }; + + useEffect(()=> { + setUiVariable(currentOscIpAddress.data); + }, [currentOscIpAddress]); + + return ( + + ); +}; + +const OscPortContainer = () => { + const { t } = useTranslation(); + const [ui_variable, setUiVariable] = useState(""); + const { currentOscPort, setOscPort } = useOscPort(); + const onChangeFunction = (e) => { + const value = e.currentTarget.value; + if (value === "") { + setUiVariable(""); + } else { + setUiVariable(value); + setOscPort(value); + } + }; + + useEffect(()=> { + setUiVariable(currentOscPort.data); + }, [currentOscPort]); + + return ( + + ); +}; +const OpenConfigFolderContainer = () => { + const { t } = useTranslation(); + const { openFolder_ConfigFile } = useOpenFolder(); + + return ( + <> + + + ); +}; \ No newline at end of file diff --git a/src-ui/app/config_page/setting_section/setting_box/advanced_settings/AdvancedSettings.module.scss b/src-ui/app/config_page/setting_section/setting_box/advanced_settings/AdvancedSettings.module.scss new file mode 100644 index 00000000..fa5eefb3 --- /dev/null +++ b/src-ui/app/config_page/setting_section/setting_box/advanced_settings/AdvancedSettings.module.scss @@ -0,0 +1,22 @@ +.container { + display: flex; + width: 100%; + justify-content: space-between; + align-items: center; + padding: 2rem; + align-items: center; + gap: 2rem; + &.flex_column { + flex-direction: column; + } + border-bottom: solid 0.1rem var(--dark_800_color); +} + +.switch_section_container { + display: flex; + width: 100%; + justify-content: space-between; + align-items: center; + align-items: center; + gap: 2rem; +} \ No newline at end of file diff --git a/src-ui/app/config_page/setting_section/setting_box/appearance/Appearance.jsx b/src-ui/app/config_page/setting_section/setting_box/appearance/Appearance.jsx index 0bcab768..635253b9 100644 --- a/src-ui/app/config_page/setting_section/setting_box/appearance/Appearance.jsx +++ b/src-ui/app/config_page/setting_section/setting_box/appearance/Appearance.jsx @@ -7,6 +7,7 @@ import { useUiLanguage, useUiScaling, useMessageLogUiScaling, + useSendMessageButtonType, useSelectedFontFamily, useTransparency, } from "@logics_configs"; @@ -18,6 +19,7 @@ import { import { SliderContainer, DropdownMenuContainer, + RadioButtonContainer, } from "../_templates/Templates"; export const Appearance = () => { @@ -26,6 +28,7 @@ export const Appearance = () => { + @@ -60,8 +63,9 @@ const UiLanguageContainer = () => { {Object.entries(SELECTABLE_UI_LANGUAGES_DICT).map(([key, value]) => (