feat(plugin-meetings): add brb logic for plugin meetings when current user steps away or returns

docs/samples/browser-plugin-meetings/app.js

@@ -38,7 +38,7 @@ const breakoutsList = document.getElementById('breakouts-list');
 const breakoutTable = document.getElementById('breakout-table');
 const breakoutHostOperation = document.getElementById('breakout-host-operation');
 const getStatsButton = document.getElementById('get-stats');
-const tcpReachabilityConfigElm = document.getElementById('enable-tcp-reachability'); 
+const tcpReachabilityConfigElm = document.getElementById('enable-tcp-reachability');
 const tlsReachabilityConfigElm = document.getElementById('enable-tls-reachability');
 
 const guestName = document.querySelector('#guest-name');
@@ -388,7 +388,7 @@ createMeetingSelectElm.addEventListener('change', (event) => {
   }
   else {
      notes.classList.add('hidden');
-    
+
   }
 });
 
@@ -950,7 +950,7 @@ function cleanUpMedia() {
       elem.srcObject.getTracks().forEach((track) => track.stop());
       // eslint-disable-next-line no-param-reassign
       elem.srcObject = null;
-      
+
       if(elem.id === "local-video") {
         clearVideoResolutionCheckInterval(localVideoResElm, localVideoResolutionInterval);
       }
@@ -1566,7 +1566,7 @@ async function stopStartVideo() {
       console.error(error);
     }
   }
-  
+
 }
 
 async function stopStartAudio() {
@@ -1608,7 +1608,7 @@ async function stopStartAudio() {
       console.error(error);
     }
   }
-  
+
 }
 
 function populateSourceDevices(mediaDevice) {
@@ -3052,6 +3052,11 @@ function moveFromDevice() {
   });
 }
 
+function isUserSelf(member) {
+  const meeting = getCurrentMeeting();
+  return meeting.selfId === member.id
+}
+
 function claimPersonalMeetingRoom() {
   console.log('DevicesControls#claimPersonalMeetingRoom()');
 
@@ -3094,7 +3099,7 @@ participantTable.addEventListener('click', (event) => {
     }
     const muteButton = document.getElementById('mute-participant-btn')
     if (selectedParticipant.isAudioMuted) {
-      muteButton.innerText = meeting.selfId === selectedParticipant.id ? 'Unmute' : 'Request to unmute';
+      muteButton.innerText = isUserSelf(selectedParticipant) ? 'Unmute' : 'Request to unmute';
     } else {
       muteButton.innerText = 'Mute';
     }
@@ -3330,6 +3335,25 @@ function toggleBreakout() {
   }
 }
 
+async function toggleBrb() {
+  const meeting = getCurrentMeeting();
+
+  if (meeting) {
+    const brbButton = document.getElementById('brb-btn');
+    const isBrbEnabled = brbButton.innerText === 'Step away';
+
+    try {
+      const result = await meeting.beRightBack(isBrbEnabled);
+      console.log(`meeting.beRightBack(${isBrbEnabled}): success. Result: ${result}`);
+    } catch (error) {
+      console.error(`meeting.beRightBack({${isBrbEnabled}): error: `, error);
+    } finally {
+      localMedia?.microphoneStream?.setUserMuted(isBrbEnabled);
+      localMedia?.cameraStream?.setUserMuted(isBrbEnabled);
+    }
+  }
+}
+
 const createAdmitDiv = () => {
 
   const containerDiv = document.createElement('div');
@@ -3712,18 +3736,21 @@ function createMembersTable(members) {
     const th3 = document.createElement('th');
     const th4 = document.createElement('th');
     const th5 = document.createElement('th');
+    const th6 = document.createElement('th');
 
     th1.innerText = 'NAME';
     th2.innerText = 'VIDEO';
     th3.innerText = 'AUDIO';
     th4.innerText = 'STATUS';
     th5.innerText = 'SUPPORTS BREAKOUTS';
+    th6.innerText = 'AWAY';
 
     tr.appendChild(th1);
     tr.appendChild(th2);
     tr.appendChild(th3);
     tr.appendChild(th4);
     tr.appendChild(th5);
+    tr.appendChild(th6);
 
     return tr;
   }
@@ -3735,6 +3762,7 @@ function createMembersTable(members) {
     const td3 = document.createElement('td');
     const td4 = document.createElement('td');
     const td5 = document.createElement('td');
+    const td6 = document.createElement('td');
     const label1 = createLabel(member.id);
     const label2 = createLabel(member.id, member.isVideoMuted ? 'NO' : 'YES');
     const label3 = createLabel(member.id, member.isAudioMuted ? 'NO' : 'YES');
@@ -3763,11 +3791,19 @@ function createMembersTable(members) {
 
     td5.appendChild(label5);
 
+
+    if (isUserSelf(member) && member.isInMeeting) {
+      td6.appendChild(createButton(member.isBrb ? 'Back to meeting' : 'Step away', toggleBrb, {id: 'brb-btn'}));
+    } else {
+      td6.appendChild(createLabel(member.id, member.isBrb ? 'YES' : 'NO'));
+    }
+
     tr.appendChild(td1);
     tr.appendChild(td2);
     tr.appendChild(td3);
     tr.appendChild(td4);
     tr.appendChild(td5);
+    tr.appendChild(td6);
 
     return tr;
   }
@@ -3778,7 +3814,7 @@ function createMembersTable(members) {
 
   thead.appendChild(createHeadRow());
 
-  Object.entries(members).forEach(([key, value]) => {
+  Object.entries(members).forEach(([_, value]) => {
     if (value.status !== 'NOT_IN_MEETING') {
       const row = createRow(value);
 

docs/samples/browser-plugin-meetings/index.html

@@ -216,7 +216,6 @@ <h2 class="collapsible">
                   <span id="ts-mute-audio-message" class="webex-warning"></span>
                 </div>
               </div>
-
             </div>
           </fieldset>
         </form>

docs/samples/browser-plugin-meetings/style.css

@@ -54,7 +54,7 @@ button.btn-code {
 }
 
 .box {
-  max-width: 70rem; 
+  max-width: 70rem;
   margin-inline: auto;
   margin-bottom: 1rem;
 }
@@ -93,7 +93,7 @@ button.btn-code {
   display: grid;
   grid-template-columns: 1fr 1fr 1fr;
   /* border: 10px solid black */
-} 
+}
 
 .video-section {
   display: flex;
@@ -445,4 +445,4 @@ legend {
   background-color:lightgrey;
   border-radius:5px;
   padding: 0 2px;
-}
+}

packages/@webex/plugin-meetings/src/constants.ts

@@ -303,6 +303,7 @@ export const EVENT_TRIGGERS = {
   MEETING_SELF_CANNOT_VIEW_PARTICIPANT_LIST: 'meeting:self:cannotViewParticipantList',
   MEETING_SELF_IS_SHARING_BLOCKED: 'meeting:self:isSharingBlocked',
   MEETING_SELF_ROLES_CHANGED: 'meeting:self:rolesChanged',
+  MEETING_SELF_BRB_UPDATE: 'meeting:self:brbUpdate',
   MEETING_CONTROLS_LAYOUT_UPDATE: 'meeting:layout:update',
   MEETING_ENTRY_EXIT_TONE_UPDATE: 'meeting:entryExitTone:update',
   MEETING_BREAKOUTS_UPDATE: 'meeting:breakouts:update',
@@ -709,6 +710,7 @@ export const LOCUSINFO = {
     SELF_IS_SHARING_BLOCKED_CHANGE: 'SELF_IS_SHARING_BLOCKED_CHANGE',
     SELF_MEETING_BREAKOUTS_CHANGED: 'SELF_MEETING_BREAKOUTS_CHANGED',
     SELF_MEETING_INTERPRETATION_CHANGED: 'SELF_MEETING_INTERPRETATION_CHANGED',
+    SELF_MEETING_BRB_CHANGED: 'SELF_MEETING_BRB_CHANGED',
     MEDIA_INACTIVITY: 'MEDIA_INACTIVITY',
     LINKS_SERVICES: 'LINKS_SERVICES',
     LINKS_RESOURCES: 'LINKS_RESOURCES',

packages/@webex/plugin-meetings/src/locus-info/index.ts

@@ -1393,6 +1393,19 @@ export default class LocusInfo extends EventsScope {
         );
       }
 
+      if (parsedSelves.updates.brbChanged) {
+        this.emitScoped(
+          {
+            file: 'locus-info',
+            function: 'updateSelf',
+          },
+          LOCUSINFO.EVENTS.SELF_MEETING_BRB_CHANGED,
+          {
+            brb: parsedSelves.current.brb,
+          }
+        );
+      }
+
       if (parsedSelves.updates.interpretationChanged) {
         this.emitScoped(
           {

packages/@webex/plugin-meetings/src/locus-info/selfUtils.ts

@@ -66,6 +66,7 @@ SelfUtils.parse = (self: any, deviceId: string) => {
       breakoutSessions: SelfUtils.getBreakoutSessions(self),
       breakout: SelfUtils.getBreakout(self),
       interpretation: SelfUtils.getInterpretation(self),
+      brb: SelfUtils.getBrb(self),
     };
   }
 
@@ -75,6 +76,7 @@ SelfUtils.parse = (self: any, deviceId: string) => {
 SelfUtils.getBreakoutSessions = (self) => self?.controls?.breakout?.sessions;
 SelfUtils.getBreakout = (self) => self?.controls?.breakout;
 SelfUtils.getInterpretation = (self) => self?.controls?.interpretation;
+SelfUtils.getBrb = (self) => self?.controls?.brb;
 
 SelfUtils.getLayout = (self) =>
   Array.isArray(self?.controls?.layouts) ? self.controls.layouts[0].type : undefined;
@@ -128,6 +130,7 @@ SelfUtils.getSelves = (oldSelf, newSelf, deviceId) => {
   updates.isSharingBlockedChanged = previous?.isSharingBlocked !== current.isSharingBlocked;
   updates.breakoutsChanged = SelfUtils.breakoutsChanged(previous, current);
   updates.interpretationChanged = SelfUtils.interpretationChanged(previous, current);
+  updates.brbChanged = SelfUtils.brbChanged(previous, current);
 
   return {
     previous,
@@ -159,6 +162,9 @@ SelfUtils.breakoutsChanged = (previous, current) =>
 SelfUtils.interpretationChanged = (previous, current) =>
   !isEqual(previous?.interpretation, current?.interpretation) && !!current?.interpretation;
 
+SelfUtils.brbChanged = (previous, current) =>
+  !isEqual(previous?.brb, current?.brb) && current?.brb !== undefined;
+
 SelfUtils.isMediaInactive = (previous, current) => {
   if (
     previous &&

packages/@webex/plugin-meetings/src/meeting/index.ts

@@ -3362,6 +3362,20 @@ export default class Meeting extends StatelessWebexPlugin {
       }
     });
 
+    this.locusInfo.on(LOCUSINFO.EVENTS.SELF_MEETING_BRB_CHANGED, (payload) => {
+      Trigger.trigger(
+        this,
+        {
+          file: 'meeting/index',
+          function: 'setUpLocusInfoSelfListener',
+        },
+        EVENT_TRIGGERS.MEETING_SELF_BRB_UPDATE,
+        {
+          payload,
+        }
+      );
+    });
+
     this.locusInfo.on(LOCUSINFO.EVENTS.SELF_ROLES_CHANGED, (payload) => {
       const isModeratorOrCohost =
         payload.newRoles?.includes(SELF_ROLES.MODERATOR) ||
@@ -3565,6 +3579,50 @@ export default class Meeting extends StatelessWebexPlugin {
     return this.members.admitMembers(memberIds, locusUrls);
   }
 
+  /**
+   * Manages be right back status updates for the current participant.
+   *
+   * @param {boolean} enabled - Indicates whether the user enabled brb or not.
+   * @returns {Promise<void>} resolves when the brb status is updated or does nothing if not in a multistream meeting.
+   * @throws {Error} - Throws an error if the request fails.
+   */
+  public async beRightBack(enabled: boolean): Promise<void> {
+    if (!this.isMultistream) {
+      const errorMessage = 'Meeting:index#beRightBack --> Not a multistream meeting';
+      const error = new Error(errorMessage);
+
+      LoggerProxy.logger.error(error);
+
+      return Promise.reject(error);
+    }
+
+    if (!this.mediaProperties.webrtcMediaConnection) {
+      const errorMessage = 'Meeting:index#beRightBack --> WebRTC media connection is not defined';
+      const error = new Error(errorMessage);
+
+      LoggerProxy.logger.error(error);
+
+      return Promise.reject(error);
+    }
+
+    // this logic should be applied only to multistream meetings
+    return this.meetingRequest
+      .sendBrb({
+        enabled,
+        locusUrl: this.locusUrl,
+        deviceUrl: this.deviceUrl,
+        selfId: this.selfId,
+      })
+      .then(() => {
+        this.sendSlotManager.setSourceStateOverride(MediaType.VideoMain, enabled ? 'away' : null);
+      })
+      .catch((error) => {
+        LoggerProxy.logger.error('Meeting:index#beRightBack --> Error ', error);
+
+        return Promise.reject(error);
+      });
+  }
+
   /**
    * Remove the member from the meeting, boot them
    * @param {String} memberId

packages/@webex/plugin-meetings/src/meeting/request.ts

@@ -27,7 +27,7 @@ import {
   _SLIDES_,
   ANNOTATION,
 } from '../constants';
-import {SendReactionOptions, ToggleReactionsOptions} from './request.type';
+import {SendReactionOptions, BrbOptions, ToggleReactionsOptions} from './request.type';
 import MeetingUtil from './util';
 import {AnnotationInfo} from '../annotation/annotation.types';
 import {ClientMediaPreferences} from '../reachability/reachability.types';
@@ -909,4 +909,29 @@ export default class MeetingRequest extends StatelessWebexPlugin {
       uri: locusUrl,
     });
   }
+
+  /**
+   * Sends a request to set be right back status.
+   *
+   * @param {Object} options - The options for brb request.
+   * @param {boolean} options.enabled - Whether brb status is enabled.
+   * @param {string} options.locusUrl - The URL of the locus.
+   * @param {string} options.deviceUrl - The URL of the device.
+   * @param {string} options.selfId - The ID of the participant.
+   * @returns {Promise}
+   */
+  sendBrb({enabled, locusUrl, deviceUrl, selfId}: BrbOptions) {
+    const uri = `${locusUrl}/${PARTICIPANT}/${selfId}/${CONTROLS}`;
+
+    return this.locusDeltaRequest({
+      method: HTTP_VERBS.PATCH,
+      uri,
+      body: {
+        brb: {
+          enabled,
+          deviceUrl,
+        },
+      },
+    });
+  }
 }

packages/@webex/plugin-meetings/src/meeting/request.type.ts

@@ -11,3 +11,10 @@ export type ToggleReactionsOptions = {
   locusUrl: string;
   requestingParticipantId: string;
 };
+
+export type BrbOptions = {
+  enabled: boolean;
+  locusUrl: string;
+  deviceUrl: string;
+  selfId: string;
+};