fcr-ui-scene 3.7.4 → 3.7.6

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

@@ -62,14 +62,15 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _mobx = require("mobx");
 var _constant = require("../../utilities/constant");
 var _decorator = require("agora-foundation/lib/decorator");
+var _objectManager = require("../../object-manager");
 var _type = require("./type");
-var _type2 = require("../layout/type");
-var _type3 = require("fcr-core/lib/type");
+var _type2 = require("fcr-core/lib/type");
 var _attendee = require("agora-ui-foundation/lib/components/participants/attendee");
 var _react = require("react");
-var _type4 = require("../../type");
+var _type3 = require("../../type");
+var _videoWindow = require("../dialog/dialogs/video-window");
 var _VideoWindowStore;
-var _initProto, _init_userVolumeMap, _init_wrapperHovering, _init_videoWindowPreviewType, _init_videoWindowCurrentWidth, _init_videoWindowCurrentHeight, _init_foldList, _init_innerFrameBounds, _changeVideoWindowBoundsDecs, _setVideoWindowPreviewTypeDecs, _closeVideoWindowDecs, _setWrapperHoverDecs, _getAllowedOperationsDecs, _onAudioVolumeUpdatedDecs, _ref;
+var _initProto, _init__videoWindowSmallTypeStyleSize, _init_userVolumeMap, _init_wrapperHovering, _init_videoWindowPreviewType, _setVideoWindowPreviewTypeDecs, _setWrapperHoverDecs, _getAllowedOperationsDecs, _handleVideowWindowResizeDecs, _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; }
@@ -84,62 +85,82 @@ var _A = /*#__PURE__*/new WeakMap();
 var _B = /*#__PURE__*/new WeakMap();
 var _C = /*#__PURE__*/new WeakMap();
 var _D = /*#__PURE__*/new WeakMap();
-var _E = /*#__PURE__*/new WeakMap();
-var _F = /*#__PURE__*/new WeakMap();
-var _G = /*#__PURE__*/new WeakMap();
-_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");
+_ref = (_setVideoWindowPreviewTypeDecs = [_mobx.action, _mobx.action.bound], _setWrapperHoverDecs = [_mobx.action, _mobx.action.bound], _getAllowedOperationsDecs = [_mobx.action, _mobx.action.bound], _handleVideowWindowResizeDecs = [_mobx.action, _mobx.action.bound], _onAudioVolumeUpdatedDecs = [_mobx.action, _mobx.action.bound], "_subscriptions");
 var VideoWindowStore = exports["default"] = /*#__PURE__*/function () {
-  function VideoWindowStore(params) {
+  function VideoWindowStore(_ref2) {
     var _this = this;
+    var objectManager = _ref2.objectManager;
     (0, _classCallCheck2["default"])(this, VideoWindowStore);
-    (0, _defineProperty2["default"])(this, _ref, void _initProto(this));
-    (0, _defineProperty2["default"])(this, "_subscriptions", []);
-    _classPrivateFieldInitSpec(this, _A, _init_userVolumeMap(this, new Map()));
-    _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_innerFrameBounds(this, {
-      width: 0,
-      height: 0
-    }));
-    var uiEventStore = params.uiEventStore,
-      streamControl = params.streamControl,
-      securityStore = params.securityStore,
-      deviceStore = params.deviceStore,
-      sharedLayoutDataSource = params.sharedLayoutDataSource,
-      sharedInterpreterDataSource = params.sharedInterpreterDataSource,
-      sharedSettingDataSource = params.sharedSettingDataSource,
-      chatProvider = params.chatProvider,
-      sharedVideoWindowDataSource = params.sharedVideoWindowDataSource,
-      sharedMemberDataSource = params.sharedMemberDataSource;
-    this._uiEventStore = uiEventStore;
-    this._deviceStore = deviceStore;
-    this._streamControl = streamControl;
-    this._securityStore = securityStore;
-    this._sharedLayoutDataSource = sharedLayoutDataSource;
-    this._sharedInterpreterDataSource = sharedInterpreterDataSource;
-    this._sharedSettingDataSource = sharedSettingDataSource;
-    this._chatProvider = chatProvider;
-    this._sharedVideoWindowDataSource = sharedVideoWindowDataSource;
-    this._sharedMemberDataSource = sharedMemberDataSource;
-    this._streamControl.addObserver({
-      onStreamVolumeIndicationUpdated: this._onAudioVolumeUpdated
+    (0, _defineProperty2["default"])(this, _ref, (_initProto(this), []));
+    (0, _defineProperty2["default"])(this, "_dialogObserver", {
+      onDialogOpen: this._handleDialogOpen,
+      onDialogClose: this._handleDialogClose
     });
-    this.videoWindowCurrentHeight = _type.DefaultVideoWindowSmallTypeHeight;
-    this.videoWindowCurrentWidth = _type.DefaultVideoWindowWidth;
-    this.wrapperHovering = false;
+    (0, _defineProperty2["default"])(this, "_windowOpened", false);
+    (0, _defineProperty2["default"])(this, "_isWindowApiResize", false);
+    _classPrivateFieldInitSpec(this, _A, _init__videoWindowSmallTypeStyleSize(this, {
+      width: _type.DefaultVideoWindowWidth,
+      height: _type.DefaultVideoWindowSmallTypeHeight
+    }));
+    _classPrivateFieldInitSpec(this, _B, _init_userVolumeMap(this, new Map()));
+    _classPrivateFieldInitSpec(this, _C, _init_wrapperHovering(this, false));
+    _classPrivateFieldInitSpec(this, _D, _init_videoWindowPreviewType(this, _type.FcrVideoWindowPreviewType.SMALL));
+    // Get all required objects from objectManager
+    this._eventProvider = objectManager.getObject(_objectManager.FcrUIObjectKeys.P_EVENT_PROVIDER);
+    this._deviceStore = objectManager.getObject(_objectManager.FcrUIObjectKeys.P_DEVICE_PROVIDER);
+    this._privilegeProvider = objectManager.getObject(_objectManager.FcrUIObjectKeys.P_PRIVILEGE_PROVIDER);
+    this._sharedLayoutDataSource = objectManager.getObject(_objectManager.FcrUIObjectKeys.S_SHARED_LAYOUT_DATA_SOURCE);
+    this._sharedInterpreterDataSource = objectManager.getObject(_objectManager.FcrUIObjectKeys.S_SHARED_INTERPRETER_DATA_SOURCE);
+    this._sharedSettingDataSource = objectManager.getObject(_objectManager.FcrUIObjectKeys.S_SHARED_SETTING_DATA_SOURCE);
+    this._chatProvider = objectManager.getObject(_objectManager.FcrUIObjectKeys.P_CHAT_PROVIDER);
+    this._sharedVideoWindowDataSource = objectManager.getObject(_objectManager.FcrUIObjectKeys.S_SHARED_VIDEO_WINDOW_DATA_SOURCE);
+    this._sharedMemberDataSource = objectManager.getObject(_objectManager.FcrUIObjectKeys.S_SHARED_MEMBER_DATA_SOURCE);
+    this._windowProvider = objectManager.getObject(_objectManager.FcrUIObjectKeys.P_WINDOW_PROVIDER);
+    this._dialogProvider = objectManager.getObject(_objectManager.FcrUIObjectKeys.P_DIALOG_PROVIDER);
+    this._screenShareProvider = objectManager.getObject(_objectManager.FcrUIObjectKeys.P_SCREEN_SHARE_PROVIDER);
+    var localVideoRenderProvider = objectManager.getObject(_objectManager.FcrUIObjectKeys.P_LOCAL_VIDEO_RENDER_PROVIDER);
+    var remoteVideoRenderProvider = objectManager.getObject(_objectManager.FcrUIObjectKeys.P_REMOTE_VIDEO_RENDER_PROVIDER);
+    this._videoRenderContext = {
+      localVideoRenderProvider: localVideoRenderProvider,
+      remoteVideoRenderProvider: remoteVideoRenderProvider
+    };
+    var roomProvider = objectManager.getObject(_objectManager.FcrUIObjectKeys.P_ROOM_PROVIDER);
+    this._streamControl = roomProvider.currentRoomControl.getStreamControl();
     this._subscriptions.push((0, _mobx.reaction)(function () {
       return _this._deviceStore.microphoneVolumeLevel;
     }, function (volume) {
       (0, _mobx.runInAction)(function () {
         _this.userVolumeMap.set('0', volume);
       });
+    }), (0, _mobx.reaction)(function () {
+      return _this.videoWindowPreviewType;
+    }, function () {
+      var size = _this.videoWindowStyleSize;
+      _this.setVideoWindowSize(size.width, size.height);
+    }), (0, _mobx.reaction)(function () {
+      return _this.filterFoldList.length;
+    }, function (length, prevLength) {
+      if (!_this._windowOpened) return;
+      var isList = _this.videoWindowPreviewType === _type.FcrVideoWindowPreviewType.LIST;
+      if (length === 1 && isList) {
+        _this.setVideoWindowPreviewType(_type.FcrVideoWindowPreviewType.SMALL);
+        return;
+      }
+      if (isList && length !== prevLength) {
+        var size = _this.videoWindowStyleSize;
+        var videoWindow = _this._windowProvider.getWindowById(_constant.FcrUIDialogKey.VIDEO_WINDOW);
+        var bounds = videoWindow.getBounds();
+        var width = Math.max(bounds.width, size.width);
+        _this.setVideoWindowSize(width, size.height);
+      }
     }));
+    this._streamControl.addObserver({
+      onStreamVolumeIndicationUpdated: this._onAudioVolumeUpdated
+    });
+    this._dialogProvider.addObserver(this._dialogObserver);
   }
   return (0, _createClass2["default"])(VideoWindowStore, [{
-    key: "userVolumeMap",
+    key: "_videoWindowSmallTypeStyleSize",
     get: function get() {
       return _classPrivateFieldGet(_A, this);
     },
@@ -147,7 +168,7 @@ var VideoWindowStore = exports["default"] = /*#__PURE__*/function () {
       _classPrivateFieldSet(_A, this, v);
     }
   }, {
-    key: "wrapperHovering",
+    key: "userVolumeMap",
     get: function get() {
       return _classPrivateFieldGet(_B, this);
     },
@@ -155,7 +176,7 @@ var VideoWindowStore = exports["default"] = /*#__PURE__*/function () {
       _classPrivateFieldSet(_B, this, v);
     }
   }, {
-    key: "videoWindowPreviewType",
+    key: "wrapperHovering",
     get: function get() {
       return _classPrivateFieldGet(_C, this);
     },
@@ -163,46 +184,46 @@ var VideoWindowStore = exports["default"] = /*#__PURE__*/function () {
       _classPrivateFieldSet(_C, this, v);
     }
   }, {
-    key: "videoWindowCurrentWidth",
+    key: "videoWindowPreviewType",
     get: function get() {
       return _classPrivateFieldGet(_D, this);
     },
     set: function set(v) {
       _classPrivateFieldSet(_D, this, v);
     }
-  }, {
-    key: "videoWindowCurrentHeight",
-    get: function get() {
-      return _classPrivateFieldGet(_E, this);
-    },
-    set: function set(v) {
-      _classPrivateFieldSet(_E, this, v);
-    }
   }, {
     key: "foldList",
     get: function get() {
-      return _classPrivateFieldGet(_F, this);
-    },
-    set: function set(v) {
-      _classPrivateFieldSet(_F, this, v);
+      return this._sharedVideoWindowDataSource.foldList;
     }
   }, {
-    key: "innerFrameBounds",
+    key: "videoRenderContext",
     get: function get() {
-      return _classPrivateFieldGet(_G, this);
-    },
-    set: function set(v) {
-      _classPrivateFieldSet(_G, this, v);
+      return this._videoRenderContext;
     }
   }, {
     key: "shouldHideNonVideoParticipants",
     get: function get() {
       return this._sharedSettingDataSource.setting.shouldHideNonVideoParticipants;
     }
+  }, {
+    key: "filterFoldList",
+    get: function get() {
+      var _this2 = this;
+      return this.foldList.filter(function (i) {
+        if (i.videoSourceType === _type2.FcrVideoSourceType.SCREEN) {
+          return false;
+        }
+        if (_this2.shouldHideNonVideoParticipants) {
+          return i.isMySelf || i.hasVideoStream;
+        }
+        return true;
+      });
+    }
   }, {
     key: "foldListRenderData",
     get: function get() {
-      return this._sliceFoldList();
+      return this.videoWindowPreviewType === _type.FcrVideoWindowPreviewType.LIST ? this.filterFoldList.slice(0, 4) : this.videoWindowPreviewType === _type.FcrVideoWindowPreviewType.SMALL ? this.filterFoldList.slice(0, 1) : [];
     }
   }, {
     key: "spotlightStreamId",
@@ -212,9 +233,9 @@ var VideoWindowStore = exports["default"] = /*#__PURE__*/function () {
   }, {
     key: "findSpotlightUser",
     get: function get() {
-      var _this2 = this;
+      var _this3 = this;
       return this.spotlightStreamId ? this.foldList.find(function (item) {
-        return item.videoStreamId === _this2.spotlightStreamId || item.audioStreamId === _this2.spotlightStreamId;
+        return item.videoStreamId === _this3.spotlightStreamId || item.audioStreamId === _this3.spotlightStreamId;
       }) : null;
     }
   }, {
@@ -225,12 +246,6 @@ var VideoWindowStore = exports["default"] = /*#__PURE__*/function () {
         return item.isPin;
       });
     }
-  }, {
-    key: "videoWindowHeight",
-    get: function get() {
-      var list = this._sliceFoldList();
-      return _type.DefaultVideoWindowHeight + list.length * _type.VideoWindowItemHeight;
-    }
   }, {
     key: "interpreterUserList",
     get: function get() {
@@ -242,30 +257,32 @@ var VideoWindowStore = exports["default"] = /*#__PURE__*/function () {
       return this._sharedInterpreterDataSource.isInterpreterEnabled;
     }
   }, {
-    key: "filterFoldList",
+    key: "localUserRole",
     get: function get() {
-      var sourceList = this.foldList.filter(function (i) {
-        return !i.isMySelf || i.videoSourceType !== _type3.FcrVideoSourceType.SCREEN;
-      });
-      var _list = this.shouldHideNonVideoParticipants ? sourceList.filter(function (i) {
-        return i.isMySelf || i.hasVideoStream || i.videoSourceType === _type3.FcrVideoSourceType.SCREEN || i.type === _type2.FcrUIWindowType.BOARD;
-      }) : sourceList;
-      return _list;
+      return this._sharedMemberDataSource.localUserRole;
     }
   }, {
-    key: "shouldHaveListView",
+    key: "deviceMicrophoneEnabled",
     get: function get() {
-      return this.filterFoldList.length > 1;
+      return this._deviceStore.microphoneEnabled;
     }
   }, {
-    key: "localUserRole",
+    key: "deviceCameraEnabled",
     get: function get() {
-      return this._sharedMemberDataSource.localUserRole;
+      return this._deviceStore.cameraEnabled;
     }
   }, {
-    key: "deviceMicrophoneEnabled",
+    key: "videoWindowStyleSize",
     get: function get() {
-      return this._deviceStore.microphoneEnabled;
+      if (this.videoWindowPreviewType === _type.FcrVideoWindowPreviewType.SMALL) {
+        return this._videoWindowSmallTypeStyleSize;
+      } else {
+        var height = this.computedVideoWindowHeight();
+        return {
+          width: _type.DefaultVideoWindowWidth,
+          height: height
+        };
+      }
     }
   }, {
     key: "setVideoOrientation",
@@ -278,6 +295,10 @@ var VideoWindowStore = exports["default"] = /*#__PURE__*/function () {
       this._subscriptions.forEach(function (fn) {
         return fn();
       });
+      this._streamControl.removeObserver({
+        onStreamVolumeIndicationUpdated: this._onAudioVolumeUpdated
+      });
+      this._dialogProvider.removeObserver(this._dialogObserver);
     }
   }, {
     key: "removePin",
@@ -292,12 +313,12 @@ var VideoWindowStore = exports["default"] = /*#__PURE__*/function () {
   }, {
     key: "sendParticipantEvent",
     value: function sendParticipantEvent(payload) {
-      this._uiEventStore.sendEvent(_constant.FcrUIAction.PARTICIPANT_ACTION, payload);
+      this._eventProvider.sendEvent(_constant.FcrUIAction.PARTICIPANT_ACTION, payload);
     }
   }, {
     key: "muteAudio",
     value: function muteAudio(mute, userId) {
-      this._uiEventStore.sendEvent(_constant.FcrUIAction.PARTICIPANT_ACTION, {
+      this._eventProvider.sendEvent(_constant.FcrUIAction.PARTICIPANT_ACTION, {
         action: mute ? _attendee.ParticipantActionType.MUTE_AUDIO : _attendee.ParticipantActionType.UNMUTE_AUDIO,
         userId: userId
       });
@@ -318,34 +339,23 @@ var VideoWindowStore = exports["default"] = /*#__PURE__*/function () {
           return _type.DefaultVideoWindowHeight;
       }
     }
-  }, {
-    key: "changeVideoWindowBounds",
-    value: function changeVideoWindowBounds() {
-      var videoWindowPreviewType = this.videoWindowPreviewType;
-      var videoWindowHeight = this.computedVideoWindowHeight();
-      this._uiEventStore.sendEvent(_constant.FcrUIAction.VIDEO_WINDOW_BOUNDS, {
-        videoWindowHeight: videoWindowHeight,
-        videoWindowPreviewType: videoWindowPreviewType
-      });
-      // 判断当前是否展开了popover区域，实际上只有展开了popover区域，这里的width和height才会有值
-    }
   }, {
     key: "openPrivateChat",
     value: function openPrivateChat(userId) {
-      if (!this._securityStore.permitPrivateChat(userId)) return;
+      if (!this._privilegeProvider.permitPrivateChat(userId)) return;
       this._sharedLayoutDataSource.setAsideLayout({
         chat: true
       });
       var user = this._sharedMemberDataSource.memberUserInfoList.find(function (u) {
         return u.userId === userId;
       });
-      // user && this._uiEventStore.notifyChatUpdateTarget(user, FcrRoomType.Mainroom);
-      user && this._chatProvider.setPrivateChatTargetUser(user, _type4.FcrUIRoomType.MAIN_ROOM);
+      // user && this._eventProvider.notifyChatUpdateTarget(user, FcrRoomType.Mainroom);
+      user && this._chatProvider.setPrivateChatTargetUser(user, _type3.FcrUIRoomType.MAIN_ROOM);
     }
   }, {
     key: "openRenameDialog",
     value: function openRenameDialog(userId) {
-      this._uiEventStore.sendEvent(_constant.FcrUIAction.PARTICIPANT_ACTION, {
+      this._eventProvider.sendEvent(_constant.FcrUIAction.PARTICIPANT_ACTION, {
         action: _attendee.ParticipantActionType.RENAME_IN_MEETING,
         userId: userId
       });
@@ -353,39 +363,31 @@ var VideoWindowStore = exports["default"] = /*#__PURE__*/function () {
   }, {
     key: "hasMutePermission",
     value: function hasMutePermission(targetRole) {
-      return this._securityStore.hasMutePermission(targetRole);
+      return this._privilegeProvider.hasMutePermission(targetRole);
     }
   }, {
     key: "hasUnmutePermission",
     value: function hasUnmutePermission(targetRole) {
-      return this._securityStore.hasUnmutePermission(targetRole);
+      return this._privilegeProvider.hasUnmutePermission(targetRole);
     }
   }, {
     key: "hasRequestStartAudioPermission",
     value: function hasRequestStartAudioPermission(targetRole) {
-      return this._securityStore.hasRequestStartAudioPermission(targetRole);
+      return this._privilegeProvider.hasRequestStartAudioPermission(targetRole);
     }
   }, {
     key: "setVideoWindowPreviewType",
     value: function setVideoWindowPreviewType(type) {
+      if (type === this.videoWindowPreviewType) {
+        // no change no update
+        return;
+      }
       this.videoWindowPreviewType = type;
-      this.handleFoldListChanged();
-    }
-  }, {
-    key: "handleFoldListChanged",
-    value: function handleFoldListChanged() {
-      this.changeVideoWindowBounds();
-      var height = this.computedVideoWindowHeight();
-      this._uiEventStore.sendEvent(_constant.FcrUIAction.VIDEO_WINDOW_RESIZE, {
-        width: _type.DefaultVideoWindowWidth,
-        height: height
-      });
-    }
-  }, {
-    key: "closeVideoWindow",
-    value: function closeVideoWindow() {
-      this.videoWindowPreviewType = _type.FcrVideoWindowPreviewType.SMALL;
-      this.setVideoWindowPreviewType(_type.FcrVideoWindowPreviewType.SMALL);
+      var videoWindow = this._windowProvider.getWindowById(_constant.FcrUIDialogKey.VIDEO_WINDOW);
+      var resizable = type === _type.FcrVideoWindowPreviewType.SMALL;
+      videoWindow.setResizable(resizable);
+      videoWindow.setAspectRatio(resizable ? _type.VideoWindowRadio : 0);
+      videoWindow.setMinimumSize(_type.DefaultVideoWindowWidth, resizable ? _type.DefaultVideoWindowSmallTypeHeight : _type.DefaultVideoWindowHeight);
     }
   }, {
     key: "setWrapperHover",
@@ -395,7 +397,34 @@ var VideoWindowStore = exports["default"] = /*#__PURE__*/function () {
   }, {
     key: "getAllowedOperations",
     value: function getAllowedOperations(targetRole, isSelf) {
-      return this._securityStore.getAllowedOperations(targetRole, isSelf);
+      return this._privilegeProvider.getAllowedOperations(targetRole, isSelf);
+    }
+  }, {
+    key: "handleVideowWindowResize",
+    value: function handleVideowWindowResize(size) {
+      if (this._isWindowApiResize) {
+        this._isWindowApiResize = false;
+        return;
+      }
+      if (this.videoWindowPreviewType === _type.FcrVideoWindowPreviewType.SMALL) {
+        this._videoWindowSmallTypeStyleSize = size;
+      }
+    }
+  }, {
+    key: "setVideoWindowSize",
+    value: function setVideoWindowSize(width, height) {
+      var videoWindow = this._windowProvider.getWindowById(_constant.FcrUIDialogKey.VIDEO_WINDOW);
+      this._isWindowApiResize = true;
+      (0, _videoWindow.setVideoWindowDialogSize)(videoWindow, {
+        width: width,
+        height: height
+      });
+    }
+  }, {
+    key: "resetVideoWindowSize",
+    value: function resetVideoWindowSize() {
+      var size = this.videoWindowStyleSize;
+      this.setVideoWindowSize(size.width, size.height);
     }
   }, {
     key: "_onAudioVolumeUpdated",
@@ -403,20 +432,32 @@ var VideoWindowStore = exports["default"] = /*#__PURE__*/function () {
       this.userVolumeMap.set(streamId, Math.floor(volume / 255 * 100));
     }
   }, {
-    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: "_handleDialogOpen",
+    value: function _handleDialogOpen(dialogKey) {
+      if (dialogKey !== _constant.FcrUIDialogKey.VIDEO_WINDOW) return;
+      this._windowOpened = true;
+    }
+  }, {
+    key: "_handleDialogClose",
+    value: function _handleDialogClose(dialogKey) {
+      var _this4 = this;
+      if (dialogKey !== _constant.FcrUIDialogKey.VIDEO_WINDOW) return;
+      this._windowOpened = false;
+      (0, _mobx.runInAction)(function () {
+        _this4._videoWindowSmallTypeStyleSize = {
+          width: _type.DefaultVideoWindowWidth,
+          height: _type.DefaultVideoWindowSmallTypeHeight
+        };
+        _this4.setVideoWindowPreviewType(_type.FcrVideoWindowPreviewType.SMALL);
+      });
     }
   }]);
 }();
 _VideoWindowStore = VideoWindowStore;
-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_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_innerFrameBounds = _applyDecs$e[6];
-_initProto = _applyDecs$e[7];
+var _applyDecs$e = (0, _slicedToArray2["default"])(_applyDecs(_VideoWindowStore, [[_mobx.observable, 1, "_videoWindowSmallTypeStyleSize"], [_mobx.observable, 1, "userVolumeMap"], [_mobx.observable, 1, "wrapperHovering"], [_mobx.observable, 1, "videoWindowPreviewType"], [_mobx.computed, 3, "foldListRenderData"], [_mobx.computed, 3, "spotlightStreamId"], [_mobx.computed, 3, "findSpotlightUser"], [_mobx.computed, 3, "hasPinnedStream"], [_mobx.computed, 3, "videoWindowStyleSize"], [_decorator.bound, 2, "setVideoOrientation"], [_decorator.bound, 2, "removePin"], [_decorator.bound, 2, "addPin"], [_decorator.bound, 2, "sendParticipantEvent"], [_decorator.bound, 2, "muteAudio"], [_decorator.bound, 2, "computedVideoWindowHeight"], [_decorator.bound, 2, "openPrivateChat"], [_decorator.bound, 2, "openRenameDialog"], [_decorator.bound, 2, "hasMutePermission"], [_decorator.bound, 2, "hasUnmutePermission"], [_decorator.bound, 2, "hasRequestStartAudioPermission"], [_setVideoWindowPreviewTypeDecs, 18, "setVideoWindowPreviewType"], [_setWrapperHoverDecs, 18, "setWrapperHover"], [_getAllowedOperationsDecs, 18, "getAllowedOperations"], [_handleVideowWindowResizeDecs, 18, "handleVideowWindowResize"], [_decorator.bound, 2, "setVideoWindowSize"], [_decorator.bound, 2, "resetVideoWindowSize"], [_onAudioVolumeUpdatedDecs, 18, "_onAudioVolumeUpdated"], [_decorator.bound, 2, "_handleDialogOpen"], [_decorator.bound, 2, "_handleDialogClose"]], []).e, 5);
+_init__videoWindowSmallTypeStyleSize = _applyDecs$e[0];
+_init_userVolumeMap = _applyDecs$e[1];
+_init_wrapperHovering = _applyDecs$e[2];
+_init_videoWindowPreviewType = _applyDecs$e[3];
+_initProto = _applyDecs$e[4];
 var StoreContext = exports.StoreContext = /*#__PURE__*/(0, _react.createContext)(null);

package/lib/modules/video-window/type.d.ts

@@ -1,17 +1,5 @@
-import { FcrStreamControl } from 'fcr-core';
-import { FcrUIEventProvider } from '../../providers/event-provider';
 import { FcrUIConnectType } from '../../type';
-import { FcrUIDeviceProvider } from '../../providers/device-provider';
-import { FcrUIPrivilegeProvider } from '../../providers/privilege-provider';
-import { FcrUIDeviceStreamProvider } from '../../providers/device-stream-provider';
-import { FcrUISharedSpeakerSpotlightDataSource } from '../../shared-data-source/speaker-spotlight';
-import { FcrUISharedPinDataSource } from '../../shared-data-source/pin-data';
-import { FcrUISharedLayoutDataSource } from '../../shared-data-source/layout-data';
-import { FcrUIVideoWindowDataSource } from '../../shared-data-source/video-window';
-import { FcrUISharedInterpreterDataSource } from '../../shared-data-source/interpreter';
-import { FcrUISharedSettingDataSource } from '../../shared-data-source/setting';
-import { FcrUIChatProvider } from '../../providers/chat-provider';
-import { FcrUIMemberSharedDataSource } from '../../shared-data-source/member-data';
+import { FcrUIObjectManager } from '../../object-manager';
 export declare enum FcrVideoWindowPreviewType {
     MINI = "mini",
     SMALL = "small",
@@ -37,18 +25,6 @@ export declare const VideoWindowRadio: number;
 export declare const VideoWindowZoomMaxWidth = 644;
 export declare const VideoWindowZoomMaxHeight = 666;
 export declare const VideoWindowItemHeight = 144;
-export interface VideoWindowStoreParams {
-    uiEventStore: FcrUIEventProvider;
-    streamControl: FcrStreamControl;
-    securityStore: FcrUIPrivilegeProvider;
-    deviceStore: FcrUIDeviceProvider;
-    deviceStreamStore: FcrUIDeviceStreamProvider;
-    sharedSpeakerSpotlightDataSource: FcrUISharedSpeakerSpotlightDataSource;
-    sharedPinDataSource: FcrUISharedPinDataSource;
-    sharedLayoutDataSource: FcrUISharedLayoutDataSource;
-    sharedInterpreterDataSource: FcrUISharedInterpreterDataSource;
-    sharedSettingDataSource: FcrUISharedSettingDataSource;
-    chatProvider: FcrUIChatProvider;
-    sharedVideoWindowDataSource: FcrUIVideoWindowDataSource;
-    sharedMemberDataSource: FcrUIMemberSharedDataSource;
+export interface VideoWindowStoreArgs {
+    objectManager: FcrUIObjectManager;
 }

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

@@ -1,12 +1,26 @@
 "use strict";
 
+require("core-js/modules/es.symbol.js");
+require("core-js/modules/es.array.filter.js");
+require("core-js/modules/es.array.for-each.js");
+require("core-js/modules/es.array.push.js");
+require("core-js/modules/es.object.define-properties.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/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.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", {
   value: true
 });
 exports.View = void 0;
 require("core-js/modules/web.timers.js");
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _mobxReact = require("mobx-react");
 var _react = require("react");
@@ -15,15 +29,24 @@ var _store = require("./store");
 var _topControl = _interopRequireDefault(require("./components/topControl"));
 var _speaking = _interopRequireDefault(require("./components/speaking"));
 require("./index.css");
+var _popoverWatcher = require("./popover-watcher");
+var _videoTrackRenderContext = require("../../shared-context/video-track-render-context");
 var _jsxRuntime = require("react/jsx-runtime");
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var View = exports.View = (0, _mobxReact.observer)(function () {
+  var divRef = (0, _react.useRef)(null);
   var _useState = (0, _react.useState)(false),
     _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
     isHover = _useState2[0],
     setIsHover = _useState2[1];
   var _useContext = (0, _react.useContext)(_store.StoreContext),
     setWrapperHover = _useContext.setWrapperHover,
-    innerFrameBounds = _useContext.innerFrameBounds;
+    videoRenderContext = _useContext.videoRenderContext,
+    setVideoWindowSize = _useContext.setVideoWindowSize,
+    resetVideoWindowSize = _useContext.resetVideoWindowSize,
+    videoWindowStyleSize = _useContext.videoWindowStyleSize,
+    handleVideowWindowResize = _useContext.handleVideowWindowResize;
   (0, _react.useEffect)(function () {
     if (!isHover) {
       var timer = setTimeout(function () {
@@ -36,11 +59,36 @@ var View = exports.View = (0, _mobxReact.observer)(function () {
       setWrapperHover(true);
     }
   }, [isHover]);
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-    style: {
-      width: innerFrameBounds.width || undefined,
-      height: innerFrameBounds.height || undefined
-    },
+  (0, _react.useEffect)(function () {
+    if (divRef.current === null) return;
+    var ownerDocument = divRef.current.ownerDocument;
+    var defaultView = ownerDocument.defaultView;
+    var body = ownerDocument.body;
+    var onResize = function onResize() {
+      handleVideowWindowResize({
+        width: body.offsetWidth,
+        height: body.offsetHeight
+      });
+    };
+    if (defaultView) {
+      defaultView.addEventListener('resize', onResize);
+    } else {
+      console.error('dialogWrapper.ownerDocument.defaultView is null');
+    }
+    return function () {
+      if (defaultView) {
+        defaultView.removeEventListener('resize', onResize);
+      }
+    };
+  }, [divRef.current]);
+  (0, _popoverWatcher.usePopoverWatcher)({
+    rootDom: divRef.current,
+    setVideoWindowSize: setVideoWindowSize,
+    resetVideoWindowSize: resetVideoWindowSize
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    ref: divRef,
+    style: _objectSpread({}, videoWindowStyleSize),
     onMouseEnter: function onMouseEnter() {
       setIsHover(true);
     },
@@ -48,6 +96,9 @@ var View = exports.View = (0, _mobxReact.observer)(function () {
       setIsHover(false);
     },
     className: "fcr-video-window-dialog-wrapper",
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_topControl["default"], {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_speaking["default"], {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_members.Members, {})]
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_videoTrackRenderContext.FcrVideoTrackRenderContext.Provider, {
+      value: videoRenderContext,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_topControl["default"], {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_speaking["default"], {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_members.Members, {})]
+    })
   });
 });