Fix/ifb issues (#390)

Co-authored-by: Linda Malm <lindamalm@Lindas-MacBook-Pro.local>

Author: malmen237

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<number | null>(null);
+  const shouldReduceVolumeRef = useRef(false);
 
   useEffect(() => {
     if (isProgramOutputAdded) {
@@ -25,24 +25,49 @@ export const useSpeakerDetection = ({
     }
   }, [calls, isProgramOutputAdded]);
 
+  const startTimeoutRef = useRef<number | null>(null);
+  const stopTimeoutRef = useRef<number | null>(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 () => {
       if (startTimeoutRef.current !== null) {
         window.clearTimeout(startTimeoutRef.current);
         startTimeoutRef.current = null;
       }
+      if (stopTimeoutRef.current !== null) {
+        window.clearTimeout(stopTimeoutRef.current);
+        stopTimeoutRef.current = null;
+      }
     };
-  }, [isSomeoneSpeaking, shouldReduceVolume]);
+  }, [isSomeoneSpeaking]);
 
   return { isSomeoneSpeaking, shouldReduceVolume };
 };

src/components/production-line/use-volume-reducer.tsx

@@ -12,7 +12,6 @@ export const useVolumeReducer = ({
   shouldReduceVolume: boolean;
   value: number;
 }) => {
-  const increaseVolumeTimeoutRef = useRef<number | null>(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]);
 };