@webex/plugin-meetings 3.0.0-beta.31 → 3.0.0-beta.310

package/src/breakouts/index.ts

@@ -5,11 +5,13 @@ import {WebexPlugin} from '@webex/webex-core';
 import {debounce, forEach} from 'lodash';
 import LoggerProxy from '../common/logs/logger-proxy';
 
-import {BREAKOUTS, HTTP_VERBS, MEETINGS} from '../constants';
+import {BREAKOUTS, MEETINGS, HTTP_VERBS, _ID_} from '../constants';
 
 import Breakout from './breakout';
 import BreakoutCollection from './collection';
 import BreakoutRequest from './request';
+import breakoutEvent from './events';
+import {boServiceErrorHandler, isSessionTypeChangedFromSessionToMain} from './utils';
 
 /**
  * @class Breakouts
@@ -25,6 +27,7 @@ const Breakouts = WebexPlugin.extend({
     allowBackToMain: 'boolean', // only present when in a breakout session
     delayCloseTime: 'number', // appears once breakouts start
     enableBreakoutSession: 'boolean', // appears from the moment you enable breakouts
+    hasBreakoutPreAssignments: '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
@@ -33,15 +36,23 @@ const Breakouts = WebexPlugin.extend({
     status: 'string', // only present when in a breakout session
     url: 'string', // appears from the moment you enable breakouts
     locusUrl: 'string', // the current locus url
-    breakoutServiceUrl: 'string', // the current breakout resouce url
+    breakoutServiceUrl: 'string', // the current breakout resource url
+    mainLocusUrl: 'string', // the locus url of the main session
+    groups: 'array', // appears when create breakouts
+    manageGroups: 'array', // appears when manage breakouts
+    preAssignments: 'array', // appears when getPreAssignments info hasBreakoutPreAssignments = true
+    editLock: 'object', // appears when getBreakout info editlock = true
+    intervalID: 'number',
+    meetingId: 'string',
+    canManageBreakouts: 'boolean', // appear the ability to manage breakouts
   },
-
   children: {
     currentBreakoutSession: Breakout,
   },
 
   derived: {
     isInMainSession: {
+      cache: false,
       deps: ['sessionType'],
       /**
        * Returns true if the user is in the main session
@@ -51,6 +62,63 @@ const Breakouts = WebexPlugin.extend({
         return this.sessionType === BREAKOUTS.SESSION_TYPES.MAIN;
       },
     },
+    isActiveBreakout: {
+      cache: false, // fix issue: sometimes the derived will not change even if the deps changed
+      deps: ['sessionType', 'status'],
+      /**
+       * Returns true if the breakout status is active
+       * @returns {boolean}
+       */
+      fn() {
+        return (
+          this.sessionType === BREAKOUTS.SESSION_TYPES.BREAKOUT &&
+          (this.status === BREAKOUTS.STATUS.OPEN || this.status === BREAKOUTS.STATUS.CLOSING)
+        );
+      },
+    },
+    breakoutGroupId: {
+      cache: false,
+      deps: ['manageGroups'],
+      /**
+       * Returns the active group id
+       * @returns {boolean}
+       */
+      fn() {
+        if (this.manageGroups?.length) {
+          return this.manageGroups[0].status !== BREAKOUTS.STATUS.CLOSED
+            ? this.manageGroups[0].id
+            : '';
+        }
+
+        return '';
+      },
+    },
+    breakoutStatus: {
+      cache: true,
+      deps: ['isInMainSession', 'status', 'groups'],
+      /**
+       * Returns the breakout status
+       * @returns {boolean}
+       */
+      fn() {
+        return this.isInMainSession ? this.groups?.[0]?.status : this.status;
+      },
+    },
+    shouldQueryPreAssignments: {
+      cache: false,
+      deps: ['canManageBreakouts', 'enableBreakoutSession', 'hasBreakoutPreAssignments'],
+      /**
+       * Returns should query preAssignments or not
+       * @returns {boolean}
+       */
+      fn() {
+        return !!(
+          this.canManageBreakouts &&
+          this.enableBreakoutSession &&
+          this.hasBreakoutPreAssignments
+        );
+      },
+    },
   },
 
   /**
@@ -58,20 +126,31 @@ const Breakouts = WebexPlugin.extend({
    * @returns {void}
    */
   initialize() {
-    this.listenTo(this, 'change:status', () => {
-      if (this.status === BREAKOUTS.STATUS.CLOSING) {
+    this.listenTo(this, 'change:breakoutStatus', () => {
+      if (this.breakoutStatus === BREAKOUTS.STATUS.CLOSING) {
         this.trigger(BREAKOUTS.EVENTS.BREAKOUTS_CLOSING);
       }
     });
+    this.listenTo(this, 'change:shouldQueryPreAssignments', () => {
+      if (this.shouldQueryPreAssignments && !this.preAssignments) {
+        this.queryPreAssignments();
+      }
+    });
     this.debouncedQueryRosters = debounce(this.queryRosters, 10, {
       leading: true,
       trailing: false,
     });
-    this.listenTo(this.breakouts, 'add', () => {
+    this.listenTo(this.breakouts, 'add', (breakout) => {
       this.debouncedQueryRosters();
+      this.triggerReturnToMainEvent(breakout);
+    });
+    this.listenTo(this.breakouts, 'change:requestedLastModifiedTime', (breakout) => {
+      this.triggerReturnToMainEvent(breakout);
     });
+    this.listenToCurrentSessionTypeChange();
     this.listenToBroadcastMessages();
     this.listenToBreakoutRosters();
+    this.listenToBreakoutHelp();
     // @ts-ignore
     this.breakoutRequest = new BreakoutRequest({webex: this.webex});
   },
@@ -91,10 +170,23 @@ const Breakouts = WebexPlugin.extend({
    */
   locusUrlUpdate(locusUrl) {
     this.set('locusUrl', locusUrl);
+    const {isInMainSession, mainLocusUrl} = this;
+    if (isInMainSession || !mainLocusUrl) {
+      this.set('mainLocusUrl', locusUrl);
+    }
+  },
+
+  /**
+   * Update whether self is moderator/cohost or not
+   * @param {boolean} canManageBreakouts
+   * @returns {void}
+   */
+  updateCanManageBreakouts(canManageBreakouts) {
+    this.set('canManageBreakouts', canManageBreakouts);
   },
 
   /**
-   * Update the current breakout resouce url
+   * Update the current breakout resource url
    * @param {string} breakoutServiceUrl
    * @returns {void}
    */
@@ -115,7 +207,7 @@ const Breakouts = WebexPlugin.extend({
           body: {rosters},
         } = result;
 
-        rosters.forEach(({locus}) => {
+        rosters?.forEach(({locus}) => {
           this.handleRosterUpdate(locus);
         });
 
@@ -142,6 +234,21 @@ const Breakouts = WebexPlugin.extend({
 
     session.parseRoster(locus);
   },
+  /**
+   *Sets up listener for currentBreakoutSession sessionType changed
+   * @returns {void}
+   */
+  listenToCurrentSessionTypeChange(): void {
+    this.listenTo(
+      this.currentBreakoutSession,
+      'change:sessionType',
+      (currentBreakoutSession, sessionType) => {
+        if (isSessionTypeChangedFromSessionToMain(currentBreakoutSession, sessionType)) {
+          this.trigger(BREAKOUTS.EVENTS.LEAVE_BREAKOUT);
+        }
+      }
+    );
+  },
 
   /**
    * Sets up listener for broadcast messages sent to the breakout session
@@ -176,6 +283,36 @@ const Breakouts = WebexPlugin.extend({
     });
   },
 
+  /**
+   * Sets up a listener for ask help notify from mecury
+   * @returns {void}
+   */
+  listenToBreakoutHelp() {
+    this.listenTo(this.webex.internal.mercury, 'event:breakout.help', (event) => {
+      const {
+        data: {participant, sessionId},
+      } = event;
+      this.trigger(BREAKOUTS.EVENTS.ASK_FOR_HELP, {participant, sessionId});
+    });
+  },
+
+  /**
+   * get current breakout is in progress or not
+   * @returns {boolean}
+   */
+  isBreakoutInProgress() {
+    const currentStatus = this.groups?.[0]?.status || this.status;
+
+    return currentStatus === BREAKOUTS.STATUS.OPEN || currentStatus === BREAKOUTS.STATUS.CLOSING;
+  },
+
+  /**
+   * get current breakout is in closing or not
+   * @returns {boolean}
+   */
+  isBreakoutIClosing() {
+    return (this.groups?.[0]?.status || this.status) === BREAKOUTS.STATUS.CLOSING;
+  },
   /**
    * Updates the information about the current breakout
    * @param {Object} params
@@ -183,6 +320,10 @@ const Breakouts = WebexPlugin.extend({
    */
   updateBreakout(params) {
     this.set(params);
+    // These values are set manually so they are unset when they are not included in params
+    this.set('groups', params.groups);
+    this.set('startTime', params.startTime);
+    this.set('status', params.status);
 
     this.set('currentBreakoutSession', {
       sessionId: params.sessionId,
@@ -193,12 +334,31 @@ const Breakouts = WebexPlugin.extend({
       url: params.url,
       [BREAKOUTS.SESSION_STATES.ACTIVE]: false,
       [BREAKOUTS.SESSION_STATES.ALLOWED]: false,
-      [BREAKOUTS.SESSION_STATES.ALLOWED]: false,
+      [BREAKOUTS.SESSION_STATES.ASSIGNED]: false,
       [BREAKOUTS.SESSION_STATES.ASSIGNED_CURRENT]: false,
       [BREAKOUTS.SESSION_STATES.REQUESTED]: false,
     });
 
-    this.set('enableBreakoutSession', params.enableBreakoutSession);
+    if (!this.isBreakoutInProgress()) {
+      this.clearBreakouts();
+    }
+
+    if (
+      this.currentBreakoutSession.previous('sessionId') !== this.currentBreakoutSession.sessionId ||
+      this.currentBreakoutSession.previous('groupId') !== this.currentBreakoutSession.groupId
+    ) {
+      // should report joined session changed
+      const meeting = this.webex.meetings.getMeetingByType(_ID_, this.meetingId);
+      breakoutEvent.onBreakoutJoinResponse(
+        {
+          currentSession: this.currentBreakoutSession,
+          meeting,
+          breakoutMoveId: params.breakoutMoveId,
+        },
+        // @ts-ignore
+        this.webex.internal.newMetrics.submitClientEvent.bind(this.webex.internal.newMetrics)
+      );
+    }
   },
 
   /**
@@ -208,7 +368,12 @@ const Breakouts = WebexPlugin.extend({
    */
   updateBreakoutSessions(payload) {
     const breakouts = {};
-
+    if (this.isBreakoutIClosing()) {
+      // fix issue: don't clear/update breakouts collection when in closing since locus DTO will send undefined or
+      // only the MAIN session info here, if just update it, will miss the breakout roster info during
+      // count down to end breakouts
+      return;
+    }
     if (payload.breakoutSessions) {
       forEach(BREAKOUTS.SESSION_STATES, (state) => {
         forEach(payload.breakoutSessions[state], (breakout) => {
@@ -224,10 +389,13 @@ const Breakouts = WebexPlugin.extend({
           }
 
           breakouts[sessionId][state] = true;
+
+          if (state === BREAKOUTS.SESSION_STATES.REQUESTED) {
+            breakouts[sessionId].requestedLastModifiedTime = breakout.modifiedAt;
+          }
         });
       });
     }
-
     forEach(breakouts, (breakout: typeof Breakout) => {
       // eslint-disable-next-line no-param-reassign
       breakout.url = this.url;
@@ -235,6 +403,15 @@ const Breakouts = WebexPlugin.extend({
 
     this.breakouts.set(Object.values(breakouts));
   },
+  /**
+   * clear breakouts collection
+   * @returns {void}
+   */
+  clearBreakouts() {
+    if (this.breakouts.length > 0) {
+      this.breakouts.reset();
+    }
+  },
   /**
    * get main session
    * @returns {Breakout}
@@ -275,9 +452,7 @@ const Breakouts = WebexPlugin.extend({
    * @returns {Promise}
    */
   broadcast(message, options) {
-    const breakoutGroupId = this.isInMainSession
-      ? this.breakouts.filter((breakout) => !breakout.isMain)[0]?.groupId
-      : this.groupId;
+    const {breakoutGroupId} = this;
     if (!breakoutGroupId) {
       throw new Error('Cannot broadcast, no breakout session found');
     }
@@ -316,16 +491,16 @@ const Breakouts = WebexPlugin.extend({
   },
 
   /**
-   * Make the meeting enbale or disable breakout session
+   * Make the meeting enable or disable breakout session
    * @param {boolean} enable
    * @returns {Promise}
    */
   async toggleBreakout(enable) {
     if (this.enableBreakoutSession === undefined) {
       const info = await this.enableBreakouts();
+      // first time enable, set the initial data
+      this.updateBreakout(info?.body);
       if (!enable) {
-        // if enable is false, updateBreakout set the param then set enableBreakoutSession as false
-        this.updateBreakout(info.body);
         await this.doToggleBreakout(enable);
       }
     } else {
@@ -339,15 +514,412 @@ const Breakouts = WebexPlugin.extend({
    * @returns {Promise}
    */
   doToggleBreakout(enable) {
+    const body = {
+      ...(this.editLock && !!this.editLock.token ? {editlock: {token: this.editLock.token}} : {}),
+      ...{enableBreakoutSession: enable},
+    };
+
     // @ts-ignore
     return this.webex.request({
       method: HTTP_VERBS.PUT,
       uri: this.url,
-      body: {
-        enableBreakoutSession: enable,
+      body,
+    });
+  },
+
+  /**
+   * set groups to manageGroups prop
+   * @param {Object} breakoutInfo -- breakout groups
+   * @returns {void}
+   */
+  _setManageGroups(breakoutInfo) {
+    if (breakoutInfo?.body?.groups) {
+      this.set('manageGroups', breakoutInfo.body.groups);
+    }
+  },
+
+  /**
+   * Create new breakout sessions
+   * @param {object} params -- breakout session group
+   * @returns {Promise}
+   */
+  async create(params) {
+    const payload = {...params};
+    const body = {
+      ...(this.editLock && !!this.editLock.token ? {editlock: {token: this.editLock.token}} : {}),
+      ...{groups: [payload]},
+    };
+    // @ts-ignore
+    const breakoutInfo = await this.webex
+      .request({
+        method: HTTP_VERBS.PUT,
+        uri: this.url,
+        body,
+      })
+      .catch((error) => {
+        return Promise.reject(boServiceErrorHandler(error, 'Breakouts#create'));
+      });
+
+    this._setManageGroups(breakoutInfo);
+
+    // clear edit lock info after save breakout session info
+    this._clearEditLockInfo();
+
+    return breakoutInfo;
+  },
+
+  /**
+   * Delete all breakout sessions
+   * @returns {Promise}
+   */
+  async clearSessions() {
+    const body = {
+      ...(this.editLock && !!this.editLock.token ? {editlock: {token: this.editLock.token}} : {}),
+      ...{groups: [{action: BREAKOUTS.ACTION.DELETE}]},
+    };
+    // @ts-ignore
+    const breakoutInfo = await this.webex
+      .request({
+        method: HTTP_VERBS.PUT,
+        uri: this.url,
+        body,
+      })
+      .catch((error) => {
+        return Promise.reject(boServiceErrorHandler(error, 'Breakouts#clearSessions'));
+      });
+
+    this._setManageGroups(breakoutInfo);
+
+    return breakoutInfo;
+  },
+
+  /**
+   * Host or cohost starts breakout sessions
+   * @param {object} params
+   * @returns {Promise}
+   */
+  async start(params = {}) {
+    const action = BREAKOUTS.ACTION.START;
+    const payload = {
+      id: this.breakoutGroupId,
+      action,
+      allowBackToMain: false,
+      allowToJoinLater: false,
+      ...params,
+    };
+
+    const body = {
+      ...(this.editLock && !!this.editLock.token
+        ? {editlock: {token: this.editLock.token, refresh: true}}
+        : {}),
+      ...{groups: [payload]},
+    };
+
+    const breakoutInfo = await this.request({
+      method: HTTP_VERBS.PUT,
+      uri: this.url,
+      body,
+    }).catch((error) => {
+      return Promise.reject(boServiceErrorHandler(error, 'Breakouts#start'));
+    });
+
+    this._setManageGroups(breakoutInfo);
+
+    return breakoutInfo;
+  },
+
+  /**
+   * Host or cohost ends breakout sessions
+   * @param {object} params
+   * @returns {Promise}
+   */
+  async end(params = {}) {
+    const {delayCloseTime, breakoutGroupId: id} = this;
+    const action = BREAKOUTS.ACTION.CLOSE;
+    const payload = {
+      id,
+      action,
+      delayCloseTime,
+      ...params,
+    };
+
+    const body = {
+      ...(this.editLock && !!this.editLock.token
+        ? {editlock: {token: this.editLock.token, refresh: true}}
+        : {}),
+      ...{groups: [payload]},
+    };
+
+    const breakoutInfo = await this.request({
+      method: HTTP_VERBS.PUT,
+      uri: this.url,
+      body,
+    }).catch((error) => {
+      return Promise.reject(boServiceErrorHandler(error, 'Breakouts#end'));
+    });
+
+    this._setManageGroups(breakoutInfo);
+
+    return breakoutInfo;
+  },
+
+  /**
+   * Host or cohost update breakout sessions
+   * @param {Object} params
+   * @param {String} params.id
+   * @param {Boolean} unlockEdit
+   * @returns {Promise}
+   */
+  async update(params: {id: string}, unlockEdit?: boolean) {
+    if (!params.id) {
+      return Promise.reject(new Error('Missing breakout group id'));
+    }
+    const payload = {...params};
+
+    const body = {
+      ...(this.editLock?.token
+        ? {editlock: {token: this.editLock.token, refresh: !unlockEdit}}
+        : {}),
+      ...{groups: [payload]},
+    };
+
+    const breakoutInfo = await this.request({
+      method: HTTP_VERBS.PUT,
+      uri: this.url,
+      body,
+    }).catch((error) => {
+      return Promise.reject(boServiceErrorHandler(error, 'Breakouts#update'));
+    });
+
+    if (unlockEdit) {
+      this._clearEditLockInfo();
+    }
+
+    this._setManageGroups(breakoutInfo);
+
+    return breakoutInfo;
+  },
+
+  /**
+   * get existed breakout sessions
+   * @param {boolean} editlock -- lock operations of the breakout sessions
+   * @returns {Promise}
+   */
+  async getBreakout(editlock) {
+    const breakout = await this.request({
+      method: HTTP_VERBS.GET,
+      uri: this.url + (editlock ? `?editlock=${editlock}` : ''),
+    });
+
+    this._setManageGroups(breakout);
+    if (editlock && breakout.body?.editlock?.token) {
+      this.set('editLock', breakout.body.editlock);
+      this.keepEditLockAlive();
+    }
+
+    return breakout;
+  },
+
+  /**
+   * enable and edit lock breakout
+   * @returns {void}
+   */
+  async enableAndLockBreakout() {
+    if (this.enableBreakoutSession) {
+      this.lockBreakout();
+    } else {
+      const info = await this.enableBreakouts();
+
+      if (info.body) {
+        this.lockBreakout();
+      }
+    }
+  },
+
+  /**
+   * breakout edit locked by yourself or not
+   * @returns {boolean}
+   */
+  hasBreakoutLocked() {
+    return (
+      this.editLock &&
+      this.editLock.token &&
+      this.editLock.state === BREAKOUTS.EDIT_LOCK_STATUS.LOCKED
+    );
+  },
+
+  /**
+   * send breakout edit lock
+   * @returns {void}
+   */
+  async lockBreakout() {
+    if (this.editLock && !!this.editLock.token) {
+      if (this.editLock.state === BREAKOUTS.EDIT_LOCK_STATUS.LOCKED) {
+        throw new Error('Breakout already locked');
+      } else {
+        this.keepEditLockAlive();
+      }
+    } else {
+      const breakout = await this.getBreakout(true);
+      if (breakout.body?.editlock) {
+        this.keepEditLockAlive();
+      }
+    }
+  },
+
+  /**
+   * keep edit lock alive
+   * @returns {void}
+   */
+  keepEditLockAlive() {
+    if (this.editLock && !!this.editLock.token) {
+      const ttl = this.editLock.ttl < 30 ? BREAKOUTS.DEFAULT_TTL : this.editLock.ttl;
+      if (this.intervalID) {
+        window.clearInterval(this.intervalID);
+      }
+
+      this.intervalID = window.setInterval(() => {
+        this.request({
+          method: HTTP_VERBS.PUT,
+          uri: `${this.url}/editlock/${this.editLock.token}`,
+        }).catch((error) => {
+          this._clearEditLockInfo();
+
+          return Promise.reject(boServiceErrorHandler(error, 'Breakouts#keepEditLockAlive'));
+        });
+      }, (ttl / 2) * 1000);
+    }
+  },
+
+  /**
+   * unlock edit breakout
+   * @returns {void}
+   */
+  unLockEditBreakout() {
+    if (this.editLock && !!this.editLock.token) {
+      this.request({
+        method: HTTP_VERBS.DELETE,
+        uri: `${this.url}/editlock/${this.editLock.token}`,
+      })
+        .then(() => {
+          this._clearEditLockInfo();
+        })
+        .catch((error) => {
+          return Promise.reject(boServiceErrorHandler(error, 'Breakouts#unLockEditBreakout'));
+        });
+    }
+  },
+
+  /**
+   * clear interval and edit lock info
+   * @private
+   * @returns {void}
+   */
+  _clearEditLockInfo() {
+    if (this.intervalID) {
+      clearInterval(this.intervalID);
+    }
+    this.set('editLock', {});
+  },
+
+  /**
+   * assign participants to breakout session
+   * @param {Array} sessions
+   * @returns {void}
+   */
+  assign(sessions: any[]) {
+    const internalSessions = sessions.map((item) => {
+      return {
+        id: item.id,
+        assigned: item.memberIds,
+        assignedEmails: item.emails,
+        anyoneCanJoin: !!item.anyone,
+      };
+    });
+
+    const body = {
+      ...(this.editLock && !!this.editLock.token
+        ? {editlock: {token: this.editLock.token, refresh: true}}
+        : {}),
+      ...{
+        groups: [
+          {
+            id: this.breakoutGroupId,
+            sessions: internalSessions,
+          },
+        ],
       },
+    };
+
+    return this.request({
+      method: HTTP_VERBS.PUT,
+      uri: this.url,
+      body,
     });
   },
+
+  /**
+   * query preAssignments
+   * @returns {void}
+   */
+  queryPreAssignments() {
+    this.webex
+      .request({uri: `${this.url}/preassignments`, qs: {locusUrl: btoa(this.locusUrl)}})
+      .then((result) => {
+        if (result.body?.groups) {
+          this.set('preAssignments', result.body.groups);
+          this.trigger(BREAKOUTS.EVENTS.PRE_ASSIGNMENTS_UPDATE);
+        }
+      })
+      .catch((error) => {
+        LoggerProxy.logger.error('Meeting:breakouts#queryPreAssignments failed', error);
+      });
+  },
+  /**
+   * assign participants dynamically after breakout sessions started,
+   * but currently it only used for admitting participants from lobby into breakout directly
+   * @param {Array} sessions
+   * @returns {void}
+   */
+  dynamicAssign(sessions: any[]) {
+    const updatedSessions = sessions.map((item) => {
+      return {
+        id: item.id,
+        participants: item.participants,
+        targetState: item.targetState,
+      };
+    });
+
+    const body = {
+      groups: [
+        {
+          id: this.breakoutGroupId,
+          sessions: updatedSessions,
+        },
+      ],
+      editlock: null,
+    };
+
+    if (this.editLock && this.editLock.token) {
+      body.editlock = this.editLock;
+    }
+
+    return this.request({
+      method: HTTP_VERBS.PUT,
+      uri: `${this.url}/dynamicAssign`,
+      body,
+    });
+  },
+  /**
+   * trigger ASK_RETURN_TO_MAIN event when main session requested
+   * @param {Object} breakout
+   * @returns {void}
+   */
+  triggerReturnToMainEvent(breakout) {
+    if (breakout.isMain && breakout.requested) {
+      this.trigger(BREAKOUTS.EVENTS.ASK_RETURN_TO_MAIN);
+    }
+  },
 });
 
 export default Breakouts;