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

[Update] Config Page: Device Tab. Threshold section. Add check volume button and remove dev component.

Browse Source
This commit is contained in:
Sakamoto Shiina
2024-09-11 00:33:09 +09:00
parent e1d8f59890
commit 4d9a6fedb7
10 changed files with 108 additions and 104 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
src-ui/app/config_page/setting_section/setting_box/components/threshold_component/ThresholdComponent.jsx
View File

@@ -3,11 +3,10 @@ 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";
import { useVolume } from "@logics/useVolume";
export const ThresholdComponent = (props) => {
return (
<div className={styles.container}>
<VolumeCheckButton {...props} />
{props.id === "mic_threshold"
? <MicComponent {...props} />
: <SpeakerComponent {...props} />
@@ -15,11 +14,13 @@ export const ThresholdComponent = (props) => {
</div>
);
};
import MicSvg from "@images/mic.svg?react";
import { useMicThreshold } from "@logics_configs/useMicThreshold";
const MicComponent = (props) => {
const { currentMicThreshold, setMicThreshold } = useMicThreshold();
const [ui_threshold, setUiThreshold] = useState(currentMicThreshold);
const {volumeCheckStart_Mic, volumeCheckStop_Mic, currentMicThresholdCheckStatus } = useVolume();
useEffect(() => {
setUiThreshold(currentMicThreshold);
@@ -34,6 +35,13 @@ const MicComponent = (props) => {
return (
<>
<VolumeCheckButton
{...props}
SvgComponent={MicSvg}
startFunction={volumeCheckStart_Mic}
stopFunction={volumeCheckStop_Mic}
isChecking={currentMicThresholdCheckStatus}
/>
<SliderAndMeter
{...props}
ui_threshold={ui_threshold}
@@ -49,11 +57,12 @@ const MicComponent = (props) => {
</>
);
};
import HeadphonesSvg from "@images/headphones.svg?react";
import { useSpeakerThreshold } from "@logics_configs/useSpeakerThreshold";
const SpeakerComponent = (props) => {
const { currentSpeakerThreshold, setSpeakerThreshold } = useSpeakerThreshold();
const [ui_threshold, setUiThreshold] = useState(currentSpeakerThreshold);
const {volumeCheckStart_Speaker, volumeCheckStop_Speaker, currentSpeakerThresholdCheckStatus } = useVolume();
useEffect(() => {
setUiThreshold(currentSpeakerThreshold);
@@ -68,6 +77,13 @@ const SpeakerComponent = (props) => {
return (
<>
<VolumeCheckButton
{...props}
SvgComponent={HeadphonesSvg}
startFunction={volumeCheckStart_Speaker}
stopFunction={volumeCheckStop_Speaker}
isChecking={currentSpeakerThresholdCheckStatus}
/>
<SliderAndMeter
{...props}
ui_threshold={ui_threshold}

2
src-ui/app/config_page/setting_section/setting_box/components/threshold_component/ThresholdComponent.module.scss
View File

@@ -3,5 +3,5 @@
width: 100%;
justify-content: space-between;
align-items: center;
gap: 3rem;
gap: 2rem;
}

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

@@ -5,8 +5,6 @@ import {
useStore_SpeakerVolume,
} from "@store";
import { useVolume } from "@logics/useVolume";
export const SliderAndMeter = (props) => {
return (
<div className={styles.container}>
@@ -16,7 +14,6 @@ export const SliderAndMeter = (props) => {
: <ThresholdVolumeMeter_Speaker {...props}/>
}
</div>
<DevSection {...props}/>
</div>
);
};
@@ -80,44 +77,4 @@ const VolumeMeter = ({ volume_width_percentage, volume, threshold }) => {
}}
/>
);
};
const DevSection = (props) => {
const {
volumeCheckStart_Mic,
volumeCheckStop_Mic,
volumeCheckStart_Speaker,
volumeCheckStop_Speaker,
} = useVolume();
const volumeCheckStart = () => {
if (props.id === "mic_threshold") {
volumeCheckStart_Mic();
} else if (props.id === "speaker_threshold") {
volumeCheckStart_Speaker();
}
};
const volumeCheckStop = () => {
if (props.id === "mic_threshold") {
volumeCheckStop_Mic();
} else if (props.id === "speaker_threshold") {
volumeCheckStop_Speaker();
}
};
return (
<div className={styles.dev_info_box}>
<p>dev</p>
<button className={styles.volume_check_button} onClick={() => volumeCheckStart()}>Start</button>
<button className={styles.volume_check_button} onClick={() => volumeCheckStop()}>Stop</button>
<div className={styles.volume_info}>
{/* <span>Current Volume: {(currentVolumeVariable)}</span> */}
</div>
<div className={styles.threshold_info}>
{/* <span>Threshold: {props.threshold}</span> */}
</div>
</div>
);
};

29
src-ui/app/config_page/setting_section/setting_box/components/threshold_component/slider_and_meter/SliderAndMeter.module.scss
View File

@@ -52,33 +52,4 @@
&:focus {
outline: none;
}
}
// for dev
.dev_info_box {
position: absolute;
top: -4rem;
display: flex;
gap: 2rem
}
.volume_info, .threshold_info {
font-size: 1.2rem;
}
.volume_check_button {
font-size: 1.4rem;
background-color: var(--dark_800_color);
padding: 1rem;
cursor: pointer;
&:hover {
background-color: var(--dark_775_color);
}
}

2
src-ui/app/config_page/setting_section/setting_box/components/threshold_component/threshold_entry/ThresholdEntry.module.scss
View File

@@ -2,7 +2,7 @@
}
.entry_wrapper {
width: 10rem;
width: 6rem;
height: 100%;
padding: 0.6rem;
background-color: var(--dark_875_color);

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

@@ -1,31 +1,27 @@
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 = 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,
[styles.is_active]: (props.isChecking?.data === true),
[styles.is_loading]: (props.isChecking.state === "loading"),
});
// const {
// volumeCheckStart_Mic,
// volumeCheckStop_Mic,
// } = useVolume();
const toggleFunction = () => {
if (props.isChecking?.data === true) {
props.stopFunction();
} else if (props.isChecking?.data === false) {
props.startFunction();
}
};
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 className={getClassNames(styles.button)} onClick={toggleFunction}>
<props.SvgComponent className={styles.button_svg} />
<p className={styles.button_text}>Check Volume</p>
</div>
</div>
);

39
src-ui/app/config_page/setting_section/setting_box/components/threshold_component/volume_check_button/VolumeCheckButton.module.scss
View File

@@ -1,14 +1,45 @@
.button_button {
.button {
width: 100%;
background-color: var(--dark_800_color);
display: flex;
justify-content: center;
align-items: center;
padding: 1rem;
border-radius: 50%;
padding: 0.8rem 1rem;
border-radius: 0.4rem;
gap: 0.4rem;
cursor: pointer;
&.is_active {
background-color: var(--primary_500_color);
&:hover {
background-color: var(--primary_450_color);
}
&:active {
background-color: var(--primary_550_color);
}
}
&.is_loading {
background-color: var(--dark_850_color);
pointer-events: none;
.button_svg, .button_text {
color: var(--dark_500_color);
}
}
&:hover {
background-color: var(--dark_775_color);
}
&:active {
background-color: var(--dark_850_color);
}
}
.button_svg {
width: 2.6rem;
width: 1.4rem;
color: var(--dark_350_color);
}
.button_text {
font-size: 1.2rem;
color: var(--dark_basic_text_color);
}

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

@@ -42,7 +42,12 @@ export const useReceiveRoutes = () => {
const { updateSendMessageButtonType } = useSendMessageButtonType();
const { updateVolumeVariable_Mic, updateVolumeVariable_Speaker } = useVolume();
const {
updateVolumeVariable_Mic,
updateVolumeVariable_Speaker,
updateMicThresholdCheckStatus,
updateSpeakerThresholdCheckStatus,
} = useVolume();
const routes = {
"/controller/callback_enable_translation": updateTranslationStatus,
@@ -72,6 +77,10 @@ export const useReceiveRoutes = () => {
"/action/check_mic_threshold_energy": updateVolumeVariable_Mic,
"/action/check_speaker_threshold_energy": updateVolumeVariable_Speaker,
"/controller/callback_enable_check_mic_threshold": () => updateMicThresholdCheckStatus(true),
"/controller/callback_disable_check_mic_threshold": () => updateMicThresholdCheckStatus(false),
"/controller/callback_enable_check_speaker_threshold": () => updateSpeakerThresholdCheckStatus(true),
"/controller/callback_disable_check_speaker_threshold": () => updateSpeakerThresholdCheckStatus(false),
"/config/enable_auto_clear_message_box": updateEnableAutoClearMessageBox,
"/controller/callback_enable_auto_clear_chatbox": updateEnableAutoClearMessageBox,

29
src-ui/logics/useVolume.js
View File

@@ -1,6 +1,8 @@
import {
useStore_MicVolume,
useStore_SpeakerVolume,
useStore_MicThresholdCheckStatus,
useStore_SpeakerThresholdCheckStatus,
} from "@store";
import { useStdoutToPython } from "@logics/useStdoutToPython";
@@ -9,19 +11,38 @@ export const useVolume = () => {
const { asyncStdoutToPython } = useStdoutToPython();
const { updateMicVolume } = useStore_MicVolume();
const { updateSpeakerVolume } = useStore_SpeakerVolume();
const { currentMicThresholdCheckStatus, updateMicThresholdCheckStatus } = useStore_MicThresholdCheckStatus();
const { currentSpeakerThresholdCheckStatus, updateSpeakerThresholdCheckStatus } = useStore_SpeakerThresholdCheckStatus();
const asyncPending = () => new Promise(() => {});
return {
volumeCheckStart_Mic: () => asyncStdoutToPython("/controller/callback_enable_check_mic_threshold"),
volumeCheckStop_Mic: () => asyncStdoutToPython("/controller/callback_disable_check_mic_threshold"),
volumeCheckStart_Mic: () => {
updateMicThresholdCheckStatus(asyncPending);
asyncStdoutToPython("/controller/callback_enable_check_mic_threshold");
},
volumeCheckStop_Mic: () => {
updateMicThresholdCheckStatus(asyncPending);
asyncStdoutToPython("/controller/callback_disable_check_mic_threshold");
},
updateVolumeVariable_Mic: (payload) => {
updateMicVolume(payload);
},
currentMicThresholdCheckStatus: currentMicThresholdCheckStatus,
updateMicThresholdCheckStatus: (payload) => updateMicThresholdCheckStatus(payload),
volumeCheckStart_Speaker: () => asyncStdoutToPython("/controller/callback_enable_check_speaker_threshold"),
volumeCheckStop_Speaker: () => asyncStdoutToPython("/controller/callback_disable_check_speaker_threshold"),
volumeCheckStart_Speaker: () => {
updateSpeakerThresholdCheckStatus(asyncPending);
asyncStdoutToPython("/controller/callback_enable_check_speaker_threshold");
},
volumeCheckStop_Speaker: () => {
updateSpeakerThresholdCheckStatus(asyncPending);
asyncStdoutToPython("/controller/callback_disable_check_speaker_threshold");
},
updateVolumeVariable_Speaker: (payload) => {
updateSpeakerVolume(payload);
},
currentSpeakerThresholdCheckStatus: currentSpeakerThresholdCheckStatus,
updateSpeakerThresholdCheckStatus: (payload) => updateSpeakerThresholdCheckStatus(payload),
};
};

3
src-ui/store.js
View File

@@ -127,6 +127,9 @@ export const { atomInstance: Atom_SelectedSpeakerDevice, useHook: useStore_Selec
export const { atomInstance: Atom_MicVolume, useHook: useStore_MicVolume } = createAsyncAtomWithHook(0, "MicVolume");
export const { atomInstance: Atom_SpeakerVolume, useHook: useStore_SpeakerVolume } = createAsyncAtomWithHook(0, "SpeakerVolume");
export const { atomInstance: Atom_MicThresholdCheckStatus, useHook: useStore_MicThresholdCheckStatus } = createAsyncAtomWithHook(false, "MicThresholdCheckStatus");
export const { atomInstance: Atom_SpeakerThresholdCheckStatus, useHook: useStore_SpeakerThresholdCheckStatus } = createAsyncAtomWithHook(false, "SpeakerThresholdCheckStatus");
export const { atomInstance: Atom_MicThreshold, useHook: useStore_MicThreshold } = createAtomWithHook(0, "MicThreshold");
export const { atomInstance: Atom_SpeakerThreshold, useHook: useStore_SpeakerThreshold } = createAtomWithHook(0, "SpeakerThreshold");