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

[Update] Config Window: Add Mic/Speaker Threshold component.

Browse Source
This commit is contained in:
Sakamoto Shiina
2024-08-03 08:11:07 +09:00
parent ef94d755c6
commit 4679804500
12 changed files with 268 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src-ui/windows/config_window/setting_section/setting_box/Appearance/Appearance.jsx
View File

@@ -9,6 +9,7 @@ export const Appearance = () => {
CheckboxContainer,
SwitchboxContainer,
EntryContainer,
ThresholdContainer,
} = useSettingBox();
const selectFunction = (selected_data) => {
@@ -32,6 +33,8 @@ export const Appearance = () => {
<SwitchboxContainer label="Transparent" desc="description" switchbox_id="switchbox_id_1"/>
<EntryContainer label="Transparent" desc="description" switchbox_id="switchbox_id_1"/>
<ThresholdContainer label="Transparent" desc="description" id="mic_threshold" min="0" max="3000"/>
</>
);
};

3
src-ui/windows/config_window/setting_section/setting_box/appearance/Appearance.jsx
View File

@@ -9,6 +9,7 @@ export const Appearance = () => {
CheckboxContainer,
SwitchboxContainer,
EntryContainer,
ThresholdContainer,
} = useSettingBox();
const selectFunction = (selected_data) => {
@@ -32,6 +33,8 @@ export const Appearance = () => {
<SwitchboxContainer label="Transparent" desc="description" switchbox_id="switchbox_id_1"/>
<EntryContainer label="Transparent" desc="description" switchbox_id="switchbox_id_1"/>
<ThresholdContainer label="Transparent" desc="description" id="mic_threshold" min="0" max="3000"/>
</>
);
};

14
src-ui/windows/config_window/setting_section/setting_box/components/threshold_component/ThresholdComponent.jsx Normal file
View File

@@ -0,0 +1,14 @@
import styles from "./ThresholdComponent.module.scss";
import { SliderAndMeter } from "./slider_and_meter/SliderAndMeter";
import { ThresholdEntry } from "./threshold_entry/ThresholdEntry";
import { VolumeCheckButton } from "./volume_check_button/VolumeCheckButton";
export const ThresholdComponent = (props) => {
return (
<div className={styles.container}>
<VolumeCheckButton {...props}/>
<SliderAndMeter {...props}/>
<ThresholdEntry/>
</div>
);
};

7
src-ui/windows/config_window/setting_section/setting_box/components/threshold_component/ThresholdComponent.module.scss Normal file
View File

@@ -0,0 +1,7 @@
.container {
display: flex;
width: 100%;
justify-content: space-between;
align-items: center;
gap: 3rem;
}

48
src-ui/windows/config_window/setting_section/setting_box/components/threshold_component/slider_and_meter/SliderAndMeter.jsx Normal file
View File

@@ -0,0 +1,48 @@
import { useState, useEffect } from "react";
import styles from "./SliderAndMeter.module.scss";
export const SliderAndMeter = (props) => {
const [volume, setVolume] = useState(0);
const [threshold, setThreshold] = useState(props.max / 2);
const updateVolume = () => {
setVolume(Math.random());
};
// useEffect(() => {
// const intervalId = setInterval(updateVolume, 200);
// return () => clearInterval(intervalId);
// }, []);
return (
<div className={styles.container}>
<div className={styles.meter_container}>
<div
className={styles.volume_meter}
style={{
width: `${(volume * 100)}%`,
backgroundColor: volume < (threshold / props.max) ? "var(--primary_750_color)" : "var(--primary_400_color)"
}}
/>
<input
type="range"
min={props.min}
max={props.max}
value={threshold}
onChange={(e) => setThreshold(e.target.value)}
className={styles.threshold_slider}
/>
</div>
<div className={styles.dev_info_box}>
<p>dev</p>
<button onClick={updateVolume}>Update Volume</button>
<div className={styles.volume_info}>
<span>Current Volume: {(volume * props.max).toFixed(2)}</span>
</div>
<div className={styles.threshold_info}>
<span>Threshold: {threshold}</span>
</div>
</div>
</div>
);
};

76
src-ui/windows/config_window/setting_section/setting_box/components/threshold_component/slider_and_meter/SliderAndMeter.module.scss Normal file
View File

@@ -0,0 +1,76 @@
.container {
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
flex: 1;
// width: 100%;
position: relative; // for dev
}
.meter_container {
position: relative;
width: 100%;
height: 0.8rem;
background: var(--dark_800_color);
border-radius: 0.4rem;
}
.volume_meter {
height: 100%;
border-radius: inherit;
transition: width 0.1s ease, background-color 0.1s ease;
}
.threshold_slider {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: all;
&::-webkit-slider-runnable-track {
width: 100%;
background: transparent;
cursor: pointer;
}
&::-webkit-slider-thumb {
-webkit-appearance: none;
width: 0.4rem;
height: 4rem;
background: var(--primary_600_color);
border-radius: 0.2rem;
cursor: pointer;
}
&:hover::-webkit-slider-thumb{
background: var(--primary_500_color);
}
&:focus {
outline: none;
}
}
.volume_info, .threshold_info {
font-size: 1.2rem;
}
// for dev
.dev_info_box {
position: absolute;
top: -4rem;
display: flex;
gap: 2rem
}

22
src-ui/windows/config_window/setting_section/setting_box/components/threshold_component/threshold_entry/ThresholdEntry.jsx Normal file
View File

@@ -0,0 +1,22 @@
import { useState, useEffect } from "react";
import styles from "./ThresholdEntry.module.scss";
export const ThresholdEntry = () => {
const [input_value, setInputValue] = useState();
const onChangeFunction = (e) => {
setInputValue(e.currentTarget.value);
};
return (
<div className={styles.container}>
<div className={styles.entry_wrapper}>
<input
className={styles.entry_input_area}
onChange={onChangeFunction}
/>
</div>
</div>
);
};

19
src-ui/windows/config_window/setting_section/setting_box/components/threshold_component/threshold_entry/ThresholdEntry.module.scss Normal file
View File

@@ -0,0 +1,19 @@
.container {
background-color: green;
}
.entry_wrapper {
width: 10rem;
height: 100%;
padding: 0.6rem;
background-color: var(--dark_875_color);
border: 0.1rem solid var(--dark_750_color);
border-radius: 0.4rem;
}
.entry_input_area {
width: 100%;
height: 100%;
font-size: 1.4rem;
resize: none;
}

24
src-ui/windows/config_window/setting_section/setting_box/components/threshold_component/volume_check_button/VolumeCheckButton.jsx Normal file
View File

@@ -0,0 +1,24 @@
import styles from "./VolumeCheckButton.module.scss";
import MicSvg from "@images/mic.svg?react";
import HeadphonesSvg from "@images/headphones.svg?react";
import clsx from "clsx";
export const VolumeCheckButton = (props) => {
const SvgComponent = props.id === "mic_threshold" ? MicSvg : HeadphonesSvg;
const getClassNames = (baseClass) => clsx(baseClass, {
// [styles.is_active]: (currentState.data === true),
// [styles.is_loading]: (currentState.state === "loading"),
// [styles.is_hovered]: is_hovered,
// [styles.is_mouse_down]: is_mouse_down,
});
return (
<div className={styles.container}>
<div className={getClassNames(styles.button_button)}>
<SvgComponent className={getClassNames(styles.button_svg)} />
</div>
</div>
);
};

14
src-ui/windows/config_window/setting_section/setting_box/components/threshold_component/volume_check_button/VolumeCheckButton.module.scss Normal file
View File

@@ -0,0 +1,14 @@
.button_button {
width: 100%;
background-color: var(--dark_800_color);
display: flex;
justify-content: center;
align-items: center;
padding: 1rem;
border-radius: 50%;
}
.button_svg {
width: 2.6rem;
color: var(--dark_350_color);
}

16
src-ui/windows/config_window/setting_section/setting_box/components/useSettingBox.jsx
View File

@@ -5,6 +5,7 @@ import { Slider } from "./slider/Slider";
import { Checkbox } from "./checkbox/Checkbox";
import { Switchbox } from "./switchbox/Switchbox";
import { Entry } from "./entry/Entry";
import { ThresholdComponent } from "./threshold_component/ThresholdComponent";
import { useIsOpenedDropdownMenu } from "@store";
export const useSettingBox = () => {
@@ -59,11 +60,26 @@ export const useSettingBox = () => {
);
};
const ThresholdContainer = (props) => {
return (
<div className={styles.threshold_container}>
<div className={styles.threshold_switch_section}>
<LabelComponent label={props.label} desc={props.desc} />
<Switchbox {...props}/>
</div>
<div className={styles.threshold_section}>
<ThresholdComponent {...props}/>
</div>
</div>
);
};
return {
DropdownMenuContainer,
SliderContainer,
CheckboxContainer,
SwitchboxContainer,
EntryContainer,
ThresholdContainer,
};
};

22
src-ui/windows/config_window/setting_section/setting_box/components/useSettingBox.module.scss
View File

@@ -6,3 +6,25 @@
background-color: var(--dark_888_color);
padding: 2rem;
}
.threshold_container {
display: flex;
width: 100%;
flex-direction: column;
justify-content: space-between;
align-items: center;
gap: 2rem;
background-color: var(--dark_888_color);
padding: 2rem;
}
.threshold_switch_section {
display: flex;
width: 100%;
justify-content: space-between;
align-items: center;
}
.threshold_section {
width: 100%;
}