fcr-ui-scene 3.4.5 → 3.5.1

package/lib/modules/dialog/components/system-preference/index.js

@@ -22,6 +22,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.SystemPreferenceDialog = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+require("core-js/modules/es.array.map.js");
+require("core-js/modules/esnext.async-iterator.map.js");
+require("core-js/modules/esnext.iterator.map.js");
 var _react = require("react");
 var _store = require("../../store");
 var _reactRnd = require("react-rnd");
@@ -31,75 +34,71 @@ var _i18n = require("agora-ui-foundation/lib/i18n");
 var _button = require("agora-ui-foundation/lib/components/button");
 var _env = require("agora-foundation/lib/utilities/env");
 require("./index.css");
-var _bg = _interopRequireDefault(require("./bg1.png"));
-var _bg2 = _interopRequireDefault(require("./bg2.png"));
+var _bg = _interopRequireDefault(require("./assets/bg1.png"));
+var _bg2 = _interopRequireDefault(require("./assets/bg2.png"));
+var _fcr_png_host = _interopRequireDefault(require("./assets/fcr_png_host.png"));
 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 SystemPreferenceDialogContent = function SystemPreferenceDialogContent(_ref) {
-  var params = _ref.params;
+var SystemPreferenceDialogContent = function SystemPreferenceDialogContent(props) {
   var t = (0, _i18n.useI18n)();
+  var _props$title = props.title,
+    title = _props$title === void 0 ? t('fmt_camera_popup_label_restricted') : _props$title,
+    _props$img = props.img,
+    img = _props$img === void 0 ? _bg["default"] : _props$img,
+    _props$desc = props.desc,
+    desc = _props$desc === void 0 ? t('fmt_camera_popup_label_system_change') : _props$desc,
+    _props$buttons = props.buttons,
+    buttons = _props$buttons === void 0 ? [] : _props$buttons;
   var _useContext = (0, _react.useContext)(_store.StoreContext),
     closeSystemPreferenceDialog = _useContext.closeSystemPreferenceDialog;
-  var deviceMap = {
-    camera: {
-      title: t('fmt_camera_popup_label_restricted'),
-      desc: t('fmt_camera_popup_label_system_change'),
-      img: _bg["default"]
-    },
-    microphone: {
-      title: t('fmt_audio_popup_label_restricted'),
-      desc: t('fmt_audio_popup_label_system_change'),
-      img: _bg2["default"]
-    }
+  var images = {
+    host: _fcr_png_host["default"],
+    video: _bg["default"],
+    audio: _bg2["default"]
   };
+  var src = typeof img === 'string' && img in images ? images[img] : img;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     className: "fcr-system-preference-dialog",
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
-      src: deviceMap[params].img,
+      src: src,
       alt: ""
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: "fcr-system-preference-dialog-title",
-      children: deviceMap[params].title
+      children: title
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: "fcr-system-preference-dialog-desc",
-      children: deviceMap[params].desc
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      className: "fcr-system-preference-dialog-button",
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.FcrButton, {
-        size: "S",
-        styleType: "normal",
-        shape: "rounded",
-        onClick: function onClick() {
-          closeSystemPreferenceDialog();
-          window.runtime.openSystemPreferences(params);
-        },
-        children: t('fmt_audio_popup_button_system_change')
-      })
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      className: "fcr-system-preference-dialog-button",
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.FcrButton, {
-        size: "S",
-        styleType: "white",
-        shape: "rounded",
-        onClick: closeSystemPreferenceDialog,
-        children: t('fmt_audio_popup_button_cancel')
-      })
+      children: desc
+    }), buttons.map(function (button) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "fcr-system-preference-dialog-button",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.FcrButton, {
+          size: "S",
+          styleType: button.styleType || 'normal',
+          shape: "rounded",
+          onClick: function onClick() {
+            var _button$onClick;
+            button.withClose && closeSystemPreferenceDialog();
+            (_button$onClick = button.onClick) === null || _button$onClick === void 0 || _button$onClick.call(button);
+          },
+          children: button.text
+        })
+      });
     })]
   });
 };
-var SystemPreferenceDialog = exports.SystemPreferenceDialog = function SystemPreferenceDialog(_ref2) {
-  var params = _ref2.params;
+var SystemPreferenceDialog = exports.SystemPreferenceDialog = function SystemPreferenceDialog(_ref) {
+  var params = _ref.params;
   var store = (0, _react.useContext)(_store.StoreContext);
   var containerWidth = window.innerWidth;
   var containerHeight = window.innerHeight;
-  var _ref3 = (0, _env.isElectron)() ? window.runtime.browserWindow.getBounds() : {
+  var _ref2 = (0, _env.isElectron)() ? window.runtime.browserWindow.getBounds() : {
       x: document.body.offsetLeft,
       y: document.body.offsetTop
     },
-    offsetX = _ref3.x,
-    offsetY = _ref3.y;
-  var width = (params === null || params === void 0 ? void 0 : params.width) || 280;
+    offsetX = _ref2.x,
+    offsetY = _ref2.y;
+  var width = (params === null || params === void 0 ? void 0 : params.width) || 320;
   var height = (params === null || params === void 0 ? void 0 : params.height) || 387;
   var x = containerWidth / 2 - width / 2 + ((0, _platform.isWindows)() ? offsetX : 0);
   var y = containerHeight / 2 - height / 2 + ((0, _platform.isWindows)() ? offsetY : 0);
@@ -109,9 +108,7 @@ var SystemPreferenceDialog = exports.SystemPreferenceDialog = function SystemPre
         x: x,
         y: y
       }),
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(SystemPreferenceDialogContent, {
-        params: params
-      })
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(SystemPreferenceDialogContent, _objectSpread({}, params))
     });
   }
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_store.StoreContext.Provider, {
@@ -127,13 +124,8 @@ var SystemPreferenceDialog = exports.SystemPreferenceDialog = function SystemPre
       maxWidth: width,
       minWidth: width,
       minHeight: height,
-      bounds: '.fcr-confirm-dialog-wrapper_web',
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        className: "fcr-confirm-dialog-wrapper_web",
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(SystemPreferenceDialogContent, {
-          params: params
-        })
-      })
+      bounds: '.fcr-system-preference-dialog',
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(SystemPreferenceDialogContent, _objectSpread({}, params))
     })
   });
 };

package/lib/modules/dialog/components/video-window/index.d.ts

@@ -1,2 +1,2 @@
 import { PropsWithChildren } from 'react';
-export declare const VideoWindowDialog: ({ children }: PropsWithChildren<{}>) => import("react/jsx-runtime").JSX.Element | null;
+export declare const VideoWindowDialog: ({ children }: PropsWithChildren<{}>) => null;

package/lib/modules/dialog/components/video-window/index.js

@@ -1,23 +1,40 @@
 "use strict";
 
+require("core-js/modules/es.symbol.js");
+require("core-js/modules/es.array.filter.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/esnext.async-iterator.filter.js");
+require("core-js/modules/esnext.iterator.filter.js");
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.VideoWindowDialog = void 0;
+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.async-iterator.for-each.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 _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("react");
 var _mobxReact = require("mobx-react");
-var _env = require("agora-foundation/lib/utilities/env");
-var _reactDom = require("react-dom");
 var _debounce = _interopRequireDefault(require("lodash/debounce"));
 var _constant = require("../../../../utilities/constant");
-var _renderer = require("../../../../utilities/renderer");
 var _videoTrackRenderContext = require("../../../../utilities/video-track-render-context");
 var _type = require("../../../video-window/type");
 var _store = require("../../store");
-var _dialogs = require("../../dialogs");
+var _useElectron = require("../../hooks/useElectron");
 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; }
 function changeVideoWindowConfig(browserWindow) {
   var resizeble = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
   browserWindow.setResizable(resizeble);
@@ -25,123 +42,221 @@ function changeVideoWindowConfig(browserWindow) {
   browserWindow.setMinimumSize(resizeble ? _type.DefaultVideoWindowWidth : 0, resizeble ? _type.DefaultVideoWindowSmallTypeHeight : 0);
   browserWindow.setMaximumSize(resizeble ? _type.VideoWindowZoomMaxWidth : 0, resizeble ? _type.VideoWindowZoomMaxHeight : 0);
 }
-var VideoWindowElectronDialog = (0, _mobxReact.observer)(function (_ref) {
+var VideoWindowDialog = exports.VideoWindowDialog = (0, _mobxReact.observer)(function (_ref) {
   var children = _ref.children;
   var store = (0, _react.useContext)(_store.StoreContext);
-  var _store$videoWindowBou = store.videoWindowBounds,
-    videoWindowHeight = _store$videoWindowBou.videoWindowHeight,
-    videoWindowPreviewType = _store$videoWindowBou.videoWindowPreviewType,
-    workareaX = _store$videoWindowBou.workareaX,
-    workareaY = _store$videoWindowBou.workareaY,
-    workareaWidth = _store$videoWindowBou.workareaWidth,
-    workareaHeight = _store$videoWindowBou.workareaHeight;
+  var wrapperDomRef = (0, _react.useRef)();
+  var observerRef = (0, _react.useRef)();
+  var debounceRef = (0, _react.useRef)();
+  var calculateRef = (0, _react.useRef)();
+  var videoWindowBounds = store.videoWindowBounds,
+    currentShareBounds = store.currentShareBounds;
+  var _useMemo = (0, _react.useMemo)(function () {
+      return videoWindowBounds;
+    }, [videoWindowBounds]),
+    height = _useMemo.videoWindowHeight,
+    type = _useMemo.videoWindowPreviewType;
+  var _window$runtime$scree = window.runtime.screen.getDisplayNearestPoint(currentShareBounds).bounds,
+    x = _window$runtime$scree.x,
+    y = _window$runtime$scree.y,
+    width = _window$runtime$scree.width;
   var initalBounds = {
-    x: workareaX + workareaWidth - _type.DefaultVideoWindowWidth - 220,
-    y: workareaY + 80,
+    x: x + width - _type.DefaultVideoWindowWidth - 144,
+    y: y + 80,
     width: _type.DefaultVideoWindowWidth,
     height: _type.DefaultVideoWindowSmallTypeHeight
   };
-  var videoWindowRef = (0, _react.useRef)();
-  var handleBounds = function handleBounds(newBounds) {
-    var height = newBounds.height;
-    var width = newBounds.width;
-    store.resizeVideoWindow(width < _type.DefaultVideoWindowWidth || !width ? _type.DefaultVideoWindowWidth : width, height < _type.DefaultVideoWindowSmallTypeHeight || !height ? _type.DefaultVideoWindowSmallTypeHeight : height);
-  };
-  (0, _react.useEffect)(function () {
-    var node;
-    window.runtime.openRendererWindow('video-window', function (dom, browserWindow, rendererWindow) {
-      var _head$querySelector;
-      node = dom;
-      var style = document.createElement('style');
-      style.id = 'video-window-scrollbar-style';
-      style.textContent = "\n            ::-webkit-scrollbar {\n                width: 0;\n                height: 0;\n            }\n        ";
-      var head = rendererWindow.window.document.head;
-      (_head$querySelector = head.querySelector('#video-window-scrollbar-style')) === null || _head$querySelector === void 0 || _head$querySelector.remove();
-      head.appendChild(style);
-      videoWindowRef.current = browserWindow;
-      browserWindow.setTitle('Video Window');
-      browserWindow.setResizable(false); // 修复分享窗口切换时导致的大小失真的情况，所以要在修改 bounds 之前先设置为不可修改大小
+  var config = _objectSpread(_objectSpread({
+    title: 'Video Window',
+    type: 'panel',
+    frame: false,
+    fullscreen: false,
+    maximizable: false
+  }, initalBounds), {}, {
+    minWidth: _type.DefaultVideoWindowWidth,
+    transparent: true,
+    alwaysOnTop: true,
+    hasShadow: false,
+    resizable: true,
+    skipTaskbar: true
+  });
 
-      browserWindow.setBounds(initalBounds);
-      changeVideoWindowConfig(browserWindow);
-      browserWindow.setBackgroundColor('#00000000');
-      browserWindow.setVisibleOnAllWorkspaces(true, {
-        visibleOnFullScreen: true,
-        skipTransformProcessType: true
-      });
-      browserWindow.setAlwaysOnTop(true, 'screen-saver');
-      _dialogs.dialogWindows.set(_constant.FcrUIDialogKey.VIDEO_WINDOW, browserWindow);
-      (0, _renderer.handleWillClose)(browserWindow, function () {
-        (0, _reactDom.unmountComponentAtNode)(node);
-        _dialogs.dialogWindows["delete"](_constant.FcrUIDialogKey.VIDEO_WINDOW);
-        if (!browserWindow.isDestroyed()) {
-          browserWindow.removeAllListeners('will-resize');
+  // const handleBounds = (newBounds: Electron.Rectangle) => {
+  //   const height = newBounds.height;
+  //   const width = newBounds.width;
+  //   store.resizeVideoWindow(
+  //     width < defaultWidth || !width ? defaultWidth : width,
+  //     height < DefaultVideoWindowSmallTypeHeight || !height
+  //       ? DefaultVideoWindowSmallTypeHeight
+  //       : height,
+  //   );
+  // };
+  var _useState = (0, _react.useState)({
+      width: _type.DefaultVideoWindowWidth,
+      height: _type.DefaultVideoWindowSmallTypeHeight
+    }),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    newBounds = _useState2[0],
+    setNewBounds = _useState2[1];
+  var _useElectronDialog = (0, _useElectron.useElectronDialog)({
+      dialogKey: _constant.FcrUIDialogKey.VIDEO_WINDOW,
+      config: config,
+      hasCustomShadow: false,
+      alwaysOnTop: 'screen-saver',
+      disableShortcutClose: true,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_videoTrackRenderContext.FcrVideoTrackRenderContext.Provider, {
+        value: {
+          localVideoRenderProvider: store.localVideoRenderProvider,
+          remoteVideoRenderProvider: store.remoteVideoRenderManager
+        },
+        children: children
+      }),
+      onOpened: function onOpened(_ref2) {
+        var browserWindow = _ref2.browserWindow,
+          newRendererWindow = _ref2.newRendererWindow;
+        browserWindow.setBounds(initalBounds);
+        function reCalculate() {
+          var currentShareBounds = store.getCurrentSharingScreenBounds();
+          var _window$runtime$scree2 = window.runtime.screen.getDisplayNearestPoint(currentShareBounds).bounds,
+            x = _window$runtime$scree2.x,
+            y = _window$runtime$scree2.y,
+            width = _window$runtime$scree2.width;
+          browserWindow.setBounds({
+            x: x + width - _type.DefaultVideoWindowWidth - 144,
+            y: y + 80,
+            width: _type.DefaultVideoWindowWidth,
+            height: _type.DefaultVideoWindowSmallTypeHeight
+          });
+        }
+        calculateRef.current = reCalculate;
+
+        // @ts-ignore
+        window.runtime.screen.addListener('display-metrics-changed', calculateRef.current);
+        // browserWindow.on(
+        //   'move',
+        //   debounce(() => {
+        //     popoverWatcher(browserWindow, newRendererWindow);
+        //   }, 100),
+        // );
+        debounceRef.current = (0, _debounce["default"])(function (event, bounds) {
+          setNewBounds(bounds);
+          popoverWatcher(browserWindow, newRendererWindow);
+        }, 100);
+        browserWindow.addListener(
+        // @ts-ignore
+        'custom-resize', debounceRef.current);
+        changeVideoWindowConfig(browserWindow);
+        popoverWatcher(browserWindow, newRendererWindow);
+      },
+      onClose: function onClose(_ref3) {
+        var browserWindow = _ref3.browserWindow;
+        if (!(browserWindow !== null && browserWindow !== void 0 && browserWindow.isDestroyed())) {
+          // @ts-ignore
+          browserWindow.removeListener('custom-resize', debounceRef.current);
+          // @ts-ignore
+          window.runtime.screen.removeListener('display-metrics-changed', calculateRef.current);
           changeVideoWindowConfig(browserWindow);
           browserWindow.setResizable(false);
           browserWindow.setBounds(initalBounds);
         }
-      });
-      if (browserWindow) {
-        browserWindow.addListener('will-resize', (0, _debounce["default"])(function (event, newBounds) {
-          handleBounds(newBounds);
-        }, 100));
       }
-      (0, _reactDom.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_videoTrackRenderContext.FcrVideoTrackRenderContext.Provider, {
-        value: {
-          localVideoRenderProvider: store.localVideoRenderProvider,
-          remoteVideoRenderProvider: store.remoteVideoRenderManager
-        },
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_store.StoreContext.Provider, {
-          value: store,
-          children: children
-        })
-      }), dom);
-    }, {
-      type: 'panel',
-      frame: false,
-      fullscreen: false,
-      maximizable: false,
-      x: workareaX + workareaWidth - _type.DefaultVideoWindowWidth - 220,
-      y: workareaY + 80,
-      width: _type.DefaultVideoWindowWidth,
-      height: _type.DefaultVideoWindowSmallTypeHeight,
-      minWidth: _type.DefaultVideoWindowWidth,
-      transparent: true,
-      alwaysOnTop: true,
-      hasShadow: false,
-      resizable: true,
-      skipTaskbar: true
-    });
-    return function () {
-      node && (0, _reactDom.unmountComponentAtNode)(node);
-      window.runtime.closeRendererWindow('video-window');
-    };
-  }, []);
+    }),
+    browserWindow = _useElectronDialog.browserWindow,
+    newRendererWindow = _useElectronDialog.newRendererWindow;
   (0, _react.useEffect)(function () {
-    if (!videoWindowRef.current) return;
+    if (!browserWindow) return;
     var x = initalBounds.x,
       y = initalBounds.y;
-    videoWindowRef.current.setBounds({
+    browserWindow.setBounds({
       x: x,
       y: y
     });
-  }, [workareaX, workareaY]);
+  }, [x, y]);
   (0, _react.useEffect)(function () {
-    if (!videoWindowRef.current) return;
-    videoWindowRef.current.setResizable(false);
-    videoWindowRef.current.setBounds({
-      width: _type.DefaultVideoWindowWidth,
-      height: videoWindowHeight
+    if (!browserWindow) return;
+    browserWindow.setResizable(false);
+    resetSize(type, true);
+    newRendererWindow && popoverWatcher(browserWindow, newRendererWindow);
+    changeVideoWindowConfig(browserWindow, type === _type.FcrVideoWindowPreviewType.SMALL);
+  }, [height, type, newBounds]);
+  function resetSize(type, withStyle) {
+    var _wrapperDomRef$curren, _wrapperDomRef$curren2;
+    if (!browserWindow) return;
+    switch (type) {
+      case _type.FcrVideoWindowPreviewType.MINI:
+        browserWindow === null || browserWindow === void 0 || browserWindow.setBounds({
+          height: _type.DefaultVideoWindowHeight,
+          width: _type.DefaultVideoWindowWidth
+        });
+        break;
+      case _type.FcrVideoWindowPreviewType.SMALL:
+        browserWindow === null || browserWindow === void 0 || browserWindow.setBounds({
+          height: newBounds.height,
+          width: newBounds.width
+        });
+        withStyle && ((_wrapperDomRef$curren = wrapperDomRef.current) === null || _wrapperDomRef$curren === void 0 ? void 0 : _wrapperDomRef$curren.setAttribute('style', "height: undefined; width: undefined"));
+        break;
+      case _type.FcrVideoWindowPreviewType.LIST:
+        browserWindow === null || browserWindow === void 0 || browserWindow.setBounds({
+          height: height,
+          width: _type.DefaultVideoWindowWidth
+        });
+        withStyle && ((_wrapperDomRef$curren2 = wrapperDomRef.current) === null || _wrapperDomRef$curren2 === void 0 ? void 0 : _wrapperDomRef$curren2.setAttribute('style', "height: ".concat(height, ";width: ").concat(_type.DefaultVideoWindowWidth, "px")));
+        break;
+    }
+  }
+  function popoverWatcher(browserWindow, newRendererWindow) {
+    if (!newRendererWindow || !browserWindow) return;
+    if (observerRef.current) observerRef.current.disconnect();
+    var HEAD_HEIGHT_OFFSET = 150;
+    var WIDTH_RIGHT_OFFSET = 30;
+    var browserWindowBounds = browserWindow.getBounds();
+    var nearDisplay = window.runtime.screen.getDisplayNearestPoint(browserWindowBounds);
+    var nearDisplayBounds = nearDisplay.bounds;
+    observerRef.current = new MutationObserver(function (mutationsList) {
+      var body = newRendererWindow.document.body;
+      var popover = body.querySelector('.fcr-popover');
+      wrapperDomRef.current = body.querySelector('.fcr-video-window-dialog-wrapper');
+      var wrapper = wrapperDomRef.current;
+      mutationsList.forEach(function (mutation) {
+        if (mutation.type === 'childList') {
+          mutation.addedNodes.forEach(function (node) {
+            if (node.nodeType === Node.ELEMENT_NODE && node.contains(popover)) {
+              if (popover) {
+                var wrapperHeight = wrapper.offsetHeight,
+                  wrapperWidth = wrapper.offsetWidth;
+                var popoverHeight = popover.offsetHeight,
+                  popoverWidth = popover.offsetWidth,
+                  offsetTop = popover.offsetTop,
+                  offsetLeft = popover.offsetLeft;
+                // 如果 popover 展开，根据 popover 的尺寸调整窗口的尺寸可以正好容纳 popover
+                browserWindow.setBounds({
+                  height: Math.max(wrapperHeight, popoverHeight + HEAD_HEIGHT_OFFSET),
+                  width: wrapperWidth + popoverWidth - WIDTH_RIGHT_OFFSET
+                });
+                var diffLeft = nearDisplayBounds.width - browserWindowBounds.width;
+                var diffWidth = diffLeft - wrapperWidth;
+                if (wrapper) {
+                  var rect = wrapper.getBoundingClientRect();
+                  wrapper.setAttribute('style', "height: ".concat(rect.height, "px;width: ").concat(rect.width, "px"));
+                  // popover.setAttribute('style', `left: ${offsetLeft}px;top: ${offsetTop}px`);
+                }
+              }
+            }
+          });
+          mutation.removedNodes.forEach(function (node) {
+            var _classList;
+            if ((_classList = node.classList) !== null && _classList !== void 0 && _classList.contains('fcr-popover')) {
+              resetSize(type);
+              type === _type.FcrVideoWindowPreviewType.SMALL && browserWindow.setResizable(true);
+            }
+          });
+        }
+      });
     });
-    changeVideoWindowConfig(videoWindowRef.current, videoWindowPreviewType === 'small');
-  }, [videoWindowHeight, videoWindowPreviewType]);
-  return null;
-});
-var VideoWindowDialog = exports.VideoWindowDialog = (0, _mobxReact.observer)(function (_ref2) {
-  var children = _ref2.children;
-  if ((0, _env.isElectron)()) {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(VideoWindowElectronDialog, {
-      children: children
+    observerRef.current.observe(newRendererWindow.document.body, {
+      childList: true,
+      subtree: true
     });
   }
   return null;

package/lib/modules/dialog/components/widget/electron.d.ts

@@ -0,0 +1,5 @@
+import { PropsWithChildren } from 'react';
+import { FcrUIWebWidgetConfig } from '../../../../type';
+export declare const WidgetElectronDialog: ({ children, params, }: PropsWithChildren<{
+    params: FcrUIWebWidgetConfig;
+}>) => null;

package/lib/modules/dialog/components/widget/electron.js

@@ -0,0 +1,37 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.WidgetElectronDialog = void 0;
+require("core-js/modules/es.function.name.js");
+var _constant = require("../../../../utilities/constant");
+var _useElectron = require("../../hooks/useElectron");
+var WidgetElectronDialog = exports.WidgetElectronDialog = function WidgetElectronDialog(_ref) {
+  var _params$popupSize, _params$popupSize2;
+  var children = _ref.children,
+    params = _ref.params;
+  var width = (_params$popupSize = params.popupSize) !== null && _params$popupSize !== void 0 && _params$popupSize.width ? params.popupSize.width + 2 : undefined;
+  var height = (_params$popupSize2 = params.popupSize) !== null && _params$popupSize2 !== void 0 && _params$popupSize2.height ? params.popupSize.height + 76 : undefined;
+  var config = {
+    fullscreen: false,
+    maximizable: false,
+    trafficLightPosition: {
+      x: 10,
+      y: 60
+    },
+    width: width,
+    height: height,
+    title: params.name,
+    resizable: false
+  };
+  (0, _useElectron.useElectronDialogByDialogId)({
+    config: config,
+    dialogKey: _constant.FcrUIDialogKey.WIDGET,
+    dialogId: params.id,
+    children: children,
+    hasCustomShadow: false
+  });
+  return null;
+};

package/lib/modules/dialog/components/widget/index.d.ts

@@ -0,0 +1,6 @@
+import { PropsWithChildren } from 'react';
+import { FcrUIWebWidgetConfig } from '../../../../type';
+declare const WidgetDialog: ({ children, params, }: PropsWithChildren<{
+    params: FcrUIWebWidgetConfig;
+}>) => import("react/jsx-runtime").JSX.Element;
+export default WidgetDialog;

package/lib/modules/dialog/components/widget/index.js

@@ -0,0 +1,43 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+require("core-js/modules/es.function.name.js");
+var _env = require("agora-foundation/lib/utilities/env");
+var _electron = require("./electron");
+var _react = require("react");
+var _i18n = require("agora-ui-foundation/lib/i18n");
+var _dialogContainer = _interopRequireDefault(require("../dialog-container"));
+var _constant = require("../../../../utilities/constant");
+var _store = require("../../store");
+var _jsxRuntime = require("react/jsx-runtime");
+var WidgetDialog = function WidgetDialog(_ref) {
+  var _params$popupSize, _params$popupSize2;
+  var children = _ref.children,
+    params = _ref.params;
+  var t = (0, _i18n.useI18n)();
+  var _useContext = (0, _react.useContext)(_store.StoreContext),
+    widgetDialogIds = _useContext.widgetDialogIds;
+  var width = (_params$popupSize = params.popupSize) !== null && _params$popupSize !== void 0 && _params$popupSize.width ? params.popupSize.width + 2 : undefined;
+  var height = (_params$popupSize2 = params.popupSize) !== null && _params$popupSize2 !== void 0 && _params$popupSize2.height ? params.popupSize.height + 46 : undefined;
+  var container = /*#__PURE__*/(0, _jsxRuntime.jsx)(_dialogContainer["default"], {
+    title: params.name,
+    width: width,
+    height: height,
+    dialogKey: _constant.FcrUIDialogKey.WIDGET,
+    dialogId: widgetDialogIds.get(params.id),
+    children: children
+  });
+  if ((0, _env.isElectron)()) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_electron.WidgetElectronDialog, {
+      params: params,
+      children: container
+    });
+  }
+  return container;
+};
+var _default = exports["default"] = WidgetDialog;

package/lib/modules/dialog/hooks/useElectron.d.ts

@@ -1,3 +1,4 @@
+import { FcrUIDialogHooksProps } from '../type';
 export declare const DialogInstanceContext: import("react").Context<{
     browserWindow: Electron.BrowserWindow;
     newRendererWindow: Window;
@@ -7,4 +8,10 @@ export declare const shadowOffset: number;
 export declare function useElectronDialog(props: FcrUIDialogHooksProps): {
     store: import("../store").default;
     browserWindow: Electron.BrowserWindow | undefined;
+    newRendererWindow: Window | undefined;
+};
+export declare function useElectronDialogByDialogId(props: FcrUIDialogHooksProps): {
+    store: import("../store").default;
+    browserWindow: Electron.BrowserWindow | undefined;
+    newRendererWindow: Window | undefined;
 };