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

[Update] Config Page: Add Others Tab. Auto Clear Message Input Box, Send Message Button Type.

Browse Source
This commit is contained in:
Sakamoto Shiina
2024-10-16 21:09:14 +09:00
parent fd0cadab8c
commit 2c460bc8e5
10 changed files with 113 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -41,7 +41,7 @@ import {
useSelectedSpeakerDevice,
useMicThreshold,
useSpeakerThreshold,
useEnableAutoClearMessageBox,
useEnableAutoClearMessageInputBox,
useSendMessageButtonType,
useUiLanguage,
useUiScaling,
@@ -88,7 +88,7 @@ const StartPythonFacadeComponent = () => {
const { getSelectedSpeakerDevice } = useSelectedSpeakerDevice();
const { getMicThreshold, getEnableAutomaticMicThreshold } = useMicThreshold();
const { getSpeakerThreshold, getEnableAutomaticSpeakerThreshold } = useSpeakerThreshold();
const { getEnableAutoClearMessageBox } = useEnableAutoClearMessageBox();
const { getEnableAutoClearMessageInputBox } = useEnableAutoClearMessageInputBox();
const { getSendMessageButtonType } = useSendMessageButtonType();
const { getUiLanguage } = useUiLanguage();
const { getUiScaling } = useUiScaling();
@@ -168,7 +168,7 @@ const StartPythonFacadeComponent = () => {
getSpeakerPhraseTimeout();
getSpeakerMaxWords();
getEnableAutoClearMessageBox();
getEnableAutoClearMessageInputBox();
getSendMessageButtonType();
}).catch((err) => {
console.error(err);

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

@@ -3,7 +3,7 @@ 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 { AboutVrct } from "./about_vrct/AboutVrct";
export const SettingBox = () => {
@@ -11,12 +11,12 @@ 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 "about_vrct":
// return <AboutVrct />;

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

@@ -1,36 +1,52 @@
import { useTranslation } from "react-i18next";
import { useSettingBox } from "../_components/useSettingBox";
import { useConfig } from "@logics/useConfig";
import {
useEnableAutoClearMessageInputBox,
useSendMessageButtonType,
} from "@logics_configs";
import {
CheckboxContainer,
RadioButtonContainer,
} from "../_templates/Templates";
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 />
<SendMessageButtonTypeContainer />
</>
);
};
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 SendMessageButtonTypeContainer = () => {
const { t } = useTranslation();
const { currentSendMessageButtonType, setSendMessageButtonType } = useSendMessageButtonType();
return (
<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}
/>
);
};

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

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

@@ -10,14 +10,13 @@ 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 { useUiLanguage } from "./appearance/useUiLanguage";
export { useUiScaling } from "./appearance/useUiScaling";
export { useEnableAutoClearMessageBox } from "./others/useEnableAutoClearMessageBox";
export { useEnableAutoClearMessageInputBox } from "./others/useEnableAutoClearMessageInputBox";
export { useSendMessageButtonType } from "./others/useSendMessageButtonType";
export { useMicRecordTimeout } from "./transcription/useMicRecordTimeout";
export { useMicPhraseTimeout } from "./transcription/useMicPhraseTimeout";

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

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

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

@@ -27,7 +27,7 @@ import {
useSelectedSpeakerDevice,
useMicThreshold,
useSpeakerThreshold,
useEnableAutoClearMessageBox,
useEnableAutoClearMessageInputBox,
useSendMessageButtonType,
useSelectedFontFamily,
useUiLanguage,
@@ -76,7 +76,7 @@ export const useReceiveRoutes = () => {
const { updateSelectedSpeakerDevice } = useSelectedSpeakerDevice();
const { updateMicThreshold, updateEnableAutomaticMicThreshold } = useMicThreshold();
const { updateSpeakerThreshold, updateEnableAutomaticSpeakerThreshold } = useSpeakerThreshold();
const { updateEnableAutoClearMessageBox } = useEnableAutoClearMessageBox();
const { updateEnableAutoClearMessageInputBox } = useEnableAutoClearMessageInputBox();
const { updateSendMessageButtonType } = useSendMessageButtonType();
const { updateUiLanguage } = useUiLanguage();
const { updateUiScaling } = useUiScaling();
@@ -292,9 +292,9 @@ 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,

2
src-ui/store.js
View File

@@ -189,7 +189,7 @@ 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_EnableAutoClearMessageInputBox, useHook: useStore_EnableAutoClearMessageInputBox } = createAtomWithHook(true, "EnableAutoClearMessageInputBox");
export const { atomInstance: Atom_SendMessageButtonType, useHook: useStore_SendMessageButtonType } = createAtomWithHook("show", "SendMessageButtonType");