diff --git a/src/components/calls-page/use-speaker-detection.tsx b/src/components/calls-page/use-speaker-detection.tsx index 8cff2fa4..2a8e5d94 100644 --- a/src/components/calls-page/use-speaker-detection.tsx +++ b/src/components/calls-page/use-speaker-detection.tsx @@ -10,7 +10,7 @@ export const useSpeakerDetection = ({ }) => { const [isSomeoneSpeaking, setIsSomeoneSpeaking] = useState(false); const [shouldReduceVolume, setShouldReduceVolume] = useState(false); - const startTimeoutRef = useRef(null); + const shouldReduceVolumeRef = useRef(false); useEffect(() => { if (isProgramOutputAdded) { @@ -25,15 +25,36 @@ export const useSpeakerDetection = ({ } }, [calls, isProgramOutputAdded]); + const startTimeoutRef = useRef(null); + const stopTimeoutRef = useRef(null); + useEffect(() => { if (isSomeoneSpeaking) { - if (!shouldReduceVolume) { + if (stopTimeoutRef.current !== null) { + window.clearTimeout(stopTimeoutRef.current); + stopTimeoutRef.current = null; + } + + if (!shouldReduceVolumeRef.current && startTimeoutRef.current === null) { startTimeoutRef.current = window.setTimeout(() => { + shouldReduceVolumeRef.current = true; setShouldReduceVolume(true); + startTimeoutRef.current = null; + }, 1000); + } + } else { + if (startTimeoutRef.current !== null) { + window.clearTimeout(startTimeoutRef.current); + startTimeoutRef.current = null; + } + + if (shouldReduceVolumeRef.current && stopTimeoutRef.current === null) { + stopTimeoutRef.current = window.setTimeout(() => { + shouldReduceVolumeRef.current = false; + setShouldReduceVolume(false); + stopTimeoutRef.current = null; }, 1000); } - } else if (shouldReduceVolume) { - setShouldReduceVolume(false); } return () => { @@ -41,8 +62,12 @@ export const useSpeakerDetection = ({ window.clearTimeout(startTimeoutRef.current); startTimeoutRef.current = null; } + if (stopTimeoutRef.current !== null) { + window.clearTimeout(stopTimeoutRef.current); + stopTimeoutRef.current = null; + } }; - }, [isSomeoneSpeaking, shouldReduceVolume]); + }, [isSomeoneSpeaking]); return { isSomeoneSpeaking, shouldReduceVolume }; }; diff --git a/src/components/production-line/use-volume-reducer.tsx b/src/components/production-line/use-volume-reducer.tsx index c0f76bbf..b8984b32 100644 --- a/src/components/production-line/use-volume-reducer.tsx +++ b/src/components/production-line/use-volume-reducer.tsx @@ -12,7 +12,6 @@ export const useVolumeReducer = ({ shouldReduceVolume: boolean; value: number; }) => { - const increaseVolumeTimeoutRef = useRef(null); const hasReducedRef = useRef(false); useEffect(() => { @@ -30,20 +29,12 @@ export const useVolumeReducer = ({ } if (!shouldReduceVolume && hasReducedRef.current) { - increaseVolumeTimeoutRef.current = window.setTimeout(() => { - audioElements?.forEach((audioElement) => { - // eslint-disable-next-line no-param-reassign - audioElement.volume = value; - }); - hasReducedRef.current = false; - }, 2000); + audioElements?.forEach((audioElement) => { + // eslint-disable-next-line no-param-reassign + audioElement.volume = value; + }); + hasReducedRef.current = false; } } - - return () => { - if (increaseVolumeTimeoutRef.current) { - window.clearTimeout(increaseVolumeTimeoutRef.current); - } - }; }, [audioElements, line?.programOutputLine, shouldReduceVolume, value]); };