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

package/lib/modules/control-bar/view.js

@@ -27,6 +27,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.View = void 0;
 require("core-js/modules/es.array.concat.js");
+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");
@@ -61,6 +62,8 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 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 HIDDEN_TIMEOUT = 3000;
 var NAV_HEIGHT = 84;
+var WINDOW_RENDER_DELAY = 500;
+var FADE_ANIMATION_DURATION = 350;
 var View = exports.View = (0, _mobxReact.observer)(function () {
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(DraggableControlBarProvider, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(DraggableContainer, {
@@ -287,11 +290,16 @@ var ControlBar = (0, _mobxReact.observer)(function () {
   var calculation = (0, _react.useContext)(_context.ControlBarCalculationContext);
   var _useContext5 = (0, _react.useContext)(_store.StoreContext),
     draggableArea = _useContext5.draggableArea,
-    currentShareDisplayId = _useContext5.currentShareDisplayId;
+    currentShareDisplayId = _useContext5.currentShareDisplayId,
+    updateWindowBounds = _useContext5.updateWindowBounds;
   var updatePosition = (0, _react.useContext)(_context.DragStateUpdaterContext);
   var _useContext6 = (0, _react.useContext)(_context.ControlBarCalculationUpdaterContext),
     setDimensions = _useContext6.setDimensions,
     setNavPosition = _useContext6.setNavPosition;
+  var _useState9 = (0, _react.useState)('hidden'),
+    _useState0 = (0, _slicedToArray2["default"])(_useState9, 2),
+    visibility = _useState0[0],
+    setVisibility = _useState0[1];
   var rootClassNames = (0, _react.useMemo)(function () {
     return (0, _classnames["default"])('fcr-flex', 'share-action-nav__container', {
       'share-action-nav__move_to_bottom': calculation.navPosition === _enums.TransferPosition.BOTTOM,
@@ -301,31 +309,51 @@ var ControlBar = (0, _mobxReact.observer)(function () {
       'completely-hidden-in-top': calculation.isAttachToTop
     });
   }, [calculation]);
+  (0, _react.useEffect)(function () {
+    var ro = new ResizeObserver(function () {
+      if (!containerRef.current) return;
+      var bounds = containerRef.current.getBoundingClientRect();
+      setDimensions({
+        width: bounds.width,
+        height: bounds.height
+      });
+    });
+    ro.observe(containerRef.current);
+    return function () {
+      return ro.disconnect();
+    };
+  }, []);
+  (0, _react.useEffect)(function () {
+    setVisibility('hidden');
+  }, [currentShareDisplayId]);
   (0, _react.useLayoutEffect)(function () {
-    if (currentShareDisplayId) {
-      var ro = new ResizeObserver(function () {
-        var bounds = containerRef.current.getBoundingClientRect();
-        setDimensions({
-          width: bounds.width,
-          height: bounds.height
+    if (visibility === 'hidden') {
+      var timerId = setTimeout(function () {
+        updateWindowBounds();
+        timerId = setTimeout(function () {
+          if (!containerRef.current) return;
+          var bounds = containerRef.current.getBoundingClientRect();
+          updatePosition({
+            position: {
+              x: draggableArea.width / 2 - bounds.width / 2,
+              y: 0
+            }
+          });
+          setNavPosition(_enums.TransferPosition.TOP);
+          setVisibility('visible');
         });
-        updatePosition({
-          position: {
-            x: draggableArea.width / 2 - bounds.width / 2,
-            y: 0
-          }
-        });
-        setNavPosition(_enums.TransferPosition.TOP);
-      });
-      ro.observe(containerRef.current);
+      }, WINDOW_RENDER_DELAY);
       return function () {
-        return ro.disconnect();
+        return clearTimeout(timerId);
       };
     }
-  }, [currentShareDisplayId]);
+  }, [visibility]);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     ref: containerRef,
     className: rootClassNames,
+    style: {
+      visibility: visibility
+    },
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(ControlBarContent, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(ShareStateNavigation, {})]
   });
 });
@@ -357,8 +385,34 @@ var ControlBarContent = /*#__PURE__*/(0, _react.memo)(function () {
     console.log('ControlBarContent boundaries changed');
     setControlBarContentArea(boundaries);
   }, []);
+  var detector = (0, _react.useRef)(null);
+  (0, _react.useEffect)(function () {
+    var timerId = 0;
+    if (calculation.isShareActionNavHidden) {
+      timerId = setTimeout(function () {
+        setControlBarContentArea({
+          x: 0,
+          y: 0,
+          width: 0,
+          height: 0
+        });
+      }, FADE_ANIMATION_DURATION);
+    } else {
+      timerId = setTimeout(function () {
+        var _detector$current;
+        var bounds = (_detector$current = detector.current) === null || _detector$current === void 0 ? void 0 : _detector$current.getBoundaries();
+        if (bounds) {
+          setControlBarContentArea(bounds);
+        }
+      }, FADE_ANIMATION_DURATION);
+    }
+    return function () {
+      return clearTimeout(timerId);
+    };
+  }, [calculation.isShareActionNavHidden]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_boundaryDetector.BoundaryDetector, {
     onBoundariesChanged: handleBoundariesChanged,
+    ref: detector,
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: navClassName,
       onMouseEnter: handleMouseEnterNav,
@@ -414,10 +468,10 @@ var SecurityMenuSection = /*#__PURE__*/(0, _react.memo)(function (_ref4) {
     setPopoverArea = _useContext0.setPopoverArea;
   var _useContext1 = (0, _react.useContext)(_context.ControlBarCalculationContext),
     isShareActionNavHidden = _useContext1.isShareActionNavHidden;
-  var _useState9 = (0, _react.useState)(false),
-    _useState0 = (0, _slicedToArray2["default"])(_useState9, 2),
-    showSecurityPopover = _useState0[0],
-    setShowSecurityPopover = _useState0[1];
+  var _useState1 = (0, _react.useState)(false),
+    _useState10 = (0, _slicedToArray2["default"])(_useState1, 2),
+    showSecurityPopover = _useState10[0],
+    setShowSecurityPopover = _useState10[1];
   var handleVisibilityChange = (0, _react.useCallback)(function (visible) {
     setShowSecurityPopover(visible);
   }, []);
@@ -482,14 +536,14 @@ var ShareScreenSection = /*#__PURE__*/(0, _react.memo)(function () {
 
 // 更多操作区块
 var MoreActionsSection = (0, _mobxReact.observer)(function () {
-  var _useState1 = (0, _react.useState)(false),
-    _useState10 = (0, _slicedToArray2["default"])(_useState1, 2),
-    moreVisible = _useState10[0],
-    setMoreVisible = _useState10[1];
   var _useState11 = (0, _react.useState)(false),
     _useState12 = (0, _slicedToArray2["default"])(_useState11, 2),
-    isShowMeetingDetailPortal = _useState12[0],
-    setIsShowMeetingDetailPortal = _useState12[1];
+    moreVisible = _useState12[0],
+    setMoreVisible = _useState12[1];
+  var _useState13 = (0, _react.useState)(false),
+    _useState14 = (0, _slicedToArray2["default"])(_useState13, 2),
+    isShowMeetingDetailPortal = _useState14[0],
+    setIsShowMeetingDetailPortal = _useState14[1];
   var _useContext12 = (0, _react.useContext)(_store.StoreContext),
     newMessageCount = _useContext12.newMessageCount,
     hasChatPermission = _useContext12.hasChatPermission,
@@ -609,8 +663,22 @@ var ShareStateNavigation = /*#__PURE__*/(0, _react.memo)(function () {
     console.log('ShareStateNavigation boundaries changed');
     setStateNavArea(boundaries);
   }, []);
+  var detector = (0, _react.useRef)(null);
+  (0, _react.useEffect)(function () {
+    var timerId = setTimeout(function () {
+      var _detector$current2;
+      var bounds = (_detector$current2 = detector.current) === null || _detector$current2 === void 0 ? void 0 : _detector$current2.getBoundaries();
+      if (bounds) {
+        setStateNavArea(bounds);
+      }
+    }, FADE_ANIMATION_DURATION);
+    return function () {
+      return clearTimeout(timerId);
+    };
+  }, [calculation.isShareActionNavHidden]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_boundaryDetector.BoundaryDetector, {
     onBoundariesChanged: handleBoundariesChanged,
+    ref: detector,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_shareStateNav.ShareStateNav, {
       onMouseEnter: handleMouseEnterNav,
       onMouseLeave: handleMouseLeaveNav,

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

@@ -27,7 +27,6 @@ var _react = require("@use-gesture/react");
 var _react2 = require("react");
 var _store = require("../../store.base");
 var _env = require("agora-foundation/lib/utilities/env");
-var _dialogUtils = require("../../../../utilities/dialog-utils");
 var _platform = require("../../../../utilities/platform");
 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; }
@@ -45,8 +44,6 @@ var ConfirmWindow = exports.ConfirmWindow = (0, _mobxReact.observer)(function (_
     handleConfirmMouseout = _useContext.handleConfirmMouseout,
     removeObserverWindow = _useContext.removeObserverWindow,
     setObserverWindow = _useContext.setObserverWindow,
-    addScreenObserver = _useContext.addScreenObserver,
-    removeScreenObserver = _useContext.removeScreenObserver,
     log = _useContext.log,
     screenBounds = _useContext.screenBounds,
     calculateMethods = _useContext.calculateMethods;
@@ -103,28 +100,17 @@ var ConfirmWindow = exports.ConfirmWindow = (0, _mobxReact.observer)(function (_
     setBounds(coord);
   });
   (0, _react2.useEffect)(function () {
+    setObserverWindow(id, {
+      width: defaultSize.width,
+      height: height,
+      x: baseBounds.x,
+      y: baseBounds.y
+    });
     setBounds({
       x: baseBounds.x,
       y: baseBounds.y
     });
   }, [screenBounds]);
-  function recalculate(bounds) {
-    if (windowFocusTimerRef.current) {
-      clearTimeout(windowFocusTimerRef.current);
-      windowFocusTimerRef.current = undefined;
-    }
-    if ((0, _env.isElectron)() && (0, _platform.isWindows)() && confirmBodyRef.current && screenBounds) {
-      (0, _dialogUtils.handleCheckMouseOver)({
-        elem: confirmBodyRef.current,
-        screenBounds: bounds || screenBounds,
-        callback: function callback(timerId) {
-          windowFocusTimerRef.current = timerId;
-        },
-        setIgnoreMouse: handleConfirmMouseout,
-        setUnignoreMouse: handleConfirmMouseover
-      });
-    }
-  }
   (0, _react2.useEffect)(function () {
     if ((0, _env.isElectron)() && (0, _platform.isMac)()) {
       if (confirm.className === 'confirm-mouseover') {
@@ -138,13 +124,9 @@ var ConfirmWindow = exports.ConfirmWindow = (0, _mobxReact.observer)(function (_
     };
   }, [confirm.className]);
   (0, _react2.useEffect)(function () {
-    recalculate();
-    !calculateMethods.has(confirm) && calculateMethods.set(confirm, recalculate);
-    addScreenObserver(recalculate);
     return function () {
       clearTimeout(windowFocusTimerRef.current);
       calculateMethods["delete"](confirm);
-      removeScreenObserver(recalculate);
       handleConfirmMouseout();
     };
   }, []);

package/lib/modules/dialog/components/dialog-container/component/body.d.ts

@@ -6,6 +6,7 @@ type DialogBodyProps = PropsWithChildren<{
     autoHeight: boolean;
     closable: boolean;
     onClose?: () => void;
+    hasSystemShadow?: boolean;
 }>;
 export declare const DialogContainerBody: FC<DialogBodyProps>;
 export {};

package/lib/modules/dialog/components/dialog-container/component/body.js

@@ -14,7 +14,8 @@ var DialogContainerBody = exports.DialogContainerBody = function DialogContainer
     children = _ref.children,
     onClose = _ref.onClose,
     autoHeight = _ref.autoHeight,
-    closable = _ref.closable;
+    closable = _ref.closable,
+    hasSystemShadow = _ref.hasSystemShadow;
   // const { bind } = useContext(DialogContainerStore);
 
   // const { resizable } = isElectron() ? useContext(DialogInstanceContext) : { resizable: false };
@@ -38,7 +39,7 @@ var DialogContainerBody = exports.DialogContainerBody = function DialogContainer
   } : {};
   var hasClose = closable;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-    className: "fcr-dialog-container ".concat(!resizable && 'fcr-dialog-container_shadow'),
+    className: "fcr-dialog-container ".concat(!hasSystemShadow && 'fcr-dialog-container_shadow'),
     onClick: function onClick(e) {
       return e.stopPropagation();
     },

package/lib/modules/dialog/components/dialog-container/index.css

@@ -25,6 +25,9 @@
   z-index: 0;
 }
 
+::-webkit-scrollbar {
+  display: none;
+}
 .fcr-dialog-container_shadow {
   box-shadow: var(--fcr_web_light_dropup);
   border: 1px solid var(--fcr_ui_scene_line1);
@@ -68,6 +71,10 @@
   overflow: hidden;
 }
 
+.fcr-dialog-container-content::-webkit-scrollbar {
+  display: none;
+}
+
 .fcr-dialog-container .fcr-dialog-container-content:first-child {
   border-top-left-radius: var(--fcr_cornerradius_xl);
   border-top-right-radius: var(--fcr_cornerradius_xl);
@@ -85,7 +92,7 @@
   cursor: pointer;
   -webkit-app-region: no-drag;
   text-align: center;
-  line-height: 13px;
+  line-height: 14px;
 }
 
 .fcr-dialog-container-close span {

package/lib/modules/dialog/components/dialog-container/index.d.ts

@@ -17,6 +17,7 @@ type DialogContainerProps = PropsWithChildren<{
     maxHeight?: number;
     minWidth?: number;
     minHeight?: number;
+    hasSystemShadow?: boolean;
 }>;
 export declare const DialogContainer: FC<DialogContainerProps>;
 export {};

package/lib/modules/dialog/components/dialog-container/index.js

@@ -52,13 +52,15 @@ var DialogContainer = exports.DialogContainer = (0, _mobxReact.observer)(functio
     maxWidth = _ref.maxWidth,
     maxHeight = _ref.maxHeight,
     minWidth = _ref.minWidth,
-    minHeight = _ref.minHeight;
+    minHeight = _ref.minHeight,
+    hasSystemShadow = _ref.hasSystemShadow;
   var dialogBody = /*#__PURE__*/(0, _jsxRuntime.jsx)(_body.DialogContainerBody, {
     title: title,
     actions: actions,
     autoHeight: autoHeight !== null && autoHeight !== void 0 ? autoHeight : true,
     closable: closable !== null && closable !== void 0 ? closable : true,
     onClose: _onClose,
+    hasSystemShadow: hasSystemShadow,
     children: children
   });
   if ((0, _env.isElectron)()) return dialogBody;
@@ -107,6 +109,7 @@ var DialogContainer = exports.DialogContainer = (0, _mobxReact.observer)(functio
     };
   };
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactRnd.Rnd, {
+    dragHandleClassName: 'fcr-dialog-container-header',
     style: _objectSpread({
       position: 'absolute',
       touchAction: 'none',

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

@@ -17,6 +17,7 @@ type FcrUIDialogProps = {
     minHeight?: number;
     maxWidth?: number;
     maxHeight?: number;
+    hasSystemShadow?: boolean;
 };
 export declare const NormalWindow: FC<FcrUIDialogProps>;
 export {};

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

@@ -26,7 +26,8 @@ var NormalWindow = exports.NormalWindow = (0, _mobxReact.observer)(function (_re
     minWidth = _ref.minWidth,
     minHeight = _ref.minHeight,
     maxWidth = _ref.maxWidth,
-    maxHeight = _ref.maxHeight;
+    maxHeight = _ref.maxHeight,
+    hasSystemShadow = _ref.hasSystemShadow;
   var _useContext = (0, _react.useContext)(_store.StoreContext),
     getDialogRootNode = _useContext.getDialogRootNode,
     handleDialogClose = _useContext.handleDialogClose;
@@ -46,6 +47,7 @@ var NormalWindow = exports.NormalWindow = (0, _mobxReact.observer)(function (_re
     maxWidth: maxWidth,
     maxHeight: maxHeight,
     autoHeight: autoHeight,
+    hasSystemShadow: hasSystemShadow,
     children: body
   });
   if ((0, _env.isElectron)()) {

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

@@ -57,7 +57,8 @@ var ChatDialog = exports.ChatDialog = (0, _mobxReact.observer)(function (_ref) {
       zIndex: 11
     },
     width: width,
-    height: height
+    height: height,
+    hasSystemShadow: true
   });
 });
 var windowConfig = exports.windowConfig = {

package/lib/modules/dialog/dialogs/control-bar-leave-meeting/index.js

@@ -17,7 +17,6 @@ var ControlBarLeaveMeetingDialog = exports.ControlBarLeaveMeetingDialog = functi
     height: 172
   };
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_normalWindow.NormalWindow, {
-    closable: false,
     dialogId: dialogId,
     dialogKey: dialogKey,
     width: config.width,

package/lib/modules/dialog/dialogs/device-setting/index.d.ts

@@ -14,5 +14,6 @@ export declare const windowConfig: {
     width: number;
     height: number;
     resizable: boolean;
+    transparent: boolean;
 };
 export default DeviceSettingDialog;

package/lib/modules/dialog/dialogs/device-setting/index.js

@@ -23,7 +23,8 @@ var DeviceSettingDialog = function DeviceSettingDialog(_ref) {
     body: children,
     title: title,
     width: width,
-    height: height
+    height: height,
+    autoHeight: false // TODO: 既然设置 height 了，为什么还要设置 autoHeight 为 false？
   });
 };
 var windowConfig = exports.windowConfig = {
@@ -36,6 +37,7 @@ var windowConfig = exports.windowConfig = {
   },
   width: width,
   height: height,
-  resizable: false
+  resizable: false,
+  transparent: true // TODO: electronContentHeight 多减去了30px 的阴影，所以这里需要设置 transparent 为 true  来消除对内容的遮挡   有点不合理  暂时先这样处理  应该 DialogContainerBody进行优化，
 };
 var _default = exports["default"] = DeviceSettingDialog;

package/lib/modules/dialog/dialogs/end-meeting/index.d.ts

@@ -9,4 +9,5 @@ export declare const windowConfig: {
     fullscreen: false;
     maximizable: false;
     resizable: false;
+    alwaysOnTop: true;
 };

package/lib/modules/dialog/dialogs/end-meeting/index.js

@@ -50,5 +50,6 @@ var windowConfig = exports.windowConfig = {
   height: 340,
   fullscreen: false,
   maximizable: false,
-  resizable: false
+  resizable: false,
+  alwaysOnTop: true
 };

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

@@ -19,5 +19,6 @@ export declare const windowConfig: {
     useContentSize: true;
     transparent: true;
     backgroundColor: string;
+    alwaysOnTop: true;
 };
 export {};

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

@@ -53,5 +53,6 @@ var windowConfig = exports.windowConfig = {
   hasShadow: false,
   useContentSize: true,
   transparent: true,
-  backgroundColor: '#00000000'
+  backgroundColor: '#00000000',
+  alwaysOnTop: true
 };

package/lib/modules/dialog/dialogs/mute-all/index.d.ts

@@ -15,5 +15,6 @@ export declare const windowConfig: {
     resizable: false;
     width: number;
     height: number;
+    alwaysOnTop: true;
 };
 export {};

package/lib/modules/dialog/dialogs/mute-all/index.js

@@ -44,5 +44,6 @@ var windowConfig = exports.windowConfig = {
   },
   resizable: false,
   width: 320,
-  height: 172
+  height: 172,
+  alwaysOnTop: true
 };

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

@@ -1,12 +1,15 @@
 "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.windowConfig = exports.ParticipantDialog = void 0;
 var _i18n = require("agora-ui-foundation/lib/i18n");
 var _normalWindow = require("../../components/normal-window");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _env = require("agora-foundation/lib/utilities/env");
 var _jsxRuntime = require("react/jsx-runtime");
 var windowConfig = exports.windowConfig = {
   frame: false,
@@ -34,7 +37,10 @@ var ParticipantDialog = exports.ParticipantDialog = function ParticipantDialog(_
     actions = _ref.actions;
   var transI18n = (0, _i18n.useI18n)();
   var body = /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-    className: "fcr-participant-dialog-wrapper",
+    className: (0, _classnames["default"])('fcr-participant-dialog-wrapper', {
+      'fcr-participant-dialog-wrapper-web': !(0, _env.isElectron)(),
+      'fcr-participant-dialog-wrapper-electron': (0, _env.isElectron)()
+    }),
     children: children
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_normalWindow.NormalWindow, {
@@ -48,6 +54,7 @@ var ParticipantDialog = exports.ParticipantDialog = function ParticipantDialog(_
     minWidth: windowConfig.minWidth,
     minHeight: windowConfig.minHeight,
     maxWidth: windowConfig.maxWidth,
-    maxHeight: windowConfig.maxHeight
+    maxHeight: windowConfig.maxHeight,
+    hasSystemShadow: true
   });
 };

package/lib/modules/dialog/dialogs/share-screen-selection/index.js

@@ -14,7 +14,7 @@ var ShareScreenSelectionDialog = exports.ShareScreenSelectionDialog = /*#__PURE_
     dialogId = _ref.dialogId,
     children = _ref.children;
   var transI18n = (0, _i18n.useI18n)();
-  var title = transI18n('fmt_screenshare_label_screenshare');
+  var title = transI18n('fmt_screenshare_controlbar_security_list_participant_screenshare');
 
   // const body = (
   //   <DialogContainer

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

@@ -15,14 +15,8 @@ var SubWindowDialog = exports.SubWindowDialog = (0, _mobxReact.observer)(functio
     dialogId = props.dialogId,
     children = props.children;
   var _useContext = (0, _react.useContext)(_store.StoreContext),
-    getDialogRootNode = _useContext.getDialogRootNode,
-    getDialogRendererWindow = _useContext.getDialogRendererWindow;
+    getDialogRootNode = _useContext.getDialogRootNode;
   var dialogRoot = getDialogRootNode(dialogKey, dialogId);
-  var subWindowRenderer = getDialogRendererWindow(dialogKey, dialogId);
-  if (subWindowRenderer) {
-    // @ts-ignore
-    subWindowRenderer.FcrUIMainWindowRenderer = window.FcrUIMainWindowRenderer;
-  }
   return /*#__PURE__*/(0, _reactDom.createPortal)(children, dialogRoot);
 });
 var windowConfig = exports.windowConfig = {

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

@@ -13,7 +13,7 @@ export declare const windowConfig: {
     alwaysOnTop: true;
     fullscreen: false;
     frame: false;
-    show: false;
+    show: true;
     skipTaskbar: true;
 };
 type ToastDialogProps = PropsWithChildren<FcrUIDialogProps>;

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

@@ -21,7 +21,7 @@ var windowConfig = exports.windowConfig = {
   alwaysOnTop: true,
   fullscreen: false,
   frame: false,
-  show: false,
+  show: true,
   skipTaskbar: true
 };
 var ToastDialog = exports.ToastDialog = /*#__PURE__*/(0, _react.memo)(function (_ref) {

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

@@ -23,5 +23,8 @@ export declare const windowConfig: {
 };
 export declare const setVideoWindowDialogPosition: (screenSharingBounds: FcrUI.FcrUIRectangle, videoWindow: FcrUIWindow) => void;
 /** 使用默认宽度 246 */
-export declare const setVideoWindowDialogSize: (videoWindow: FcrUIWindow, height: number) => void;
+export declare const setVideoWindowDialogSize: (videoWindow: FcrUIWindow, { width, height }: {
+    width?: number;
+    height: number;
+}) => void;
 export {};

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

@@ -51,9 +51,12 @@ var setVideoWindowDialogPosition = exports.setVideoWindowDialogPosition = functi
 };
 
 /** 使用默认宽度 246 */
-var setVideoWindowDialogSize = exports.setVideoWindowDialogSize = function setVideoWindowDialogSize(videoWindow, height) {
+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: _type.DefaultVideoWindowWidth,
+    width: width,
     height: height
   });
 };

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

@@ -1,6 +1,7 @@
 import { PropsWithChildren } from 'react';
 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;
@@ -13,5 +14,6 @@ export declare const windowConfig: {
         y: number;
     };
     resizable: true;
+    transparent: true;
 };
 export {};

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

@@ -4,12 +4,19 @@ require("core-js/modules/es.object.define-property.js");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.windowConfig = exports.WidgetDialog = void 0;
+exports.windowConfig = exports.WidgetDialog = exports.TITLE_BAR_HEIGHT = void 0;
 require("core-js/modules/es.function.name.js");
 var _normalWindow = require("../../components/normal-window");
 var _jsxRuntime = require("react/jsx-runtime");
+var TITLE_BAR_HEIGHT = exports.TITLE_BAR_HEIGHT = 46;
 var width = 600;
-var height = 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,
@@ -35,5 +42,6 @@ var windowConfig = exports.windowConfig = {
     x: 10,
     y: 10
   },
-  resizable: true
+  resizable: true,
+  transparent: true
 };

package/lib/modules/dialog/index.css

@@ -14,8 +14,12 @@
   display: flex;
   flex-direction: column;
 }
-.fcr-participant-dialog-wrapper {
-  height: calc(100% - 48px);
+.fcr-participant-dialog-wrapper-web {
+  height: 100%;
+}
+
+.fcr-participant-dialog-wrapper-electron {
+  height: calc(100% - 46px);
 }
 
 .fcr-livestreaming-dialog-wrapper .frc-window-header {