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

[Update] Config Page: Device Tab. Add mic/speaker auto select section.

Browse Source
This commit is contained in:
Sakamoto Shiina
2024-09-15 23:22:10 +09:00
parent 0309757028
commit 418d9f4ad7
10 changed files with 137 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -24,15 +24,17 @@ export const DropdownMenu = (props) => {
};
const dropdown_content_wrapper_class_name = clsx(styles["dropdown_content_wrapper"], {
[styles["is_opened"]]: (currentIsOpenedDropdownMenu === props.dropdown_id) ? true : false
[styles.is_opened]: (currentIsOpenedDropdownMenu === props.dropdown_id) ? true : false,
[styles.is_disabled]: props.is_disabled,
});
const dropdown_toggle_button_class_name = clsx(styles["dropdown_toggle_button"], {
[styles["is_loading"]]: (props.state === "loading") ? true : false
[styles.is_loading]: (props.state === "loading") ? true : false,
[styles.is_disabled]: props.is_disabled,
});
const arrow_class_names = clsx(styles["arrow_left_svg"], {
[styles["is_opened"]]: (currentIsOpenedDropdownMenu === props.dropdown_id) ? true : false
[styles.is_opened]: (currentIsOpenedDropdownMenu === props.dropdown_id) ? true : false
});
const getSelectedText = () => {

12
src-ui/app/config_page/setting_section/setting_box/components/dropdown_menu/DropdownMenu.module.scss
View File

@@ -20,6 +20,12 @@
&.is_loading {
pointer-events: none;
}
&.is_disabled {
pointer-events: none;
.dropdown_selected_text, .arrow_left_svg {
color: var(--dark_550_color);
}
}
}
.dropdown_selected_text {
@@ -37,6 +43,12 @@
&.is_opened {
display: block;
}
&.is_disabled {
pointer-events: none;
.value_text {
color: var(--dark_550_color);
}
}
}
.dropdown_content {

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

@@ -1,3 +1,4 @@
import clsx from "clsx";
import { useTranslation } from "react-i18next";
import styles from "./Device.module.scss";
import {
@@ -12,6 +13,8 @@ export const Device = () => {
);
};
import { useEnableAutoMicSelect } from "@logics_configs/useEnableAutoMicSelect";
import { useMicHostList } from "@logics_configs/useMicHostList";
import { useSelectedMicHost } from "@logics_configs/useSelectedMicHost";
@@ -26,6 +29,7 @@ import { Switchbox } from "../components/switchbox/Switchbox";
const Mic_Container = () => {
const { t } = useTranslation();
const { currentEnableAutoMicSelect, toggleEnableAutoMicSelect } = useEnableAutoMicSelect();
const { currentSelectedMicHost, setSelectedMicHost } = useSelectedMicHost();
const { currentMicHostList, getMicHostList } = useMicHostList();
const { onMouseLeaveFunction } = useOnMouseLeaveDropdownMenu();
@@ -35,6 +39,8 @@ const Mic_Container = () => {
setSelectedMicHost(selected_data.selected_id);
};
const is_disabled_selector = currentEnableAutoMicSelect.data === true || currentEnableAutoMicSelect.data === "loading";
const { currentSelectedMicDevice, setSelectedMicDevice } = useSelectedMicDevice();
const { currentMicDeviceList, getMicDeviceList } = useMicDeviceList();
@@ -54,7 +60,6 @@ const Mic_Container = () => {
desc: t("config_page.mic_dynamic_energy_threshold.desc_for_manual"),
};
}
};
return (
@@ -62,8 +67,17 @@ const Mic_Container = () => {
<div className={styles.device_container} onMouseLeave={onMouseLeaveFunction}>
<LabelComponent label={t("config_page.mic_host_device.label")} />
<div className={styles.device_contents}>
<div className={styles.device_auto_select_wrapper}>
<p className={styles.device_secondary_label}>{t("config_page.mic_host_device.label_auto_select")}</p>
<Switchbox
variable={currentEnableAutoMicSelect}
toggleFunction={toggleEnableAutoMicSelect}
/>
</div>
<div className={styles.device_dropdown_wrapper}>
<p className={styles.device_dropdown_label}>{t("config_page.mic_host_device.label_host")}</p>
<p className={styles.device_secondary_label}>{t("config_page.mic_host_device.label_host")}</p>
<DropdownMenu
dropdown_id="mic_host"
selected_id={currentSelectedMicHost.data}
@@ -72,11 +86,12 @@ const Mic_Container = () => {
openListFunction={getMicHostList}
state={currentSelectedMicHost.state}
style={{ maxWidth: "20rem", minWidth: "10rem" }}
is_disabled={is_disabled_selector}
/>
</div>
<div className={styles.device_dropdown_wrapper}>
<p className={styles.device_dropdown_label}>{t("config_page.mic_host_device.label_device")}</p>
<p className={styles.device_secondary_label}>{t("config_page.mic_host_device.label_device")}</p>
<DropdownMenu
dropdown_id="mic_device"
selected_id={currentSelectedMicDevice.data}
@@ -84,6 +99,7 @@ const Mic_Container = () => {
selectFunction={selectFunction_device}
openListFunction={getMicDeviceList}
state={currentSelectedMicDevice.state}
is_disabled={is_disabled_selector}
/>
</div>
</div>
@@ -107,6 +123,7 @@ const Mic_Container = () => {
</div>
);
};
import { useEnableAutoSpeakerSelect } from "@logics_configs/useEnableAutoSpeakerSelect";
import { useSpeakerDeviceList } from "@logics_configs/useSpeakerDeviceList";
import { useSelectedSpeakerDevice } from "@logics_configs/useSelectedSpeakerDevice";
@@ -114,6 +131,7 @@ import { useSpeakerThreshold } from "@logics_configs/useSpeakerThreshold";
const Speaker_Container = () => {
const { t } = useTranslation();
const { currentEnableAutoSpeakerSelect, toggleEnableAutoSpeakerSelect } = useEnableAutoSpeakerSelect();
const { currentSelectedSpeakerDevice, setSelectedSpeakerDevice } = useSelectedSpeakerDevice();
const { currentSpeakerDeviceList, getSpeakerDeviceList } = useSpeakerDeviceList();
const { onMouseLeaveFunction } = useOnMouseLeaveDropdownMenu();
@@ -123,6 +141,8 @@ const Speaker_Container = () => {
setSelectedSpeakerDevice(selected_data.selected_id);
};
const is_disabled_selector = currentEnableAutoSpeakerSelect.data === true || currentEnableAutoSpeakerSelect.data === "loading";
const getLabels = () => {
if (currentEnableAutomaticSpeakerThreshold.data === true) {
return {
@@ -143,7 +163,17 @@ const Speaker_Container = () => {
<div className={styles.device_container} onMouseLeave={onMouseLeaveFunction}>
<LabelComponent label={t("config_page.speaker_device.label")} />
<div className={styles.device_contents}>
<div className={styles.device_auto_select_wrapper}>
<p className={styles.device_secondary_label}>{t("config_page.speaker_device.label_auto_select")}</p>
<Switchbox
variable={currentEnableAutoSpeakerSelect}
toggleFunction={toggleEnableAutoSpeakerSelect}
/>
</div>
<div className={styles.device_dropdown_wrapper}>
<p className={styles.device_secondary_label}>{t("config_page.mic_host_device.label_device")}</p>
<DropdownMenu
dropdown_id="speaker_device"
label={t("config_page.speaker_device.label")}
@@ -152,6 +182,7 @@ const Speaker_Container = () => {
selectFunction={selectFunction}
openListFunction={getSpeakerDeviceList}
state={currentSelectedSpeakerDevice.state}
is_disabled={is_disabled_selector}
/>
</div>
</div>

12
src-ui/app/config_page/setting_section/setting_box/device/Device.module.scss
View File

@@ -57,13 +57,23 @@
gap: 2.8rem;
}
.device_auto_select_wrapper {
display: flex;
flex-direction: column;
gap: 1.2rem;
}
.device_dropdown_wrapper {
display: flex;
flex-direction: column;
gap: 0.6rem;
white-space: nowrap;
&.is_disabled {
pointer-events: none;
}
}
.device_dropdown_label {
.device_secondary_label {
padding-left: 0.2rem;
font-size: 1.4rem;
color: var(--dark_500_color);

28
src-ui/logics/configs/useEnableAutoMicSelect.js Normal file
View File

@@ -0,0 +1,28 @@
import { useStore_EnableAutoMicSelect } from "@store";
import { useStdoutToPython } from "@logics/useStdoutToPython";
export const useEnableAutoMicSelect = () => {
const { asyncStdoutToPython } = useStdoutToPython();
const { currentEnableAutoMicSelect, updateEnableAutoMicSelect } = useStore_EnableAutoMicSelect();
const getEnableAutoMicSelect = () => {
updateEnableAutoMicSelect(() => new Promise(() => {}));
asyncStdoutToPython("/config/enable_mic_automatic_selection");
};
const toggleEnableAutoMicSelect = () => {
updateEnableAutoMicSelect(() => new Promise(() => {}));
if (currentEnableAutoMicSelect.data) {
asyncStdoutToPython("/controller/callback_disable_mic_automatic_selection");
} else {
asyncStdoutToPython("/controller/callback_enable_mic_automatic_selection");
}
};
return {
currentEnableAutoMicSelect,
getEnableAutoMicSelect,
updateEnableAutoMicSelect,
toggleEnableAutoMicSelect,
};
};

28
src-ui/logics/configs/useEnableAutoSpeakerSelect.js Normal file
View File

@@ -0,0 +1,28 @@
import { useStore_EnableAutoSpeakerSelect } from "@store";
import { useStdoutToPython } from "@logics/useStdoutToPython";
export const useEnableAutoSpeakerSelect = () => {
const { asyncStdoutToPython } = useStdoutToPython();
const { currentEnableAutoSpeakerSelect, updateEnableAutoSpeakerSelect } = useStore_EnableAutoSpeakerSelect();
const getEnableAutoSpeakerSelect = () => {
updateEnableAutoSpeakerSelect(() => new Promise(() => {}));
asyncStdoutToPython("/config/enable_speaker_automatic_selection");
};
const toggleEnableAutoSpeakerSelect = () => {
updateEnableAutoSpeakerSelect(() => new Promise(() => {}));
if (currentEnableAutoSpeakerSelect.data) {
asyncStdoutToPython("/controller/callback_disable_speaker_automatic_selection");
} else {
asyncStdoutToPython("/controller/callback_enable_speaker_automatic_selection");
}
};
return {
currentEnableAutoSpeakerSelect,
getEnableAutoSpeakerSelect,
updateEnableAutoSpeakerSelect,
toggleEnableAutoSpeakerSelect,
};
};

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

@@ -5,6 +5,8 @@ import { useSelectableLanguageList } from "./useSelectableLanguageList";
import { useVolume } from "./useVolume";
import { useSoftwareVersion } from "@logics_configs/useSoftwareVersion";
import { useEnableAutoMicSelect } from "@logics_configs/useEnableAutoMicSelect";
import { useEnableAutoSpeakerSelect } from "@logics_configs/useEnableAutoSpeakerSelect";
import { useMicHostList } from "@logics_configs/useMicHostList";
import { useSelectedMicHost } from "@logics_configs/useSelectedMicHost";
import { useMicDeviceList } from "@logics_configs/useMicDeviceList";
@@ -35,6 +37,10 @@ export const useReceiveRoutes = () => {
} = useMessage();
const { updateSoftwareVersion } = useSoftwareVersion();
const { updateEnableAutoMicSelect } = useEnableAutoMicSelect();
const { updateEnableAutoSpeakerSelect } = useEnableAutoSpeakerSelect();
const { updateMicHostList } = useMicHostList();
const { updateSelectedMicHost } = useSelectedMicHost();
const { updateMicDeviceList } = useMicDeviceList();
@@ -70,6 +76,11 @@ export const useReceiveRoutes = () => {
"/config/version": updateSoftwareVersion,
"/controller/callback_enable_mic_automatic_selection": updateEnableAutoMicSelect,
"/controller/callback_disable_mic_automatic_selection": updateEnableAutoMicSelect,
"/controller/callback_enable_speaker_automatic_selection": updateEnableAutoSpeakerSelect,
"/controller/callback_disable_speaker_automatic_selection": updateEnableAutoSpeakerSelect,
"/controller/list_mic_host": (payload) => updateMicHostList(arrayToObject(payload)),
"/config/choice_mic_host": updateSelectedMicHost,
"/controller/callback_set_mic_host": (payload) => {

3
src-ui/store.js
View File

@@ -117,6 +117,9 @@ export const { atomInstance: Atom_IsOpenedDropdownMenu, useHook: useStore_IsOpen
// Config Page
export const { atomInstance: Atom_EnableAutoMicSelect, useHook: useStore_EnableAutoMicSelect } = createAsyncAtomWithHook(true, "EnableAutoMicSelect");
export const { atomInstance: Atom_EnableAutoSpeakerSelect, useHook: useStore_EnableAutoSpeakerSelect } = createAsyncAtomWithHook(true, "EnableAutoSpeakerSelect");
export const { atomInstance: Atom_MicHostList, useHook: useStore_MicHostList } = createAsyncAtomWithHook({}, "MicHostList");
export const { atomInstance: Atom_SelectedMicHost, useHook: useStore_SelectedMicHost } = createAsyncAtomWithHook("Nothing Selected", "SelectedMicHost");
export const { atomInstance: Atom_MicDeviceList, useHook: useStore_MicDeviceList } = createAsyncAtomWithHook({}, "MicDeviceList");

1
src-ui/utils/variables.css
View File

@@ -26,6 +26,7 @@
--dark_400_color: #c7c8cc;
--dark_450_color: #b8b9bd;
--dark_500_color: #a9aaae;
--dark_550_color: #949599;
--dark_600_color: #7f8084;
--dark_650_color: #75767a;
--dark_700_color: #6a6c6f;