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