@webex/plugin-meetings 3.0.0-beta.16 → 3.0.0-beta.18

package/src/breakouts/index.ts

@@ -0,0 +1,225 @@
+/*!
+ * Copyright (c) 2015-2023 Cisco Systems, Inc. See LICENSE file.
+ */
+import {WebexPlugin} from '@webex/webex-core';
+import {debounce, forEach} from 'lodash';
+import LoggerProxy from '../common/logs/logger-proxy';
+
+import {BREAKOUTS, MEETINGS} from '../constants';
+
+import Breakout from './breakout';
+import BreakoutCollection from './collection';
+
+/**
+ * @class Breakouts
+ */
+const Breakouts = WebexPlugin.extend({
+  namespace: MEETINGS,
+
+  collections: {
+    breakouts: BreakoutCollection,
+  },
+
+  props: {
+    allowBackToMain: 'boolean', // only present when in a breakout session
+    delayCloseTime: 'number', // appears once breakouts start
+    enableBreakoutSession: 'boolean', // appears from the moment you enable breakouts
+    groupId: 'string', // appears from the moment you enable breakouts
+    name: 'string', // only present when in a breakout session
+    sessionId: 'string', // appears from the moment you enable breakouts
+    sessionType: 'string', // appears from the moment you enable breakouts
+    startTime: 'string', // appears once breakouts start
+    status: 'string', // only present when in a breakout session
+    url: 'string', // appears from the moment you enable breakouts
+    locusUrl: 'string', // the current locus url
+  },
+
+  children: {
+    currentBreakoutSession: Breakout,
+  },
+
+  derived: {
+    isInMainSession: {
+      deps: ['sessionType'],
+      /**
+       * Returns true if the user is in the main session
+       * @returns {boolean}
+       */
+      fn() {
+        return this.sessionType === BREAKOUTS.SESSION_TYPES.MAIN;
+      },
+    },
+  },
+
+  /**
+   * initialize for the breakouts
+   * @returns {void}
+   */
+  initialize() {
+    this.listenTo(this, 'change:status', () => {
+      if (this.status === BREAKOUTS.STATUS.CLOSING) {
+        this.trigger(BREAKOUTS.EVENTS.BREAKOUTS_CLOSING);
+      }
+    });
+    this.debouncedQueryRosters = debounce(this.queryRosters, 10, {
+      leading: true,
+      trailing: false,
+    });
+    this.listenTo(this.breakouts, 'add', () => {
+      this.debouncedQueryRosters();
+    });
+    this.listenToBroadcastMessages();
+    this.listenToBreakoutRosters();
+  },
+
+  /**
+   * Calls this to clean up listeners
+   * @returns {void}
+   */
+  cleanUp() {
+    this.stopListening();
+  },
+
+  /**
+   * Update the current locus url of the meeting
+   * @param {string} locusUrl // locus url
+   * @returns {void}
+   */
+  locusUrlUpdate(locusUrl) {
+    this.set('locusUrl', locusUrl);
+  },
+
+  /**
+   * The initial roster lists need to be queried because you don't
+   * get a breakout.roster event when you join the meeting
+   * @returns {void}
+   */
+  queryRosters() {
+    this.webex
+      .request({uri: `${this.url}/roster`, qs: {locusUrl: btoa(this.locusUrl)}})
+      .then((result) => {
+        const {
+          body: {rosters},
+        } = result;
+
+        rosters.forEach(({locus}) => {
+          this.handleRosterUpdate(locus);
+        });
+
+        this.trigger(BREAKOUTS.EVENTS.MEMBERS_UPDATE);
+      })
+      .catch((error) => {
+        LoggerProxy.logger.error('Meeting:breakouts#queryRosters failed', error);
+      });
+  },
+
+  /**
+   *
+   * @param {Object} locus // locus object
+   * @returns {void}
+   */
+  handleRosterUpdate(locus) {
+    const sessionId = locus.controls?.breakout?.sessionId;
+
+    const session = this.breakouts.get(sessionId);
+
+    if (!session) {
+      return;
+    }
+
+    session.parseRoster(locus);
+  },
+
+  /**
+   * Sets up listener for broadcast messages sent to the breakout session
+   * @returns {void}
+   */
+  listenToBroadcastMessages() {
+    this.listenTo(this.webex.internal.llm, 'event:breakout.message', (event) => {
+      const {
+        data: {senderUserId, sentTime, message},
+      } = event;
+
+      this.trigger(BREAKOUTS.EVENTS.MESSAGE, {
+        senderUserId,
+        sentTime,
+        message,
+        // FIXME: This is only the current sessionId
+        // We'd need to check that the dataChannelUrl is still the same
+        // to guarantee that this message was sent to this session
+        sessionId: this.currentBreakoutSession.sessionId,
+      });
+    });
+  },
+
+  /**
+   * Sets up a listener for roster messags from mecury
+   * @returns {void}
+   */
+  listenToBreakoutRosters() {
+    this.listenTo(this.webex.internal.mercury, 'event:breakout.roster', (event) => {
+      this.handleRosterUpdate(event.data.locus);
+      this.trigger(BREAKOUTS.EVENTS.MEMBERS_UPDATE);
+    });
+  },
+
+  /**
+   * Updates the information about the current breakout
+   * @param {Object} params
+   * @returns {void}
+   */
+  updateBreakout(params) {
+    this.set(params);
+
+    this.set('currentBreakoutSession', {
+      sessionId: params.sessionId,
+      groupId: params.groupId,
+      name: params.name,
+      current: true,
+      sessionType: params.sessionType,
+      url: params.url,
+      [BREAKOUTS.SESSION_STATES.ACTIVE]: false,
+      [BREAKOUTS.SESSION_STATES.ALLOWED]: false,
+      [BREAKOUTS.SESSION_STATES.ALLOWED]: false,
+      [BREAKOUTS.SESSION_STATES.ASSIGNED_CURRENT]: false,
+      [BREAKOUTS.SESSION_STATES.REQUESTED]: false,
+    });
+  },
+
+  /**
+   * Updates the information about available breakouts
+   * @param {Object} payload
+   * @returns {void}
+   */
+  updateBreakoutSessions(payload) {
+    const breakouts = {};
+
+    if (payload.breakoutSessions) {
+      forEach(BREAKOUTS.SESSION_STATES, (state) => {
+        forEach(payload.breakoutSessions[state], (breakout) => {
+          const {sessionId} = breakout;
+
+          if (!breakouts[sessionId]) {
+            breakouts[sessionId] = breakout;
+            breakouts[sessionId][BREAKOUTS.SESSION_STATES.ACTIVE] = false;
+            breakouts[sessionId][BREAKOUTS.SESSION_STATES.ASSIGNED] = false;
+            breakouts[sessionId][BREAKOUTS.SESSION_STATES.ALLOWED] = false;
+            breakouts[sessionId][BREAKOUTS.SESSION_STATES.ASSIGNED_CURRENT] = false;
+            breakouts[sessionId][BREAKOUTS.SESSION_STATES.REQUESTED] = false;
+          }
+
+          breakouts[sessionId][state] = true;
+        });
+      });
+    }
+
+    forEach(breakouts, (breakout: typeof Breakout) => {
+      // eslint-disable-next-line no-param-reassign
+      breakout.url = this.url;
+    });
+
+    this.breakouts.set(Object.values(breakouts));
+  },
+});
+
+export default Breakouts;

package/src/config.ts

@@ -93,7 +93,10 @@ export default {
       enableMediaNegotiatedEvent: false,
       enableUnifiedMeetings: false,
       enableAdhocMeetings: false,
-      enableTurnDiscovery: false,
+      enableTurnDiscovery: true,
+    },
+    degradationPreferences: {
+      maxMacroblocksLimit: 32400,
     },
   },
 };

package/src/constants.ts

@@ -288,6 +288,7 @@ export const EVENT_TRIGGERS = {
   MEETING_STOPPED_RECORDING: 'meeting:recording:stopped',
   MEETING_STARTED_RECEIVING_TRANSCRIPTION: 'meeting:receiveTranscription:started',
   MEETING_STOPPED_RECEIVING_TRANSCRIPTION: 'meeting:receiveTranscription:stopped',
+  MEETING_RECEIVE_REACTIONS: 'meeting:receiveReactions',
   MEETING_PAUSED_RECORDING: 'meeting:recording:paused',
   MEETING_RESUMED_RECORDING: 'meeting:recording:resumed',
   MEETING_ADDED: 'meeting:added',
@@ -304,6 +305,9 @@ export const EVENT_TRIGGERS = {
   MEETING_SELF_IS_SHARING_BLOCKED: 'meeting:self:isSharingBlocked',
   MEETING_CONTROLS_LAYOUT_UPDATE: 'meeting:layout:update',
   MEETING_ENTRY_EXIT_TONE_UPDATE: 'meeting:entryExitTone:update',
+  MEETING_BREAKOUTS_UPDATE: 'meeting:breakouts:update',
+  MEETING_BREAKOUTS_CLOSING: 'meeting:breakouts:closing',
+  MEETING_BREAKOUTS_MESSAGE: 'meeting:breakouts:message',
   MEMBERS_UPDATE: 'members:update',
   MEMBERS_CONTENT_UPDATE: 'members:content:update',
   MEMBERS_HOST_UPDATE: 'members:host:update',
@@ -331,7 +335,7 @@ export const EVENT_TRIGGERS = {
   REMOTE_VIDEO_SOURCE_COUNT_CHANGED: 'media:remoteVideoSourceCountChanged',
   REMOTE_AUDIO_SOURCE_COUNT_CHANGED: 'media:remoteAudioSourceCountChanged',
   REMOTE_MEDIA_AUDIO_CREATED: 'media:remoteAudio:created',
-  REMOTE_MEDIA_SCREEN_SHARE_AUDIO_CREATED: 'media:remoteScrenShareAudio:created',
+  REMOTE_MEDIA_SCREEN_SHARE_AUDIO_CREATED: 'media:remoteScreenShareAudio:created',
   REMOTE_MEDIA_VIDEO_LAYOUT_CHANGED: 'media:remoteVideo:layoutChanged',
 };
 
@@ -514,11 +518,34 @@ export const LOCUS = {
   SYNCDEBUG: 'sync_debug',
 };
 
+export const BREAKOUTS = {
+  STATUS: {
+    CLOSING: 'CLOSING',
+  },
+  EVENTS: {
+    BREAKOUTS_CLOSING: 'BREAKOUTS_CLOSING',
+    MESSAGE: 'MESSAGE',
+    MEMBERS_UPDATE: 'MEMBERS_UPDATE',
+  },
+  SESSION_TYPES: {
+    MAIN: 'MAIN',
+  },
+  SESSION_STATES: {
+    ACTIVE: 'active',
+    ASSIGNED: 'assigned',
+    ALLOWED: 'allowed',
+    ASSIGNED_CURRENT: 'assignedCurrent',
+    REQUESTED: 'requested',
+  },
+  BREAKOUTS_SUPPORTED: 'BREAKOUTS_SUPPORTED',
+};
+
 export const LOCUSINFO = {
   EVENTS: {
     CONTROLS_MEETING_LAYOUT_UPDATED: 'CONTROLS_MEETING_LAYOUT_UPDATED',
     CONTROLS_RECORDING_UPDATED: 'CONTROLS_RECORDING_UPDATED',
     CONTROLS_MEETING_TRANSCRIBE_UPDATED: 'CONTROLS_MEETING_TRANSCRIBE_UPDATED',
+    CONTROLS_MEETING_BREAKOUT_UPDATED: 'CONTROLS_MEETING_BREAKOUT_UPDATED',
     CONTROLS_MEETING_CONTAINER_UPDATED: 'CONTROLS_MEETING_CONTAINER_UPDATED',
     CONTROLS_ENTRY_EXIT_TONE_UPDATED: 'CONTROLS_ENTRY_EXIT_TONE_UPDATED',
     SELF_UNADMITTED_GUEST: 'SELF_UNADMITTED_GUEST',
@@ -540,6 +567,9 @@ export const LOCUSINFO = {
     EMBEDDED_APPS_UPDATED: 'EMBEDDED_APPS_UPDATED',
     SELF_CANNOT_VIEW_PARTICIPANT_LIST_CHANGE: 'SELF_CANNOT_VIEW_PARTICIPANT_LIST_CHANGE',
     SELF_IS_SHARING_BLOCKED_CHANGE: 'SELF_IS_SHARING_BLOCKED_CHANGE',
+    SELF_MEETING_BREAKOUTS_CHANGED: 'SELF_MEETING_BREAKOUTS_CHANGED',
+    MEDIA_INACTIVITY: 'MEDIA_INACTIVITY',
+    LINKS_SERVICES: 'LINKS_SERVICES',
   },
 };
 
@@ -552,6 +582,9 @@ export const LOCUSEVENT = {
   // delta events
   DIFFERENCE: 'locus.difference',
 
+  // Breakout sessions
+  BREAKOUT_ROSTER: 'breakout.roster',
+
   // screen sharing
   FLOOR_GRANTED: 'locus.floor_granted',
   FLOOR_RELEASED: 'locus.floor_released',
@@ -724,6 +757,10 @@ export const DISPLAY_HINTS = {
   TRANSCRIPTION_CONTROL_STOP: 'TRANSCRIPTION_CONTROL_STOP',
   WEBEX_ASSISTANT_STATUS_ACTIVE: 'WEBEX_ASSISTANT_STATUS_ACTIVE',
   WAITING_FOR_OTHERS: 'WAITING_FOR_OTHERS',
+  ENABLE_REACTIONS: 'ENABLE_REACTIONS',
+  DISABLE_REACTIONS: 'DISABLE_REACTIONS',
+  REACTIONS_ACTIVE: 'REACTIONS_ACTIVE',
+  REACTIONS_INACTIVE: 'REACTIONS_INACTIVE',
 };
 
 export const SELF_ROLES = {
@@ -814,6 +851,7 @@ export const RESOURCE = {
 
 export const REACHABILITY = {
   localStorage: 'reachability.result',
+  namespace: 'Reachability',
 };
 
 export const ROAP = {

package/src/locus-info/controlsUtils.ts

@@ -92,6 +92,8 @@ ControlsUtils.getControls = (oldControls: any, newControls: any) => {
         !isEqual(previous?.entryExitTone, current?.entryExitTone) &&
         (previous?.entryExitTone || current?.entryExitTone)
       ),
+
+      hasBreakoutChanged: !isEqual(previous?.breakout, current?.breakout),
     },
   };
 };

package/src/locus-info/index.ts

@@ -62,6 +62,7 @@ export default class LocusInfo extends EventsScope {
   mediaShares: any;
   replace: any;
   url: any;
+  services: any;
 
   constructor(updateMeeting, webex, meetingId) {
     super();
@@ -185,6 +186,7 @@ export default class LocusInfo extends EventsScope {
     this.updateSelf(locus.self, locus.participants);
     this.updateHostInfo(locus.host);
     this.updateMediaShares(locus.mediaShares);
+    this.updateServices(locus.links?.services);
   }
 
   /**
@@ -337,7 +339,14 @@ export default class LocusInfo extends EventsScope {
    * @returns {undefined}
    * @memberof LocusInfo
    */
-  updateLocusInfo(locus: any) {
+  updateLocusInfo(locus) {
+    if (locus.self?.reason === 'MOVED' && locus.self?.state === 'LEFT') {
+      // When moved to a breakout session locus sends a message for the previous locus
+      // indicating that we have been moved. It isn't helpful to continue parsing this
+      // as it gets interpreted as if we have left the call
+      return;
+    }
+
     this.updateControls(locus.controls);
     this.updateConversationUrl(locus.conversationUrl, locus.info);
     this.updateCreated(locus.created);
@@ -355,6 +364,7 @@ export default class LocusInfo extends EventsScope {
     this.updateMemberShip(locus.membership);
     this.updateIdentifiers(locus.identities);
     this.updateEmbeddedApps(locus.embeddedApps);
+    this.updateServices(locus.links?.services);
     this.compareAndUpdate();
     // update which required to compare different objects from locus
   }
@@ -674,6 +684,7 @@ export default class LocusInfo extends EventsScope {
           hasMeetingContainerChanged,
           hasTranscribeChanged,
           hasEntryExitToneChanged,
+          hasBreakoutChanged,
         },
         current,
       } = ControlsUtils.getControls(this.controls, controls);
@@ -737,6 +748,21 @@ export default class LocusInfo extends EventsScope {
         );
       }
 
+      if (hasBreakoutChanged) {
+        const {breakout} = current;
+
+        this.emitScoped(
+          {
+            file: 'locus-info',
+            function: 'updateControls',
+          },
+          LOCUSINFO.EVENTS.CONTROLS_MEETING_BREAKOUT_UPDATED,
+          {
+            breakout,
+          }
+        );
+      }
+
       if (hasEntryExitToneChanged) {
         const {entryExitTone} = current;
 
@@ -789,6 +815,27 @@ export default class LocusInfo extends EventsScope {
     }
   }
 
+  /**
+   * @param {Object} services
+   * @returns {undefined}
+   * @memberof LocusInfo
+   */
+  updateServices(services: Record<'breakout' | 'record', {url: string}>) {
+    if (services && !isEqual(this.services, services)) {
+      this.services = services;
+      this.emitScoped(
+        {
+          file: 'locus-info',
+          function: 'updateServices',
+        },
+        LOCUSINFO.EVENTS.LINKS_SERVICES,
+        {
+          services,
+        }
+      );
+    }
+  }
+
   /**
    * @param {Object} fullState
    * @returns {undefined}
@@ -1041,6 +1088,17 @@ export default class LocusInfo extends EventsScope {
         );
       }
 
+      if (parsedSelves.updates.breakoutsChanged) {
+        this.emitScoped(
+          {
+            file: 'locus-info',
+            function: 'updateSelf',
+          },
+          LOCUSINFO.EVENTS.SELF_MEETING_BREAKOUTS_CHANGED,
+          {breakoutSessions: parsedSelves.current.breakoutSessions}
+        );
+      }
+
       if (parsedSelves.updates.isMediaInactiveOrReleased) {
         this.emitScoped(
           {

package/src/locus-info/parser.ts

@@ -397,6 +397,7 @@ export default class Parser {
     const {isLoci} = Parser;
     // @ts-ignore
     const setStatus = (status) => {
+      // @ts-ignore
       this.status = status;
     };
 

package/src/locus-info/selfUtils.ts

@@ -1,5 +1,6 @@
 /* eslint-disable default-param-last */
 
+import {isEqual} from 'lodash';
 import {
   _IDLE_,
   _JOINED_,
@@ -60,12 +61,15 @@ SelfUtils.parse = (self: any, deviceId: string) => {
       layout: SelfUtils.getLayout(self),
       canNotViewTheParticipantList: SelfUtils.canNotViewTheParticipantList(self),
       isSharingBlocked: SelfUtils.isSharingBlocked(self),
+      breakoutSessions: SelfUtils.getBreakouts(self),
     };
   }
 
   return null;
 };
 
+SelfUtils.getBreakouts = (self) => self?.controls?.breakout?.sessions;
+
 SelfUtils.getLayout = (self) =>
   Array.isArray(self?.controls?.layouts) ? self.controls.layouts[0].type : undefined;
 
@@ -114,6 +118,7 @@ SelfUtils.getSelves = (oldSelf, newSelf, deviceId) => {
   updates.canNotViewTheParticipantListChanged =
     previous?.canNotViewTheParticipantList !== current.canNotViewTheParticipantList;
   updates.isSharingBlockedChanged = previous?.isSharingBlocked !== current.isSharingBlocked;
+  updates.breakoutsChanged = SelfUtils.breakoutsChanged(previous, current);
 
   return {
     previous,
@@ -139,6 +144,9 @@ SelfUtils.isJoined = (self: any) => self?.state === _JOINED_;
 SelfUtils.layoutChanged = (previous: any, current: any) =>
   current?.layout && previous?.layout !== current?.layout;
 
+SelfUtils.breakoutsChanged = (previous, current) =>
+  !isEqual(previous?.breakoutSessions, current?.breakoutSessions);
+
 SelfUtils.isMediaInactive = (previous, current) => {
   if (
     previous &&

package/src/media/index.ts

@@ -3,6 +3,7 @@
  */
 /* globals navigator */
 
+import {RoapMediaConnection, MultistreamRoapMediaConnection} from '@webex/internal-media-core';
 import LoggerProxy from '../common/logs/logger-proxy';
 import {AUDIO_INPUT, VIDEO_INPUT, MEDIA_TRACK_CONSTRAINT} from '../constants';
 import Config from '../config';
@@ -10,8 +11,6 @@ import StaticConfig from '../common/config';
 import MediaError from '../common/errors/media';
 import BrowserDetection from '../common/browser-detection';
 
-import {RoapMediaConnection, MultistreamRoapMediaConnection} from './internal-media-core-wrapper';
-
 const {isBrowser} = BrowserDetection();
 
 /**

package/src/media/properties.ts

@@ -1,4 +1,4 @@
-import {MediaConnection as MC} from '@webex/internal-media-core';
+import {ConnectionState, Event} from '@webex/internal-media-core';
 
 import {MEETINGS, PC_BAIL_TIMEOUT, QUALITY_LEVELS} from '../constants';
 import LoggerProxy from '../common/logs/logger-proxy';
@@ -214,13 +214,13 @@ export default class MediaProperties {
    */
   waitForMediaConnectionConnected() {
     const isConnected = () =>
-      this.webrtcMediaConnection.getConnectionState() === MC.ConnectionState.Connected;
+      this.webrtcMediaConnection.getConnectionState() === ConnectionState.Connected;
 
     if (isConnected()) {
       return Promise.resolve();
     }
 
-    return new Promise((resolve, reject) => {
+    return new Promise<void>((resolve, reject) => {
       let timer;
 
       const connectionStateListener = () => {
@@ -230,20 +230,17 @@ export default class MediaProperties {
 
         if (isConnected()) {
           clearTimeout(timer);
-          this.webrtcMediaConnection.off(
-            MC.Event.CONNECTION_STATE_CHANGED,
-            connectionStateListener
-          );
+          this.webrtcMediaConnection.off(Event.CONNECTION_STATE_CHANGED, connectionStateListener);
           resolve();
         }
       };
 
       timer = setTimeout(() => {
-        this.webrtcMediaConnection.off(MC.Event.CONNECTION_STATE_CHANGED, connectionStateListener);
+        this.webrtcMediaConnection.off(Event.CONNECTION_STATE_CHANGED, connectionStateListener);
         reject();
       }, PC_BAIL_TIMEOUT);
 
-      this.webrtcMediaConnection.on(MC.Event.CONNECTION_STATE_CHANGED, connectionStateListener);
+      this.webrtcMediaConnection.on(Event.CONNECTION_STATE_CHANGED, connectionStateListener);
     });
   }
 

package/src/meeting/in-meeting-actions.ts

@@ -31,6 +31,8 @@ interface IInMeetingActions {
   isRealTimeTranslationEnabled?: boolean;
   canSelectSpokenLanguages?: boolean;
   waitingForOthersToJoin?: boolean;
+  canEnableReactions?: boolean;
+  canSendReactions?: boolean;
 }
 
 /**
@@ -83,6 +85,10 @@ export default class InMeetingActions implements IInMeetingActions {
 
   waitingForOthersToJoin = null;
 
+  canEnableReactions = null;
+
+  canSendReactions = null;
+
   /**
    * Returns all meeting action options
    * @returns {Object}
@@ -110,6 +116,8 @@ export default class InMeetingActions implements IInMeetingActions {
     isRealTimeTranslationEnabled: this.isRealTimeTranslationEnabled,
     canSelectSpokenLanguages: this.canSelectSpokenLanguages,
     waitingForOthersToJoin: this.waitingForOthersToJoin,
+    canEnableReactions: this.canEnableReactions,
+    canSendReactions: this.canSendReactions,
   });
 
   /**