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

[Update] Config Page: Others Tab. Add section, send message button type.

Browse Source
This commit is contained in:
Sakamoto Shiina
2024-09-08 23:13:18 +09:00
parent 6aa427baec
commit 2b9061d74d
7 changed files with 59 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -31,6 +31,7 @@ const StartPythonFacadeComponent = () => {
getSelectedSpeakerDevice,
getEnableAutoClearMessageBox,
getSendMessageButtonType,
} = useConfig();
@@ -46,6 +47,7 @@ const StartPythonFacadeComponent = () => {
getSelectedSpeakerDevice();
getEnableAutoClearMessageBox();
getSendMessageButtonType();
}).catch((err) => {
console.error(err);
});

37
src-ui/app/config_page/setting_section/setting_box/components/radio_button/RadioButton.jsx
View File

@@ -1,27 +1,28 @@
import clsx from "clsx";
import { useState } from "react";
import styles from "./RadioButton.module.scss";
export const RadioButton = (props) => {
const options = [
{ radio_button_id: "1", label: "AAAAAAAA" },
{ radio_button_id: "2", label: "BBBBBB" }
];
const changeValue = (e) => {
console.log(e.target.value);
};
return (
<div className={styles.container}>
{options.map((option) => (
{props.options.map((option) => (
<label key={option.radio_button_id} className={styles.radio_button_wrapper}>
<input
type="radio"
name="radio"
value={option.radio_button_id}
onChange={changeValue}
/>
{props.checked_variable.data === option.radio_button_id
? <>
{ props.checked_variable.state === "loading" && <span className={styles.loader}></span> }
<input
type="radio"
name="radio"
value={option.radio_button_id}
onChange={() => props.selectFunction(option.radio_button_id)}
checked
/>
</>
: <input
type="radio"
name="radio"
value={option.radio_button_id}
onChange={() => props.selectFunction(option.radio_button_id)}
/>
}
<p className={styles.radio_button_label}>{option.label}</p>
</label>
))}

7
src-ui/app/config_page/setting_section/setting_box/components/radio_button/RadioButton.module.scss
View File

@@ -1,3 +1,5 @@
@import "@scss_mixins";
.container {
display: flex;
flex-direction: column;
@@ -12,6 +14,7 @@
gap: 1rem;
padding: 0.6rem 0.8rem;
border-radius: 0.4rem;
position: relative;
&:hover {
background-color: var(--dark_800_color);
}
@@ -38,4 +41,8 @@ input[type="radio"] {
.radio_button_label {
font-size: 1.4rem;
font-weight: 300;
}
.loader {
@include loader(2rem, 0.2rem, left, -1.6rem);
}

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

@@ -14,6 +14,7 @@ export const Others = () => {
} = useSettingBox();
const { currentEnableAutoClearMessageBox, toggleEnableAutoClearMessageBox } = useConfig();
const { currentSendMessageButtonType, setSendMessageButtonType } = useConfig();
return (
@@ -24,7 +25,16 @@ export const Others = () => {
toggleFunction={toggleEnableAutoClearMessageBox}
/>
{/* <RadioButtonContainer label={t("config_page.send_message_button_type.label")} checkbox_id="checkbox_id_1"/> */}
<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}
/>
</>
);
};

16
src-ui/logics/useConfig.js
View File

@@ -8,6 +8,7 @@ import {
useSelectedSpeakerDevice,
useEnableAutoClearMessageBox,
useSendMessageButtonType,
} from "@store";
import { useStdoutToPython } from "./useStdoutToPython";
@@ -25,6 +26,7 @@ export const useConfig = () => {
const { updateSpeakerDeviceList } = useSpeakerDeviceList();
const { updateSelectedSpeakerDevice } = useSelectedSpeakerDevice();
const { currentEnableAutoClearMessageBox, updateEnableAutoClearMessageBox } = useEnableAutoClearMessageBox();
const { currentSendMessageButtonType, updateSendMessageButtonType } = useSendMessageButtonType();
const asyncPending = () => new Promise(() => {});
@@ -117,6 +119,20 @@ export const useConfig = () => {
updateEnableAutoClearMessageBox(payload.data);
},
getSendMessageButtonType: () => {
updateSendMessageButtonType(asyncPending);
asyncStdoutToPython("/config/send_message_button_type");
},
setSendMessageButtonType: (selected_type) => {
updateSendMessageButtonType(asyncPending);
asyncStdoutToPython("/controller/callback_set_send_message_button_type", selected_type);
},
currentSendMessageButtonType: currentSendMessageButtonType,
updateSendMessageButtonType: (payload) => {
updateSendMessageButtonType(payload.data);
},
};
};

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

@@ -28,6 +28,7 @@ export const useReceiveRoutes = () => {
updateSelectedSpeakerDevice,
updateEnableAutoClearMessageBox,
updateSendMessageButtonType,
} = useConfig();
const { updateVolumeVariable_Mic, updateVolumeVariable_Speaker } = useVolume();
@@ -62,6 +63,8 @@ export const useReceiveRoutes = () => {
"/controller/callback_enable_auto_clear_chatbox": updateEnableAutoClearMessageBox,
"/controller/callback_disable_auto_clear_chatbox": updateEnableAutoClearMessageBox,
"/config/send_message_button_type": updateSendMessageButtonType,
"/controller/callback_set_send_message_button_type": updateSendMessageButtonType,
"/controller/callback_messagebox_send": updateSentMessageLog,

2
src-ui/store.js
View File

@@ -155,7 +155,7 @@ export const { atomInstance: Atom_WordFilterList, useHook: useWordFilterList } =
// Others
export const { atomInstance: Atom_EnableAutoClearMessageBox, useHook: useEnableAutoClearMessageBox } = createAsyncAtomWithHook(true, "EnableAutoClearMessageBox");
export const { atomInstance: Atom_SendMessageButtonType, useHook: useSendMessageButtonType } = createAsyncAtomWithHook("show", "SendMessageButtonType");