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

[Update/Perf] Config Page: Device Tab. Add threshold_component(dev).

Browse Source 
Improve re-render, unnecessary, problem.
This commit is contained in:
Sakamoto Shiina
2024-09-07 21:32:44 +09:00
parent 480d0f3f11
commit ef5eb2fb40
13 changed files with 165 additions and 108 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
src-ui/app/config_page/setting_section/setting_box/components/threshold_component/slider_and_meter/SliderAndMeter.jsx
View File

@@ -1,18 +1,33 @@
import { useState, useEffect } from "react";
import { useState } from "react";
import styles from "./SliderAndMeter.module.scss";
import {
useMicVolume,
} from "@store";
import { useVolume } from "@logics/useVolume";
export const SliderAndMeter = (props) => {
const [volume, setVolume] = useState(0);
const [threshold, setThreshold] = useState(props.max / 2);
const { currentMicVolume, updateMicVolume } = useMicVolume();
const updateVolume = () => {
setVolume(Math.random());
updateMicVolume(Math.random());
};
// useEffect(() => {
// const intervalId = setInterval(updateVolume, 200);
// return () => clearInterval(intervalId);
// }, []);
const {
volumeCheckStart_Mic,
volumeCheckStop_Mic,
} = useVolume();
let currentVolumeVariable = null;
let volume_width_percentage = 0;
if (props.id === "mic_threshold") {
currentVolumeVariable = Math.min(currentMicVolume.data, props.max);
volume_width_percentage = (currentVolumeVariable / props.max) * 100;
} else if (props.id === "speaker_threshold") {
}
return (
<div className={styles.container}>
@@ -20,8 +35,8 @@ export const SliderAndMeter = (props) => {
<div
className={styles.volume_meter}
style={{
width: `${(volume * 100)}%`,
backgroundColor: volume < (threshold / props.max) ? "var(--primary_750_color)" : "var(--primary_400_color)"
width: `${volume_width_percentage}%`,
backgroundColor: (currentVolumeVariable < threshold) ? "var(--primary_750_color)" : "var(--primary_400_color)"
}}
/>
<input
@@ -35,9 +50,11 @@ export const SliderAndMeter = (props) => {
</div>
<div className={styles.dev_info_box}>
<p>dev</p>
<button onClick={updateVolume}>Update Volume</button>
<button onClick={() => volumeCheckStart_Mic()}>Start</button>
<button onClick={() => volumeCheckStop_Mic()}>Stop</button>
<button onClick={() => updateVolume()}>update volume</button>
<div className={styles.volume_info}>
<span>Current Volume: {(volume * props.max).toFixed(2)}</span>
<span>Current Volume: {(currentVolumeVariable)}</span>
</div>
<div className={styles.threshold_info}>
<span>Threshold: {threshold}</span>

15
src-ui/app/config_page/setting_section/setting_box/components/threshold_component/volume_check_button/VolumeCheckButton.jsx
View File

@@ -1,24 +1,35 @@
import React from "react";
import styles from "./VolumeCheckButton.module.scss";
import MicSvg from "@images/mic.svg?react";
import HeadphonesSvg from "@images/headphones.svg?react";
import clsx from "clsx";
// import { useVolume } from "@logics/useVolume";
export const VolumeCheckButton = (props) => {
export const VolumeCheckButton = React.memo((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,
});
// const {
// volumeCheckStart_Mic,
// volumeCheckStop_Mic,
// } = useVolume();
return (
// <div className={styles.container} onClick={() => volumeCheckStop_Mic()}>
<div className={styles.container}>
<div className={getClassNames(styles.button_button)}>
<SvgComponent className={getClassNames(styles.button_svg)} />
</div>
</div>
);
};
});
VolumeCheckButton.displayName = "VolumeCheckButton";

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

@@ -47,7 +47,7 @@ export const Device = () => {
setSelectedMicDevice(selected_data.selected_id);
break;
case "speaker_device":
case "speaker_device":
setSelectedSpeakerDevice(selected_data.selected_id);
break;
@@ -56,6 +56,13 @@ export const Device = () => {
}
};
// const volumeCheckStartFunction_Mic = () => {
// volumeCheckStart_Mic();
// };
// const volumeCheckStopFunction_Mic = () => {
// volumeCheckStop_Mic();
// };
return (
<>
@@ -79,6 +86,17 @@ export const Device = () => {
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="2000"
// volumeCheckStartFunction={volumeCheckStartFunction_Mic}
// volumeCheckStopFunction={volumeCheckStopFunction_Mic}
/>
<DropdownMenuContainer
dropdown_id="speaker_device"
label={t("config_page.speaker_device.label")}
@@ -88,13 +106,14 @@ export const Device = () => {
openListFunction={getSpeakerDeviceList}
state={currentSelectedSpeakerDevice.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"/> */}
<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="4000"
/>
</>
);
};