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-09-09 12:39:04 +09:00
parent 33cd7b442d 5eaaea535c
commit 0773d0e75f
13 changed files with 185 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -29,6 +29,9 @@ const StartPythonFacadeComponent = () => {
// getMicDeviceList,
getSelectedMicDevice,
getSelectedSpeakerDevice,
getEnableAutoClearMessageBox,
getSendMessageButtonType,
} = useConfig();
@@ -42,6 +45,9 @@ const StartPythonFacadeComponent = () => {
// getMicDeviceList();
getSelectedMicDevice();
getSelectedSpeakerDevice();
getEnableAutoClearMessageBox();
getSendMessageButtonType();
}).catch((err) => {
console.error(err);
});

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

@@ -2,6 +2,7 @@ import { useSelectedConfigTabId } from "@store";
import { Device } from "./device/Device";
import { Appearance } from "./appearance/Appearance";
import { Others } from "./others/Others";
import { AboutVrct } from "./about_vrct/AboutVrct";
export const SettingBox = () => {
@@ -9,6 +10,8 @@ export const SettingBox = () => {
switch (currentSelectedConfigTabId) {
case "device":
return <Device />;
case "others":
return <Others />;
// case "appearance":
// return <Appearance />;
// case "about_vrct":

22
src-ui/app/config_page/setting_section/setting_box/components/checkbox/Checkbox.jsx
View File

@@ -1,22 +1,18 @@
import React, { useState } from 'react';
import styles from "./Checkbox.module.scss";
export const Checkbox = (props) => {
const [isChecked, setIsChecked] = useState(false);
const handleCheckboxChange = () => {
setIsChecked(!isChecked);
};
return (
<div className={styles.checkbox_container}>
<label className={styles.checkbox_wrapper} htmlFor={props.checkbox_id}>
<input
type="checkbox"
id={props.checkbox_id}
checked={isChecked}
onChange={handleCheckboxChange}
/>
{(props.state === "loading")
? <span className={styles.loader}></span>
: <input
type="checkbox"
id={props.checkbox_id}
checked={props.variable.data}
onChange={props.toggleFunction}
/>
}
<span className={styles.cbx}>
<svg viewBox="0 0 12 12">
<polyline points="1 6.29411765 4.5 10 11 1"></polyline>

9
src-ui/app/config_page/setting_section/setting_box/components/checkbox/Checkbox.module.scss
View File

@@ -1,5 +1,7 @@
@import "@scss_mixins";
.checkbox_container {
width: 100%;
// width: 100%;
height: 100%;
display: flex;
justify-content: end;
@@ -10,6 +12,7 @@
display: inline-block;
cursor: pointer;
padding: 2rem;
position: relative;
&:hover {
& .cbx {
border: var(--primary_600_color) solid 0.2rem;
@@ -51,3 +54,7 @@
stroke-dashoffset: 0;
transition: all 0.15s ease;
}
.loader {
@include loader(2rem, 0.2rem, right, -2rem);
}

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

40
src-ui/app/config_page/setting_section/setting_box/others/Others.jsx Normal file
View File

@@ -0,0 +1,40 @@
import { useTranslation } from "react-i18next";
import { useSettingBox } from "../components/useSettingBox";
// import {
// useEnableAutoClearMessageBox,
// } from "@store";
import { useConfig } from "@logics/useConfig";
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}
/>
</>
);
};

3
src-ui/app/main_page/main_section/message_container/log_box/message_container/MessageContainer.jsx
View File

@@ -33,10 +33,11 @@ export const MessageContainer = ({ messages, status, category, created_at }) =>
};
const WithTranslatedMessages = ({ messages }) => {
const translated_data = Array.isArray(messages.translated) ? messages.translated : [messages.translated];
return (
<>
<p className={styles.message_second}>{messages.original}</p>
{messages.translated.map((message, index) => (
{translated_data.map((message, index) => (
<p key={index} className={styles.message_main}>{message}</p>
))}
</>

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

@@ -2,18 +2,23 @@ import { useState } from "react";
import styles from "./MessageInputBox.module.scss";
import SendMessageSvg from "@images/send_message.svg?react";
import { useMessage } from "@logics/useMessage";
import { store } from "@store";
import { store, useEnableAutoClearMessageBox } from "@store";
import { scrollToBottom } from "@logics/scrollToBottom";
import { useConfig } from "@logics/useConfig";
export const MessageInputBox = () => {
const [inputValue, setInputValue] = useState("");
const { sendMessage } = useMessage();
const { currentEnableAutoClearMessageBox } = useEnableAutoClearMessageBox();
const { currentSendMessageButtonType } = useConfig();
const onSubmitFunction = (e) => {
e.preventDefault();
sendMessage(inputValue);
if (currentEnableAutoClearMessageBox.data) setInputValue("");
setTimeout(() => {
scrollToBottom(store.log_box_ref);
}, 10);
@@ -24,6 +29,13 @@ export const MessageInputBox = () => {
setInputValue(e.currentTarget.value);
};
const onKeyDownFunction = (e) => {
if (currentSendMessageButtonType.data === "show_and_disable_enter_key") return;
if (e.keyCode == 13 && e.shiftKey == false) {
onSubmitFunction(e);
}
};
return (
<div className={styles.container}>
<div className={styles.message_box_wrapper}>
@@ -31,15 +43,24 @@ export const MessageInputBox = () => {
className={styles.message_box_input_area}
onChange={onChangeFunction}
placeholder="Input Textfield"
value={inputValue}
onKeyDown={onKeyDownFunction}
/>
</div>
<button
className={styles.message_send_button}
type="button"
onClick={onSubmitFunction}
>
<SendMessageSvg className={styles.message_send_icon} />
</button>
{ currentSendMessageButtonType.data !== "hide" && <SendMessageButton onSubmitFunction={onSubmitFunction}/> }
</div>
);
};
const SendMessageButton = ({onSubmitFunction}) => {
return (
<button
className={styles.message_send_button}
type="button"
onClick={onSubmitFunction}
>
<SendMessageSvg className={styles.message_send_icon} />
</button>
);
};

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

@@ -6,6 +6,9 @@ import {
useSelectedMicDevice,
useSpeakerDeviceList,
useSelectedSpeakerDevice,
useEnableAutoClearMessageBox,
useSendMessageButtonType,
} from "@store";
import { useStdoutToPython } from "./useStdoutToPython";
@@ -22,6 +25,8 @@ export const useConfig = () => {
const { updateSelectedMicDevice } = useSelectedMicDevice();
const { updateSpeakerDeviceList } = useSpeakerDeviceList();
const { updateSelectedSpeakerDevice } = useSelectedSpeakerDevice();
const { currentEnableAutoClearMessageBox, updateEnableAutoClearMessageBox } = useEnableAutoClearMessageBox();
const { currentSendMessageButtonType, updateSendMessageButtonType } = useSendMessageButtonType();
const asyncPending = () => new Promise(() => {});
@@ -95,5 +100,39 @@ export const useConfig = () => {
},
// Others
getEnableAutoClearMessageBox: () => {
updateEnableAutoClearMessageBox(asyncPending);
asyncStdoutToPython("/config/enable_auto_clear_message_box");
},
toggleEnableAutoClearMessageBox: () => {
updateEnableAutoClearMessageBox(asyncPending);
if (currentEnableAutoClearMessageBox.data) {
asyncStdoutToPython("/controller/callback_disable_auto_clear_chatbox");
} else {
asyncStdoutToPython("/controller/callback_enable_auto_clear_chatbox");
}
},
currentEnableAutoClearMessageBox: currentEnableAutoClearMessageBox,
updateEnableAutoClearMessageBox: (payload) => {
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);
},
};
};

7
src-ui/logics/useMessage.js
View File

@@ -32,7 +32,7 @@ export const useMessage = () => {
updateSentMessageLog: (payload) => {
const data = payload.data;
updateMessageLogsStatus(updateItemById(data.id));
updateMessageLogsStatus(updateItemById(data.id, data.translation));
},
addSentMessageLog: (payload) => {
const data = payload.data;
@@ -63,16 +63,17 @@ const generateMessageObject = (data, category) => {
status: "ok",
messages: {
original: data.message,
translated: [],
translated: data.translation,
},
};
};
const updateItemById = (id) => (prev_items) => {
const updateItemById = (id, translated_data) => (prev_items) => {
return prev_items.map(item => {
if (item.id === id) {
item.status = "ok";
item.messages.translated = translated_data;
}
return item;
});

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

@@ -26,6 +26,9 @@ export const useReceiveRoutes = () => {
updateSpeakerDeviceList,
updateSelectedSpeakerDevice,
updateEnableAutoClearMessageBox,
updateSendMessageButtonType,
} = useConfig();
const { updateVolumeVariable_Mic, updateVolumeVariable_Speaker } = useVolume();
@@ -56,6 +59,13 @@ export const useReceiveRoutes = () => {
"/action/check_mic_threshold_energy": updateVolumeVariable_Mic,
"/action/check_speaker_threshold_energy": updateVolumeVariable_Speaker,
"/config/enable_auto_clear_message_box": updateEnableAutoClearMessageBox,
"/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,
"/action/transcription_send_mic_message": addSentMessageLog,

8
src-ui/store.js
View File

@@ -152,6 +152,14 @@ export const { atomInstance: Atom_IsOpenedWordFilterList, useHook: useIsOpenedWo
export const { atomInstance: Atom_WordFilterList, useHook: useWordFilterList } = createAtomWithHook(word_filter_list, "WordFilterList");
// Others
export const { atomInstance: Atom_EnableAutoClearMessageBox, useHook: useEnableAutoClearMessageBox } = createAsyncAtomWithHook(true, "EnableAutoClearMessageBox");
export const { atomInstance: Atom_SendMessageButtonType, useHook: useSendMessageButtonType } = createAsyncAtomWithHook("show", "SendMessageButtonType");
export const { atomInstance: Atom_TranslatorListStatus, useHook: useTranslatorListStatus } = createAtomWithHook(translator_list, "TranslatorListStatus");
export const { atomInstance: Atom_SelectedTranslatorIdStatus, useHook: useSelectedTranslatorIdStatus } = createAtomWithHook("CTranslate2", "SelectedTranslatorIdStatus");
export const { atomInstance: Atom_IsOpenedTranslatorSelector, useHook: useIsOpenedTranslatorSelector } = createAtomWithHook(false, "IsOpenedTranslatorSelector");