feat(plugins): set away and set speaker level ui commands (#21336)

* feat(plugins): set away and set speaker level ui commands

Adds set away and set speaker level to plugins ui commands.

* fix(plugins): clear event listener in ui commands

Properly remove event listener in user status and conference ui
commands.

* chore: sync SDK version

Updates SDK to v0.0.62

* feat(plugins): adjust the set away command

Ensures the current away status is used to mute the microphone correctly
when the away status is set to true. Additionaly, adds a dependency array
for the pertinent values to be updated in the event listener callback.

* chore: update SDK version

Updates SDK to v0.0.65

* chore: update SDK version to 0.0.66

Updates SDK to v0.0.66

bigbluebutton-html5/imports/ui/components/plugins-engine/ui-commands/conference/handler.tsx

@@ -0,0 +1,28 @@
+import { useEffect } from 'react';
+import { ConferenceEnum } from 'bigbluebutton-html-plugin-sdk/dist/cjs/ui-commands/conference/enums';
+import { SetSpeakerLevelCommandArguments } from 'bigbluebutton-html-plugin-sdk/dist/cjs/ui-commands/conference/types';
+import { setSpeakerLevel } from '../../../audio/audio-graphql/audio-controls/input-stream-live-selector/service';
+
+const PluginConferenceUiCommandsHandler = () => {
+  const handleSetSpeakerLevel = (event: CustomEvent<SetSpeakerLevelCommandArguments>) => {
+    const { level } = event.detail;
+    setSpeakerLevel(level);
+  };
+
+  useEffect(() => {
+    window.addEventListener(
+      ConferenceEnum.SET_SPEAKER_LEVEL,
+      handleSetSpeakerLevel as EventListener,
+    );
+
+    return () => {
+      window.removeEventListener(
+        ConferenceEnum.SET_SPEAKER_LEVEL,
+        handleSetSpeakerLevel as EventListener,
+      );
+    };
+  }, []);
+  return null;
+};
+
+export default PluginConferenceUiCommandsHandler;

bigbluebutton-html5/imports/ui/components/plugins-engine/ui-commands/handler.tsx

@@ -2,12 +2,16 @@ import * as React from 'react';
 import PluginChatUiCommandsHandler from './chat/handler';
 import PluginSidekickOptionsContainerUiCommandsHandler from './sidekick-options-container/handler';
 import PluginPresentationAreaUiCommandsHandler from './presentation/handler';
+import PluginUserStatusUiCommandsHandler from './user-status/handler';
+import PluginConferenceUiCommandsHandler from './conference/handler';
 
 const PluginUiCommandsHandler = () => (
   <>
     <PluginChatUiCommandsHandler />
     <PluginSidekickOptionsContainerUiCommandsHandler />
     <PluginPresentationAreaUiCommandsHandler />
+    <PluginUserStatusUiCommandsHandler />
+    <PluginConferenceUiCommandsHandler />
   </>
 );
 

bigbluebutton-html5/imports/ui/components/plugins-engine/ui-commands/user-status/handler.tsx

@@ -0,0 +1,53 @@
+import { useEffect } from 'react';
+import { useMutation } from '@apollo/client';
+import { muteAway } from '/imports/ui/components/audio/audio-graphql/audio-controls/input-stream-live-selector/service';
+import useToggleVoice from '/imports/ui/components/audio/audio-graphql/hooks/useToggleVoice';
+import { SET_AWAY } from '/imports/ui/components/user-list/user-list-content/user-participants/user-list-participants/user-actions/mutations';
+import useWhoIsUnmuted from '/imports/ui/core/hooks/useWhoIsUnmuted';
+import useCurrentUser from '/imports/ui/core/hooks/useCurrentUser';
+import Auth from '/imports/ui/services/auth';
+import { SetAwayStatusCommandArguments } from 'bigbluebutton-html-plugin-sdk/dist/cjs/ui-commands/user-status/types';
+import { UserStatusEnum } from 'bigbluebutton-html-plugin-sdk/dist/cjs/ui-commands/user-status/enums';
+
+const PluginUserStatusUiCommandsHandler = () => {
+  const [setAway] = useMutation(SET_AWAY);
+  const { data: unmutedUsers } = useWhoIsUnmuted();
+  const { data: currentUserData } = useCurrentUser((user) => ({
+    away: user.away,
+  }));
+  const voiceToggle = useToggleVoice();
+  const muted = !unmutedUsers[Auth.userID as string];
+
+  const handleUserStatusAway = (event: CustomEvent<SetAwayStatusCommandArguments>) => {
+    const { away: targetAwayStatus } = event.detail;
+    const { away: currentAwayStatus } = currentUserData as { away: boolean };
+
+    if (targetAwayStatus === currentAwayStatus) return;
+    muteAway(muted, currentAwayStatus, voiceToggle);
+    setAway({
+      variables: {
+        away: targetAwayStatus,
+      },
+    });
+  };
+
+  useEffect(() => {
+    // add event listener only when the subscription for
+    // current user information is valid
+    if (!currentUserData) return () => {};
+    window.addEventListener(
+      UserStatusEnum.SET_AWAY_STATUS,
+      handleUserStatusAway as EventListener,
+    );
+
+    return () => {
+      window.removeEventListener(
+        UserStatusEnum.SET_AWAY_STATUS,
+        handleUserStatusAway as EventListener,
+      );
+    };
+  }, [unmutedUsers, currentUserData]);
+  return null;
+};
+
+export default PluginUserStatusUiCommandsHandler;