[decrease-volume-on-speak] - upgrades as suggested by users

Author: GuiLeme

src/decrease-volume-on-talk/component.tsx

@@ -1,8 +1,9 @@
 import * as React from 'react';
 import { useEffect } from 'react';
 
-import { BbbPluginSdk, PluginApi } from 'bigbluebutton-html-plugin-sdk';
-import { DecreaseVolumeOnSpeakProps } from './types';
+import { BbbPluginSdk, ExternalVideoVolumeEventsNames, PluginApi } from 'bigbluebutton-html-plugin-sdk';
+import { DecreaseVolumeOnSpeakProps, ExternalVideoMeetingSubscription } from './types';
+import MEETING_SUBSCRIPTION from './subscription';
 
 function DecreaseVolumeOnSpeak(
   { pluginUuid: uuid }: DecreaseVolumeOnSpeakProps,
@@ -11,34 +12,62 @@ function DecreaseVolumeOnSpeak(
 
   const pluginApi: PluginApi = BbbPluginSdk.getPluginApi(uuid);
   const intervalId = React.useRef<NodeJS.Timeout>(null);
+  const volumeSetByUser = React.useRef(1);
+  const volumeSetByMachine = React.useRef(1);
+  const externalVideoData = pluginApi.useCustomSubscription<ExternalVideoMeetingSubscription>(
+    MEETING_SUBSCRIPTION,
+  );
+
+  const setVolume = (volume: number) => {
+    pluginApi.uiCommands.externalVideo.volume.set({
+      volume,
+    });
+    volumeSetByMachine.current = volume;
+  };
+
+  const [isSomeoneTalking, setIsSomeoneTalking] = React.useState(false);
 
   const talkingIndicatorResult = pluginApi.useTalkingIndicator();
 
   const talkingIndicatorList = talkingIndicatorResult.data;
 
+  pluginApi.useUiEvent(
+    ExternalVideoVolumeEventsNames.VOLUME_VALUE_CHANGED,
+    (value) => {
+      if (value.detail.value * 100 !== volumeSetByMachine.current * 100) {
+        volumeSetByUser.current = value.detail.value;
+      }
+    },
+  );
+
+  useEffect(() => {
+    if (talkingIndicatorList?.some((userVoice) => userVoice.talking) !== isSomeoneTalking) {
+      setIsSomeoneTalking(talkingIndicatorList?.some((userVoice) => userVoice.talking));
+    }
+  }, [talkingIndicatorResult]);
+
   useEffect(() => {
-    if (talkingIndicatorList?.some((userVoice) => userVoice.talking) && !intervalId.current) {
+    if (isSomeoneTalking && !intervalId.current
+      && externalVideoData.data?.meeting[0]?.externalVideo?.playerPlaying) {
       let counter = 1;
       const total = 10;
       const finalVolume = 0.2;
-      const percentage = (1 - 1 * finalVolume) / total;
+      const partToSubtract = (
+        volumeSetByUser.current - volumeSetByUser.current * finalVolume) / total;
       intervalId.current = setInterval(() => {
-        pluginApi.uiCommands.externalVideo.volume.set({
-          volume: 1 - counter * percentage,
-        });
+        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 (
-      !talkingIndicatorList?.some((userVoice) => userVoice.talking) && !intervalId.current) {
-      pluginApi.uiCommands.externalVideo.volume.set({
-        volume: 1,
-      });
+      !isSomeoneTalking && !intervalId.current) {
+      setVolume(volumeSetByUser.current);
     }
-  }, [talkingIndicatorResult]);
+  }, [isSomeoneTalking]);
 
   return null;
 }

src/decrease-volume-on-talk/subscription.ts

@@ -0,0 +1,12 @@
+const MEETING_SUBSCRIPTION = `
+subscription MeetingSubscription {
+    meeting {
+        externalVideo {
+            playerPlaying
+            externalVideoUrl
+        }
+    }
+}
+`;
+
+export default MEETING_SUBSCRIPTION;

src/decrease-volume-on-talk/types.ts

@@ -3,4 +3,13 @@ interface DecreaseVolumeOnSpeakProps {
     pluginUuid: string,
 }
 
-export { DecreaseVolumeOnSpeakProps };
+interface ExternalVideoMeetingSubscription {
+    meeting: {
+        externalVideo: {
+            playerPlaying: boolean
+            externalVideoUrl: string
+        }
+    }[]
+}
+
+export { DecreaseVolumeOnSpeakProps, ExternalVideoMeetingSubscription };