[Update/WIP] Config Page: Device Tab. 音量チェックができるように(Dev)

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

@@ -2,64 +2,123 @@ import { useState } from "react";
 import styles from "./SliderAndMeter.module.scss";
 import {
     useMicVolume,
+    useSpeakerVolume,
 } from "@store";
 
 import { useVolume } from "@logics/useVolume";
 
 export const SliderAndMeter = (props) => {
-    const [threshold, setThreshold] = useState(props.max / 2);
-    const { currentMicVolume, updateMicVolume } = useMicVolume();
-
-    const updateVolume = () => {
-        updateMicVolume(Math.random());
-    };
-
-    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}>
             <div className={styles.meter_container}>
-                <div
-                    className={styles.volume_meter}
-                    style={{
-                        width: `${volume_width_percentage}%`,
-                        backgroundColor: (currentVolumeVariable < threshold) ? "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={() => volumeCheckStart_Mic()}>Start</button>
-                <button onClick={() => volumeCheckStop_Mic()}>Stop</button>
-                <button onClick={() => updateVolume()}>update volume</button>
-                <div className={styles.volume_info}>
-                    <span>Current Volume: {(currentVolumeVariable)}</span>
-                </div>
-                <div className={styles.threshold_info}>
-                    <span>Threshold: {threshold}</span>
-                </div>
+                {props.id === "mic_threshold"
+                    ? <ThresholdVolumeMeter_Mic min={props.min} max={props.max}/>
+                    : <ThresholdVolumeMeter_Speaker min={props.min} max={props.max}/>
+                }
             </div>
+            <DevSection {...props}/>
         </div>
     );
 };
+
+
+const ThresholdVolumeMeter_Mic = ({min, max}) => {
+    const [threshold, setThreshold] = useState(max / 2);
+
+    const { currentMicVolume } = useMicVolume();
+
+    const currentVolumeVariable = Math.min(currentMicVolume.data, max);
+    const volume_width_percentage = (currentVolumeVariable / max) * 100;
+
+    return (
+        <>
+            <VolumeMeter volume_width_percentage={volume_width_percentage} volume={currentVolumeVariable} threshold={threshold}/>
+            <input
+                type="range"
+                min={min}
+                max={max}
+                value={threshold}
+                onChange={(e) => setThreshold(e.target.value)}
+                className={styles.threshold_slider}
+            />
+        </>
+    );
+};
+
+
+const ThresholdVolumeMeter_Speaker = ({min, max}) => {
+    const [threshold, setThreshold] = useState(max / 2);
+
+    const { currentSpeakerVolume } = useSpeakerVolume();
+
+    const currentVolumeVariable = Math.min(currentSpeakerVolume.data, max);
+    const volume_width_percentage = (currentVolumeVariable / max) * 100;
+
+    return (
+        <>
+            <VolumeMeter volume_width_percentage={volume_width_percentage} volume={currentSpeakerVolume} threshold={threshold}/>
+                <input
+                type="range"
+                min={min}
+                max={max}
+                value={threshold}
+                onChange={(e) => setThreshold(e.target.value)}
+                className={styles.threshold_slider}
+            />
+        </>
+    );
+};
+
+
+const VolumeMeter = ({ volume_width_percentage, volume, threshold }) => {
+
+    return (
+        <div
+            className={styles.volume_meter}
+            style={{
+                width: `${volume_width_percentage}%`,
+                backgroundColor: (volume < threshold) ? "var(--primary_750_color)" : "var(--primary_400_color)"
+            }}
+        />
+    );
+};
+
+
+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>
+    );
+};

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

@@ -54,16 +54,6 @@
     }
 }
 
-.volume_info, .threshold_info {
-    font-size: 1.2rem;
-}
-
-
-
-
-
-
-
 
 
 
@@ -73,4 +63,22 @@
     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);
+    }
 }

src-ui/logics/useReceiveRoutes.js

@@ -28,7 +28,7 @@ export const useReceiveRoutes = () => {
         updateSelectedSpeakerDevice,
     } = useConfig();
 
-    const { updateVolumeVariable_Mic } = useVolume();
+    const { updateVolumeVariable_Mic, updateVolumeVariable_Speaker } = useVolume();
 
     const routes = {
         "/controller/callback_enable_translation": updateTranslationStatus,
@@ -54,6 +54,7 @@ export const useReceiveRoutes = () => {
         "/controller/callback_set_speaker_device": updateSelectedSpeakerDevice,
 
         "/action/check_mic_threshold_energy": updateVolumeVariable_Mic,
+        "/action/check_speaker_threshold_energy": updateVolumeVariable_Speaker,
 
 
         "/controller/callback_messagebox_send": updateSentMessageLog,

src-ui/logics/useVolume.js

@@ -1,5 +1,6 @@
 import {
     useMicVolume,
+    useSpeakerVolume,
 } from "@store";
 
 import { useStdoutToPython } from "./useStdoutToPython";
@@ -8,6 +9,7 @@ import { useStdoutToPython } from "./useStdoutToPython";
 export const useVolume = () => {
     const { asyncStdoutToPython } = useStdoutToPython();
     const { updateMicVolume } = useMicVolume();
+    const { updateSpeakerVolume } = useSpeakerVolume();
 
     // const asyncPending = () => new Promise(() => {});
     return {
@@ -15,6 +17,12 @@ export const useVolume = () => {
         volumeCheckStop_Mic: () => asyncStdoutToPython("/controller/callback_disable_check_mic_threshold"),
         updateVolumeVariable_Mic: (payload) => {
             updateMicVolume(payload.data);
+        },
+
+        volumeCheckStart_Speaker: () => asyncStdoutToPython("/controller/callback_enable_check_speaker_threshold"),
+        volumeCheckStop_Speaker: () => asyncStdoutToPython("/controller/callback_disable_check_speaker_threshold"),
+        updateVolumeVariable_Speaker: (payload) => {
+            updateSpeakerVolume(payload.data);
         }