fcr-ui-scene 3.7.4 → 3.7.6

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

@@ -1,273 +1,62 @@
 "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.iterator.filter.js");
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.title = 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.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"));
+exports.windowConfig = exports.setVideoWindowDialogSize = exports.setVideoWindowDialogPosition = exports.VideoWindowDialog = void 0;
 var _react = require("react");
 var _mobxReact = require("mobx-react");
-var _debounce = _interopRequireDefault(require("lodash/debounce"));
-var _constant = require("../../../../utilities/constant");
-var _videoTrackRenderContext = require("../../../../utilities/video-track-render-context");
 var _type = require("../../../video-window/type");
-var _store = require("../../store");
-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);
-  browserWindow.setAspectRatio(resizeble ? _type.VideoWindowRadio : 0);
-  browserWindow.setMinimumSize(resizeble ? _type.DefaultVideoWindowWidth : 0, resizeble ? _type.DefaultVideoWindowSmallTypeHeight : 0);
-  browserWindow.setMaximumSize(resizeble ? _type.VideoWindowZoomMaxWidth : 0, resizeble ? _type.VideoWindowZoomMaxHeight : 0);
-}
-var title = exports.title = 'Video Window';
+var _store = require("../../store.base");
+var _reactDom = require("react-dom");
+var title = 'Video Window';
 var VideoWindowDialog = exports.VideoWindowDialog = (0, _mobxReact.observer)(function (_ref) {
-  var children = _ref.children;
-  var store = (0, _react.useContext)(_store.StoreContext);
-  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 getBoundsPosition = function getBoundsPosition(x, y, width) {
-    return {
-      x: x + width - _type.DefaultVideoWindowWidth - 144,
-      y: y + 80
-    };
-  };
-  var _useMemo2 = (0, _react.useMemo)(function () {
-      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 = _objectSpread(_objectSpread({}, getBoundsPosition(x, y, width)), {}, {
-        width: _type.DefaultVideoWindowWidth,
-        height: _type.DefaultVideoWindowSmallTypeHeight
-      });
-      return {
-        x: x,
-        y: y,
-        initalBounds: initalBounds
-      };
-    }, [currentShareBounds.height, currentShareBounds.width, currentShareBounds.x, currentShareBounds.y]),
-    x = _useMemo2.x,
-    y = _useMemo2.y,
-    initalBounds = _useMemo2.initalBounds;
-  var config = _objectSpread(_objectSpread({
-    title: title,
-    type: 'panel',
-    frame: false,
-    fullscreen: false,
-    maximizable: false
-  }, initalBounds), {}, {
-    minWidth: _type.DefaultVideoWindowWidth,
-    transparent: true,
-    alwaysOnTop: true,
-    hasShadow: false,
-    resizable: true,
-    skipTaskbar: true
+  var dialogKey = _ref.dialogKey,
+    dialogId = _ref.dialogId,
+    children = _ref.children;
+  var _useContext = (0, _react.useContext)(_store.StoreContext),
+    getDialogRootNode = _useContext.getDialogRootNode;
+  var dialogRoot = getDialogRootNode(dialogKey, dialogId);
+  return /*#__PURE__*/(0, _reactDom.createPortal)(children, dialogRoot);
+});
+var windowConfig = exports.windowConfig = {
+  title: title,
+  type: 'panel',
+  frame: false,
+  fullscreen: false,
+  maximizable: false,
+  width: _type.DefaultVideoWindowWidth,
+  height: _type.DefaultVideoWindowSmallTypeHeight,
+  minWidth: _type.DefaultVideoWindowWidth,
+  minHeight: _type.DefaultVideoWindowSmallTypeHeight,
+  maxWidth: _type.VideoWindowZoomMaxWidth,
+  maxHeight: _type.VideoWindowZoomMaxHeight,
+  transparent: true,
+  alwaysOnTop: true,
+  hasShadow: false,
+  resizable: true,
+  skipTaskbar: true
+};
+var setVideoWindowDialogPosition = exports.setVideoWindowDialogPosition = function setVideoWindowDialogPosition(screenSharingBounds, videoWindow) {
+  var screenX = screenSharingBounds.x,
+    screenY = screenSharingBounds.y,
+    screenWidth = screenSharingBounds.width;
+  var x = screenX + screenWidth - _type.DefaultVideoWindowWidth - 144;
+  var y = screenY + 80;
+  videoWindow.setBounds({
+    x: x,
+    y: y
   });
+};
 
-  // 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,
-      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() {
-          if (!browserWindow.isDestroyed()) {
-            var shareBounds = store.recordCurrentSharingScreenBounds();
-            var _window$runtime$scree2 = window.runtime.screen.getDisplayNearestPoint(shareBounds).bounds,
-              _x = _window$runtime$scree2.x,
-              _y = _window$runtime$scree2.y,
-              width = _window$runtime$scree2.width;
-            browserWindow.setBounds(getBoundsPosition(_x, _y, width));
-            store.log("[VideoWindowDialog]: [onOpened],  x: ".concat(_x, ", y: ").concat(_y, ", width: ").concat(width));
-          }
-        }
-        reCalculate();
-        calculateRef.current = reCalculate;
-        window.runtime.screen.addListener('display-metrics-changed', reCalculate);
-        window.runtime.screen.addListener('display-removed', reCalculate);
-        window.runtime.screen.addListener('display-added', reCalculate);
-        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);
-          var listener = calculateRef.current;
-          window.runtime.screen.removeListener('display-metrics-changed', listener);
-          window.runtime.screen.removeListener('display-removed', listener);
-          window.runtime.screen.removeListener('display-added', listener);
-          changeVideoWindowConfig(browserWindow);
-          browserWindow.setResizable(false);
-          browserWindow.setBounds(initalBounds);
-        }
-      }
-    }),
-    browserWindow = _useElectronDialog.browserWindow,
-    newRendererWindow = _useElectronDialog.newRendererWindow;
-  (0, _react.useEffect)(function () {
-    if (calculateRef.current) calculateRef.current();
-  }, [currentShareBounds]);
-  (0, _react.useEffect)(function () {
-    if (!browserWindow) return;
-    var x = initalBounds.x,
-      y = initalBounds.y;
-    browserWindow.setBounds({
-      x: x,
-      y: y
-    });
-  }, [x, y]);
-  (0, _react.useEffect)(function () {
-    if (!browserWindow) return;
-    browserWindow.setResizable(false);
-    resetSize(type, true);
-    newRendererWindow && popoverWatcher(browserWindow, newRendererWindow);
-    changeVideoWindowConfig(browserWindow, type === _type.FcrVideoWindowPreviewType.SMALL);
-  }, [height, type, newBounds, currentShareBounds]);
-  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);
-            }
-          });
-        }
-      });
-    });
-    observerRef.current.observe(newRendererWindow.document.body, {
-      childList: true,
-      subtree: true
-    });
-  }
-  return null;
-});
+/** 使用默认宽度 246 */
+var setVideoWindowDialogSize = exports.setVideoWindowDialogSize = function setVideoWindowDialogSize(videoWindow, _ref2) {
+  var _ref2$width = _ref2.width,
+    width = _ref2$width === void 0 ? _type.DefaultVideoWindowWidth : _ref2$width,
+    height = _ref2.height;
+  videoWindow.setBounds({
+    width: width,
+    height: height
+  });
+};

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

@@ -1,4 +1,23 @@
-import { FcrWhiteboardUIModule } from '../../../whiteboard';
-export declare const WhiteboardElectronDialog: ({ module }: {
-    module: FcrWhiteboardUIModule;
-}) => null;
+import { FC, PropsWithChildren } from 'react';
+import { FcrUIDialogProps } from '../../type';
+type WhiteboardDialogProps = PropsWithChildren<FcrUIDialogProps>;
+export declare const WhiteboardDialog: FC<WhiteboardDialogProps>;
+export declare const windowConfig: {
+    frame: true;
+    maximizable: false;
+    minimizable: false;
+    fullscreenable: false;
+    trafficLightPosition: {
+        x: number;
+        y: number;
+    };
+    resizable: true;
+    width: number;
+    height: number;
+    minWidth: number;
+    minHeight: number;
+    maxWidth: number;
+    maxHeight: number;
+    transparent: true;
+};
+export {};

package/lib/modules/dialog/dialogs/whiteboard/index.js

@@ -4,70 +4,64 @@ require("core-js/modules/es.object.define-property.js");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.WhiteboardElectronDialog = void 0;
+exports.windowConfig = exports.WhiteboardDialog = void 0;
 var _mobxReact = require("mobx-react");
-var _react = require("react");
-var _constant = require("../../../../utilities/constant");
-var _store = require("../../store");
-var _reactDom = require("react-dom");
-var WhiteboardElectronDialog = exports.WhiteboardElectronDialog = (0, _mobxReact.observer)(function (_ref) {
-  var module = _ref.module;
-  var store = (0, _react.useContext)(_store.StoreContext);
-  (0, _react.useEffect)(function () {
-    var node;
-    window.runtime.openRendererWindow('whiteboard', function (dom, browserWindow) {
-      node = dom;
-      if (browserWindow) {
-        browserWindow.focus();
-        // if (newWindow) {
-        //   const proxyHandler = {
-        //     get(target: Window, prop: any) {
-        //       console.log({ target, prop });
-        //       if (prop === 'addEventListener') {
-        //         return function (
-        //           type: string,
-        //           listener: () => void,
-        //           options: boolean | AddEventListenerOptions,
-        //         ) {
-        //           // console.log({ type, listener, options });
-        //           target?.addEventListener(type, listener, options);
-        //         };
-        //       }
-        //       return target[prop];
-        //     },
-        //   };
-        //   const proxy = new Proxy(window, proxyHandler);
-        //   newWindow.addEventListener = proxy.addEventListener.bind(proxy);
-        //   // window.addEventListener('resize', () => {
-        //   //   console.log(111111);
-        //   // });
-        //   // window.addEventListener('mousedown', () => {
-        //   //   console.log('yes');
-        //   // });
-        // }
+var WhiteboardDialog = exports.WhiteboardDialog = (0, _mobxReact.observer)(function (_ref) {
+  var dialogId = _ref.dialogId,
+    dialogKey = _ref.dialogKey;
+  // useEffect(() => {
+  //   let node: Element;
+  //   renderer.openRendererWindow(
+  //     'whiteboard',
+  //     (dom: HTMLElement, browserWindow: Electron.BrowserWindow) => {
+  //       node = dom;
+  //       if (browserWindow) {
+  //         browserWindow.focus();
+
+  //         // TODO:
+  //         // dialogWindows.set(FcrUIDialogKey.WHITEBOARD, browserWindow);
+  //       }
+
+  //       module.getComponent(dom);
+  //     },
+  //     {
+  //       frame: true,
+  //       fullscreen: false,
+  //       maximizable: false,
+  //       width: 1920 / 1.5,
+  //       height: 1080 / 1.5,
+  //       minWidth: 530,
+  //       minHeight: 500,
+  //       maxWidth: 1920,
+  //       maxHeight: 1080,
+  //       transparent: true,
+  //     },
+  //   );
+  //   return () => {
+  //     // TODO:
+  //     // dialogWindows.delete(FcrUIDialogKey.WHITEBOARD);
+  //     node && unmountComponentAtNode(node);
+  //     renderer.closeRendererWindow('whiteboard');
+  //   };
+  // }, []);
 
-        _store.dialogWindows.set(_constant.FcrUIDialogKey.WHITEBOARD, browserWindow);
-      }
-      module.getComponent(dom);
-      // render(<div className="fcr-whiteboard-wrapper">{children}</div>, dom);
-    }, {
-      frame: true,
-      fullscreen: false,
-      maximizable: false,
-      // titleBarStyle: 'hidden',
-      width: 1920 / 1.5,
-      height: 1080 / 1.5,
-      minWidth: 530,
-      minHeight: 500,
-      maxWidth: 1920,
-      maxHeight: 1080,
-      transparent: true
-    });
-    return function () {
-      _store.dialogWindows["delete"](_constant.FcrUIDialogKey.WHITEBOARD);
-      node && (0, _reactDom.unmountComponentAtNode)(node);
-      window.runtime.closeRendererWindow('whiteboard');
-    };
-  }, []);
   return null;
-});
+});
+var windowConfig = exports.windowConfig = {
+  frame: true,
+  maximizable: false,
+  minimizable: false,
+  fullscreenable: false,
+  trafficLightPosition: {
+    x: 0,
+    y: 0
+  },
+  resizable: true,
+  width: 1280,
+  height: 720,
+  minWidth: 530,
+  minHeight: 500,
+  maxWidth: 1920,
+  maxHeight: 1080,
+  transparent: true
+};

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

@@ -1,7 +1,19 @@
 import { PropsWithChildren } from 'react';
-import { FcrUIWebWidgetConfig } from '../../../../type';
-declare const WidgetDialog: ({ children, params, dialogId, }: PropsWithChildren<{
-    params: FcrUIWebWidgetConfig;
-    dialogId: string;
-}>) => import("react/jsx-runtime").JSX.Element;
-export default WidgetDialog;
+import { FcrUIDialogProps } from '../../type';
+type WidgetDialogProps = PropsWithChildren<FcrUIDialogProps>;
+export declare const TITLE_BAR_HEIGHT = 46;
+export declare const WidgetDialog: ({ children, params, dialogId, dialogKey }: WidgetDialogProps) => import("react/jsx-runtime").JSX.Element;
+export declare const windowConfig: {
+    frame: false;
+    width: number;
+    height: number;
+    fullscreen: false;
+    maximizable: false;
+    trafficLightPosition: {
+        x: number;
+        y: number;
+    };
+    resizable: true;
+    transparent: true;
+};
+export {};

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

@@ -1,41 +1,47 @@
 "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;
+exports.windowConfig = exports.WidgetDialog = exports.TITLE_BAR_HEIGHT = void 0;
 require("core-js/modules/es.function.name.js");
-var _env = require("agora-foundation/lib/utilities/env");
-var _electron = require("./electron");
-var _i18n = require("agora-ui-foundation/lib/i18n");
-var _dialogContainer = _interopRequireDefault(require("../../components/dialog-container"));
-var _constant = require("../../../../utilities/constant");
+var _normalWindow = require("../../components/normal-window");
 var _jsxRuntime = require("react/jsx-runtime");
-var WidgetDialog = function WidgetDialog(_ref) {
-  var _params$popupSize, _params$popupSize2;
+var TITLE_BAR_HEIGHT = exports.TITLE_BAR_HEIGHT = 46;
+var width = 600;
+
+/**
+ * TODO
+ *  web 下 height不传 或者 autoHeight为true 都有默认高度160 默认宽度400 导致高度没法由iframe的高度决定
+ *  要么去掉默认高度 ,要么要从 widgetConfig 拿到实际高度来设置 width
+ */
+var height = 600 + TITLE_BAR_HEIGHT;
+var WidgetDialog = exports.WidgetDialog = function WidgetDialog(_ref) {
   var children = _ref.children,
     params = _ref.params,
-    dialogId = _ref.dialogId;
-  var t = (0, _i18n.useI18n)();
-  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 = _ref.dialogId,
+    dialogKey = _ref.dialogKey;
+  var widgetParams = params;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_normalWindow.NormalWindow, {
+    dialogKey: dialogKey,
     dialogId: dialogId,
-    children: children
+    title: widgetParams.name,
+    body: children,
+    width: width,
+    height: height
   });
-  if ((0, _env.isElectron)()) {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_electron.WidgetElectronDialog, {
-      params: params,
-      dialogId: dialogId,
-      children: container
-    });
-  }
-  return container;
 };
-var _default = exports["default"] = WidgetDialog;
+var windowConfig = exports.windowConfig = {
+  frame: false,
+  width: width,
+  height: height,
+  fullscreen: false,
+  maximizable: false,
+  trafficLightPosition: {
+    x: 10,
+    y: 10
+  },
+  resizable: true,
+  transparent: true
+};

package/lib/modules/dialog/index.css

@@ -10,10 +10,17 @@
 .fcr-livestreaming-dialog-wrapper {
   background: var(--fcr_mobile_ui_scene_color_popup_fill2);
   width: 100%;
-  height: 100%;
+  /* height: 100%; */
   display: flex;
   flex-direction: column;
 }
+.fcr-participant-dialog-wrapper-web {
+  height: 100%;
+}
+
+.fcr-participant-dialog-wrapper-electron {
+  height: calc(100% - 46px);
+}
 
 .fcr-livestreaming-dialog-wrapper .frc-window-header {
   cursor: move;