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]) => (