From 4d9a6fedb79775e2177c8eff0af40d6d8b1dea78 Mon Sep 17 00:00:00 2001 From: Sakamoto Shiina <68018796+ShiinaSakamoto@users.noreply.github.com> Date: Wed, 11 Sep 2024 00:33:09 +0900 Subject: [PATCH] [Update] Config Page: Device Tab. Threshold section. Add check volume button and remove dev component. --- .../ThresholdComponent.jsx | 24 +++++++++-- .../ThresholdComponent.module.scss | 2 +- .../slider_and_meter/SliderAndMeter.jsx | 43 ------------------- .../SliderAndMeter.module.scss | 29 ------------- .../ThresholdEntry.module.scss | 2 +- .../volume_check_button/VolumeCheckButton.jsx | 30 ++++++------- .../VolumeCheckButton.module.scss | 39 +++++++++++++++-- src-ui/logics/useReceiveRoutes.js | 11 ++++- src-ui/logics/useVolume.js | 29 +++++++++++-- src-ui/store.js | 3 ++ 10 files changed, 108 insertions(+), 104 deletions(-) diff --git a/src-ui/app/config_page/setting_section/setting_box/components/threshold_component/ThresholdComponent.jsx b/src-ui/app/config_page/setting_section/setting_box/components/threshold_component/ThresholdComponent.jsx index 1670b73f..f10c114e 100644 --- a/src-ui/app/config_page/setting_section/setting_box/components/threshold_component/ThresholdComponent.jsx +++ b/src-ui/app/config_page/setting_section/setting_box/components/threshold_component/ThresholdComponent.jsx @@ -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 (
- {props.id === "mic_threshold" ? : @@ -15,11 +14,13 @@ export const ThresholdComponent = (props) => {
); }; - +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 ( <> + { ); }; - +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 ( <> + { return (
@@ -16,7 +14,6 @@ export const SliderAndMeter = (props) => { : }
- ); }; @@ -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 ( -
-

dev

- - -
- {/* Current Volume: {(currentVolumeVariable)} */} -
-
- {/* Threshold: {props.threshold} */} -
-
- ); }; \ No newline at end of file diff --git a/src-ui/app/config_page/setting_section/setting_box/components/threshold_component/slider_and_meter/SliderAndMeter.module.scss b/src-ui/app/config_page/setting_section/setting_box/components/threshold_component/slider_and_meter/SliderAndMeter.module.scss index 68558a76..1ff43512 100644 --- a/src-ui/app/config_page/setting_section/setting_box/components/threshold_component/slider_and_meter/SliderAndMeter.module.scss +++ b/src-ui/app/config_page/setting_section/setting_box/components/threshold_component/slider_and_meter/SliderAndMeter.module.scss @@ -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); - } } \ No newline at end of file diff --git a/src-ui/app/config_page/setting_section/setting_box/components/threshold_component/threshold_entry/ThresholdEntry.module.scss b/src-ui/app/config_page/setting_section/setting_box/components/threshold_component/threshold_entry/ThresholdEntry.module.scss index cb6e470a..2f6a2522 100644 --- a/src-ui/app/config_page/setting_section/setting_box/components/threshold_component/threshold_entry/ThresholdEntry.module.scss +++ b/src-ui/app/config_page/setting_section/setting_box/components/threshold_component/threshold_entry/ThresholdEntry.module.scss @@ -2,7 +2,7 @@ } .entry_wrapper { - width: 10rem; + width: 6rem; height: 100%; padding: 0.6rem; background-color: var(--dark_875_color); diff --git a/src-ui/app/config_page/setting_section/setting_box/components/threshold_component/volume_check_button/VolumeCheckButton.jsx b/src-ui/app/config_page/setting_section/setting_box/components/threshold_component/volume_check_button/VolumeCheckButton.jsx index 4ed584ed..398f9b57 100644 --- a/src-ui/app/config_page/setting_section/setting_box/components/threshold_component/volume_check_button/VolumeCheckButton.jsx +++ b/src-ui/app/config_page/setting_section/setting_box/components/threshold_component/volume_check_button/VolumeCheckButton.jsx @@ -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 ( - //
volumeCheckStop_Mic()}>
-
- +
+ +

Check Volume

); diff --git a/src-ui/app/config_page/setting_section/setting_box/components/threshold_component/volume_check_button/VolumeCheckButton.module.scss b/src-ui/app/config_page/setting_section/setting_box/components/threshold_component/volume_check_button/VolumeCheckButton.module.scss index 00d07b69..622323fb 100644 --- a/src-ui/app/config_page/setting_section/setting_box/components/threshold_component/volume_check_button/VolumeCheckButton.module.scss +++ b/src-ui/app/config_page/setting_section/setting_box/components/threshold_component/volume_check_button/VolumeCheckButton.module.scss @@ -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); } \ No newline at end of file diff --git a/src-ui/logics/useReceiveRoutes.js b/src-ui/logics/useReceiveRoutes.js index e57cd785..badd556b 100644 --- a/src-ui/logics/useReceiveRoutes.js +++ b/src-ui/logics/useReceiveRoutes.js @@ -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, diff --git a/src-ui/logics/useVolume.js b/src-ui/logics/useVolume.js index ee0dc138..a1991159 100644 --- a/src-ui/logics/useVolume.js +++ b/src-ui/logics/useVolume.js @@ -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), }; }; \ No newline at end of file diff --git a/src-ui/store.js b/src-ui/store.js index 721a0b9d..9a161d83 100644 --- a/src-ui/store.js +++ b/src-ui/store.js @@ -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");