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-03 11:33:16 +09:00
parent aed9faa72f f34eaa6ee2
commit 87d2ecef34
6 changed files with 99 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -16,10 +16,11 @@ export const App = () => {
const { currentIsOpenedConfigPage } = useIsOpenedConfigPage();
const {
getSoftwareVersion,
getMicHostList,
// getMicHostList,
getSelectedMicHost,
getMicDeviceList,
// getMicDeviceList,
getSelectedMicDevice,
getSelectedSpeakerDevice,
} = useConfig();
useEffect(() => {
@@ -27,10 +28,11 @@ export const App = () => {
if (!hasRunRef.current) {
asyncStartPython().then((result) => {
getSoftwareVersion();
getMicHostList();
// getMicHostList();
getSelectedMicHost();
getMicDeviceList();
// getMicDeviceList();
getSelectedMicDevice();
getSelectedSpeakerDevice();
}).catch((err) => {
console.error(err);
});

11
src-ui/app/config_page/setting_section/setting_box/components/dropdown_menu/DropdownMenu.jsx
View File

@@ -1,16 +1,16 @@
import styles from "./DropdownMenu.module.scss";
import clsx from "clsx";
import ArrowLeftSvg from "@images/arrow_left.svg?react";
import { useIsOpenedDropdownMenu } from "@store";
export const DropdownMenu = (props) => {
const { updateIsOpenedDropdownMenu, currentIsOpenedDropdownMenu } = useIsOpenedDropdownMenu();
const toggleDropdownMenu = () => {
if (currentIsOpenedDropdownMenu === props.dropdown_id) {
updateIsOpenedDropdownMenu("");
} else {
if (props.openListFunction !== undefined) props.openListFunction();
updateIsOpenedDropdownMenu(props.dropdown_id);
}
};
@@ -38,9 +38,8 @@ export const DropdownMenu = (props) => {
const getSelectedText = () => {
if (props.state !== "hasData") return;
return props.selected_id;
// return (props.list[props.selected_id]) ? props.list[props.selected_id] : "Nothing selected";
};
const list = (props.list === undefined) ? {} : props.list;
return (
<div className={styles.container}>
@@ -57,10 +56,10 @@ export const DropdownMenu = (props) => {
<div className={dropdown_content_wrapper_class_name}>
<div className={styles.dropdown_content}>
{(props.state === "hasData")
? Object.entries(props.list).map(([key, value]) => {
? Object.entries(list).map(([key, value]) => {
return (
<div key={key} className={styles.value_button} onClick={() => selectValue(key)}>
<p className={styles.value_text} >{value}</p>
<p className={styles.value_text}>{value}</p>
</div>
);
})

27
src-ui/app/config_page/setting_section/setting_box/device/Device.jsx
View File

@@ -1,12 +1,12 @@
import { useTranslation } from "react-i18next";
import FolderOpenSvg from "@images/folder_open.svg?react";
import { useSettingBox } from "../components/useSettingBox";
import {
useMicHostList,
useSelectedMicHost,
useSelectedMicDevice,
useMicDeviceList,
useSelectedSpeakerDevice,
useSpeakerDeviceList,
} from "@store";
import { useConfig } from "@logics/useConfig";
@@ -25,9 +25,16 @@ export const Device = () => {
const { currentMicDeviceList } = useMicDeviceList();
const { currentSelectedMicDevice } = useSelectedMicDevice();
const { currentSpeakerDeviceList } = useSpeakerDeviceList();
const { currentSelectedSpeakerDevice } = useSelectedSpeakerDevice();
const {
setSelectedMicHost,
setSelectedMicDevice,
getMicHostList,
getMicDeviceList,
setSelectedSpeakerDevice,
getSpeakerDeviceList,
} = useConfig();
const selectFunction = (selected_data) => {
@@ -40,6 +47,10 @@ export const Device = () => {
setSelectedMicDevice(selected_data.selected_id);
break;
case "speaker_device":
setSelectedSpeakerDevice(selected_data.selected_id);
break;
default:
break;
}
@@ -54,6 +65,7 @@ export const Device = () => {
selected_id={currentSelectedMicHost.data}
list={currentMicHostList.data}
selectFunction={selectFunction}
openListFunction={getMicHostList}
state={currentSelectedMicHost.state}
/>
@@ -63,8 +75,19 @@ export const Device = () => {
selected_id={currentSelectedMicDevice.data}
list={currentMicDeviceList.data}
selectFunction={selectFunction}
openListFunction={getMicDeviceList}
state={currentSelectedMicDevice.state}
/>
<DropdownMenuContainer
dropdown_id="speaker_device"
label={t("config_page.speaker_device.label")}
selected_id={currentSelectedSpeakerDevice.data}
list={currentSpeakerDeviceList.data}
selectFunction={selectFunction}
openListFunction={getSpeakerDeviceList}
state={currentSelectedSpeakerDevice.state}
/>
{/*
<ThresholdContainer label={t("config_page.mic_dynamic_energy_threshold.label_for_manual")} desc={t("config_page.mic_dynamic_energy_threshold.desc_for_manual")} id="mic_threshold" min="0" max="3000"/>

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

@@ -4,6 +4,8 @@ import {
useSelectedMicHost,
useMicDeviceList,
useSelectedMicDevice,
useSpeakerDeviceList,
useSelectedSpeakerDevice,
} from "@store";
import { useStdoutToPython } from "./useStdoutToPython";
@@ -18,36 +20,75 @@ export const useConfig = () => {
const { updateSelectedMicHost } = useSelectedMicHost();
const { updateMicDeviceList } = useMicDeviceList();
const { updateSelectedMicDevice } = useSelectedMicDevice();
const { updateSpeakerDeviceList } = useSpeakerDeviceList();
const { updateSelectedSpeakerDevice } = useSelectedSpeakerDevice();
const asyncPending = () => new Promise(() => {});
return {
getSoftwareVersion: () => asyncStdoutToPython("/config/version"),
getSoftwareVersion: () => {
updateSoftwareVersion(asyncPending);
asyncStdoutToPython("/config/version");
},
updateSoftwareVersion: (payload) => updateSoftwareVersion(payload.data),
getMicHostList: () => asyncStdoutToPython("/controller/list_mic_host"),
getMicHostList: () => {
updateMicHostList(asyncPending);
asyncStdoutToPython("/controller/list_mic_host");
},
updateMicHostList: (payload) => {
updateMicHostList(arrayToObject(payload.data));
},
getSelectedMicHost: () => asyncStdoutToPython("/config/choice_mic_host"),
getSelectedMicHost: () => {
updateSelectedMicHost(asyncPending);
asyncStdoutToPython("/config/choice_mic_host");
},
updateSelectedMicHost: (payload) => {
updateSelectedMicHost(payload.data);
},
setSelectedMicHost: (selected_mic_host) => {
updateSelectedMicHost(asyncPending);
asyncStdoutToPython("/controller/callback_set_mic_host", selected_mic_host);
},
getMicDeviceList: () => asyncStdoutToPython("/controller/list_mic_device"),
getMicDeviceList: () => {
updateMicDeviceList(asyncPending);
asyncStdoutToPython("/controller/list_mic_device");
},
updateMicDeviceList: (payload) => {
updateMicDeviceList(arrayToObject(payload.data));
},
getSelectedMicDevice: () => asyncStdoutToPython("/config/choice_mic_device"),
getSelectedMicDevice: () => {
updateSelectedMicDevice(asyncPending);
asyncStdoutToPython("/config/choice_mic_device");
},
updateSelectedMicDevice: (payload) => {
updateSelectedMicDevice(payload.data);
},
setSelectedMicDevice: (selected_mic_device) => {
updateSelectedMicDevice(asyncPending);
asyncStdoutToPython("/controller/callback_set_mic_device", selected_mic_device);
},
getSpeakerDeviceList: () => {
updateSpeakerDeviceList(asyncPending);
asyncStdoutToPython("/controller/list_speaker_device");
},
updateSpeakerDeviceList: (payload) => {
updateSpeakerDeviceList(arrayToObject(payload.data));
},
getSelectedSpeakerDevice: () => {
updateSelectedSpeakerDevice(asyncPending);
asyncStdoutToPython("/config/choice_speaker_device");
},
updateSelectedSpeakerDevice: (payload) => {
updateSelectedSpeakerDevice(payload.data);
},
setSelectedSpeakerDevice: (selected_speaker_device) => {
updateSelectedSpeakerDevice(asyncPending);
asyncStdoutToPython("/controller/callback_set_speaker_device", selected_speaker_device);
},
updateMicHostAndDevice: (payload) => {
updateSelectedMicHost(payload.data.host);
updateSelectedMicDevice(payload.data.device);

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

@@ -22,6 +22,10 @@ export const useReceiveRoutes = () => {
updateMicDeviceList,
updateSelectedMicDevice,
updateMicHostAndDevice,
updateSpeakerDeviceList,
updateSelectedSpeakerDevice,
} = useConfig();
const routes = {
@@ -32,14 +36,22 @@ export const useReceiveRoutes = () => {
"/controller/callback_enable_transcription_receive": updateTranscriptionReceiveStatus,
"/controller/callback_disable_transcription_receive": updateTranscriptionReceiveStatus,
"/config/version": updateSoftwareVersion,
"/controller/list_mic_host": updateMicHostList,
"/config/choice_mic_host": updateSelectedMicHost,
"/controller/callback_set_mic_host": updateMicHostAndDevice,
"/controller/list_mic_device": updateMicDeviceList,
"/config/choice_mic_device": updateSelectedMicDevice,
"/controller/callback_set_mic_host": updateMicHostAndDevice,
"/controller/callback_set_mic_device": updateSelectedMicDevice,
"/controller/list_speaker_device": updateSpeakerDeviceList,
"/config/choice_speaker_device": updateSelectedSpeakerDevice,
"/controller/callback_set_speaker_device": updateSelectedSpeakerDevice,
"/controller/callback_messagebox_send": updateSentMessageLog,
"/action/transcription_send_mic_message": addSentMessageLog,
"/action/transcription_receive_speaker_message": addReceivedMessageLog

7
src-ui/store.js
View File

@@ -6,7 +6,6 @@ import {
import {
translator_list,
test_device_list,
generateTestData,
word_filter_list,
} from "@data";
@@ -117,11 +116,13 @@ export const { atomInstance: Atom_IsOpenedDropdownMenu, useHook: useIsOpenedDrop
// Config Page
export const { atomInstance: Atom_MicHostList, useHook: useMicHostList } = createAsyncAtomWithHook([], "MicHostList");
export const { atomInstance: Atom_MicHostList, useHook: useMicHostList } = createAsyncAtomWithHook({}, "MicHostList");
export const { atomInstance: Atom_SelectedMicHost, useHook: useSelectedMicHost } = createAsyncAtomWithHook("Nothing Selected", "SelectedMicHost");
export const { atomInstance: Atom_MicDeviceList, useHook: useMicDeviceList } = createAsyncAtomWithHook([], "MicDeviceList");
export const { atomInstance: Atom_MicDeviceList, useHook: useMicDeviceList } = createAsyncAtomWithHook({}, "MicDeviceList");
export const { atomInstance: Atom_SelectedMicDevice, useHook: useSelectedMicDevice } = createAsyncAtomWithHook("Nothing Selected", "SelectedMicDevice");
export const { atomInstance: Atom_SpeakerDeviceList, useHook: useSpeakerDeviceList } = createAsyncAtomWithHook({}, "SpeakerDeviceList");
export const { atomInstance: Atom_SelectedSpeakerDevice, useHook: useSelectedSpeakerDevice } = createAsyncAtomWithHook("Nothing Selected", "SelectedSpeakerDevice");
export const { atomInstance: Atom_SendMessageFormat, useHook: useSendMessageFormat } = createAtomWithHook({
before: "",