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

[Update] Config Page: Add Device tab. add mic host list.(not selectable yet.)

Browse Source
This commit is contained in:
Sakamoto Shiina
2024-09-02 17:04:34 +09:00
parent 6c68f3744f
commit 26691f773f
15 changed files with 140 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
locales/en.json
View File

@@ -80,6 +80,7 @@
"invalid_value": "Invalid value."
},
"side_menu_labels": {
"device": "Device",
"appearance": "Appearance",
"translation": "Translation",
"transcription": "Transcription",

1
locales/ja.json
View File

@@ -78,6 +78,7 @@
"invalid_value": "無効な値です。"
},
"side_menu_labels": {
"device": "デバイス",
"appearance": "デザイン",
"translation": "翻訳",
"transcription": "音声認識",

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

@@ -14,13 +14,19 @@ export const App = () => {
const main_page = getCurrent();
const { currentIsOpenedConfigPage } = useIsOpenedConfigPage();
const { getSoftwareVersion } = useConfig();
const {
getSoftwareVersion,
getMicHostList,
getSelectedMicHost,
} = useConfig();
useEffect(() => {
main_page.setDecorations(true);
if (!hasRunRef.current) {
asyncStartPython().then((result) => {
getSoftwareVersion();
getMicHostList();
getSelectedMicHost();
}).catch((err) => {
});

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

@@ -1,15 +1,18 @@
import { useSelectedConfigTabId } from "@store";
import { Device } from "./device/Device";
import { Appearance } from "./appearance/Appearance";
import { AboutVrct } from "./about_vrct/AboutVrct";
export const SettingBox = () => {
const { currentSelectedConfigTabId } = useSelectedConfigTabId();
switch (currentSelectedConfigTabId) {
case "appearance":
return <Appearance />;
case "about_vrct":
return <AboutVrct />;
case "device":
return <Device />;
// case "appearance":
// return <Appearance />;
// case "about_vrct":
// return <AboutVrct />;
default:
return null;

10
src-ui/app/config_page/setting_section/setting_box/appearance/Appearance.jsx
View File

@@ -2,11 +2,11 @@ import { useTranslation } from "react-i18next";
import FolderOpenSvg from "@images/folder_open.svg?react";
import { useSettingBox } from "../components/useSettingBox";
import { useSelectedMicDeviceStatus, useMicDeviceListStatus } from "@store";
import { useSelectedMicDevice, useMicDeviceList } from "@store";
export const Appearance = () => {
const { t } = useTranslation();
const { currentSelectedMicDeviceStatus, updateSelectedMicDeviceStatus } = useSelectedMicDeviceStatus();
const { currentMicDeviceListStatus } = useMicDeviceListStatus();
const { currentSelectedMicDevice, updateSelectedMicDevice } = useSelectedMicDevice();
const { currentMicDeviceList } = useMicDeviceList();
const {
DropdownMenuContainer,
SliderContainer,
@@ -29,13 +29,13 @@ export const Appearance = () => {
}, 3000);
});
};
updateSelectedMicDeviceStatus(asyncFunction);
updateSelectedMicDevice(asyncFunction);
};
return (
<>
<DropdownMenuContainer dropdown_id="mic_host" label="Mic Host/Driver" desc="description" selected_id="b" list={{a: "A", b: "B", c: "C"}} />
<DropdownMenuContainer dropdown_id="mic_device" label="Mic Device" desc="description" selected_id={currentSelectedMicDeviceStatus.data} list={currentMicDeviceListStatus} selectFunction={selectFunction} state={currentSelectedMicDeviceStatus.state} />
<DropdownMenuContainer dropdown_id="mic_device" label="Mic Device" desc="description" selected_id={currentSelectedMicDevice.data} list={currentMicDeviceList} selectFunction={selectFunction} state={currentSelectedMicDevice.state} />
<SliderContainer label="Transparent" desc="description" min="0" max="3000"/>
<CheckboxContainer label="Transparent" desc="description" checkbox_id="checkbox_id_1"/>

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

@@ -35,12 +35,18 @@ export const DropdownMenu = (props) => {
[styles["is_opened"]]: (currentIsOpenedDropdownMenu === props.dropdown_id) ? true : false
});
const getSelectedText = () => {
if (props.state !== "hasData") return;
return (props.list[props.selected_id]) ? props.list[props.selected_id] : "Nothing selected";
};
return (
<div className={styles.container}>
<div className={dropdown_toggle_button_class_name} onClick={toggleDropdownMenu}>
{(props.state === "loading")
? <p className={styles.dropdown_selected_text}>Loading...</p>
: <p className={styles.dropdown_selected_text}>{props.list[props.selected_id]}</p>
: <p className={styles.dropdown_selected_text}>{getSelectedText()}</p>
}
{(props.state === "loading")
? <span className={styles.loader}></span>
@@ -49,14 +55,15 @@ export const DropdownMenu = (props) => {
</div>
<div className={dropdown_content_wrapper_class_name}>
<div className={styles.dropdown_content}>
{
Object.entries(props.list).map(([key, value]) => {
{(props.state === "hasData")
? Object.entries(props.list).map(([key, value]) => {
return (
<div key={key} className={styles.value_button} onClick={() => selectValue(key)}>
<p className={styles.value_text} >{value}</p>
</div>
);
})
: null
}
</div>
</div>

5
src-ui/app/config_page/setting_section/setting_box/components/label_component/LabelComponent.jsx
View File

@@ -4,7 +4,10 @@ export const LabelComponent = (props) => {
return (
<div className={styles.label_component}>
<p className={styles.label}>{props.label}</p>
<p className={styles.desc}>{props.desc}</p>
{props.desc
? <p className={styles.desc}>{props.desc}</p>
: null
}
</div>
);
};

1
src-ui/app/config_page/setting_section/setting_box/components/useSettingBox.module.scss
View File

@@ -26,6 +26,7 @@
align-items: center;
gap: 2rem;
padding: 2rem;
border-bottom: solid 0.1rem var(--dark_800_color);
}
.threshold_switch_section {

65
src-ui/app/config_page/setting_section/setting_box/device/Device.jsx Normal file
View File

@@ -0,0 +1,65 @@
import { useTranslation } from "react-i18next";
import FolderOpenSvg from "@images/folder_open.svg?react";
import { useSettingBox } from "../components/useSettingBox";
import {
useMicHostList,
useSelectedMicHost,
useSelectedMicDevice,
useMicDeviceList,
} from "@store";
export const Device = () => {
const { t } = useTranslation();
const {
DropdownMenuContainer,
ThresholdContainer,
} = useSettingBox();
const { currentMicHostList, updateMicHostList } = useMicHostList();
const { currentSelectedMicHost, updateSelectedMicHost } = useSelectedMicHost();
const { currentMicDeviceList } = useMicDeviceList();
const { currentSelectedMicDevice, updateSelectedMicDevice } = useSelectedMicDevice();
const selectFunction = (selected_data) => {
switch (selected_data.dropdown_id) {
case "mic_host":
break;
default:
break;
}
};
return (
<>
<DropdownMenuContainer
dropdown_id="mic_host"
label={t("config_page.mic_host.label")}
selected_id={currentSelectedMicHost.data}
list={currentMicHostList.data}
selectFunction={selectFunction}
state={currentSelectedMicHost.state}
/>
{/* <DropdownMenuContainer
dropdown_id="mic_device"
label={t("config_page.mic_device.label")}
selected_id={currentSelectedMicDevice.data}
list={currentMicDeviceList.data}
selectFunction={selectFunction}
state={currentSelectedMicDevice.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"/>
<DropdownMenuContainer dropdown_id="speaker_device" label={t("config_page.speaker_device.label")} selected_id={currentSelectedMicDevice.data} list={currentMicDeviceList} selectFunction={selectFunction} state={currentSelectedMicDevice.state} />
<ThresholdContainer label={t("config_page.speaker_dynamic_energy_threshold.label_for_manual")} desc={t("config_page.speaker_dynamic_energy_threshold.desc_for_manual")} id="speaker_threshold" min="0" max="3000"/> */}
</>
);
};

1
src-ui/app/config_page/sidebar_section/SidebarSection.jsx
View File

@@ -4,6 +4,7 @@ export const SidebarSection = () => {
return (
<div className={styles.container}>
<div className={styles.tabs_wrapper}>
<Tab tab_id="device" />
<Tab tab_id="appearance" />
<Tab tab_id="translation" />
<Tab tab_id="transcription" />

1
src-ui/app/config_page/topbar/Topbar.jsx
View File

@@ -12,7 +12,6 @@ export const Topbar = () => {
const { currentIsOpenedConfigPage, updateIsOpenedConfigPage } = useIsOpenedConfigPage();
const closeConfigPage = () => {
updateIsOpenedConfigPage(false);
};
return (

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

@@ -1,22 +1,34 @@
import {
useSoftwareVersion,
useMicHostList,
useSelectedMicHost,
} from "@store";
import { useStdoutToPython } from "./useStdoutToPython";
export const useConfig = () => {
const {
updateSoftwareVersion,
} = useSoftwareVersion();
import { arrayToObject } from "@utils/arrayToObject";
export const useConfig = () => {
const { asyncStdoutToPython } = useStdoutToPython();
const { updateSoftwareVersion } = useSoftwareVersion();
const { updateMicHostList } = useMicHostList();
const { updateSelectedMicHost } = useSelectedMicHost();
return {
getSoftwareVersion: () => {
asyncStdoutToPython("/config/version");
getSoftwareVersion: () => asyncStdoutToPython("/config/version"),
updateSoftwareVersion: (payload) => updateSoftwareVersion(payload.data),
getMicHostList: () => asyncStdoutToPython("/controller/list_mic_host"),
updateMicHostList: (payload) => {
updateMicHostList(arrayToObject(payload.data));
},
updateSoftwareVersion: (payload) => {
updateSoftwareVersion(payload.data);
getSelectedMicHost: () => asyncStdoutToPython("/config/choice_mic_host"),
updateSelectedMicHost: (payload) => {
updateSelectedMicHost(payload.data);
},
};
};

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

@@ -17,6 +17,8 @@ export const useReceiveRoutes = () => {
const {
updateSoftwareVersion,
updateMicHostList,
updateSelectedMicHost,
} = useConfig();
const routes = {
@@ -28,6 +30,9 @@ export const useReceiveRoutes = () => {
"/controller/callback_disable_transcription_receive": updateTranscriptionReceiveStatus,
"/config/version": updateSoftwareVersion,
"/controller/list_mic_host": updateMicHostList,
"/config/choice_mic_host": updateSelectedMicHost,
"/controller/callback_messagebox_send": updateSentMessageLog,
"/action/transcription_send_mic_message": addSentMessageLog,

10
src-ui/store.js
View File

@@ -112,12 +112,16 @@ export const { atomInstance: Atom_IsOpenedLanguageSelector, useHook: useIsOpened
export const { atomInstance: Atom_SelectedPresetTabStatus, useHook: useSelectedPresetTabStatus } = createAtomWithHook(1, "SelectedPresetTabStatus");
export const { atomInstance: Atom_IsOpenedConfigPage, useHook: useIsOpenedConfigPage } = createAtomWithHook(false, "IsOpenedConfigPage");
export const { atomInstance: Atom_SelectedConfigTabId, useHook: useSelectedConfigTabId } = createAtomWithHook("appearance", "SelectedConfigTabId");
export const { atomInstance: Atom_SelectedConfigTabId, useHook: useSelectedConfigTabId } = createAtomWithHook("device", "SelectedConfigTabId");
export const { atomInstance: Atom_IsOpenedDropdownMenu, useHook: useIsOpenedDropdownMenu } = createAtomWithHook("", "IsOpenedDropdownMenu");
export const { atomInstance: Atom_SelectedMicDeviceStatus, useHook: useSelectedMicDeviceStatus } = createAsyncAtomWithHook("device b", "SelectedMicDeviceStatus");
export const { atomInstance: Atom_MicDeviceListStatus, useHook: useMicDeviceListStatus } = createAtomWithHook(test_device_list, "MicDeviceListStatus");
// Config Page
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(test_device_list, "MicDeviceList");
export const { atomInstance: Atom_SelectedMicDevice, useHook: useSelectedMicDevice } = createAsyncAtomWithHook("device b", "SelectedMicDevice");
export const { atomInstance: Atom_SendMessageFormat, useHook: useSendMessageFormat } = createAtomWithHook({
before: "",

6
src-ui/utils/arrayToObject.js Normal file
View File

@@ -0,0 +1,6 @@
export const arrayToObject = (array) => {
return array.reduce((obj, item) => {
obj[item] = item;
return obj;
}, {});
};