every_holiday/VRCT
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'ui' into for_webui

Browse Source
This commit is contained in:
Sakamoto Shiina
2024-10-17 02:03:47 +09:00
parent 0198da50d6 ec64b64535
commit 147b5cc396
29 changed files with 615 additions and 95 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
src-ui/app/App.jsx
View File

@@ -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);
});

9
src-ui/app/config_page/setting_section/setting_box/SettingBox.jsx
View File

@@ -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 <Device />;
// case "others":
// return <Others />;
case "appearance":
return <Appearance />;
case "transcription":
return <Transcription />;
case "others":
return <Others />;
case "advanced_settings":
return <AdvancedSettings />;
// case "about_vrct":
// return <AboutVrct />;

4
src-ui/app/config_page/setting_section/setting_box/_components/action_button/ActionButton.jsx
View File

@@ -1,9 +1,9 @@
import styles from "./ActionButton.module.scss";
export const ActionButton = ({IconComponent, OnclickFunction}) => {
export const ActionButton = ({IconComponent, onclickFunction}) => {
return (
<div className={styles.container}>
<button className={styles.button_wrapper} onClick={OnclickFunction}>
<button className={styles.button_wrapper} onClick={onclickFunction}>
<IconComponent className={styles.button_svg}/>
</button>
</div>

1
src-ui/app/config_page/setting_section/setting_box/_components/action_button/ActionButton.module.scss
View File

@@ -11,4 +11,5 @@
.button_svg {
width: 2.4rem;
color: var(--dark_400_color);
}

6
src-ui/app/config_page/setting_section/setting_box/_components/radio_button/RadioButton.jsx
View File

@@ -9,16 +9,18 @@ export const RadioButton = (props) => {
? <>
{ props.checked_variable.state === "pending" && <span className={styles.loader}></span> }
<input
className={styles.radio_button_input}
type="radio"
name="radio"
name={props.name}
value={option.radio_button_id}
onChange={() => props.selectFunction(option.radio_button_id)}
checked
/>
</>
: <input
className={styles.radio_button_input}
type="radio"
name="radio"
name={props.name}
value={option.radio_button_id}
onChange={() => props.selectFunction(option.radio_button_id)}
/>

8
src-ui/app/config_page/setting_section/setting_box/_components/radio_button/RadioButton.module.scss
View File

@@ -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;

2
src-ui/app/config_page/setting_section/setting_box/_templates/Templates.module.scss
View File

@@ -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;

96
src-ui/app/config_page/setting_section/setting_box/advanced_settings/AdvancedSettings.jsx Normal file
View File

@@ -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 (
<>
<OscIpAddressContainer />
<OscPortContainer />
<OpenConfigFolderContainer />
</>
);
};
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 (
<EntryContainer
label={t("config_page.osc_ip_address.label")}
ui_variable={ui_variable}
onChange={onChangeFunction}
/>
);
};
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 (
<EntryContainer
label={t("config_page.osc_port.label")}
ui_variable={ui_variable}
onChange={onChangeFunction}
/>
);
};
const OpenConfigFolderContainer = () => {
const { t } = useTranslation();
const { openFolder_ConfigFile } = useOpenFolder();
return (
<>
<ActionButtonContainer
label={t("config_page.auto_export_message_logs.label")}
desc={t("config_page.auto_export_message_logs.desc")}
IconComponent={OpenFolderSvg}
onclickFunction={openFolder_ConfigFile}
/>
</>
);
};

22
src-ui/app/config_page/setting_section/setting_box/advanced_settings/AdvancedSettings.module.scss Normal file
View File

@@ -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;
}

25
src-ui/app/config_page/setting_section/setting_box/appearance/Appearance.jsx
View File

@@ -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 = () => {
<UiLanguageContainer />
<UiScalingContainer />
<MessageLogUiScalingContainer />
<SendMessageButtonTypeContainer />
<FontFamilyContainer />
<TransparencyContainer />
</>
@@ -60,8 +63,9 @@ const UiLanguageContainer = () => {
{Object.entries(SELECTABLE_UI_LANGUAGES_DICT).map(([key, value]) => (
<label key={key} className={clsx(styles.radio_button_wrapper, { [styles.is_selected]: currentUiLanguage.data === key } )}>
<input
className={styles.radio_button_input}
type="radio"
name="radio"
name="ui_language"
value={key}
onChange={() => setUiLanguage(key)}
checked={currentUiLanguage.data === key}
@@ -157,6 +161,25 @@ const MessageLogUiScalingContainer = () => {
);
};
const SendMessageButtonTypeContainer = () => {
const { t } = useTranslation();
const { currentSendMessageButtonType, setSendMessageButtonType } = useSendMessageButtonType();
return (
<RadioButtonContainer
label={t("config_page.send_message_button_type.label")}
selectFunction={setSendMessageButtonType}
name="send_message_button_type"
options={[
{ radio_button_id: "hide", label: t("config_page.send_message_button_type.hide") },
{ radio_button_id: "show", label: t("config_page.send_message_button_type.show") },
{ radio_button_id: "show_and_disable_enter_key", label: t("config_page.send_message_button_type.show_and_disable_enter_key") },
]}
checked_variable={currentSendMessageButtonType}
/>
);
};
const FontFamilyContainer = () => {
const { t } = useTranslation();
const { currentSelectedFontFamily, setSelectedFontFamily } = useSelectedFontFamily();

10
src-ui/app/config_page/setting_section/setting_box/appearance/Appearance.module.scss
View File

@@ -41,18 +41,18 @@
}
}
input[type="radio"] {
.radio_button_input {
appearance: none;
margin: 0;
width: 1.6rem;
height: 1.6rem;
border: 0.2rem solid var(--dark_600_color);
width: 2rem;
height: 2rem;
border: 0.3rem solid var(--dark_600_color);
border-radius: 50%;
transition: border-color .1s ease, border-width .1s ease;
cursor: inherit;
&:checked {
border-color: var(--primary_400_color);
border-width: 0.4rem;
border-width: 0.6rem;
}
}

130
src-ui/app/config_page/setting_section/setting_box/others/Others.jsx
View File

@@ -1,36 +1,110 @@
import { useTranslation } from "react-i18next";
import { useSettingBox } from "../_components/useSettingBox";
import { useConfig } from "@logics/useConfig";
import styles from "./Others.module.scss";
import { useOpenFolder } from "@logics_common";
import {
useEnableAutoClearMessageInputBox,
useEnableSendOnlyTranslatedMessages,
useEnableAutoExportMessageLogs,
useEnableVrcMicMuteSync,
useEnableSendMessageToVrc,
} from "@logics_configs";
import {
CheckboxContainer,
} from "../_templates/Templates";
import {
LabelComponent,
Checkbox,
ActionButton,
} from "../_components/";
import OpenFolderSvg from "@images/open_folder.svg?react";
export const Others = () => {
const { t } = useTranslation();
const {
CheckboxContainer,
RadioButtonContainer,
} = useSettingBox();
const { currentEnableAutoClearMessageBox, toggleEnableAutoClearMessageBox } = useConfig();
const { currentSendMessageButtonType, setSendMessageButtonType } = useConfig();
return (
<>
<CheckboxContainer
label={t("config_page.auto_clear_the_message_box.label")}
variable={currentEnableAutoClearMessageBox}
toggleFunction={toggleEnableAutoClearMessageBox}
/>
<RadioButtonContainer
label={t("config_page.send_message_button_type.label")}
selectFunction={setSendMessageButtonType}
options={[
{ radio_button_id: "hide", label: t("config_page.send_message_button_type.hide") },
{ radio_button_id: "show", label: t("config_page.send_message_button_type.show") },
{ radio_button_id: "show_and_disable_enter_key", label: t("config_page.send_message_button_type.show_and_disable_enter_key") },
]}
checked_variable={currentSendMessageButtonType}
/>
<AutoClearMessageInputBoxContainer />
<SendOnlyTranslatedMessagesContainer />
<AutoExportMessageLogsContainer />
<VrcMicMuteSyncContainer />
<SendMessageToVrcContainer />
</>
);
};
const AutoClearMessageInputBoxContainer = () => {
const { t } = useTranslation();
const { currentEnableAutoClearMessageInputBox, toggleEnableAutoClearMessageInputBox } = useEnableAutoClearMessageInputBox();
return (
<CheckboxContainer
label={t("config_page.auto_clear_the_message_box.label")}
variable={currentEnableAutoClearMessageInputBox}
toggleFunction={toggleEnableAutoClearMessageInputBox}
/>
);
};
const SendOnlyTranslatedMessagesContainer = () => {
const { t } = useTranslation();
const { currentEnableSendOnlyTranslatedMessages, toggleEnableSendOnlyTranslatedMessages } = useEnableSendOnlyTranslatedMessages();
return (
<CheckboxContainer
label={t("config_page.send_only_translated_messages.label")}
variable={currentEnableSendOnlyTranslatedMessages}
toggleFunction={toggleEnableSendOnlyTranslatedMessages}
/>
);
};
const AutoExportMessageLogsContainer = () => {
const { t } = useTranslation();
const { currentEnableAutoExportMessageLogs, toggleEnableAutoExportMessageLogs } = useEnableAutoExportMessageLogs();
const { openFolder_MessageLogs } = useOpenFolder();
return (
<div className={styles.container}>
<LabelComponent
label={t("config_page.auto_export_message_logs.label")}
desc={t("config_page.auto_export_message_logs.desc")}
/>
<div className={styles.switch_section_container}>
<ActionButton
IconComponent={OpenFolderSvg}
onclickFunction={openFolder_MessageLogs}
/>
<Checkbox
variable={currentEnableAutoExportMessageLogs}
toggleFunction={toggleEnableAutoExportMessageLogs}
/>
</div>
</div>
);
};
const VrcMicMuteSyncContainer = () => {
const { t } = useTranslation();
const { currentEnableVrcMicMuteSync, toggleEnableVrcMicMuteSync } = useEnableVrcMicMuteSync();
return (
<CheckboxContainer
label={t("config_page.vrc_mic_mute_sync.label")}
desc={t("config_page.vrc_mic_mute_sync.desc")}
variable={currentEnableVrcMicMuteSync}
toggleFunction={toggleEnableVrcMicMuteSync}
/>
);
};
const SendMessageToVrcContainer = () => {
const { t } = useTranslation();
const { currentEnableSendMessageToVrc, toggleEnableSendMessageToVrc } = useEnableSendMessageToVrc();
return (
<CheckboxContainer
label={t("config_page.send_message_to_vrc.label")}
desc={t("config_page.send_message_to_vrc.desc")}
variable={currentEnableSendMessageToVrc}
toggleFunction={toggleEnableSendMessageToVrc}
/>
);
};

22
src-ui/app/config_page/setting_section/setting_box/others/Others.module.scss Normal file
View File

@@ -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;
}

6
src-ui/app/main_page/main_section/message_container/message_input_box/MessageInputBox.jsx
View File

@@ -6,21 +6,21 @@ import { store } from "@store";
import { scrollToBottom } from "@utils/scrollToBottom";
import {
useSendMessageButtonType,
useEnableAutoClearMessageBox,
useEnableAutoClearMessageInputBox,
} from "@logics_configs";
export const MessageInputBox = () => {
const [inputValue, setInputValue] = useState("");
const { sendMessage } = useMessage();
const { currentEnableAutoClearMessageBox } = useEnableAutoClearMessageBox();
const { currentEnableAutoClearMessageInputBox } = useEnableAutoClearMessageInputBox();
const { currentSendMessageButtonType } = useSendMessageButtonType();
const onSubmitFunction = (e) => {
e.preventDefault();
sendMessage(inputValue);
if (currentEnableAutoClearMessageBox.data) setInputValue("");
if (currentEnableAutoClearMessageInputBox.data) setInputValue("");
setTimeout(() => {
scrollToBottom(store.log_box_ref);

0
src-ui/assets/folder_open.svg → src-ui/assets/open_folder.svg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 242 B

After

Width:  |  Height:  |  Size: 242 B

1
src-ui/logics/common/index.js
View File

@@ -1,4 +1,5 @@
export { useWindow } from "./useWindow";
export { useIsOpenedConfigPage } from "./useIsOpenedConfigPage";
export { useOpenFolder } from "./useOpenFolder";
export { useMessage } from "./useMessage";
export { useVolume } from "./useVolume";

17
src-ui/logics/common/useOpenFolder.js Normal file
View File

@@ -0,0 +1,17 @@
import { useStdoutToPython } from "@logics/useStdoutToPython";
export const useOpenFolder = () => {
const { asyncStdoutToPython } = useStdoutToPython();
const openFolder_MessageLogs = () => {
asyncStdoutToPython("/run/open_filepath_logs");
};
const openFolder_ConfigFile = () => {
asyncStdoutToPython("/run/open_filepath_config_file");
};
return {
openFolder_MessageLogs,
openFolder_ConfigFile,
};
};

24
src-ui/logics/configs/advanced_settings/useOscIpAddress.js Normal file
View File

@@ -0,0 +1,24 @@
import { useStore_OscIpAddress } from "@store";
import { useStdoutToPython } from "@logics/useStdoutToPython";
export const useOscIpAddress = () => {
const { asyncStdoutToPython } = useStdoutToPython();
const { currentOscIpAddress, updateOscIpAddress, pendingOscIpAddress } = useStore_OscIpAddress();
const getOscIpAddress = () => {
pendingOscIpAddress();
asyncStdoutToPython("/get/data/osc_ip_address");
};
const setOscIpAddress = (osc_ip_address) => {
pendingOscIpAddress();
asyncStdoutToPython("/set/data/osc_ip_address", osc_ip_address);
};
return {
currentOscIpAddress,
getOscIpAddress,
updateOscIpAddress,
setOscIpAddress,
};
};

24
src-ui/logics/configs/advanced_settings/useOscPort.js Normal file
View File

@@ -0,0 +1,24 @@
import { useStore_OscPort } from "@store";
import { useStdoutToPython } from "@logics/useStdoutToPython";
export const useOscPort = () => {
const { asyncStdoutToPython } = useStdoutToPython();
const { currentOscPort, updateOscPort, pendingOscPort } = useStore_OscPort();
const getOscPort = () => {
pendingOscPort();
asyncStdoutToPython("/get/data/osc_port");
};
const setOscPort = (osc_port) => {
pendingOscPort();
asyncStdoutToPython("/set/data/osc_port", osc_port);
};
return {
currentOscPort,
getOscPort,
updateOscPort,
setOscPort,
};
};

12
src-ui/logics/configs/index.js
View File

@@ -10,14 +10,17 @@ export { useSpeakerDeviceList } from "./device/useSpeakerDeviceList";
export { useSpeakerThreshold } from "./device/useSpeakerThreshold";
export { useMessageLogUiScaling } from "./appearance/useMessageLogUiScaling";
// export { useRestoreWindowGeometry } from "./appearance/useRestoreWindowGeometry";
export { useSelectedFontFamily } from "./appearance/useSelectedFontFamily";
export { useSendMessageButtonType } from "./appearance/useSendMessageButtonType";
export { useTransparency } from "./appearance/useTransparency";
export { useSendMessageButtonType } from "./others/useSendMessageButtonType";
export { useUiLanguage } from "./appearance/useUiLanguage";
export { useUiScaling } from "./appearance/useUiScaling";
export { useEnableAutoClearMessageBox } from "./others/useEnableAutoClearMessageBox";
export { useEnableAutoClearMessageInputBox } from "./others/useEnableAutoClearMessageInputBox";
export { useEnableAutoExportMessageLogs } from "./others/useEnableAutoExportMessageLogs";
export { useEnableSendMessageToVrc } from "./others/useEnableSendMessageToVrc";
export { useEnableSendOnlyTranslatedMessages } from "./others/useEnableSendOnlyTranslatedMessages";
export { useEnableVrcMicMuteSync } from "./others/useEnableVrcMicMuteSync";
export { useMicRecordTimeout } from "./transcription/useMicRecordTimeout";
export { useMicPhraseTimeout } from "./transcription/useMicPhraseTimeout";
@@ -28,4 +31,7 @@ export { useSpeakerRecordTimeout } from "./transcription/useSpeakerRecordTimeout
export { useSpeakerPhraseTimeout } from "./transcription/useSpeakerPhraseTimeout";
export { useSpeakerMaxWords } from "./transcription/useSpeakerMaxWords";
export { useOscIpAddress } from "./advanced_settings/useOscIpAddress";
export { useOscPort } from "./advanced_settings/useOscPort";
export { useSoftwareVersion } from "./useSoftwareVersion";

28
src-ui/logics/configs/others/useEnableAutoClearMessageBox.js
View File

@@ -1,28 +0,0 @@
import { useStore_EnableAutoClearMessageBox } from "@store";
import { useStdoutToPython } from "@logics/useStdoutToPython";
export const useEnableAutoClearMessageBox = () => {
const { asyncStdoutToPython } = useStdoutToPython();
const { currentEnableAutoClearMessageBox, updateEnableAutoClearMessageBox, pendingEnableAutoClearMessageBox } = useStore_EnableAutoClearMessageBox();
const getEnableAutoClearMessageBox = () => {
pendingEnableAutoClearMessageBox();
asyncStdoutToPython("/get/data/auto_clear_message_box");
};
const toggleEnableAutoClearMessageBox = () => {
pendingEnableAutoClearMessageBox();
if (currentEnableAutoClearMessageBox.data) {
asyncStdoutToPython("/set/disable/auto_clear_message_box");
} else {
asyncStdoutToPython("/set/enable/auto_clear_message_box");
}
};
return {
currentEnableAutoClearMessageBox,
getEnableAutoClearMessageBox,
toggleEnableAutoClearMessageBox,
updateEnableAutoClearMessageBox,
};
};

28
src-ui/logics/configs/others/useEnableAutoClearMessageInputBox.js Normal file
View File

@@ -0,0 +1,28 @@
import { useStore_EnableAutoClearMessageInputBox } from "@store";
import { useStdoutToPython } from "@logics/useStdoutToPython";
export const useEnableAutoClearMessageInputBox = () => {
const { asyncStdoutToPython } = useStdoutToPython();
const { currentEnableAutoClearMessageInputBox, updateEnableAutoClearMessageInputBox, pendingEnableAutoClearMessageInputBox } = useStore_EnableAutoClearMessageInputBox();
const getEnableAutoClearMessageInputBox = () => {
pendingEnableAutoClearMessageInputBox();
asyncStdoutToPython("/get/data/auto_clear_message_box");
};
const toggleEnableAutoClearMessageInputBox = () => {
pendingEnableAutoClearMessageInputBox();
if (currentEnableAutoClearMessageInputBox.data) {
asyncStdoutToPython("/set/disable/auto_clear_message_box");
} else {
asyncStdoutToPython("/set/enable/auto_clear_message_box");
}
};
return {
currentEnableAutoClearMessageInputBox,
getEnableAutoClearMessageInputBox,
toggleEnableAutoClearMessageInputBox,
updateEnableAutoClearMessageInputBox,
};
};

28
src-ui/logics/configs/others/useEnableAutoExportMessageLogs.js Normal file
View File

@@ -0,0 +1,28 @@
import { useStore_EnableAutoExportMessageLogs } from "@store";
import { useStdoutToPython } from "@logics/useStdoutToPython";
export const useEnableAutoExportMessageLogs = () => {
const { asyncStdoutToPython } = useStdoutToPython();
const { currentEnableAutoExportMessageLogs, updateEnableAutoExportMessageLogs, pendingEnableAutoExportMessageLogs } = useStore_EnableAutoExportMessageLogs();
const getEnableAutoExportMessageLogs = () => {
pendingEnableAutoExportMessageLogs();
asyncStdoutToPython("/get/data/logger_feature");
};
const toggleEnableAutoExportMessageLogs = () => {
pendingEnableAutoExportMessageLogs();
if (currentEnableAutoExportMessageLogs.data) {
asyncStdoutToPython("/set/disable/logger_feature");
} else {
asyncStdoutToPython("/set/enable/logger_feature");
}
};
return {
currentEnableAutoExportMessageLogs,
getEnableAutoExportMessageLogs,
toggleEnableAutoExportMessageLogs,
updateEnableAutoExportMessageLogs,
};
};

28
src-ui/logics/configs/others/useEnableSendMessageToVrc.js Normal file
View File

@@ -0,0 +1,28 @@
import { useStore_EnableSendMessageToVrc } from "@store";
import { useStdoutToPython } from "@logics/useStdoutToPython";
export const useEnableSendMessageToVrc = () => {
const { asyncStdoutToPython } = useStdoutToPython();
const { currentEnableSendMessageToVrc, updateEnableSendMessageToVrc, pendingEnableSendMessageToVrc } = useStore_EnableSendMessageToVrc();
const getEnableSendMessageToVrc = () => {
pendingEnableSendMessageToVrc();
asyncStdoutToPython("/get/data/send_message_to_vrc");
};
const toggleEnableSendMessageToVrc = () => {
pendingEnableSendMessageToVrc();
if (currentEnableSendMessageToVrc.data) {
asyncStdoutToPython("/set/disable/send_message_to_vrc");
} else {
asyncStdoutToPython("/set/enable/send_message_to_vrc");
}
};
return {
currentEnableSendMessageToVrc,
getEnableSendMessageToVrc,
toggleEnableSendMessageToVrc,
updateEnableSendMessageToVrc,
};
};

28
src-ui/logics/configs/others/useEnableSendOnlyTranslatedMessages.js Normal file
View File

@@ -0,0 +1,28 @@
import { useStore_EnableSendOnlyTranslatedMessages } from "@store";
import { useStdoutToPython } from "@logics/useStdoutToPython";
export const useEnableSendOnlyTranslatedMessages = () => {
const { asyncStdoutToPython } = useStdoutToPython();
const { currentEnableSendOnlyTranslatedMessages, updateEnableSendOnlyTranslatedMessages, pendingEnableSendOnlyTranslatedMessages } = useStore_EnableSendOnlyTranslatedMessages();
const getEnableSendOnlyTranslatedMessages = () => {
pendingEnableSendOnlyTranslatedMessages();
asyncStdoutToPython("/get/data/send_only_translated_messages");
};
const toggleEnableSendOnlyTranslatedMessages = () => {
pendingEnableSendOnlyTranslatedMessages();
if (currentEnableSendOnlyTranslatedMessages.data) {
asyncStdoutToPython("/set/disable/send_only_translated_messages");
} else {
asyncStdoutToPython("/set/enable/send_only_translated_messages");
}
};
return {
currentEnableSendOnlyTranslatedMessages,
getEnableSendOnlyTranslatedMessages,
toggleEnableSendOnlyTranslatedMessages,
updateEnableSendOnlyTranslatedMessages,
};
};

28
src-ui/logics/configs/others/useEnableVrcMicMuteSync.js Normal file
View File

@@ -0,0 +1,28 @@
import { useStore_EnableVrcMicMuteSync } from "@store";
import { useStdoutToPython } from "@logics/useStdoutToPython";
export const useEnableVrcMicMuteSync = () => {
const { asyncStdoutToPython } = useStdoutToPython();
const { currentEnableVrcMicMuteSync, updateEnableVrcMicMuteSync, pendingEnableVrcMicMuteSync } = useStore_EnableVrcMicMuteSync();
const getEnableVrcMicMuteSync = () => {
pendingEnableVrcMicMuteSync();
asyncStdoutToPython("/get/data/vrc_mic_mute_sync");
};
const toggleEnableVrcMicMuteSync = () => {
pendingEnableVrcMicMuteSync();
if (currentEnableVrcMicMuteSync.data) {
asyncStdoutToPython("/set/disable/vrc_mic_mute_sync");
} else {
asyncStdoutToPython("/set/enable/vrc_mic_mute_sync");
}
};
return {
currentEnableVrcMicMuteSync,
getEnableVrcMicMuteSync,
toggleEnableVrcMicMuteSync,
updateEnableVrcMicMuteSync,
};
};

24
src-ui/logics/configs/others/useSendMessageButtonType.js Normal file
View File

@@ -0,0 +1,24 @@
import { useStore_SendMessageButtonType } from "@store";
import { useStdoutToPython } from "@logics/useStdoutToPython";
export const useSendMessageButtonType = () => {
const { asyncStdoutToPython } = useStdoutToPython();
const { currentSendMessageButtonType, updateSendMessageButtonType, pendingSendMessageButtonType } = useStore_SendMessageButtonType();
const getSendMessageButtonType = () => {
pendingSendMessageButtonType();
asyncStdoutToPython("/get/data/send_message_button_type");
};
const setSendMessageButtonType = (send_message_button_type) => {
pendingSendMessageButtonType();
asyncStdoutToPython("/set/data/send_message_button_type", send_message_button_type);
};
return {
currentSendMessageButtonType,
getSendMessageButtonType,
setSendMessageButtonType,
updateSendMessageButtonType,
};
};

58
src-ui/logics/useReceiveRoutes.js
View File

@@ -27,12 +27,16 @@ import {
useSelectedSpeakerDevice,
useMicThreshold,
useSpeakerThreshold,
useEnableAutoClearMessageBox,
useSendMessageButtonType,
useEnableAutoClearMessageInputBox,
useEnableSendOnlyTranslatedMessages,
useEnableAutoExportMessageLogs,
useEnableVrcMicMuteSync,
useEnableSendMessageToVrc,
useSelectedFontFamily,
useUiLanguage,
useUiScaling,
useMessageLogUiScaling,
useSendMessageButtonType,
useTransparency,
useMicRecordTimeout,
useMicPhraseTimeout,
@@ -41,6 +45,8 @@ import {
useSpeakerRecordTimeout,
useSpeakerPhraseTimeout,
useSpeakerMaxWords,
useOscIpAddress,
useOscPort,
} from "@logics_configs";
export const useReceiveRoutes = () => {
@@ -76,7 +82,13 @@ export const useReceiveRoutes = () => {
const { updateSelectedSpeakerDevice } = useSelectedSpeakerDevice();
const { updateMicThreshold, updateEnableAutomaticMicThreshold } = useMicThreshold();
const { updateSpeakerThreshold, updateEnableAutomaticSpeakerThreshold } = useSpeakerThreshold();
const { updateEnableAutoClearMessageBox } = useEnableAutoClearMessageBox();
const { updateEnableAutoClearMessageInputBox } = useEnableAutoClearMessageInputBox();
const { updateEnableSendOnlyTranslatedMessages } = useEnableSendOnlyTranslatedMessages();
const { updateEnableAutoExportMessageLogs } = useEnableAutoExportMessageLogs();
const { updateEnableVrcMicMuteSync } = useEnableVrcMicMuteSync();
const { updateEnableSendMessageToVrc } = useEnableSendMessageToVrc();
const { updateSendMessageButtonType } = useSendMessageButtonType();
const { updateUiLanguage } = useUiLanguage();
const { updateUiScaling } = useUiScaling();
@@ -95,17 +107,22 @@ export const useReceiveRoutes = () => {
const { updateMicRecordTimeout } = useMicRecordTimeout();
const { updateMicPhraseTimeout } = useMicPhraseTimeout();
const { updateMicMaxWords } = useMicMaxWords();
const { currentMicWordFilterList, updateMicWordFilterList } = useMicWordFilterList();
const { updateMicWordFilterList } = useMicWordFilterList();
const { updateSpeakerRecordTimeout } = useSpeakerRecordTimeout();
const { updateSpeakerPhraseTimeout } = useSpeakerPhraseTimeout();
const { updateSpeakerMaxWords } = useSpeakerMaxWords();
const { updateOscIpAddress } = useOscIpAddress();
const { updateOscPort } = useOscPort();
const routes = {
// Common
"/run/feed_watchdog": () => {},
"/get/data/main_window_geometry": restoreWindowGeometry,
"/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"),
// Main Page
// Page Controls
@@ -237,6 +254,9 @@ export const useReceiveRoutes = () => {
"/get/data/textbox_ui_scaling": updateMessageLogUiScaling,
"/set/data/textbox_ui_scaling": updateMessageLogUiScaling,
"/get/data/send_message_button_type": updateSendMessageButtonType,
"/set/data/send_message_button_type": updateSendMessageButtonType,
"/get/data/font_family": updateSelectedFontFamily,
"/set/data/font_family": updateSelectedFontFamily,
@@ -292,12 +312,32 @@ export const useReceiveRoutes = () => {
"/set/data/speaker_max_phrases": updateSpeakerMaxWords,
// Others Tab
"/get/data/auto_clear_message_box": updateEnableAutoClearMessageBox,
"/set/enable/auto_clear_message_box": updateEnableAutoClearMessageBox,
"/set/disable/auto_clear_message_box": updateEnableAutoClearMessageBox,
"/get/data/auto_clear_message_box": updateEnableAutoClearMessageInputBox,
"/set/enable/auto_clear_message_box": updateEnableAutoClearMessageInputBox,
"/set/disable/auto_clear_message_box": updateEnableAutoClearMessageInputBox,
"/get/data/send_message_button_type": updateSendMessageButtonType,
"/set/data/send_message_button_type": updateSendMessageButtonType,
"/get/data/send_only_translated_messages": updateEnableSendOnlyTranslatedMessages,
"/set/enable/send_only_translated_messages": updateEnableSendOnlyTranslatedMessages,
"/set/disable/send_only_translated_messages": updateEnableSendOnlyTranslatedMessages,
"/get/data/logger_feature": updateEnableAutoExportMessageLogs,
"/set/enable/logger_feature": updateEnableAutoExportMessageLogs,
"/set/disable/logger_feature": updateEnableAutoExportMessageLogs,
"/get/data/vrc_mic_mute_sync": updateEnableVrcMicMuteSync,
"/set/enable/vrc_mic_mute_sync": updateEnableVrcMicMuteSync,
"/set/disable/vrc_mic_mute_sync": updateEnableVrcMicMuteSync,
"/get/data/send_message_to_vrc": updateEnableSendMessageToVrc,
"/set/enable/send_message_to_vrc": updateEnableSendMessageToVrc,
"/set/disable/send_message_to_vrc": updateEnableSendMessageToVrc,
// Advanced Settings
"/get/data/osc_ip_address": updateOscIpAddress,
"/set/data/osc_ip_address": updateOscIpAddress,
"/get/data/osc_port": updateOscPort,
"/set/data/osc_port": updateOscPort,
};
const error_routes = {

13
src-ui/store.js
View File

@@ -171,6 +171,7 @@ export const { atomInstance: Atom_EnableAutomaticSpeakerThreshold, useHook: useS
export const { atomInstance: Atom_UiLanguage, useHook: useStore_UiLanguage } = createAtomWithHook("en", "UiLanguage");
export const { atomInstance: Atom_UiScaling, useHook: useStore_UiScaling } = createAtomWithHook(100, "UiScaling");
export const { atomInstance: Atom_MessageLogUiScaling, useHook: useStore_MessageLogUiScaling } = createAtomWithHook(100, "MessageLogUiScaling");
export const { atomInstance: Atom_SendMessageButtonType, useHook: useStore_SendMessageButtonType } = createAtomWithHook("show", "SendMessageButtonType");
export const { atomInstance: Atom_SelectedFontFamily, useHook: useStore_SelectedFontFamily } = createAtomWithHook("Yu Gothic UI", "SelectedFontFamily");
export const { atomInstance: Atom_SelectableFontFamilyList, useHook: useStore_SelectableFontFamilyList } = createAtomWithHook({}, "SelectableFontFamilyList");
export const { atomInstance: Atom_Transparency, useHook: useStore_Transparency } = createAtomWithHook(100, "Transparency");
@@ -189,8 +190,16 @@ export const { atomInstance: Atom_SpeakerPhraseTimeout, useHook: useStore_Speake
export const { atomInstance: Atom_SpeakerMaxWords, useHook: useStore_SpeakerMaxWords } = createAtomWithHook(0, "SpeakerMaxWords");
// Others
export const { atomInstance: Atom_EnableAutoClearMessageBox, useHook: useStore_EnableAutoClearMessageBox } = createAtomWithHook(true, "EnableAutoClearMessageBox");
export const { atomInstance: Atom_SendMessageButtonType, useHook: useStore_SendMessageButtonType } = createAtomWithHook("show", "SendMessageButtonType");
export const { atomInstance: Atom_EnableAutoClearMessageInputBox, useHook: useStore_EnableAutoClearMessageInputBox } = createAtomWithHook(true, "EnableAutoClearMessageInputBox");
export const { atomInstance: Atom_EnableSendOnlyTranslatedMessages, useHook: useStore_EnableSendOnlyTranslatedMessages } = createAtomWithHook(false, "EnableSendOnlyTranslatedMessages");
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");
// Advanced Settings
export const { atomInstance: Atom_OscIpAddress, useHook: useStore_OscIpAddress } = createAtomWithHook("127.0.0.1", "OscIpAddress");
export const { atomInstance: Atom_OscPort, useHook: useStore_OscPort } = createAtomWithHook("9000", "OscPort");
export const { atomInstance: Atom_IsOpenedTranslatorSelector, useHook: useStore_IsOpenedTranslatorSelector } = createAtomWithHook(false, "IsOpenedTranslatorSelector");