[decrease-volume-on-speak] - fix behavior and refactor

Author: GuiLeme

package-lock.json

@@ -10,7 +10,7 @@
     "@types/react": "^18.2.13",
     "@types/react-dom": "^18.2.6",
     "babel-plugin-syntax-dynamic-import": "^6.18.0",
-    "bigbluebutton-html-plugin-sdk": "0.0.35",
+    "bigbluebutton-html-plugin-sdk": "0.0.38",
     "path": "^0.12.7",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

package.json

@@ -1,28 +1,36 @@
 import * as React from 'react';
 import { useEffect } from 'react';
 
-import { BbbPluginSdk, ExternalVideoVolumeEventsNames, PluginApi } from 'bigbluebutton-html-plugin-sdk';
+import { BbbPluginSdk, ExternalVideoVolumeUiDataNames, PluginApi } from 'bigbluebutton-html-plugin-sdk';
 import { DecreaseVolumeOnSpeakProps, ExternalVideoMeetingSubscription } from './types';
 import MEETING_SUBSCRIPTION from './subscription';
 
+const intervalBetweenIteration = 100; // In milliseconds
+const totalIterationsToDecrease = 10;
+const finalVolumeTarget = 0.2;
+
 function DecreaseVolumeOnSpeak(
   { pluginUuid: uuid }: DecreaseVolumeOnSpeakProps,
 ): React.ReactElement {
   BbbPluginSdk.initialize(uuid);
 
   const pluginApi: PluginApi = BbbPluginSdk.getPluginApi(uuid);
-  const intervalId = React.useRef<NodeJS.Timeout>(null);
+  const [isDecreasingVolume, setIsDecreasingVolume] = React.useState(false);
   const volumeSetByUser = React.useRef(1);
-  const volumeSetByMachine = React.useRef(1);
+  const lastVolumeSetByMachine = React.useRef<number>(null);
+  const volumeSetByMachine = React.useRef<number[]>([]);
   const externalVideoData = pluginApi.useCustomSubscription<ExternalVideoMeetingSubscription>(
     MEETING_SUBSCRIPTION,
   );
+  const { value: isMuted } = pluginApi.useUiData(ExternalVideoVolumeUiDataNames.IS_VOLUME_MUTED, {
+    value: false,
+  });
 
   const setVolume = (volume: number) => {
     pluginApi.uiCommands.externalVideo.volume.set({
       volume,
     });
-    volumeSetByMachine.current = volume;
+    volumeSetByMachine.current.push(volume);
   };
 
   const [isSomeoneTalking, setIsSomeoneTalking] = React.useState(false);
@@ -31,14 +39,18 @@ function DecreaseVolumeOnSpeak(
 
   const talkingIndicatorList = talkingIndicatorResult.data;
 
-  pluginApi.useUiEvent(
-    ExternalVideoVolumeEventsNames.VOLUME_VALUE_CHANGED,
-    (value) => {
-      if (value.detail.value * 100 !== volumeSetByMachine.current * 100) {
-        volumeSetByUser.current = value.detail.value;
-      }
-    },
-  );
+  const volumeFromUiDataHook = pluginApi.useUiData(ExternalVideoVolumeUiDataNames
+    .CURRENT_VOLUME_VALUE, { value: 1 });
+
+  useEffect(() => {
+    if (
+      volumeSetByMachine.current.findIndex(
+        (vol) => volumeFromUiDataHook.value * 100 !== vol * 100,
+      ) === -1
+    ) {
+      volumeSetByUser.current = volumeFromUiDataHook.value;
+    }
+  }, [volumeFromUiDataHook]);
 
   useEffect(() => {
     if (talkingIndicatorList?.some((userVoice) => userVoice.talking) !== isSomeoneTalking) {
@@ -47,27 +59,33 @@ function DecreaseVolumeOnSpeak(
   }, [talkingIndicatorResult]);
 
   useEffect(() => {
-    if (isSomeoneTalking && !intervalId.current
-      && externalVideoData.data?.meeting[0]?.externalVideo?.playerPlaying) {
-      let counter = 1;
-      const total = 10;
-      const finalVolume = 0.2;
-      const partToSubtract = (
-        volumeSetByUser.current - volumeSetByUser.current * finalVolume) / total;
-      intervalId.current = setInterval(() => {
-        const volumeToSet = Math.floor((volumeSetByUser.current - counter * partToSubtract) * 100);
-        setVolume(volumeToSet / 100);
-        if (counter === total) {
-          clearInterval(intervalId.current);
-          intervalId.current = null;
-        }
-        counter += 1;
-      }, 100);
-    } else if (
-      !isSomeoneTalking && !intervalId.current) {
-      setVolume(volumeSetByUser.current);
+    if (isSomeoneTalking && !isDecreasingVolume
+      && volumeSetByMachine.current.length < totalIterationsToDecrease
+      && externalVideoData.data?.meeting[0]?.externalVideo?.playerPlaying
+      && !isMuted) {
+      setIsDecreasingVolume(true);
+      const currentVolumeSetByUser = volumeSetByUser.current;
+      const partToSubtract = (currentVolumeSetByUser * (
+        1 - finalVolumeTarget)) / totalIterationsToDecrease;
+      for (let i = 0; i < totalIterationsToDecrease; i += 1) {
+        const vol = currentVolumeSetByUser - partToSubtract * i;
+        const volumeToSet = Math.floor((vol) * 100);
+        setTimeout(() => {
+          setVolume(volumeToSet / 100);
+          if (i === totalIterationsToDecrease - 1) {
+            lastVolumeSetByMachine.current = volumeToSet / 100;
+            setIsDecreasingVolume(false);
+          }
+        }, intervalBetweenIteration * i);
+      }
+    } else if (!isDecreasingVolume
+      && !isSomeoneTalking && volumeSetByMachine.current.length >= totalIterationsToDecrease) {
+      volumeSetByMachine.current = [];
+      pluginApi.uiCommands.externalVideo.volume.set({
+        volume: volumeSetByUser.current,
+      });
     }
-  }, [isSomeoneTalking]);
+  }, [isSomeoneTalking, isDecreasingVolume]);
 
   return null;
 }