fcr-ui-scene 3.4.4 → 3.5.0

package/lib/modules/video-window/store.js

@@ -21,7 +21,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = exports.StoreContext = void 0;
-var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 require("core-js/modules/es.array.filter.js");
 require("core-js/modules/es.array.find.js");
 require("core-js/modules/es.array.for-each.js");
@@ -31,13 +30,8 @@ require("core-js/modules/es.array.slice.js");
 require("core-js/modules/es.array.some.js");
 require("core-js/modules/es.map.js");
 require("core-js/modules/es.object.to-string.js");
-require("core-js/modules/es.object.values.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.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");
@@ -62,25 +56,20 @@ 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 _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 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 _mobx = require("mobx");
-var _fcrCore = require("fcr-core");
-var _type = require("../../type");
-var _type2 = require("fcr-core/lib/room-control/type");
 var _constant = require("../../utilities/constant");
 var _decorator = require("agora-foundation/lib/decorator");
-var _type3 = require("./type");
-var _type4 = require("../layout/type");
-var _type5 = require("agora-rte-sdk/lib/core/rtc/type");
-var _type6 = require("fcr-core/lib/type");
+var _type = require("./type");
+var _type2 = require("../layout/type");
+var _type3 = require("agora-rte-sdk/lib/core/rtc/type");
 var _attendee = require("agora-ui-foundation/lib/components/participants/attendee");
 var _react = require("react");
-var _tools = require("../../utilities/tools");
+var _type4 = require("../../type");
 var _VideoWindowStore;
-var _initProto, _init_userVolumeMap, _init_speakHover, _init_videoWindowPreviewType, _init_videoWindowCurrentWidth, _init_videoWindowCurrentHeight, _init_foldList, _init_workareaX, _init_workareaY, _init_workareaWidth, _init_workareaHeight, _init_localUserRole, _init__spotlightStreamId, _init_connectType, _init_bounds, _setBoundsDecs, _onAudioVolumeUpdatedDecs, _changeVideoWindowBoundsDecs, _onUserInfoUpdatedDecs, _setVideoWindowPreviewTypeDecs, _closeVideoWindowDecs, _setSpeakHoverDecs, _getAllowedOperationsDecs, _getCurrentDisplayBoundsDecs, _handleStreamsAddedOrUpdatedDecs, _ref;
+var _initProto, _init_userVolumeMap, _init_wrapperHovering, _init_videoWindowPreviewType, _init_videoWindowCurrentWidth, _init_videoWindowCurrentHeight, _init_foldList, _init_innerFrameBounds, _changeVideoWindowBoundsDecs, _setVideoWindowPreviewTypeDecs, _closeVideoWindowDecs, _setWrapperHoverDecs, _getAllowedOperationsDecs, _onAudioVolumeUpdatedDecs, _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; }
@@ -98,55 +87,35 @@ var _D = /*#__PURE__*/new WeakMap();
 var _E = /*#__PURE__*/new WeakMap();
 var _F = /*#__PURE__*/new WeakMap();
 var _G = /*#__PURE__*/new WeakMap();
-var _H = /*#__PURE__*/new WeakMap();
-var _I = /*#__PURE__*/new WeakMap();
-var _J = /*#__PURE__*/new WeakMap();
-var _K = /*#__PURE__*/new WeakMap();
-var _L = /*#__PURE__*/new WeakMap();
-var _M = /*#__PURE__*/new WeakMap();
-var _N = /*#__PURE__*/new WeakMap();
-_ref = (_setBoundsDecs = [_mobx.action, _mobx.action.bound], _onAudioVolumeUpdatedDecs = [_mobx.action, _mobx.action.bound], _changeVideoWindowBoundsDecs = [_mobx.action, _mobx.action.bound], _onUserInfoUpdatedDecs = [_mobx.action, _mobx.action.bound], _setVideoWindowPreviewTypeDecs = [_mobx.action, _mobx.action.bound], _closeVideoWindowDecs = [_mobx.action, _mobx.action.bound], _setSpeakHoverDecs = [_mobx.action, _mobx.action.bound], _getAllowedOperationsDecs = [_mobx.action, _mobx.action.bound], _getCurrentDisplayBoundsDecs = [_mobx.action, _mobx.action.bound], _handleStreamsAddedOrUpdatedDecs = [_mobx.action, _mobx.action.bound], "_uiEventStore");
+_ref = (_changeVideoWindowBoundsDecs = [_mobx.action, _mobx.action.bound], _setVideoWindowPreviewTypeDecs = [_mobx.action, _mobx.action.bound], _closeVideoWindowDecs = [_mobx.action, _mobx.action.bound], _setWrapperHoverDecs = [_mobx.action, _mobx.action.bound], _getAllowedOperationsDecs = [_mobx.action, _mobx.action.bound], _onAudioVolumeUpdatedDecs = [_mobx.action, _mobx.action.bound], "_uiEventStore");
 var VideoWindowStore = exports["default"] = /*#__PURE__*/function () {
   function VideoWindowStore(params) {
     var _this = this;
     (0, _classCallCheck2["default"])(this, VideoWindowStore);
     (0, _defineProperty2["default"])(this, _ref, void _initProto(this));
     (0, _defineProperty2["default"])(this, "_subscriptions", []);
-    (0, _defineProperty2["default"])(this, "_isPopoverVisible", false);
     _classPrivateFieldInitSpec(this, _A, _init_userVolumeMap(this, new Map()));
-    _classPrivateFieldInitSpec(this, _B, _init_speakHover(this));
-    _classPrivateFieldInitSpec(this, _C, _init_videoWindowPreviewType(this, _type3.FcrVideoWindowPreviewType.SMALL));
+    _classPrivateFieldInitSpec(this, _B, _init_wrapperHovering(this));
+    _classPrivateFieldInitSpec(this, _C, _init_videoWindowPreviewType(this, _type.FcrVideoWindowPreviewType.SMALL));
     _classPrivateFieldInitSpec(this, _D, _init_videoWindowCurrentWidth(this));
     _classPrivateFieldInitSpec(this, _E, _init_videoWindowCurrentHeight(this));
     _classPrivateFieldInitSpec(this, _F, _init_foldList(this, []));
-    _classPrivateFieldInitSpec(this, _G, _init_workareaX(this, 0));
-    _classPrivateFieldInitSpec(this, _H, _init_workareaY(this, 0));
-    _classPrivateFieldInitSpec(this, _I, _init_workareaWidth(this, 0));
-    _classPrivateFieldInitSpec(this, _J, _init_workareaHeight(this, 0));
-    _classPrivateFieldInitSpec(this, _K, _init_localUserRole(this, _type6.FcrUserRole.PARTICIPANT));
-    // @observable accessor _spotlightStreamId: string = '';
-    // @observable accessor shouldHideNonVideoParticipants = false;
-    _classPrivateFieldInitSpec(this, _L, _init__spotlightStreamId(this, ''));
-    _classPrivateFieldInitSpec(this, _M, _init_connectType(this, _type.FcrUIConnectType.COMPUTER));
-    _classPrivateFieldInitSpec(this, _N, _init_bounds(this, {
+    _classPrivateFieldInitSpec(this, _G, _init_innerFrameBounds(this, {
       width: 0,
       height: 0
     }));
     var uiEventStore = params.uiEventStore,
-      userControl = params.userControl,
       streamControl = params.streamControl,
       securityStore = params.securityStore,
       deviceStore = params.deviceStore,
-      deviceStreamStore = params.deviceStreamStore,
       sharedLayoutDataSource = params.sharedLayoutDataSource,
       sharedInterpreterDataSource = params.sharedInterpreterDataSource,
       sharedSettingDataSource = params.sharedSettingDataSource,
       chatProvider = params.chatProvider,
       sharedVideoWindowDataSource = params.sharedVideoWindowDataSource,
-      remoteRenderProvider = params.remoteRenderProvider;
+      sharedMemberDataSource = params.sharedMemberDataSource;
     this._uiEventStore = uiEventStore;
     this._deviceStore = deviceStore;
-    this._deviceStreamStore = deviceStreamStore;
     this._streamControl = streamControl;
     this._securityStore = securityStore;
     this._sharedLayoutDataSource = sharedLayoutDataSource;
@@ -154,24 +123,13 @@ var VideoWindowStore = exports["default"] = /*#__PURE__*/function () {
     this._sharedSettingDataSource = sharedSettingDataSource;
     this._chatProvider = chatProvider;
     this._sharedVideoWindowDataSource = sharedVideoWindowDataSource;
-    this._remoteRenderProvider = remoteRenderProvider;
-    // this._uiEventStore.addObserver({
-    //   onEvent: this.onEvent,
-    // });
+    this._sharedMemberDataSource = sharedMemberDataSource;
     this._streamControl.addObserver({
-      onStreamVolumeIndicationUpdated: this._onAudioVolumeUpdated,
-      onStreamsAdded: this._handleStreamsAddedOrUpdated,
-      onStreamsUpdated: this._handleStreamsAddedOrUpdated,
-      onStreamsRemoved: this._handleStreamsAddedOrUpdated
+      onStreamVolumeIndicationUpdated: this._onAudioVolumeUpdated
     });
-    this._userControl = userControl;
-    this._userControl.addObserver({
-      onUserInfoUpdated: this.onUserInfoUpdated
-    });
-    this.setLocalUserRole(userControl.getLocalUser().userRole);
-    this.speakHover = false;
-    this.videoWindowCurrentHeight = _type3.DefaultVideoWindowSmallTypeHeight;
-    this.videoWindowCurrentWidth = _type3.DefaultVideoWindowWidth;
+    this.videoWindowCurrentHeight = _type.DefaultVideoWindowSmallTypeHeight;
+    this.videoWindowCurrentWidth = _type.DefaultVideoWindowWidth;
+    this.wrapperHovering = false;
     this._subscriptions.push((0, _mobx.reaction)(function () {
       return _this._deviceStore.microphoneVolumeLevel;
     }, function (volume) {
@@ -189,7 +147,7 @@ var VideoWindowStore = exports["default"] = /*#__PURE__*/function () {
       _classPrivateFieldSet(_A, this, v);
     }
   }, {
-    key: "speakHover",
+    key: "wrapperHovering",
     get: function get() {
       return _classPrivateFieldGet(_B, this);
     },
@@ -229,7 +187,7 @@ var VideoWindowStore = exports["default"] = /*#__PURE__*/function () {
       _classPrivateFieldSet(_F, this, v);
     }
   }, {
-    key: "workareaX",
+    key: "innerFrameBounds",
     get: function get() {
       return _classPrivateFieldGet(_G, this);
     },
@@ -237,131 +195,84 @@ var VideoWindowStore = exports["default"] = /*#__PURE__*/function () {
       _classPrivateFieldSet(_G, this, v);
     }
   }, {
-    key: "workareaY",
+    key: "shouldHideNonVideoParticipants",
     get: function get() {
-      return _classPrivateFieldGet(_H, this);
-    },
-    set: function set(v) {
-      _classPrivateFieldSet(_H, this, v);
+      return this._sharedSettingDataSource.setting.shouldHideNonVideoParticipants;
     }
   }, {
-    key: "workareaWidth",
+    key: "foldListRenderData",
     get: function get() {
-      return _classPrivateFieldGet(_I, this);
-    },
-    set: function set(v) {
-      _classPrivateFieldSet(_I, this, v);
+      return this._sliceFoldList();
     }
   }, {
-    key: "workareaHeight",
+    key: "spotlightStreamId",
     get: function get() {
-      return _classPrivateFieldGet(_J, this);
-    },
-    set: function set(v) {
-      _classPrivateFieldSet(_J, this, v);
+      return this._sharedVideoWindowDataSource.spotlightStreamId;
     }
   }, {
-    key: "localUserRole",
+    key: "findSpotlightUser",
     get: function get() {
-      return _classPrivateFieldGet(_K, this);
-    },
-    set: function set(v) {
-      _classPrivateFieldSet(_K, this, v);
+      var _this2 = this;
+      return this.spotlightStreamId ? this.foldList.find(function (item) {
+        return item.videoStreamId === _this2.spotlightStreamId || item.audioStreamId === _this2.spotlightStreamId;
+      }) : null;
     }
   }, {
-    key: "_spotlightStreamId",
+    key: "hasPinnedStream",
     get: function get() {
-      return _classPrivateFieldGet(_L, this);
-    },
-    set: function set(v) {
-      _classPrivateFieldSet(_L, this, v);
+      var filterList = this.filterFoldList;
+      return filterList.some(function (item) {
+        return item.isPin;
+      });
     }
   }, {
-    key: "connectType",
+    key: "videoWindowHeight",
     get: function get() {
-      return _classPrivateFieldGet(_M, this);
-    },
-    set: function set(v) {
-      _classPrivateFieldSet(_M, this, v);
+      var list = this._sliceFoldList();
+      return _type.DefaultVideoWindowHeight + list.length * _type.VideoWindowItemHeight;
     }
   }, {
-    key: "bounds",
+    key: "interpreterUserList",
     get: function get() {
-      return _classPrivateFieldGet(_N, this);
-    },
-    set: function set(v) {
-      _classPrivateFieldSet(_N, this, v);
-    }
-  }, {
-    key: "setPopoverVisible",
-    value: function setPopoverVisible(visible) {
-      this._isPopoverVisible = visible;
+      return this._sharedInterpreterDataSource.interpreterUserList;
     }
   }, {
-    key: "setBounds",
-    value: function setBounds(width, height) {
-      // 如果当前popover区域展开了，宽高不能为0，否则会超出渲染区域
-      if (this.videoWindowPreviewType !== _type3.FcrVideoWindowPreviewType.SMALL && this._isPopoverVisible && width === 0 && height === 0) {
-        return;
-      }
-      this.bounds = {
-        width: width,
-        height: height
-      };
-    }
-  }, {
-    key: "setVideoOrientation",
-    value: function setVideoOrientation() {
-      this._deviceStore.setVideoOrientation();
-    }
-  }, {
-    key: "release",
-    value: function release() {
-      this._subscriptions.forEach(function (fn) {
-        return fn();
-      });
-    }
-  }, {
-    key: "shouldHideNonVideoParticipants",
+    key: "isInterpreterEnabled",
     get: function get() {
-      return this._sharedSettingDataSource.setting.shouldHideNonVideoParticipants;
-    }
-  }, {
-    key: "_onAudioVolumeUpdated",
-    value: function _onAudioVolumeUpdated(roomId, streamId, volume) {
-      this.userVolumeMap.set(streamId, Math.floor(volume / 255 * 100));
+      return this._sharedInterpreterDataSource.isInterpreterEnabled;
     }
   }, {
-    key: "foldListRenderData",
+    key: "filterFoldList",
     get: function get() {
-      var filterList = this.filterFoldList(this.foldList, this.shouldHideNonVideoParticipants);
-      return this.sliceFoldList(filterList, this.videoWindowPreviewType);
+      var sourceList = this.foldList.filter(function (i) {
+        return !i.isMySelf || i.videoSourceType !== _type3.AgoraRtcVideoSourceType.SCREEN;
+      });
+      var _list = this.shouldHideNonVideoParticipants ? sourceList.filter(function (i) {
+        return i.isMySelf || i.hasVideoStream || i.videoSourceType === _type3.AgoraRtcVideoSourceType.SCREEN || i.type === _type2.FcrUIWindowType.BOARD;
+      }) : sourceList;
+      return _list;
     }
   }, {
-    key: "spotlightStreamId",
+    key: "shouldHaveListView",
     get: function get() {
-      return this._sharedVideoWindowDataSource.spotlightStreamId;
+      return this.filterFoldList.length > 1;
     }
   }, {
-    key: "findSpotlightUser",
+    key: "localUserRole",
     get: function get() {
-      var _this2 = this;
-      return this.spotlightStreamId ? this.foldList.find(function (item) {
-        return item.videoStreamId === _this2.spotlightStreamId || item.audioStreamId === _this2.spotlightStreamId;
-      }) : null;
+      return this._sharedMemberDataSource.localUserRole;
     }
   }, {
-    key: "hasPinnedStream",
-    get: function get() {
-      var filterList = this.filterFoldList(this.foldList, this.shouldHideNonVideoParticipants);
-      return filterList.some(function (item) {
-        return item.isPin;
-      });
+    key: "setVideoOrientation",
+    value: function setVideoOrientation() {
+      this._deviceStore.setVideoOrientation();
     }
   }, {
-    key: "getLocalUserId",
-    value: function getLocalUserId() {
-      return this._userControl.getLocalUser().userId;
+    key: "release",
+    value: function release() {
+      this._subscriptions.forEach(function (fn) {
+        return fn();
+      });
     }
   }, {
     key: "removePin",
@@ -373,29 +284,6 @@ var VideoWindowStore = exports["default"] = /*#__PURE__*/function () {
     value: function addPin(streamId) {
       this._sharedVideoWindowDataSource.addPin(streamId);
     }
-  }, {
-    key: "startPlayLocalVideo",
-    value: function startPlayLocalVideo(element, isMirror) {
-      this._deviceStore.startPlayLocalVideo(element, isMirror);
-    }
-  }, {
-    key: "stopPlayLocalVideo",
-    value: function stopPlayLocalVideo(element) {
-      this._deviceStore.stopPlayLocalVideo(element);
-    }
-  }, {
-    key: "startRenderRemoteVideo",
-    value: function startRenderRemoteVideo(streamId, type, renderMode, isMirror, element) {
-      return this._remoteRenderProvider.startRenderRemoteVideo(streamId, type, {
-        renderMode: renderMode,
-        isMirror: isMirror
-      }, element);
-    }
-  }, {
-    key: "stopRenderRemoteVideo",
-    value: function stopRenderRemoteVideo(streamId, element) {
-      this._remoteRenderProvider.stopRenderRemoteVideo(streamId, element);
-    }
   }, {
     key: "sendParticipantEvent",
     value: function sendParticipantEvent(payload) {
@@ -409,64 +297,45 @@ var VideoWindowStore = exports["default"] = /*#__PURE__*/function () {
         userId: userId
       });
     }
-  }, {
-    key: "setLocalUserRole",
-    value: function setLocalUserRole(role) {
-      this.localUserRole = role;
-    }
   }, {
     key: "computedVideoWindowHeight",
-    value: function computedVideoWindowHeight(list, previewType) {
-      var _height = _type3.DefaultVideoWindowHeight;
-      var listCount = list.length > 4 ? 4 : list.length;
-      if (previewType !== _type3.FcrVideoWindowPreviewType.MIX) {
-        if (previewType === _type3.FcrVideoWindowPreviewType.SMALL) {
-          _height = _type3.DefaultVideoWindowHeight + _type3.VideoWindowItemHeight;
-        } else if (previewType === _type3.FcrVideoWindowPreviewType.MIDDLE) {
-          _height = _type3.DefaultVideoWindowHeight + listCount * _type3.VideoWindowItemHeight;
-        }
+    value: function computedVideoWindowHeight() {
+      var length = this.filterFoldList.length;
+      var listCount = length > 4 ? 4 : length;
+      switch (this.videoWindowPreviewType) {
+        case _type.FcrVideoWindowPreviewType.MINI:
+          return _type.DefaultVideoWindowHeight;
+        case _type.FcrVideoWindowPreviewType.SMALL:
+          return _type.DefaultVideoWindowSmallTypeHeight;
+        case _type.FcrVideoWindowPreviewType.LIST:
+          return _type.DefaultVideoWindowHeight + listCount * _type.VideoWindowItemHeight;
+        default:
+          return _type.DefaultVideoWindowHeight;
       }
-      return _height;
-    }
-  }, {
-    key: "sliceFoldList",
-    value: function sliceFoldList(list, previewType) {
-      return previewType === _type3.FcrVideoWindowPreviewType.MIDDLE ? list.slice(0, 4) : previewType === _type3.FcrVideoWindowPreviewType.SMALL ? list.slice(0, 1) : [];
     }
   }, {
     key: "changeVideoWindowBounds",
-    value: function changeVideoWindowBounds(x, y, width, height, list) {
-      var previewType = this.videoWindowPreviewType;
+    value: function changeVideoWindowBounds() {
+      var videoWindowPreviewType = this.videoWindowPreviewType;
+      var videoWindowHeight = this.computedVideoWindowHeight();
       this._uiEventStore.sendEvent(_constant.FcrUIAction.VIDEO_WINDOW_BOUNDS, {
-        videoWindowHeight: this.computedVideoWindowHeight(list, previewType),
-        videoWindowPreviewType: previewType,
-        workareaX: x,
-        workareaY: y,
-        workareaWidth: width || this.workareaWidth,
-        workareaHeight: height || this.workareaHeight
+        videoWindowHeight: videoWindowHeight,
+        videoWindowPreviewType: videoWindowPreviewType
       });
       // 判断当前是否展开了popover区域，实际上只有展开了popover区域，这里的width和height才会有值
-      if (this.bounds.width && this.bounds.width >= _type3.DefaultVideoWindowWidth) {
-        this.setBounds(this.bounds.width, this.bounds.height);
-      } else {
-        this.setBounds(0, 0);
-      }
     }
   }, {
     key: "openPrivateChat",
     value: function openPrivateChat(userId) {
-      var _this$_userControl;
-      if (!this._securityStore.permitPrivateChat(userId)) {
-        return;
-      }
+      if (!this._securityStore.permitPrivateChat(userId)) return;
       this._sharedLayoutDataSource.setAsideLayout({
         chat: true
       });
-      var user = Object.values(this === null || this === void 0 || (_this$_userControl = this._userControl) === null || _this$_userControl === void 0 ? void 0 : _this$_userControl.getUsers()).find(function (u) {
+      var user = this._sharedMemberDataSource.memberUserInfoList.find(function (u) {
         return u.userId === userId;
       });
       // user && this._uiEventStore.notifyChatUpdateTarget(user, FcrRoomType.Mainroom);
-      user && this._chatProvider.setPrivateChatTargetUser(user, _type2.FcrRoomType.Mainroom);
+      user && this._chatProvider.setPrivateChatTargetUser(user, _type4.FcrUIRoomType.MAIN_ROOM);
     }
   }, {
     key: "openRenameDialog",
@@ -491,11 +360,6 @@ var VideoWindowStore = exports["default"] = /*#__PURE__*/function () {
     value: function hasRequestStartAudioPermission(targetRole) {
       return this._securityStore.hasRequestStartAudioPermission(targetRole);
     }
-  }, {
-    key: "onUserInfoUpdated",
-    value: function onUserInfoUpdated(roomId, event) {
-      this.setLocalUserRole(this._userControl.getLocalUser().userRole);
-    }
   }, {
     key: "setVideoWindowPreviewType",
     value: function setVideoWindowPreviewType(type) {
@@ -505,63 +369,23 @@ var VideoWindowStore = exports["default"] = /*#__PURE__*/function () {
   }, {
     key: "handleFoldListChanged",
     value: function handleFoldListChanged() {
-      var list = this.filterFoldList(this.foldList, this.shouldHideNonVideoParticipants);
-      this.changeVideoWindowBounds(this.workareaX, this.workareaY, this.workareaWidth, this.workareaHeight, list);
-      var height = this.computedVideoWindowHeight(list, this.videoWindowPreviewType);
-      this.setBounds(_type3.DefaultVideoWindowWidth, height);
+      this.changeVideoWindowBounds();
+      var height = this.computedVideoWindowHeight();
       this._uiEventStore.sendEvent(_constant.FcrUIAction.VIDEO_WINDOW_RESIZE, {
-        width: _type3.DefaultVideoWindowWidth,
+        width: _type.DefaultVideoWindowWidth,
         height: height
       });
     }
   }, {
     key: "closeVideoWindow",
     value: function closeVideoWindow() {
-      this.videoWindowPreviewType = _type3.FcrVideoWindowPreviewType.SMALL;
-      this.setVideoWindowPreviewType(_type3.FcrVideoWindowPreviewType.SMALL);
-    }
-  }, {
-    key: "microphoneEnabled",
-    get: function get() {
-      return this._deviceStore.microphoneEnabled;
-    }
-  }, {
-    key: "microphoneVolumeLevel",
-    get: function get() {
-      return this._deviceStore.microphoneVolumeLevel;
-    }
-  }, {
-    key: "filterFoldList",
-    value: function filterFoldList(list, shouldHideNonVideoParticipants) {
-      var sourceList = list.filter(function (i) {
-        return !i.isMySelf || i.videoSourceType !== _type5.AgoraRtcVideoSourceType.SCREEN;
-      });
-      var _list = shouldHideNonVideoParticipants ? sourceList.filter(function (i) {
-        return i.isMySelf || i.hasVideoStream || i.videoSourceType === _type5.AgoraRtcVideoSourceType.SCREEN || i.type === _type4.FcrUIWindowType.BOARD;
-      }) : sourceList;
-      return _list;
-    }
-  }, {
-    key: "videoWindowHeight",
-    get: function get() {
-      var filterList = this.filterFoldList(this.foldList, this.shouldHideNonVideoParticipants);
-      var list = this.sliceFoldList(filterList, this.videoWindowPreviewType);
-      return _type3.DefaultVideoWindowHeight + list.length * _type3.VideoWindowItemHeight;
-    }
-  }, {
-    key: "interpreterUsers",
-    get: function get() {
-      return this._sharedInterpreterDataSource.interpreterUsers;
+      this.videoWindowPreviewType = _type.FcrVideoWindowPreviewType.SMALL;
+      this.setVideoWindowPreviewType(_type.FcrVideoWindowPreviewType.SMALL);
     }
   }, {
-    key: "interpreterState",
-    get: function get() {
-      return this._sharedInterpreterDataSource.interpreterOff;
-    }
-  }, {
-    key: "setSpeakHover",
-    value: function setSpeakHover(hover) {
-      this.speakHover = hover;
+    key: "setWrapperHover",
+    value: function setWrapperHover(hover) {
+      this.wrapperHovering = hover;
     }
   }, {
     key: "getAllowedOperations",
@@ -569,120 +393,25 @@ var VideoWindowStore = exports["default"] = /*#__PURE__*/function () {
       return this._securityStore.getAllowedOperations(targetRole, isSelf);
     }
   }, {
-    key: "shouldHaveMiddleView",
-    get: function get() {
-      var _this$filterFoldList;
-      return ((_this$filterFoldList = this.filterFoldList(this.foldList, this.shouldHideNonVideoParticipants)) === null || _this$filterFoldList === void 0 ? void 0 : _this$filterFoldList.length) > 1;
-    }
-  }, {
-    key: "getCurrentDisplayBounds",
-    value: function () {
-      var _getCurrentDisplayBounds = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee(id, type, bounds) {
-        var allApplicationWindows, filterList, _getCurrentSharingWor, x, y, width, height;
-        return _regenerator["default"].wrap(function _callee$(_context) {
-          while (1) switch (_context.prev = _context.next) {
-            case 0:
-              _context.next = 2;
-              return this._deviceStore.getWindowList();
-            case 2:
-              allApplicationWindows = _context.sent;
-              filterList = this.filterFoldList(this.foldList, this.shouldHideNonVideoParticipants);
-              _getCurrentSharingWor = (0, _tools.getCurrentSharingWorkArea)({
-                currentShareId: id,
-                currentShareType: type,
-                currentShareBounds: bounds,
-                allApplicationWindows: allApplicationWindows
-              }), x = _getCurrentSharingWor.x, y = _getCurrentSharingWor.y, width = _getCurrentSharingWor.width, height = _getCurrentSharingWor.height;
-              this.workareaX = x;
-              this.workareaY = y;
-              this.workareaWidth = width;
-              this.workareaHeight = height;
-              this.changeVideoWindowBounds(x, y, width, height, filterList);
-            case 10:
-            case "end":
-              return _context.stop();
-          }
-        }, _callee, this);
-      }));
-      function getCurrentDisplayBounds(_x, _x2, _x3) {
-        return _getCurrentDisplayBounds.apply(this, arguments);
-      }
-      return getCurrentDisplayBounds;
-    }()
-  }, {
-    key: "_handleStreamsAddedOrUpdated",
-    value: function _handleStreamsAddedOrUpdated() {
-      var _this$_userControl$ge = this._userControl.getLocalUser(),
-        userId = _this$_userControl$ge.userId;
-      var streams = this._streamControl.getStreamsByUserId(userId);
-      var hasPstnStream = streams.some(function (_ref2) {
-        var connectorType = _ref2.connectorType;
-        return connectorType === _fcrCore.FcrRoomConnectorType.PSTN;
-      });
-      this.connectType = hasPstnStream ? _type.FcrUIConnectType.PHONE : _type.FcrUIConnectType.COMPUTER;
+    key: "_onAudioVolumeUpdated",
+    value: function _onAudioVolumeUpdated(roomId, streamId, volume) {
+      this.userVolumeMap.set(streamId, Math.floor(volume / 255 * 100));
     }
   }, {
-    key: "openConnection",
-    value: function openConnection(type) {
-      this._uiEventStore.openDialog(_constant.FcrUIDialogKey.CONNECTION_GATEWAY, '', {
-        type: type
-      });
+    key: "_sliceFoldList",
+    value: function _sliceFoldList() {
+      return this.videoWindowPreviewType === _type.FcrVideoWindowPreviewType.LIST ? this.filterFoldList.slice(0, 4) : this.videoWindowPreviewType === _type.FcrVideoWindowPreviewType.SMALL ? this.filterFoldList.slice(0, 1) : [];
     }
-  }, {
-    key: "enableMicrophone",
-    value: function enableMicrophone(enable) {
-      this._deviceStreamStore.enableMicrophoneWithPreCheck(enable);
-    }
-    // @bound
-    // onEvent(action: FcrUIAction, payload: unknown) {
-    //   if (action === FcrUIAction.SET_CURRENT_SHARE_SCREEN) {
-    //     const { id, type, bounds } = payload as CurrentShareScreenTypes;
-    //     isElectron() && this.getCurrentDisplayBounds(id, type, bounds);
-    //   }
-    //   if (action === FcrUIAction.VIDEO_WINDOW_RESIZE) {
-    //     const { width, height } = payload as { width: number; height: number };
-    //     this.videoWindowCurrentHeight = height;
-    //     this.videoWindowCurrentWidth = width;
-    //   }
-    //   if (action === FcrUIAction.FOLD_LIST_CHANGED) {
-    //     this.foldList = (payload as FcrUIVideoWindowData[]) || [];
-
-    //     // 没有远端可以看了，如果当前在middle模式，切换到small模式
-    //     if (
-    //       !this.shouldHaveMiddleView &&
-    //       this.videoWindowPreviewType === FcrVideoWindowPreviewType.MIDDLE
-    //     ) {
-    //       this.setVideoWindowPreviewType(FcrVideoWindowPreviewType.SMALL);
-    //     } else {
-    //       this.handleFoldListChanged();
-    //     }
-    //   }
-    //   // if (action === FcrUIAction.SPOTLIGHT_STREAM_CHANGED) {
-    //   //   const { type, streamId } = payload as FcrUISpotlightStreamChangedParams;
-    //   //   if (type === 'add') {
-    //   //     this._spotlightStreamId = streamId;
-    //   //   } else {
-    //   //     this._spotlightStreamId = '';
-    //   //   }
-    //   // }
-    // }
   }]);
 }();
 _VideoWindowStore = VideoWindowStore;
-var _applyDecs$e = (0, _slicedToArray2["default"])(_applyDecs(_VideoWindowStore, [[_mobx.observable, 1, "userVolumeMap"], [_mobx.observable, 1, "speakHover"], [_mobx.observable, 1, "videoWindowPreviewType"], [_mobx.observable, 1, "videoWindowCurrentWidth"], [_mobx.observable, 1, "videoWindowCurrentHeight"], [_mobx.observable, 1, "foldList"], [_mobx.observable, 1, "workareaX"], [_mobx.observable, 1, "workareaY"], [_mobx.observable, 1, "workareaWidth"], [_mobx.observable, 1, "workareaHeight"], [_mobx.observable, 1, "localUserRole"], [_mobx.observable, 1, "_spotlightStreamId"], [_mobx.observable, 1, "connectType"], [_mobx.observable, 1, "bounds"], [_decorator.bound, 2, "setPopoverVisible"], [_setBoundsDecs, 18, "setBounds"], [_decorator.bound, 2, "setVideoOrientation"], [_onAudioVolumeUpdatedDecs, 18, "_onAudioVolumeUpdated"], [_mobx.computed, 3, "foldListRenderData"], [_mobx.computed, 3, "spotlightStreamId"], [_mobx.computed, 3, "findSpotlightUser"], [_mobx.computed, 3, "hasPinnedStream"], [_decorator.bound, 2, "removePin"], [_decorator.bound, 2, "addPin"], [_decorator.bound, 2, "startPlayLocalVideo"], [_decorator.bound, 2, "stopPlayLocalVideo"], [_decorator.bound, 2, "startRenderRemoteVideo"], [_decorator.bound, 2, "stopRenderRemoteVideo"], [_decorator.bound, 2, "sendParticipantEvent"], [_decorator.bound, 2, "muteAudio"], [_mobx.action, 2, "setLocalUserRole"], [_decorator.bound, 2, "computedVideoWindowHeight"], [_decorator.bound, 2, "sliceFoldList"], [_changeVideoWindowBoundsDecs, 18, "changeVideoWindowBounds"], [_decorator.bound, 2, "openPrivateChat"], [_decorator.bound, 2, "openRenameDialog"], [_decorator.bound, 2, "hasMutePermission"], [_decorator.bound, 2, "hasUnmutePermission"], [_decorator.bound, 2, "hasRequestStartAudioPermission"], [_onUserInfoUpdatedDecs, 18, "onUserInfoUpdated"], [_setVideoWindowPreviewTypeDecs, 18, "setVideoWindowPreviewType"], [_closeVideoWindowDecs, 18, "closeVideoWindow"], [_decorator.bound, 2, "filterFoldList"], [_mobx.computed, 3, "videoWindowHeight"], [_setSpeakHoverDecs, 18, "setSpeakHover"], [_getAllowedOperationsDecs, 18, "getAllowedOperations"], [_mobx.computed, 3, "shouldHaveMiddleView"], [_getCurrentDisplayBoundsDecs, 18, "getCurrentDisplayBounds"], [_handleStreamsAddedOrUpdatedDecs, 18, "_handleStreamsAddedOrUpdated"], [_decorator.bound, 2, "openConnection"], [_decorator.bound, 2, "enableMicrophone"]], []).e, 15);
+var _applyDecs$e = (0, _slicedToArray2["default"])(_applyDecs(_VideoWindowStore, [[_mobx.observable, 1, "userVolumeMap"], [_mobx.observable, 1, "wrapperHovering"], [_mobx.observable, 1, "videoWindowPreviewType"], [_mobx.observable, 1, "videoWindowCurrentWidth"], [_mobx.observable, 1, "videoWindowCurrentHeight"], [_mobx.observable, 1, "foldList"], [_mobx.observable, 1, "innerFrameBounds"], [_mobx.computed, 3, "foldListRenderData"], [_mobx.computed, 3, "spotlightStreamId"], [_mobx.computed, 3, "findSpotlightUser"], [_mobx.computed, 3, "hasPinnedStream"], [_mobx.computed, 3, "videoWindowHeight"], [_mobx.computed, 3, "shouldHaveListView"], [_decorator.bound, 2, "setVideoOrientation"], [_decorator.bound, 2, "removePin"], [_decorator.bound, 2, "addPin"], [_decorator.bound, 2, "sendParticipantEvent"], [_decorator.bound, 2, "muteAudio"], [_decorator.bound, 2, "computedVideoWindowHeight"], [_changeVideoWindowBoundsDecs, 18, "changeVideoWindowBounds"], [_decorator.bound, 2, "openPrivateChat"], [_decorator.bound, 2, "openRenameDialog"], [_decorator.bound, 2, "hasMutePermission"], [_decorator.bound, 2, "hasUnmutePermission"], [_decorator.bound, 2, "hasRequestStartAudioPermission"], [_setVideoWindowPreviewTypeDecs, 18, "setVideoWindowPreviewType"], [_closeVideoWindowDecs, 18, "closeVideoWindow"], [_setWrapperHoverDecs, 18, "setWrapperHover"], [_getAllowedOperationsDecs, 18, "getAllowedOperations"], [_onAudioVolumeUpdatedDecs, 18, "_onAudioVolumeUpdated"], [_decorator.bound, 2, "_sliceFoldList"]], []).e, 8);
 _init_userVolumeMap = _applyDecs$e[0];
-_init_speakHover = _applyDecs$e[1];
+_init_wrapperHovering = _applyDecs$e[1];
 _init_videoWindowPreviewType = _applyDecs$e[2];
 _init_videoWindowCurrentWidth = _applyDecs$e[3];
 _init_videoWindowCurrentHeight = _applyDecs$e[4];
 _init_foldList = _applyDecs$e[5];
-_init_workareaX = _applyDecs$e[6];
-_init_workareaY = _applyDecs$e[7];
-_init_workareaWidth = _applyDecs$e[8];
-_init_workareaHeight = _applyDecs$e[9];
-_init_localUserRole = _applyDecs$e[10];
-_init__spotlightStreamId = _applyDecs$e[11];
-_init_connectType = _applyDecs$e[12];
-_init_bounds = _applyDecs$e[13];
-_initProto = _applyDecs$e[14];
+_init_innerFrameBounds = _applyDecs$e[6];
+_initProto = _applyDecs$e[7];
 var StoreContext = exports.StoreContext = /*#__PURE__*/(0, _react.createContext)(null);