fcr-ui-scene 3.7.5 → 3.7.7-rc.1

package/lib/modules/state-bar/main-scene/store.base.js

@@ -76,10 +76,16 @@ var StateBarMainSceneStoreBase = exports.StateBarMainSceneStoreBase = /*#__PURE_
     _this._sharedMemberDataSource = args.objectManager.getObject(_objectManager.FcrUIObjectKeys.S_SHARED_MEMBER_DATA_SOURCE);
     _this._abilityProvider = args.objectManager.getObject(_objectManager.FcrUIObjectKeys.P_ABILITY_PROVIDER);
     _this._sharedVideoWindowDataSource = args.objectManager.getObject(_objectManager.FcrUIObjectKeys.S_SHARED_VIDEO_WINDOW_DATA_SOURCE);
+    _this._screenShareProvider = args.objectManager.getObject(_objectManager.FcrUIObjectKeys.P_SCREEN_SHARE_PROVIDER);
     return _this;
   }
   (0, _inherits2["default"])(StateBarMainSceneStoreBase, _StateBarStoreBase);
   return (0, _createClass2["default"])(StateBarMainSceneStoreBase, [{
+    key: "isSharingScreen",
+    get: function get() {
+      return this._screenShareProvider.isLocalUserScreenSharing || this._screenShareProvider.isRemoteUserScreenSharing;
+    }
+  }, {
     key: "localUser",
     get: function get() {
       return this._sharedMemberDataSource.localUser;

package/lib/modules/video-window/index.css

@@ -13,3 +13,9 @@
   border-radius: 0 !important;
   background: transparent !important;
 }
+
+/* 供 popover-watcher 使用 */
+#fcr-video-window-diaolog-wrapper_popover-align-right {
+  --video-window-popover-left: 0px;
+  left: var(--video-window-popover-left) !important;
+}

package/lib/modules/video-window/popover-watcher.d.ts

@@ -1,17 +1,12 @@
-import { FcrVideoWindowPreviewType } from './type';
 /**
  * popoverWatcher 监听 popover 的出现和消失，并通过回调通知外部如何调整窗口
  *
  */
-export declare function usePopoverWatcher({ rootDom, type, callbacks, }: {
+export declare function usePopoverWatcher({ rootDom, setVideoWindowSize, resetVideoWindowSize, }: {
     rootDom: HTMLElement | null;
-    type: FcrVideoWindowPreviewType;
-    callbacks: {
-        onResize: (size: {
-            width: number;
-            height: number;
-        }) => void;
-        onResetSize: () => void;
-        onSetResizable: (resizable: boolean) => void;
+    setVideoWindowSize: (width: number, height: number) => {
+        width: number;
+        height: number;
     };
+    resetVideoWindowSize: () => void;
 }): void;

package/lib/modules/video-window/popover-watcher.js

@@ -5,66 +5,69 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.usePopoverWatcher = usePopoverWatcher;
-require("core-js/modules/es.array.concat.js");
 require("core-js/modules/es.array.for-each.js");
 require("core-js/modules/es.object.to-string.js");
 require("core-js/modules/esnext.iterator.constructor.js");
 require("core-js/modules/esnext.iterator.for-each.js");
 require("core-js/modules/web.dom-collections.for-each.js");
 var _react = require("react");
-var _type = require("./type");
+var HEAD_HEIGHT_OFFSET = 150;
+var WIDTH_RIGHT_OFFSET = 30;
+
 /**
  * popoverWatcher 监听 popover 的出现和消失，并通过回调通知外部如何调整窗口
  *
  */
 function usePopoverWatcher(_ref) {
   var rootDom = _ref.rootDom,
-    type = _ref.type,
-    callbacks = _ref.callbacks;
+    setVideoWindowSize = _ref.setVideoWindowSize,
+    resetVideoWindowSize = _ref.resetVideoWindowSize;
   (0, _react.useEffect)(function () {
     if (rootDom === null) return;
-    var HEAD_HEIGHT_OFFSET = 150;
-    var WIDTH_RIGHT_OFFSET = 30;
+    var dialogWrapper = rootDom;
+    var body = dialogWrapper.ownerDocument.body;
+    var popoverClassName = 'fcr-popover';
+    var isPopoverOpened = false;
     var observer = new MutationObserver(function (mutationsList) {
-      var popover = rootDom.querySelector('.fcr-popover');
-      var wrapper = rootDom.querySelector('.fcr-video-window-dialog-wrapper');
+      var popover = body.querySelector(".".concat(popoverClassName));
       mutationsList.forEach(function (mutation) {
         if (mutation.type === 'childList') {
-          mutation.addedNodes.forEach(function (node) {
-            if (node.nodeType === Node.ELEMENT_NODE && node.contains(popover)) {
-              if (popover && wrapper) {
-                var wrapperHeight = wrapper.offsetHeight,
-                  wrapperWidth = wrapper.offsetWidth;
-                var popoverHeight = popover.offsetHeight,
-                  popoverWidth = popover.offsetWidth;
-                // 通过回调通知外部调整窗口尺寸
-                callbacks.onResize({
-                  height: Math.max(wrapperHeight, popoverHeight + HEAD_HEIGHT_OFFSET),
-                  width: wrapperWidth + popoverWidth - WIDTH_RIGHT_OFFSET
-                });
-                var rect = wrapper.getBoundingClientRect();
-                wrapper.setAttribute('style', "height: ".concat(rect.height, "px;width: ").concat(rect.width, "px"));
-              }
+          mutation.removedNodes.forEach(function (node) {
+            if (node.nodeType === Node.ELEMENT_NODE && node.classList.contains(popoverClassName)) {
+              isPopoverOpened = false;
+              resetVideoWindowSize();
             }
           });
-          mutation.removedNodes.forEach(function (node) {
-            var _classList;
-            if ((_classList = node.classList) !== null && _classList !== void 0 && _classList.contains('fcr-popover')) {
-              callbacks.onResetSize();
-              if (type === _type.FcrVideoWindowPreviewType.SMALL) {
-                callbacks.onSetResizable(true);
+          if (!popover) {
+            return;
+          }
+          mutation.addedNodes.forEach(function (node) {
+            if (node.nodeType === Node.ELEMENT_NODE && node.contains(popover) && !isPopoverOpened) {
+              isPopoverOpened = true;
+              var width = popover.offsetWidth + dialogWrapper.offsetWidth - WIDTH_RIGHT_OFFSET;
+              var height = Math.max(popover.offsetHeight + HEAD_HEIGHT_OFFSET, dialogWrapper.offsetHeight);
+              var _setVideoWindowSize = setVideoWindowSize(width, height),
+                videoWidth = _setVideoWindowSize.width;
+              if (videoWidth < width) {
+                // 说明右侧的宽度不够放下 popover，此时 popover 会自动翻转到左侧。
+                // 需要把手动调整左侧的距离，使其贴靠在窗口的最右侧。
+
+                // popover 会自动计算并设置 style 的 left 值，此处如果直接设置 left 会被 popover 内覆盖。
+                // 所以通过设置 css 变量的方式传递给 fcr-video-window-diaolog-wrapper_popover-align-right 使用。
+                popover.style.setProperty('--video-window-popover-left', "".concat(videoWidth - popover.offsetWidth, "px"));
+                popover.id = 'fcr-video-window-diaolog-wrapper_popover-align-right';
               }
             }
           });
         }
       });
     });
-    observer.observe(rootDom, {
+    observer.observe(dialogWrapper.ownerDocument.body, {
       childList: true,
       subtree: true
     });
     return function () {
       observer.disconnect();
     };
-  }, [rootDom, type, callbacks]);
+  }, [rootDom]);
 }

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

@@ -19,7 +19,9 @@ export default class VideoWindowStore {
     private _dialogProvider;
     private _videoRenderContext;
     private _dialogObserver;
-    private _sharedVideoWindowDataSourceObserver;
+    private _windowOpened;
+    private _isWindowApiResize;
+    private accessor _videoWindowSmallTypeStyleSize;
     accessor userVolumeMap: Map<string, number>;
     accessor wrapperHovering: boolean;
     accessor videoWindowPreviewType: FcrVideoWindowPreviewType;
@@ -33,10 +35,13 @@ export default class VideoWindowStore {
     get hasPinnedStream(): boolean;
     get interpreterUserList(): import("fcr-core/lib/room-control/interpreter-control/types").FcrInterpreterUserInfo[] | null;
     get isInterpreterEnabled(): boolean;
-    get shouldHaveListView(): boolean;
     get localUserRole(): FcrUserRole;
     get deviceMicrophoneEnabled(): boolean;
     get deviceCameraEnabled(): boolean;
+    get videoWindowStyleSize(): {
+        width: number;
+        height: number;
+    };
     constructor({ objectManager }: VideoWindowStoreArgs);
     setVideoOrientation(): void;
     release(): void;
@@ -53,9 +58,31 @@ export default class VideoWindowStore {
     setVideoWindowPreviewType(type: FcrVideoWindowPreviewType): void;
     setWrapperHover(hover: boolean): void;
     getAllowedOperations(targetRole: FcrUserRole, isSelf: boolean): string[];
-    private _updateWindowProperties;
+    handleVideowWindowResize(size: {
+        width: number;
+        height: number;
+    }): void;
+    /**
+     * @description 如果传入的宽度超过了允许的最大宽度, 则使用允许的最大宽度设置窗口宽度，以避免窗口超出显示器的边缘。
+     * @param width 期望设置的视频窗宽度
+     * @param height 视频窗高度
+     * @returns 实际设置的视频窗尺寸
+     */
+    setVideoWindowSize(width: number, height: number): {
+        width: number;
+        height: number;
+    };
+    resetVideoWindowSize(): void;
+    /**
+     * 计算 video-window 窗口允许设置的最大宽度，窗口左上角距离屏幕右侧边缘的距离和当前的窗口内容宽度中，选择最大值作为允许的最大宽度（不能超过窗口最大化的宽度）
+     * @param videoWindowX 视频窗左上角 x 坐标
+     * @param videoWindowStyleWidth 视频窗内容的宽度
+     * @returns 允许设置的最大宽度
+     */
+    private _computedMaxAllowedWidth;
+    private _setVideoWindowDialogSize;
     private _onAudioVolumeUpdated;
-    private _handleFoldListUpdated;
-    private _handleDialogSwitch;
+    private _handleDialogOpen;
+    private _handleDialogClose;
 }
 export declare const StoreContext: import("react").Context<VideoWindowStore>;

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

@@ -70,7 +70,7 @@ var _react = require("react");
 var _type3 = require("../../type");
 var _videoWindow = require("../dialog/dialogs/video-window");
 var _VideoWindowStore;
-var _initProto, _init_userVolumeMap, _init_wrapperHovering, _init_videoWindowPreviewType, _setVideoWindowPreviewTypeDecs, _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,7 +84,8 @@ function _checkInRHS(e) { if (Object(e) !== e) throw TypeError("right-hand side
 var _A = /*#__PURE__*/new WeakMap();
 var _B = /*#__PURE__*/new WeakMap();
 var _C = /*#__PURE__*/new WeakMap();
-_ref = (_setVideoWindowPreviewTypeDecs = [_mobx.action, _mobx.action.bound], _setWrapperHoverDecs = [_mobx.action, _mobx.action.bound], _getAllowedOperationsDecs = [_mobx.action, _mobx.action.bound], _onAudioVolumeUpdatedDecs = [_mobx.action, _mobx.action.bound], "_subscriptions");
+var _D = /*#__PURE__*/new WeakMap();
+_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(_ref2) {
     var _this = this;
@@ -92,20 +93,18 @@ var VideoWindowStore = exports["default"] = /*#__PURE__*/function () {
     (0, _classCallCheck2["default"])(this, VideoWindowStore);
     (0, _defineProperty2["default"])(this, _ref, (_initProto(this), []));
     (0, _defineProperty2["default"])(this, "_dialogObserver", {
-      onDialogOpen: function onDialogOpen(dialogKey) {
-        return _this._handleDialogSwitch(dialogKey, true);
-      },
-      onDialogClose: function onDialogClose(dialogKey) {
-        return _this._handleDialogSwitch(dialogKey, false);
-      }
-    });
-    (0, _defineProperty2["default"])(this, "_sharedVideoWindowDataSourceObserver", {
-      onFoldListAdded: this._handleFoldListUpdated,
-      onFoldListRemoved: this._handleFoldListUpdated
+      onDialogOpen: this._handleDialogOpen,
+      onDialogClose: this._handleDialogClose
     });
-    _classPrivateFieldInitSpec(this, _A, _init_userVolumeMap(this, new Map()));
-    _classPrivateFieldInitSpec(this, _B, _init_wrapperHovering(this, false));
-    _classPrivateFieldInitSpec(this, _C, _init_videoWindowPreviewType(this, _type.FcrVideoWindowPreviewType.SMALL));
+    (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);
@@ -133,6 +132,27 @@ var VideoWindowStore = exports["default"] = /*#__PURE__*/function () {
       (0, _mobx.runInAction)(function () {
         _this.userVolumeMap.set('0', volume);
       });
+    }), (0, _mobx.reaction)(function () {
+      return _this.videoWindowPreviewType;
+    }, function () {
+      var size = _this.videoWindowStyleSize;
+      _this._setVideoWindowDialogSize(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._setVideoWindowDialogSize(width, size.height);
+      }
     }));
     this._streamControl.addObserver({
       onStreamVolumeIndicationUpdated: this._onAudioVolumeUpdated
@@ -140,7 +160,7 @@ var VideoWindowStore = exports["default"] = /*#__PURE__*/function () {
     this._dialogProvider.addObserver(this._dialogObserver);
   }
   return (0, _createClass2["default"])(VideoWindowStore, [{
-    key: "userVolumeMap",
+    key: "_videoWindowSmallTypeStyleSize",
     get: function get() {
       return _classPrivateFieldGet(_A, this);
     },
@@ -148,7 +168,7 @@ var VideoWindowStore = exports["default"] = /*#__PURE__*/function () {
       _classPrivateFieldSet(_A, this, v);
     }
   }, {
-    key: "wrapperHovering",
+    key: "userVolumeMap",
     get: function get() {
       return _classPrivateFieldGet(_B, this);
     },
@@ -156,13 +176,21 @@ var VideoWindowStore = exports["default"] = /*#__PURE__*/function () {
       _classPrivateFieldSet(_B, this, v);
     }
   }, {
-    key: "videoWindowPreviewType",
+    key: "wrapperHovering",
     get: function get() {
       return _classPrivateFieldGet(_C, this);
     },
     set: function set(v) {
       _classPrivateFieldSet(_C, this, v);
     }
+  }, {
+    key: "videoWindowPreviewType",
+    get: function get() {
+      return _classPrivateFieldGet(_D, this);
+    },
+    set: function set(v) {
+      _classPrivateFieldSet(_D, this, v);
+    }
   }, {
     key: "foldList",
     get: function get() {
@@ -228,11 +256,6 @@ var VideoWindowStore = exports["default"] = /*#__PURE__*/function () {
     get: function get() {
       return this._sharedInterpreterDataSource.isInterpreterEnabled;
     }
-  }, {
-    key: "shouldHaveListView",
-    get: function get() {
-      return this.filterFoldList.length > 1;
-    }
   }, {
     key: "localUserRole",
     get: function get() {
@@ -248,6 +271,19 @@ var VideoWindowStore = exports["default"] = /*#__PURE__*/function () {
     get: function get() {
       return this._deviceStore.cameraEnabled;
     }
+  }, {
+    key: "videoWindowStyleSize",
+    get: function get() {
+      if (this.videoWindowPreviewType === _type.FcrVideoWindowPreviewType.SMALL) {
+        return this._videoWindowSmallTypeStyleSize;
+      } else {
+        var height = this.computedVideoWindowHeight();
+        return {
+          width: _type.DefaultVideoWindowWidth,
+          height: height
+        };
+      }
+    }
   }, {
     key: "setVideoOrientation",
     value: function setVideoOrientation() {
@@ -263,7 +299,6 @@ var VideoWindowStore = exports["default"] = /*#__PURE__*/function () {
         onStreamVolumeIndicationUpdated: this._onAudioVolumeUpdated
       });
       this._dialogProvider.removeObserver(this._dialogObserver);
-      this._sharedVideoWindowDataSource.removeObserver(this._sharedVideoWindowDataSourceObserver);
     }
   }, {
     key: "removePin",
@@ -348,9 +383,11 @@ var VideoWindowStore = exports["default"] = /*#__PURE__*/function () {
         return;
       }
       this.videoWindowPreviewType = type;
-      this._updateWindowProperties({
-        updateResizable: true
-      });
+      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",
@@ -363,22 +400,79 @@ var VideoWindowStore = exports["default"] = /*#__PURE__*/function () {
       return this._privilegeProvider.getAllowedOperations(targetRole, isSelf);
     }
   }, {
-    key: "_updateWindowProperties",
-    value: function _updateWindowProperties() {
-      var _ref3 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {
-          updateResizable: false
-        },
-        _ref3$updateResizable = _ref3.updateResizable,
-        updateResizable = _ref3$updateResizable === void 0 ? false : _ref3$updateResizable;
-      var height = this.computedVideoWindowHeight();
+    key: "handleVideowWindowResize",
+    value: function handleVideowWindowResize(size) {
+      if (this._isWindowApiResize) {
+        this._isWindowApiResize = false;
+        return;
+      }
+      if (this.videoWindowPreviewType === _type.FcrVideoWindowPreviewType.SMALL) {
+        this._videoWindowSmallTypeStyleSize = size;
+      }
+    }
+    /**
+     * @description 如果传入的宽度超过了允许的最大宽度, 则使用允许的最大宽度设置窗口宽度，以避免窗口超出显示器的边缘。
+     * @param width 期望设置的视频窗宽度
+     * @param height 视频窗高度
+     * @returns 实际设置的视频窗尺寸
+     */
+  }, {
+    key: "setVideoWindowSize",
+    value: function setVideoWindowSize(width, height) {
       var videoWindow = this._windowProvider.getWindowById(_constant.FcrUIDialogKey.VIDEO_WINDOW);
-      if (updateResizable) {
-        var resizable = this.videoWindowPreviewType === _type.FcrVideoWindowPreviewType.SMALL;
-        videoWindow.setResizable(resizable);
-        videoWindow.setAspectRatio(resizable ? _type.VideoWindowRadio : 0);
-        videoWindow.setMinimumSize(_type.DefaultVideoWindowWidth, resizable ? _type.DefaultVideoWindowSmallTypeHeight : _type.DefaultVideoWindowHeight);
+      var _videoWindow$getBound = videoWindow.getBounds(),
+        videoWindowX = _videoWindow$getBound.x;
+      var videoWindowStyleWidth = this.videoWindowStyleSize.width;
+      var maxAllowedWidth = this._computedMaxAllowedWidth(videoWindowX, videoWindowStyleWidth);
+
+      // 在最大宽度限制内，使用期望的宽度
+      // 超出最大宽度限制，使用允许的最大宽度
+      var finalWidth = Math.min(maxAllowedWidth, width);
+      this._setVideoWindowDialogSize(finalWidth, height, videoWindow);
+      return {
+        width: finalWidth,
+        height: height
+      };
+    }
+  }, {
+    key: "resetVideoWindowSize",
+    value: function resetVideoWindowSize() {
+      var size = this.videoWindowStyleSize;
+      this._setVideoWindowDialogSize(size.width, size.height);
+    }
+
+    /**
+     * 计算 video-window 窗口允许设置的最大宽度，窗口左上角距离屏幕右侧边缘的距离和当前的窗口内容宽度中，选择最大值作为允许的最大宽度（不能超过窗口最大化的宽度）
+     * @param videoWindowX 视频窗左上角 x 坐标
+     * @param videoWindowStyleWidth 视频窗内容的宽度
+     * @returns 允许设置的最大宽度
+     */
+  }, {
+    key: "_computedMaxAllowedWidth",
+    value: function _computedMaxAllowedWidth(videoWindowX, videoWindowStyleWidth) {
+      var sharingDisplayBounds = this._screenShareProvider.sharingDisplayBounds;
+      var displayX = sharingDisplayBounds.x,
+        displayWidth = sharingDisplayBounds.width;
+      var displayRightEdge = displayX + displayWidth;
+      var distanceToRightEdge = displayRightEdge - videoWindowX;
+
+      // 如果窗口左上角距离屏幕边缘的距离小于当前的窗口内容宽度，则使用当前窗口内容宽度作为允许的最大宽度，避免窗口收窄导致内容显示异常
+      var maxAllowedWidth = Math.max(distanceToRightEdge, videoWindowStyleWidth);
+
+      // 如果最大允许宽度超出了窗口最大化的宽度，则使用窗口最大化的宽度作为允许设置的宽度
+      return Math.min(maxAllowedWidth, _type.VideoWindowZoomMaxWidth);
+    }
+  }, {
+    key: "_setVideoWindowDialogSize",
+    value: function _setVideoWindowDialogSize(width, height, videoWindow) {
+      if (!videoWindow) {
+        videoWindow = this._windowProvider.getWindowById(_constant.FcrUIDialogKey.VIDEO_WINDOW);
       }
-      (0, _videoWindow.setVideoWindowDialogSize)(videoWindow, height);
+      this._isWindowApiResize = true;
+      (0, _videoWindow.setVideoWindowDialogSize)(videoWindow, {
+        width: width,
+        height: height
+      });
     }
   }, {
     key: "_onAudioVolumeUpdated",
@@ -386,33 +480,32 @@ var VideoWindowStore = exports["default"] = /*#__PURE__*/function () {
       this.userVolumeMap.set(streamId, Math.floor(volume / 255 * 100));
     }
   }, {
-    key: "_handleFoldListUpdated",
-    value: function _handleFoldListUpdated() {
-      // 没有远端可以看了，如果当前在list模式，切换到small模式
-      if (!this.shouldHaveListView && this.videoWindowPreviewType === _type.FcrVideoWindowPreviewType.LIST) {
-        this.setVideoWindowPreviewType(_type.FcrVideoWindowPreviewType.SMALL);
-      } else {
-        this._updateWindowProperties();
-      }
+    key: "_handleDialogOpen",
+    value: function _handleDialogOpen(dialogKey) {
+      if (dialogKey !== _constant.FcrUIDialogKey.VIDEO_WINDOW) return;
+      this._windowOpened = true;
     }
   }, {
-    key: "_handleDialogSwitch",
-    value: function _handleDialogSwitch(dialogKey, open) {
+    key: "_handleDialogClose",
+    value: function _handleDialogClose(dialogKey) {
+      var _this4 = this;
       if (dialogKey !== _constant.FcrUIDialogKey.VIDEO_WINDOW) return;
-      if (open) {
-        this._sharedVideoWindowDataSource.addObserver(this._sharedVideoWindowDataSourceObserver);
-        this._updateWindowProperties();
-      } else {
-        this._sharedVideoWindowDataSource.removeObserver(this._sharedVideoWindowDataSourceObserver);
-        this.setVideoWindowPreviewType(_type.FcrVideoWindowPreviewType.SMALL);
-      }
+      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.computed, 3, "foldListRenderData"], [_mobx.computed, 3, "spotlightStreamId"], [_mobx.computed, 3, "findSpotlightUser"], [_mobx.computed, 3, "hasPinnedStream"], [_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"], [_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"], [_decorator.bound, 2, "_updateWindowProperties"], [_onAudioVolumeUpdatedDecs, 18, "_onAudioVolumeUpdated"], [_decorator.bound, 2, "_handleFoldListUpdated"]], []).e, 4);
-_init_userVolumeMap = _applyDecs$e[0];
-_init_wrapperHovering = _applyDecs$e[1];
-_init_videoWindowPreviewType = _applyDecs$e[2];
-_initProto = _applyDecs$e[3];
+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/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,8 +29,11 @@ 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),
@@ -25,7 +42,11 @@ var View = exports.View = (0, _mobxReact.observer)(function () {
     setIsHover = _useState2[1];
   var _useContext = (0, _react.useContext)(_store.StoreContext),
     setWrapperHover = _useContext.setWrapperHover,
-    videoRenderContext = _useContext.videoRenderContext;
+    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 () {
@@ -38,8 +59,36 @@ var View = exports.View = (0, _mobxReact.observer)(function () {
       setWrapperHover(true);
     }
   }, [isHover]);
+  (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);
     },

package/lib/modules/whiteboard/index.d.ts

@@ -6,5 +6,5 @@ export declare class FcrWhiteboardUIModule extends UIModule {
     get store(): WhitebaordStoreBase;
     onNodeWillActive(): void;
     onNodeWillInactive(): void;
-    getComponent(dom?: Element | null): React.ReactNode;
+    getComponent(): React.ReactNode;
 }

package/lib/modules/whiteboard/index.js

@@ -65,7 +65,7 @@ var FcrWhiteboardUIModule = exports.FcrWhiteboardUIModule = /*#__PURE__*/functio
     }
   }, {
     key: "getComponent",
-    value: function getComponent(dom) {
+    value: function getComponent() {
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(_store.WhiteboardStoreContext.Provider, {
         value: this.store,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_view.Whiteboard, {})