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

[Update]: Allow inserting custom components into MultiDropdownMenu.

Browse Source 
- For Device components Auto select device that is SwitchBox component.
This commit is contained in:
Sakamoto Shiina
2025-11-12 16:33:20 +09:00
parent ddcd19d5eb
commit db60529466
6 changed files with 51 additions and 198 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -13,9 +13,16 @@ export const DropdownMenu = (props) => {
export const MultiDropdownMenu = (props) => {
return (
<div className={styles.container}>
{props.dropdown_settings.map((dropdown_props, index) => (
<DropdownMenu key={dropdown_props.dropdown_id} {...dropdown_props} />
))}
{props.dropdown_settings.map((dropdown_props, index) => {
if (dropdown_props.insert_component) {
const InsertComponent = dropdown_props.insert_component;
return <InsertComponent key={index} {...dropdown_props.insert_component_props} />;
}
return (
<DropdownMenu key={dropdown_props.dropdown_id} {...dropdown_props} />
);
}
)}
</div>
);
};

17
src-ui/views/app/config_page/setting_section/setting_box/_templates/Templates.jsx
View File

@@ -35,27 +35,23 @@ export const useOnMouseLeaveDropdownMenu = () => {
export const DropdownMenuContainer = (props) => {
const { onMouseLeaveFunction } = useOnMouseLeaveDropdownMenu();
return (
<div className={styles.container} onMouseLeave={onMouseLeaveFunction}>
<TemplatesContainerWrapper onMouseLeaveFunction={onMouseLeaveFunction} {...props}>
<LabelComponent label={props.label} desc={props.desc} />
<DropdownMenu {...props} />
</div>
</TemplatesContainerWrapper>
);
};
export const MultiDropdownMenuContainer = (props) => {
const { onMouseLeaveFunction } = useOnMouseLeaveDropdownMenu();
const { currentIsBreakPoint } = useStore_IsBreakPoint();
const container_class = clsx(styles.container, {
[styles.is_break_point]: currentIsBreakPoint.data,
});
return (
<div className={container_class} onMouseLeave={onMouseLeaveFunction}>
<TemplatesContainerWrapper onMouseLeaveFunction={onMouseLeaveFunction} {...props}>
<LabelComponent label={props.label} desc={props.desc} />
<MultiDropdownMenu dropdown_settings={props.dropdown_settings} />
</div>
</TemplatesContainerWrapper>
);
};
@@ -64,6 +60,7 @@ const TemplatesContainerWrapper = ({
add_break_point = true,
flex_column = false,
remove_border_bottom = false,
onMouseLeaveFunction = null,
}) => {
const { currentIsBreakPoint } = useStore_IsBreakPoint();
@@ -74,7 +71,7 @@ const TemplatesContainerWrapper = ({
});
return (
<div className={container_class} >
<div className={container_class} onMouseLeave={onMouseLeaveFunction}>
{children}
</div>
);

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

@@ -9,6 +9,7 @@ import {
import {
useOnMouseLeaveDropdownMenu,
MultiDropdownMenuContainer,
} from "../_templates/Templates";
import {
@@ -71,46 +72,41 @@ const Mic_Container = () => {
}
};
const { currentIsBreakPoint } = useStore_IsBreakPoint();
const device_container_class = clsx(styles.device_container, {
[styles.is_break_point]: currentIsBreakPoint.data,
});
return (
<div className={styles.mic_container}>
<div className={device_container_class} onMouseLeave={onMouseLeaveFunction}>
<LabelComponent label={t("config_page.device.mic_host_device.label")} />
<div className={styles.device_contents}>
<SwitchBox
secondary_label={t("config_page.device.label_auto_select")}
variable={currentEnableAutoMicSelect}
toggleFunction={toggleEnableAutoMicSelect}
/>
<MultiDropdownMenu
dropdown_settings={[
{
dropdown_id: "mic_host",
secondary_label: t("config_page.device.label_host"),
selected_id: currentSelectedMicHost.data,
list: currentMicHostList.data,
selectFunction: selectFunction_host,
state: currentSelectedMicHost.state,
style: { maxWidth: "20rem", minWidth: "10rem" },
is_disabled: is_disabled_selector,
},
{
dropdown_id: "mic_device",
secondary_label: t("config_page.device.label_device"),
selected_id: currentSelectedMicDevice.data,
list: currentMicDeviceList.data,
selectFunction: selectFunction_device,
state: currentSelectedMicDevice.state,
is_disabled: is_disabled_selector,
}
]}
/>
</div>
</div>
<MultiDropdownMenuContainer
label={t("config_page.device.mic_host_device.label")}
remove_border_bottom={true}
dropdown_settings={[
{
insert_component: SwitchBox,
insert_component_props: {
secondary_label: t("config_page.device.label_auto_select"),
variable: currentEnableAutoMicSelect,
toggleFunction: toggleEnableAutoMicSelect,
}
},
{
dropdown_id: "mic_host",
secondary_label: t("config_page.device.label_host"),
selected_id: currentSelectedMicHost.data,
list: currentMicHostList.data,
selectFunction: selectFunction_host,
state: currentSelectedMicHost.state,
style: { maxWidth: "20rem", minWidth: "10rem" },
is_disabled: is_disabled_selector,
},
{
dropdown_id: "mic_device",
secondary_label: t("config_page.device.label_device"),
selected_id: currentSelectedMicDevice.data,
list: currentMicDeviceList.data,
selectFunction: selectFunction_device,
state: currentSelectedMicDevice.state,
is_disabled: is_disabled_selector,
}
]}
/>
<div className={styles.threshold_container}>
<div className={styles.threshold_switch_section}>
<LabelComponent {...getLabels()} />

83
src-ui/views/app/config_page/setting_section/setting_box/transcription/Transcription.module.scss
View File

@@ -2,87 +2,4 @@
display: flex;
flex-direction: column;
gap: 6.4rem;
}
// [Fix me] Need refactor.
.mic_container {
display: flex;
flex-direction: column;
border-bottom: solid 0.1rem var(--dark_800_color);
padding-bottom: 1rem;
}
.speaker_container {
padding-top: 0rem;
}
.device_container {
display: flex;
width: 100%;
justify-content: space-between;
align-items: center;
padding: 2rem;
margin-bottom: 0rem;
&.is_break_point {
flex-direction: column;
gap: 2rem;
align-items: start;
& .device_contents {
display: flex;
width: 100%;
justify-content: space-between;
padding-left: 0rem;
}
}
}
.threshold_container {
padding: 2rem;
}
.threshold_container {
display: flex;
width: 100%;
flex-direction: column;
justify-content: space-between;
align-items: center;
gap: 2rem;
}
.threshold_switch_section {
display: flex;
width: 100%;
justify-content: space-between;
align-items: center;
flex-shrink: 0;
}
.threshold_section {
width: 100%;
}
.device_label {
font-size: 1.8rem;
}
.device_contents {
display: flex;
width: 100%;
justify-content: end;
padding-left: 2rem;
gap: 2rem;
}

6
src-ui/views/app/config_page/setting_section/setting_box/translation/Translation.jsx
View File

@@ -91,8 +91,6 @@ const TranslationComputeDevice_Box = () => {
currentSelectedTranslationComputeType,
setSelectedTranslationComputeType,
} = useTranslation();
const { onMouseLeaveFunction } = useOnMouseLeaveDropdownMenu();
const { currentIsBreakPoint } = useStore_IsBreakPoint();
const list_for_ui = transformDeviceArray(currentSelectableTranslationComputeDeviceList.data);
@@ -174,10 +172,6 @@ const TranslationComputeDevice_Box = () => {
setSelectedTranslationComputeType(selected_data.selected_id);
};
const device_container_class = clsx(styles.device_container, {
[styles.is_break_point]: currentIsBreakPoint.data,
});
const is_disabled_selector = currentSelectedTranslationComputeDevice.state === "pending" || currentSelectedTranslationComputeType.state === "pending";
return (

58
src-ui/views/app/config_page/setting_section/setting_box/translation/Translation.module.scss
View File

@@ -1,58 +0,0 @@
// [Fix me] Need refactor.
.mic_container {
display: flex;
flex-direction: column;
border-bottom: solid 0.1rem var(--dark_800_color);
padding-bottom: 1rem;
}
.speaker_container {
padding-top: 0rem;
}
.device_container {
display: flex;
width: 100%;
justify-content: space-between;
align-items: center;
padding: 2rem;
margin-bottom: 0rem;
&.is_break_point {
flex-direction: column;
gap: 2rem;
align-items: start;
& .device_contents {
display: flex;
width: 100%;
justify-content: space-between;
padding-left: 0rem;
}
}
}
.threshold_container {
padding: 2rem;
}
.threshold_container {
display: flex;
width: 100%;
flex-direction: column;
justify-content: space-between;
align-items: center;
gap: 2rem;
}
.threshold_switch_section {
display: flex;
width: 100%;
justify-content: space-between;
align-items: center;
flex-shrink: 0;
}
.threshold_section {
width: 100%;
}