fcr-ui-scene 3.1.0 → 3.2.0

package/lib/modules/participant/store.js

@@ -12,6 +12,8 @@ require("core-js/modules/es.number.constructor.js");
 require("core-js/modules/es.object.create.js");
 require("core-js/modules/es.object.define-property.js");
 require("core-js/modules/es.object.get-own-property-descriptor.js");
+require("core-js/modules/esnext.function.metadata.js");
+require("core-js/modules/esnext.symbol.metadata.js");
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
@@ -36,12 +38,63 @@ require("core-js/modules/es.set.js");
 require("core-js/modules/es.string.includes.js");
 require("core-js/modules/es.string.iterator.js");
 require("core-js/modules/es.weak-map.js");
+require("core-js/modules/esnext.async-iterator.filter.js");
+require("core-js/modules/esnext.async-iterator.find.js");
+require("core-js/modules/esnext.async-iterator.for-each.js");
+require("core-js/modules/esnext.async-iterator.map.js");
+require("core-js/modules/esnext.async-iterator.some.js");
+require("core-js/modules/esnext.iterator.constructor.js");
+require("core-js/modules/esnext.iterator.filter.js");
+require("core-js/modules/esnext.iterator.find.js");
+require("core-js/modules/esnext.iterator.for-each.js");
+require("core-js/modules/esnext.iterator.map.js");
+require("core-js/modules/esnext.iterator.some.js");
+require("core-js/modules/esnext.map.delete-all.js");
+require("core-js/modules/esnext.map.emplace.js");
+require("core-js/modules/esnext.map.every.js");
+require("core-js/modules/esnext.map.filter.js");
+require("core-js/modules/esnext.map.find.js");
+require("core-js/modules/esnext.map.find-key.js");
+require("core-js/modules/esnext.map.includes.js");
+require("core-js/modules/esnext.map.key-of.js");
+require("core-js/modules/esnext.map.map-keys.js");
+require("core-js/modules/esnext.map.map-values.js");
+require("core-js/modules/esnext.map.merge.js");
+require("core-js/modules/esnext.map.reduce.js");
+require("core-js/modules/esnext.map.some.js");
+require("core-js/modules/esnext.map.update.js");
+require("core-js/modules/esnext.set.add-all.js");
+require("core-js/modules/esnext.set.delete-all.js");
+require("core-js/modules/esnext.set.difference.v2.js");
+require("core-js/modules/esnext.set.difference.js");
+require("core-js/modules/esnext.set.every.js");
+require("core-js/modules/esnext.set.filter.js");
+require("core-js/modules/esnext.set.find.js");
+require("core-js/modules/esnext.set.intersection.v2.js");
+require("core-js/modules/esnext.set.intersection.js");
+require("core-js/modules/esnext.set.is-disjoint-from.v2.js");
+require("core-js/modules/esnext.set.is-disjoint-from.js");
+require("core-js/modules/esnext.set.is-subset-of.v2.js");
+require("core-js/modules/esnext.set.is-subset-of.js");
+require("core-js/modules/esnext.set.is-superset-of.v2.js");
+require("core-js/modules/esnext.set.is-superset-of.js");
+require("core-js/modules/esnext.set.join.js");
+require("core-js/modules/esnext.set.map.js");
+require("core-js/modules/esnext.set.reduce.js");
+require("core-js/modules/esnext.set.some.js");
+require("core-js/modules/esnext.set.symmetric-difference.v2.js");
+require("core-js/modules/esnext.set.symmetric-difference.js");
+require("core-js/modules/esnext.set.union.v2.js");
+require("core-js/modules/esnext.set.union.js");
+require("core-js/modules/esnext.weak-map.delete-all.js");
+require("core-js/modules/esnext.weak-map.emplace.js");
 require("core-js/modules/web.dom-collections.for-each.js");
 require("core-js/modules/web.dom-collections.iterator.js");
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _agoraEduCore = require("agora-edu-core");
 var _type = require("agora-edu-core/lib/type");
 var _logger = require("agora-foundation/lib/logger");
 var _type2 = require("agora-rte-sdk/lib/core/scene/type");
@@ -56,10 +109,11 @@ var _memberListDataSource = require("./member-list-data-source");
 var _type4 = require("./type");
 var _i18n = require("agora-ui-foundation/lib/i18n");
 var _i18n2 = require("../../hooks/i18n");
+var _type5 = require("agora-edu-core/lib/room-control/user-control/type");
 var _ParticipantStore;
-var _initProto, _init__mainList, _init__participantsWindowActive, _init_currentPerspectiveType, _init_audioVolumeMap, _init_enableParticipantsJoinWithMute, _init_searchText, _init_currentModal, _init_localUserRole, _init_spotlightStreamId, _init_enableSpotlight, _init_mergeConfirmDialog, _init_mergeUserId, _setSpotlightStreamIdDecs, _handleEventDecs, _setCurrentModalDecs, _openParticipantsWindowDecs, _setParticipantsWindowActiveDecs, _handlerSearchUserDecs, _handlerUserActionDecs, _handlerRoomControlActionDecs, _kickOutUserDecs, _setAsAttendeeDecs, _onAudioVolumeUpdatedDecs, _handleRemoteUserJoinedDecs, _handleRemoteUserLeftDecs, _onUserInfoUpdatedDecs, _initUserListDecs, _refreshCurrentPerspectiveTypeDecs, _getAllowedOperationsDecs, _onPeerSessionReceivedDecs, _updateLocalUserRoleDecs, _ref;
-function _classPrivateFieldInitSpec(obj, privateMap, value) { _checkPrivateRedeclaration(obj, privateMap); privateMap.set(obj, value); }
-function _checkPrivateRedeclaration(obj, privateCollection) { if (privateCollection.has(obj)) { throw new TypeError("Cannot initialize the same private elements twice on an object"); } }
+var _initProto, _init__mainList, _init__participantsWindowActive, _init_currentPerspectiveType, _init_audioVolumeMap, _init_enableParticipantsJoinWithMute, _init_searchText, _init_currentModal, _init_localUserRole, _init_spotlightStreamId, _init_enableSpotlight, _init_mergeConfirmDialog, _init_mergeUserId, _setSpotlightStreamIdDecs, _setCurrentModalDecs, _openParticipantsWindowDecs, _setParticipantsWindowActiveDecs, _handlerSearchUserDecs, _getAllowedOperationsDecs, _handlerUserActionDecs, _handlerRoomControlActionDecs, _handleEventDecs, _kickOutUserDecs, _setAsAttendeeDecs, _onAudioVolumeUpdatedDecs, _handleRemoteUserJoinedDecs, _handleRemoteUserLeftDecs, _onUserInfoUpdatedDecs, _initUserListDecs, _refreshCurrentPerspectiveTypeDecs, _onPeerSessionReceivedDecs, _updateLocalUserRoleDecs, _ref;
+function _classPrivateFieldInitSpec(e, t, a) { _checkPrivateRedeclaration(e, t), t.set(e, a); }
+function _checkPrivateRedeclaration(e, t) { if (t.has(e)) throw new TypeError("Cannot initialize the same private elements twice on an object"); }
 function _classPrivateFieldSet(s, a, r) { return s.set(_assertClassBrand(s, a), r), r; }
 function _classPrivateFieldGet(s, a) { return s.get(_assertClassBrand(s, a)); }
 function _assertClassBrand(e, t, n) { if ("function" == typeof e ? e === t : e.has(t)) return arguments.length < 3 ? t : n; throw new TypeError("Private element is not present on this object"); }
@@ -85,7 +139,7 @@ var _J = /*#__PURE__*/new WeakMap();
 var _K = /*#__PURE__*/new WeakMap();
 var _L = /*#__PURE__*/new WeakMap();
 var _M = /*#__PURE__*/new WeakMap();
-_ref = (_setSpotlightStreamIdDecs = [_mobx.action, _mobx.action.bound], _handleEventDecs = [_mobx.action, _mobx.action.bound], _setCurrentModalDecs = [_mobx.action, _mobx.action.bound], _openParticipantsWindowDecs = [_mobx.action, _mobx.action.bound], _setParticipantsWindowActiveDecs = [_mobx.action, _mobx.action.bound], _handlerSearchUserDecs = [_mobx.action, _mobx.action.bound], _handlerUserActionDecs = [_mobx.action, _mobx.action.bound], _handlerRoomControlActionDecs = [_mobx.action, _mobx.action.bound], _kickOutUserDecs = [_mobx.action, _mobx.action.bound], _setAsAttendeeDecs = [_mobx.action, _mobx.action.bound], _onAudioVolumeUpdatedDecs = [_mobx.action, _mobx.action.bound], _handleRemoteUserJoinedDecs = [_mobx.action, _mobx.action.bound], _handleRemoteUserLeftDecs = [_mobx.action, _mobx.action.bound], _onUserInfoUpdatedDecs = [_mobx.action, _mobx.action.bound], _initUserListDecs = [_mobx.action, _mobx.action.bound], _refreshCurrentPerspectiveTypeDecs = [_mobx.action, _mobx.action.bound], _getAllowedOperationsDecs = [_mobx.action, _mobx.action.bound], _onPeerSessionReceivedDecs = [_mobx.action, _mobx.action.bound], _updateLocalUserRoleDecs = [_mobx.action, _mobx.action.bound], "logger");
+_ref = (_setSpotlightStreamIdDecs = [_mobx.action, _mobx.action.bound], _setCurrentModalDecs = [_mobx.action, _mobx.action.bound], _openParticipantsWindowDecs = [_mobx.action, _mobx.action.bound], _setParticipantsWindowActiveDecs = [_mobx.action, _mobx.action.bound], _handlerSearchUserDecs = [_mobx.action, _mobx.action.bound], _getAllowedOperationsDecs = [_mobx.action, _mobx.action.bound], _handlerUserActionDecs = [_mobx.action, _mobx.action.bound], _handlerRoomControlActionDecs = [_mobx.action, _mobx.action.bound], _handleEventDecs = [_mobx.action, _mobx.action.bound], _kickOutUserDecs = [_mobx.action, _mobx.action.bound], _setAsAttendeeDecs = [_mobx.action, _mobx.action.bound], _onAudioVolumeUpdatedDecs = [_mobx.action, _mobx.action.bound], _handleRemoteUserJoinedDecs = [_mobx.action, _mobx.action.bound], _handleRemoteUserLeftDecs = [_mobx.action, _mobx.action.bound], _onUserInfoUpdatedDecs = [_mobx.action, _mobx.action.bound], _initUserListDecs = [_mobx.action, _mobx.action.bound], _refreshCurrentPerspectiveTypeDecs = [_mobx.action, _mobx.action.bound], _onPeerSessionReceivedDecs = [_mobx.action, _mobx.action.bound], _updateLocalUserRoleDecs = [_mobx.action, _mobx.action.bound], "logger");
 var ParticipantStore = exports["default"] = /*#__PURE__*/function () {
   function ParticipantStore(_ref2) {
     var _this = this;
@@ -102,24 +156,11 @@ var ParticipantStore = exports["default"] = /*#__PURE__*/function () {
     (0, _defineProperty2["default"])(this, "_disposers", []);
     (0, _defineProperty2["default"])(this, "_unmuteAudioTimestamp", new Map());
     (0, _defineProperty2["default"])(this, "_unmuteVideoTimestamp", new Map());
-    _classPrivateFieldInitSpec(this, _B, _init__mainList(this, []));
-    _classPrivateFieldInitSpec(this, _C, _init__participantsWindowActive(this, false));
-    _classPrivateFieldInitSpec(this, _D, _init_currentPerspectiveType(this, 'attendee'));
-    _classPrivateFieldInitSpec(this, _E, _init_audioVolumeMap(this, new Map()));
-    _classPrivateFieldInitSpec(this, _A, _type.FcrMediaSourceState.STOPPED);
-    _classPrivateFieldInitSpec(this, _F, _init_enableParticipantsJoinWithMute(this, false));
-    _classPrivateFieldInitSpec(this, _G, _init_searchText(this, ''));
-    _classPrivateFieldInitSpec(this, _H, _init_currentModal(this, 'modal'));
-    _classPrivateFieldInitSpec(this, _I, _init_localUserRole(this));
-    _classPrivateFieldInitSpec(this, _J, _init_spotlightStreamId(this, ''));
-    _classPrivateFieldInitSpec(this, _K, _init_enableSpotlight(this, true));
-    _classPrivateFieldInitSpec(this, _L, _init_mergeConfirmDialog(this, false));
-    _classPrivateFieldInitSpec(this, _M, _init_mergeUserId(this, ''));
     (0, _defineProperty2["default"])(this, "_processedUserOpenDeviceRequests", new Set());
     (0, _defineProperty2["default"])(this, "_streamsObserver", {
       onStreamsAdded: this._handleStreamsAdded,
       onStreamsUpdated: this._handleStreamsUpdated,
-      onAudioVolumeUpdated: this._onAudioVolumeUpdated,
+      onStreamVolumeIndicationUpdated: this._onAudioVolumeUpdated,
       onStreamsRemoved: this._handleStreamsRemoved
     });
     (0, _defineProperty2["default"])(this, "_peerSessionObserver", {
@@ -136,10 +177,26 @@ var ParticipantStore = exports["default"] = /*#__PURE__*/function () {
       onEvent: this._handleEvent
     });
     (0, _defineProperty2["default"])(this, "_whitebaordObderver", {
-      onBoardActiveInfoUpdated: function onBoardActiveInfoUpdated(isActive, operator) {
-        _this._updateUserBoardState(operator);
+      onActive: function onActive(ownerId, operatorUser) {
+        _this._updateUserBoardState(operatorUser);
+      },
+      onInactive: function onInactive(reason, operatorUser) {
+        _this._updateUserBoardState(operatorUser);
       }
     });
+    _classPrivateFieldInitSpec(this, _B, _init__mainList(this, []));
+    _classPrivateFieldInitSpec(this, _C, _init__participantsWindowActive(this, false));
+    _classPrivateFieldInitSpec(this, _D, _init_currentPerspectiveType(this, 'attendee'));
+    _classPrivateFieldInitSpec(this, _E, _init_audioVolumeMap(this, new Map()));
+    _classPrivateFieldInitSpec(this, _A, _agoraEduCore.FcrMediaSourceState.STOPPED);
+    _classPrivateFieldInitSpec(this, _F, _init_enableParticipantsJoinWithMute(this, false));
+    _classPrivateFieldInitSpec(this, _G, _init_searchText(this, ''));
+    _classPrivateFieldInitSpec(this, _H, _init_currentModal(this, 'modal'));
+    _classPrivateFieldInitSpec(this, _I, _init_localUserRole(this));
+    _classPrivateFieldInitSpec(this, _J, _init_spotlightStreamId(this, ''));
+    _classPrivateFieldInitSpec(this, _K, _init_enableSpotlight(this, true));
+    _classPrivateFieldInitSpec(this, _L, _init_mergeConfirmDialog(this, false));
+    _classPrivateFieldInitSpec(this, _M, _init_mergeUserId(this, ''));
     (0, _defineProperty2["default"])(this, "checkIsPin", (0, _mobxUtils.computedFn)(function (userId) {
       var _this$userMap$get;
       return !!((_this$userMap$get = _this.userMap.get(userId)) !== null && _this$userMap$get !== void 0 && _this$userMap$get.streams.some(function (stream) {
@@ -154,23 +211,23 @@ var ParticipantStore = exports["default"] = /*#__PURE__*/function () {
       });
       var isSelf = user.userId === _this._userControl.getLocalUser().userId;
       var hasAudioPublishedAndStarted = function hasAudioPublishedAndStarted(stream) {
-        return (stream === null || stream === void 0 ? void 0 : stream.audioSourceState) === _type.FcrMediaSourceState.STARTED && ((stream === null || stream === void 0 ? void 0 : stream.streamType) === _type2.AgoraRteMediaStreamType.AUDIO || (stream === null || stream === void 0 ? void 0 : stream.streamType) === _type2.AgoraRteMediaStreamType.BOTH);
+        return (stream === null || stream === void 0 ? void 0 : stream.audioSourceState) === _agoraEduCore.FcrMediaSourceState.STARTED && ((stream === null || stream === void 0 ? void 0 : stream.streamType) === _type2.AgoraRteMediaStreamType.AUDIO || (stream === null || stream === void 0 ? void 0 : stream.streamType) === _type2.AgoraRteMediaStreamType.BOTH);
       };
       var hasVideoPublishedAndStarted = function hasVideoPublishedAndStarted(stream) {
-        return (stream === null || stream === void 0 ? void 0 : stream.videoSourceState) === _type.FcrMediaSourceState.STARTED && ((stream === null || stream === void 0 ? void 0 : stream.streamType) === _type2.AgoraRteMediaStreamType.VIDEO || (stream === null || stream === void 0 ? void 0 : stream.streamType) === _type2.AgoraRteMediaStreamType.BOTH);
+        return (stream === null || stream === void 0 ? void 0 : stream.videoSourceState) === _agoraEduCore.FcrMediaSourceState.STARTED && ((stream === null || stream === void 0 ? void 0 : stream.streamType) === _type2.AgoraRteMediaStreamType.VIDEO || (stream === null || stream === void 0 ? void 0 : stream.streamType) === _type2.AgoraRteMediaStreamType.BOTH);
       };
       var hasAudio = false;
       var hasVideo = false;
       var audioDeviceType = 'none';
       var videoDeviceType = 'none';
       var userType = 'normal';
-      if (user.userInfo.connectorType === _type.FcrRoomConnectorType.NONE) {
+      if (user.userInfo.connectorType === _agoraEduCore.FcrRoomConnectorType.NONE) {
         var defaultStream = targetUsers.find(function (user) {
           return user.videoSourceType === _type3.AgoraRteVideoSourceType.CAMERA;
         });
         var pstnStream = targetUsers.find(function (_ref3) {
           var connectorType = _ref3.connectorType;
-          return connectorType == _type.FcrRoomConnectorType.PSTN;
+          return connectorType == _agoraEduCore.FcrRoomConnectorType.PSTN;
         });
         videoDeviceType = 'computer-cam';
         hasVideo = isSelf ? _this._deviceStore.cameraEnabled : hasVideoPublishedAndStarted(defaultStream);
@@ -189,10 +246,10 @@ var ParticipantStore = exports["default"] = /*#__PURE__*/function () {
         }
       }
       // 2.sip user with camera and phone mic
-      else if ([_type.FcrRoomConnectorType.SIP, _type.FcrRoomConnectorType.H323].includes(user.userInfo.connectorType)) {
+      else if ([_agoraEduCore.FcrRoomConnectorType.SIP, _agoraEduCore.FcrRoomConnectorType.H323].includes(user.userInfo.connectorType)) {
         var firstSipOrH323Stream = targetUsers.find(function (_ref4) {
           var connectorType = _ref4.connectorType;
-          return [_type.FcrRoomConnectorType.SIP, _type.FcrRoomConnectorType.H323].includes(connectorType);
+          return [_agoraEduCore.FcrRoomConnectorType.SIP, _agoraEduCore.FcrRoomConnectorType.H323].includes(connectorType);
         });
         audioDeviceType = 'phone-mic';
         videoDeviceType = 'computer-cam';
@@ -201,10 +258,10 @@ var ParticipantStore = exports["default"] = /*#__PURE__*/function () {
         hasVideo = hasVideoPublishedAndStarted(firstSipOrH323Stream);
       }
       // 3.phone user with no camera and phone mic
-      else if (user.userInfo.connectorType === _type.FcrRoomConnectorType.PSTN) {
+      else if (user.userInfo.connectorType === _agoraEduCore.FcrRoomConnectorType.PSTN) {
         var _pstnStream = targetUsers.find(function (_ref5) {
           var connectorType = _ref5.connectorType;
-          return connectorType == _type.FcrRoomConnectorType.PSTN;
+          return connectorType == _agoraEduCore.FcrRoomConnectorType.PSTN;
         });
         audioDeviceType = 'phone-mic';
         userType = 'phone';
@@ -239,7 +296,7 @@ var ParticipantStore = exports["default"] = /*#__PURE__*/function () {
     this._userControl.addObserver(this._userObserver);
     this._streamControl.addObserver(this._streamsObserver);
     this._peerSessionControl.addObserver(this._peerSessionObserver);
-    this._roomControl.getWhiteboardControl().addObserver(this._whitebaordObderver);
+    this._roomControl.getBoardControl().addObserver(this._whitebaordObderver);
     this._securityStore = securityStore;
     this._uiEventStore = uiEventStore;
     this._deviceStore = deviceStore;
@@ -353,21 +410,6 @@ var ParticipantStore = exports["default"] = /*#__PURE__*/function () {
     set: function set(v) {
       _classPrivateFieldSet(_M, this, v);
     }
-  }, {
-    key: "setSpotlightStreamId",
-    value: function setSpotlightStreamId(streamId) {
-      this.spotlightStreamId = streamId;
-    }
-  }, {
-    key: "release",
-    value: function release() {
-      this._userControl.removeObserver(this._userObserver);
-      this._streamControl.removeObserver(this._streamsObserver);
-      this._uiEventStore.removeObserver(this._eventObserver);
-      this._disposers.forEach(function (disposer) {
-        return disposer();
-      });
-    }
   }, {
     key: "userListSource",
     get: function get() {
@@ -447,6 +489,46 @@ var ParticipantStore = exports["default"] = /*#__PURE__*/function () {
         return i.isPin;
       });
     }
+  }, {
+    key: "userList",
+    get: function get() {
+      var _this3 = this;
+      var list = this.userListSource;
+      if (this.searchText.length) {
+        list = list.filter(function (user) {
+          return user.userInfo.userName.toLocaleLowerCase().includes(_this3.searchText.toLocaleLowerCase());
+        });
+      }
+      var uiDataList = list.map(function (user) {
+        return _this3._formatUser(user);
+      });
+      return uiDataList;
+    }
+  }, {
+    key: "localMicVolume",
+    get: function get() {
+      return this._deviceStore.microphoneVolumeLevel;
+    }
+  }, {
+    key: "hasRevokeHostPermission",
+    get: function get() {
+      return this._securityStore.hasRevokeHostPermission() && this.localUserRole !== _type.FcrUserRole.HOST;
+    }
+  }, {
+    key: "setSpotlightStreamId",
+    value: function setSpotlightStreamId(streamId) {
+      this.spotlightStreamId = streamId;
+    }
+  }, {
+    key: "release",
+    value: function release() {
+      this._userControl.removeObserver(this._userObserver);
+      this._streamControl.removeObserver(this._streamsObserver);
+      this._uiEventStore.removeObserver(this._eventObserver);
+      this._disposers.forEach(function (disposer) {
+        return disposer();
+      });
+    }
   }, {
     key: "hasMutePermission",
     value: function hasMutePermission(targetRole) {
@@ -462,28 +544,6 @@ var ParticipantStore = exports["default"] = /*#__PURE__*/function () {
     value: function hasRequestStartAudioPermission(targetRole) {
       return this._securityStore.hasRequestStartAudioPermission(targetRole);
     }
-  }, {
-    key: "_handleEvent",
-    value: function _handleEvent(action, payload) {
-      if (action === _constant.UIAction.MAIN_LIST_CHANGED) {
-        this._mainList = payload || [];
-      }
-      if (action === _constant.UIAction.SPOTLIGHT_STREAM_CHANGED) {
-        var _ref6 = payload,
-          type = _ref6.type,
-          streamId = _ref6.streamId;
-        if (type === 'add') {
-          this.setSpotlightStreamId(streamId);
-        } else {
-          this.setSpotlightStreamId('');
-        }
-      }
-      if (action === _constant.UIAction.CUSTOM_SETTINGS_CHANGED) {
-        var _ref7 = payload,
-          spotlightEnabled = _ref7.spotlightEnabled;
-        this.enableSpotlight = spotlightEnabled;
-      }
-    }
   }, {
     key: "setCurrentModal",
     value: function setCurrentModal(modal) {
@@ -529,7 +589,7 @@ var ParticipantStore = exports["default"] = /*#__PURE__*/function () {
   }, {
     key: "openConfirmDialog",
     value: function openConfirmDialog(params, id) {
-      var _this3 = this;
+      var _this4 = this;
       var title = params.title,
         content = params.content,
         _onOk = params.onOk,
@@ -545,30 +605,15 @@ var ParticipantStore = exports["default"] = /*#__PURE__*/function () {
         cancelText: cancelText,
         height: height,
         onCancel: function onCancel() {
-          _this3._uiEventStore.closeDialog(dialogKey);
+          _this4._uiEventStore.closeDialog(dialogKey);
           _onCancel && _onCancel();
         },
         onOk: function onOk() {
-          _this3._uiEventStore.closeDialog(dialogKey);
+          _this4._uiEventStore.closeDialog(dialogKey);
           _onOk();
         }
       });
     }
-  }, {
-    key: "userList",
-    get: function get() {
-      var _this4 = this;
-      var list = this.userListSource;
-      if (this.searchText.length) {
-        list = list.filter(function (user) {
-          return user.userInfo.userName.toLocaleLowerCase().includes(_this4.searchText.toLocaleLowerCase());
-        });
-      }
-      var uiDataList = list.map(function (user) {
-        return _this4._formatUser(user);
-      });
-      return uiDataList;
-    }
   }, {
     key: "setParticipantsWindowActive",
     value: function setParticipantsWindowActive(active) {
@@ -596,7 +641,7 @@ var ParticipantStore = exports["default"] = /*#__PURE__*/function () {
     key: "mergeConfirmDialogOk",
     value: function mergeConfirmDialogOk(userId) {
       var _this$userMap$get2;
-      this._userControl.mergeAudioStream(userId);
+      this._streamControl.mergeAudioStream(userId);
       this.setMergeConfirmDialog(false);
       _toast.FcrToastApi.open({
         id: 'mergeVideo',
@@ -609,6 +654,39 @@ var ParticipantStore = exports["default"] = /*#__PURE__*/function () {
         duration: 3000
       });
     }
+  }, {
+    key: "removePin",
+    value: function removePin(userId) {
+      var _this$userMap$get3;
+      var streamId = (_this$userMap$get3 = this.userMap.get(userId)) === null || _this$userMap$get3 === void 0 || (_this$userMap$get3 = _this$userMap$get3.streams.find(function (stream) {
+        return stream.videoSourceType === _type3.AgoraRteVideoSourceType.CAMERA;
+      })) === null || _this$userMap$get3 === void 0 ? void 0 : _this$userMap$get3.streamId;
+      if (streamId) {
+        this._uiEventStore.sendEvent(_constant.UIAction.VIDEO_WINDOW_PIN_ACTION, {
+          action: _constant.VideoWindowPinType.REMOVE_PIN,
+          streamId: streamId
+        });
+      }
+    }
+  }, {
+    key: "addPin",
+    value: function addPin(userId) {
+      var _this$userMap$get4;
+      var streamId = (_this$userMap$get4 = this.userMap.get(userId)) === null || _this$userMap$get4 === void 0 || (_this$userMap$get4 = _this$userMap$get4.streams.find(function (stream) {
+        return stream.videoSourceType === _type3.AgoraRteVideoSourceType.CAMERA;
+      })) === null || _this$userMap$get4 === void 0 ? void 0 : _this$userMap$get4.streamId;
+      if (streamId) {
+        this._uiEventStore.sendEvent(_constant.UIAction.VIDEO_WINDOW_PIN_ACTION, {
+          action: _constant.VideoWindowPinType.ADD_PIN,
+          streamId: streamId
+        });
+      }
+    }
+  }, {
+    key: "getAllowedOperations",
+    value: function getAllowedOperations(targetRole, isSelf) {
+      return this._securityStore.getAllowedOperations(targetRole, isSelf);
+    }
   }, {
     key: "handlerUserAction",
     value: function handlerUserAction(action, userId) {
@@ -663,11 +741,6 @@ var ParticipantStore = exports["default"] = /*#__PURE__*/function () {
     value: function getMicStreamVolume(streamId) {
       return this.audioVolumeMap.get(streamId) || 0;
     }
-  }, {
-    key: "localMicVolume",
-    get: function get() {
-      return this._deviceStore.microphoneVolumeLevel;
-    }
   }, {
     key: "handlerRoomControlAction",
     value: function handlerRoomControlAction(action, data) {
@@ -704,11 +777,33 @@ var ParticipantStore = exports["default"] = /*#__PURE__*/function () {
           break;
       }
     }
-
-    //  user actions
+  }, {
+    key: "_handleEvent",
+    value: function _handleEvent(action, payload) {
+      if (action === _constant.UIAction.MAIN_LIST_CHANGED) {
+        this._mainList = payload || [];
+      }
+      if (action === _constant.UIAction.SPOTLIGHT_STREAM_CHANGED) {
+        var _ref6 = payload,
+          type = _ref6.type,
+          streamId = _ref6.streamId;
+        if (type === 'add') {
+          this.setSpotlightStreamId(streamId);
+        } else {
+          this.setSpotlightStreamId('');
+        }
+      }
+      if (action === _constant.UIAction.CUSTOM_SETTINGS_CHANGED) {
+        var _ref7 = payload,
+          spotlightEnabled = _ref7.spotlightEnabled;
+        this.enableSpotlight = spotlightEnabled;
+      }
+    }
   }, {
     key: "_muteUserAudio",
-    value: function _muteUserAudio(user) {
+    value:
+    //  user actions
+    function _muteUserAudio(user) {
       var isSelf = user === this._userControl.getLocalUser().userId;
       if (isSelf) {
         this._deviceStreamStore.enableMicrophoneWithStream(false);
@@ -721,8 +816,8 @@ var ParticipantStore = exports["default"] = /*#__PURE__*/function () {
           return;
         }
         this._streamControl.updatePublishPrivilegeOfStreams((0, _defineProperty2["default"])({}, targetUser.streamId, {
-          audioPrivilege: _type.FcrStreamPrivilegeOperation.NOPRIVILEGE,
-          videoPrivilege: _type.FcrStreamPrivilegeOperation.NOOPERATION
+          audioPrivilege: _agoraEduCore.FcrStreamPrivilegeOperation.NOPRIVILEGE,
+          videoPrivilege: _agoraEduCore.FcrStreamPrivilegeOperation.NOOPERATION
         }));
       }
     }
@@ -771,8 +866,8 @@ var ParticipantStore = exports["default"] = /*#__PURE__*/function () {
           return;
         }
         this._streamControl.updatePublishPrivilegeOfStreams((0, _defineProperty2["default"])({}, targetUser.streamId, {
-          audioPrivilege: _type.FcrStreamPrivilegeOperation.NOOPERATION,
-          videoPrivilege: _type.FcrStreamPrivilegeOperation.NOPRIVILEGE
+          audioPrivilege: _agoraEduCore.FcrStreamPrivilegeOperation.NOOPERATION,
+          videoPrivilege: _agoraEduCore.FcrStreamPrivilegeOperation.NOPRIVILEGE
         }));
       }
     }
@@ -826,50 +921,22 @@ var ParticipantStore = exports["default"] = /*#__PURE__*/function () {
     key: "_kickOutUser",
     value: function _kickOutUser(userId) {
       var _this5 = this,
-        _this$userMap$get3;
+        _this$userMap$get5;
       this.openConfirmDialog({
         title: '',
         onCancel: function onCancel() {
           _this5._uiEventStore.closeConfirmDialog();
         },
         content: (0, _i18n.transI18n)('fmt_uimanager_tips_Remove', {
-          reason2: (_this$userMap$get3 = this.userMap.get(userId)) === null || _this$userMap$get3 === void 0 ? void 0 : _this$userMap$get3.userInfo.userName
+          reason2: (_this$userMap$get5 = this.userMap.get(userId)) === null || _this$userMap$get5 === void 0 ? void 0 : _this$userMap$get5.userInfo.userName
         }),
         onOk: function onOk() {
-          _this5._userControl.kickOut(userId, _type.FcrUserKickOutType.Once);
+          _this5._userControl.kickOut(userId, _type5.FcrUserKickOutType.Once);
           _this5._uiEventStore.closeConfirmDialog();
         },
         height: 160
       }, 'KICK_OUT');
     }
-  }, {
-    key: "removePin",
-    value: function removePin(userId) {
-      var _this$userMap$get4;
-      var streamId = (_this$userMap$get4 = this.userMap.get(userId)) === null || _this$userMap$get4 === void 0 || (_this$userMap$get4 = _this$userMap$get4.streams.find(function (stream) {
-        return stream.videoSourceType === _type3.AgoraRteVideoSourceType.CAMERA;
-      })) === null || _this$userMap$get4 === void 0 ? void 0 : _this$userMap$get4.streamId;
-      if (streamId) {
-        this._uiEventStore.sendEvent(_constant.UIAction.VIDEO_WINDOW_PIN_ACTION, {
-          action: _constant.VideoWindowPinType.REMOVE_PIN,
-          streamId: streamId
-        });
-      }
-    }
-  }, {
-    key: "addPin",
-    value: function addPin(userId) {
-      var _this$userMap$get5;
-      var streamId = (_this$userMap$get5 = this.userMap.get(userId)) === null || _this$userMap$get5 === void 0 || (_this$userMap$get5 = _this$userMap$get5.streams.find(function (stream) {
-        return stream.videoSourceType === _type3.AgoraRteVideoSourceType.CAMERA;
-      })) === null || _this$userMap$get5 === void 0 ? void 0 : _this$userMap$get5.streamId;
-      if (streamId) {
-        this._uiEventStore.sendEvent(_constant.UIAction.VIDEO_WINDOW_PIN_ACTION, {
-          action: _constant.VideoWindowPinType.ADD_PIN,
-          streamId: streamId
-        });
-      }
-    }
   }, {
     key: "_handleSetHostOrCoHost",
     value: function _handleSetHostOrCoHost(userId, type) {
@@ -896,7 +963,7 @@ var ParticipantStore = exports["default"] = /*#__PURE__*/function () {
             });
             return;
           }
-          _this6._userControl.updateUserRole(userId, type === 'host' ? _type.FcrUserRole.HOST : _type.FcrUserRole.COHOST);
+          _this6._userControl.updateRemoteUserRole(userId, type === 'host' ? _type.FcrUserRole.HOST : _type.FcrUserRole.COHOST);
           _this6._uiEventStore.closeConfirmDialog();
         },
         okText: (0, _i18n.transI18n)('fmt_uimanager_labels_Setas', {
@@ -919,7 +986,7 @@ var ParticipantStore = exports["default"] = /*#__PURE__*/function () {
   }, {
     key: "_setAsAttendee",
     value: function _setAsAttendee(userId) {
-      this._userControl.updateUserRole(userId, _type.FcrUserRole.PARTICIPANT);
+      this._userControl.updateRemoteUserRole(userId, _type.FcrUserRole.PARTICIPANT);
     }
 
     // room control actions
@@ -961,17 +1028,7 @@ var ParticipantStore = exports["default"] = /*#__PURE__*/function () {
       if (!this._securityStore.hasRevokeHostPermission() || this._userControl.getLocalUser().userRole === _type.FcrUserRole.HOST) {
         return;
       }
-
-      // find current host
-      var hostUser;
-      this.userMap.forEach(function (user) {
-        if (user.userInfo.userRole === _type.FcrUserRole.HOST) {
-          hostUser = user.userInfo;
-        }
-      });
-      if (hostUser) {
-        this._userControl.revokeHost(hostUser.userId);
-      }
+      this._userControl.revokeHost();
     }
   }, {
     key: "_playJoinLeaveSound",
@@ -1008,17 +1065,16 @@ var ParticipantStore = exports["default"] = /*#__PURE__*/function () {
   }, {
     key: "_onAudioVolumeUpdated",
     value: function _onAudioVolumeUpdated(roomId, streamId, volume) {
-      var users = this._streamControl.getStreams();
-      var user = users[streamId];
-      if (!user) {
+      var stream = this._streamControl.getStreamByStreamId(streamId);
+      if (!stream) {
         return;
       }
-      this.audioVolumeMap.set(user.owner.userId, volume);
+      this.audioVolumeMap.set(stream.owner.userId, volume);
     }
   }, {
     key: "_updateUserBoardState",
     value: function _updateUserBoardState(modifiedUser) {
-      var _this$_roomControl$ge = this._roomControl.getWhiteboardControl().getBoardActiveInfo(),
+      var _this$_roomControl$ge = this._roomControl.getBoardControl().getBoardActiveInfo(),
         isActive = _this$_roomControl$ge.isActive,
         ownerUserId = _this$_roomControl$ge.ownerUserId;
       if (!ownerUserId && !modifiedUser) return;
@@ -1150,16 +1206,6 @@ var ParticipantStore = exports["default"] = /*#__PURE__*/function () {
       }
       this.currentPerspectiveType = 'attendee';
     }
-  }, {
-    key: "hasRevokeHostPermission",
-    get: function get() {
-      return this._securityStore.hasRevokeHostPermission() && this.localUserRole !== _type.FcrUserRole.HOST;
-    }
-  }, {
-    key: "getAllowedOperations",
-    value: function getAllowedOperations(targetRole, isSelf) {
-      return this._securityStore.getAllowedOperations(targetRole, isSelf);
-    }
   }, {
     key: "_onPeerSessionReceived",
     value: function _onPeerSessionReceived(session) {
@@ -1318,7 +1364,7 @@ var ParticipantStore = exports["default"] = /*#__PURE__*/function () {
   }]);
 }();
 _ParticipantStore = ParticipantStore;
-var _applyDecs$e = (0, _slicedToArray2["default"])(_applyDecs(_ParticipantStore, [[_mobx.observable, 1, "_mainList"], [_mobx.observable, 1, "_participantsWindowActive"], [_mobx.observable, 1, "currentPerspectiveType"], [_mobx.observable, 1, "audioVolumeMap"], [_mobx.observable, 1, "enableParticipantsJoinWithMute"], [_mobx.observable, 1, "searchText"], [_mobx.observable, 1, "currentModal"], [_mobx.observable, 1, "localUserRole"], [_mobx.observable, 1, "spotlightStreamId"], [_mobx.observable, 1, "enableSpotlight"], [_mobx.observable, 1, "mergeConfirmDialog"], [_mobx.observable, 1, "mergeUserId"], [_setSpotlightStreamIdDecs, 18, "setSpotlightStreamId"], [_mobx.computed, 3, "userListSource"], [_mobx.computed, 3, "mergeUserInfo"], [_mobx.computed, 3, "userMap"], [_mobx.computed, 3, "pinedStreamIds"], [_mobx.computed, 3, "hasPinnedStream"], [_decorator.bound, 2, "hasMutePermission"], [_decorator.bound, 2, "hasUnmutePermission"], [_decorator.bound, 2, "hasRequestStartAudioPermission"], [_handleEventDecs, 18, "_handleEvent"], [_setCurrentModalDecs, 18, "setCurrentModal"], [_decorator.bound, 2, "closeParticipantsAside"], [_openParticipantsWindowDecs, 18, "openParticipantsWindow"], [_mobx.computed, 3, "userList"], [_setParticipantsWindowActiveDecs, 18, "setParticipantsWindowActive"], [_handlerSearchUserDecs, 18, "handlerSearchUser"], [_decorator.bound, 2, "onInvite"], [_decorator.bound, 2, "setMergeConfirmDialog"], [_decorator.bound, 2, "mergeConfirmDialogOk"], [_handlerUserActionDecs, 18, "handlerUserAction"], [_decorator.bound, 2, "getMicStreamVolume"], [_mobx.computed, 3, "localMicVolume"], [_handlerRoomControlActionDecs, 18, "handlerRoomControlAction"], [_kickOutUserDecs, 18, "_kickOutUser"], [_decorator.bound, 2, "removePin"], [_decorator.bound, 2, "addPin"], [_setAsAttendeeDecs, 18, "_setAsAttendee"], [_onAudioVolumeUpdatedDecs, 18, "_onAudioVolumeUpdated"], [_handleRemoteUserJoinedDecs, 18, "_handleRemoteUserJoined"], [_handleRemoteUserLeftDecs, 18, "_handleRemoteUserLeft"], [_onUserInfoUpdatedDecs, 18, "_onUserInfoUpdated"], [_initUserListDecs, 18, "_initUserList"], [_decorator.bound, 2, "_handleStreamsAdded"], [_decorator.bound, 2, "_handleStreamsUpdated"], [_decorator.bound, 2, "_handleStreamsRemoved"], [_refreshCurrentPerspectiveTypeDecs, 18, "_refreshCurrentPerspectiveType"], [_mobx.computed, 3, "hasRevokeHostPermission"], [_getAllowedOperationsDecs, 18, "getAllowedOperations"], [_onPeerSessionReceivedDecs, 18, "_onPeerSessionReceived"], [_updateLocalUserRoleDecs, 18, "_updateLocalUserRole"]], []).e, 13);
+var _applyDecs$e = (0, _slicedToArray2["default"])(_applyDecs(_ParticipantStore, [[_mobx.observable, 1, "_mainList"], [_mobx.observable, 1, "_participantsWindowActive"], [_mobx.observable, 1, "currentPerspectiveType"], [_mobx.observable, 1, "audioVolumeMap"], [_mobx.observable, 1, "enableParticipantsJoinWithMute"], [_mobx.observable, 1, "searchText"], [_mobx.observable, 1, "currentModal"], [_mobx.observable, 1, "localUserRole"], [_mobx.observable, 1, "spotlightStreamId"], [_mobx.observable, 1, "enableSpotlight"], [_mobx.observable, 1, "mergeConfirmDialog"], [_mobx.observable, 1, "mergeUserId"], [_mobx.computed, 3, "userListSource"], [_mobx.computed, 3, "mergeUserInfo"], [_mobx.computed, 3, "userMap"], [_mobx.computed, 3, "pinedStreamIds"], [_mobx.computed, 3, "hasPinnedStream"], [_mobx.computed, 3, "userList"], [_mobx.computed, 3, "localMicVolume"], [_mobx.computed, 3, "hasRevokeHostPermission"], [_setSpotlightStreamIdDecs, 18, "setSpotlightStreamId"], [_decorator.bound, 2, "hasMutePermission"], [_decorator.bound, 2, "hasUnmutePermission"], [_decorator.bound, 2, "hasRequestStartAudioPermission"], [_setCurrentModalDecs, 18, "setCurrentModal"], [_decorator.bound, 2, "closeParticipantsAside"], [_openParticipantsWindowDecs, 18, "openParticipantsWindow"], [_setParticipantsWindowActiveDecs, 18, "setParticipantsWindowActive"], [_handlerSearchUserDecs, 18, "handlerSearchUser"], [_decorator.bound, 2, "onInvite"], [_decorator.bound, 2, "setMergeConfirmDialog"], [_decorator.bound, 2, "mergeConfirmDialogOk"], [_decorator.bound, 2, "removePin"], [_decorator.bound, 2, "addPin"], [_getAllowedOperationsDecs, 18, "getAllowedOperations"], [_handlerUserActionDecs, 18, "handlerUserAction"], [_decorator.bound, 2, "getMicStreamVolume"], [_handlerRoomControlActionDecs, 18, "handlerRoomControlAction"], [_handleEventDecs, 18, "_handleEvent"], [_kickOutUserDecs, 18, "_kickOutUser"], [_setAsAttendeeDecs, 18, "_setAsAttendee"], [_onAudioVolumeUpdatedDecs, 18, "_onAudioVolumeUpdated"], [_handleRemoteUserJoinedDecs, 18, "_handleRemoteUserJoined"], [_handleRemoteUserLeftDecs, 18, "_handleRemoteUserLeft"], [_onUserInfoUpdatedDecs, 18, "_onUserInfoUpdated"], [_initUserListDecs, 18, "_initUserList"], [_decorator.bound, 2, "_handleStreamsAdded"], [_decorator.bound, 2, "_handleStreamsUpdated"], [_decorator.bound, 2, "_handleStreamsRemoved"], [_refreshCurrentPerspectiveTypeDecs, 18, "_refreshCurrentPerspectiveType"], [_onPeerSessionReceivedDecs, 18, "_onPeerSessionReceived"], [_updateLocalUserRoleDecs, 18, "_updateLocalUserRole"]], []).e, 13);
 _init__mainList = _applyDecs$e[0];
 _init__participantsWindowActive = _applyDecs$e[1];
 _init_currentPerspectiveType = _applyDecs$e[2];

package/lib/modules/participant/view.d.ts

@@ -1,11 +1,11 @@
 import './index.css';
 export declare const MuteAllDialog: ({ getContainer, allowUnmuteSelfAudio, allowJoinWithMuteAudio, showMuteAllDialog, onCancel, onOk, onClose, }: {
-    getContainer?: (() => HTMLElement) | undefined;
-    allowUnmuteSelfAudio?: boolean | undefined;
-    allowJoinWithMuteAudio?: boolean | undefined;
+    getContainer?: () => HTMLElement;
+    allowUnmuteSelfAudio?: boolean;
+    allowJoinWithMuteAudio?: boolean;
     showMuteAllDialog: boolean;
-    onCancel?: (() => void) | undefined;
-    onClose?: (() => void) | undefined;
-    onOk?: ((allowUnmute: boolean, joinWidthMute: boolean) => void) | undefined;
+    onCancel?: () => void;
+    onClose?: () => void;
+    onOk?: (allowUnmute: boolean, joinWidthMute: boolean) => void;
 }) => import("react/jsx-runtime").JSX.Element;
 export declare const View: () => import("react/jsx-runtime").JSX.Element | null;

package/lib/modules/participant/view.js

@@ -10,6 +10,11 @@ require("core-js/modules/es.object.get-own-property-descriptor.js");
 require("core-js/modules/es.object.get-own-property-descriptors.js");
 require("core-js/modules/es.object.keys.js");
 require("core-js/modules/es.object.to-string.js");
+require("core-js/modules/esnext.async-iterator.filter.js");
+require("core-js/modules/esnext.async-iterator.for-each.js");
+require("core-js/modules/esnext.iterator.constructor.js");
+require("core-js/modules/esnext.iterator.filter.js");
+require("core-js/modules/esnext.iterator.for-each.js");
 require("core-js/modules/web.dom-collections.for-each.js");
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {