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

[Update] Config Page: Device Tab. Fetch latest data mic host list and device list when open the list container every time.

Browse Source
This commit is contained in:
Sakamoto Shiina
2024-09-03 10:49:52 +09:00
parent aed9faa72f
commit 96708a27a6
3 changed files with 42 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,16 +1,28 @@
import styles from "./DropdownMenu.module.scss";
import clsx from "clsx";
import ArrowLeftSvg from "@images/arrow_left.svg?react";
import { useIsOpenedDropdownMenu } from "@store";
import { useConfig } from "@logics/useConfig";
export const DropdownMenu = (props) => {
const { updateIsOpenedDropdownMenu, currentIsOpenedDropdownMenu } = useIsOpenedDropdownMenu();
const { getMicHostList, getMicDeviceList } = useConfig();
const toggleDropdownMenu = () => {
if (currentIsOpenedDropdownMenu === props.dropdown_id) {
updateIsOpenedDropdownMenu("");
} else {
switch (props.dropdown_id) {
case "mic_host":
getMicHostList();
break;
case "mic_device":
getMicDeviceList();
break;
default:
break;
}
updateIsOpenedDropdownMenu(props.dropdown_id);
}
};
@@ -40,7 +52,7 @@ export const DropdownMenu = (props) => {
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 +69,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>
);
})

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

@@ -20,31 +20,49 @@ export const useConfig = () => {
const { updateSelectedMicDevice } = useSelectedMicDevice();
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);
},

4
src-ui/store.js
View File

@@ -117,9 +117,9 @@ 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");