fcr-ui-scene 3.8.2 → 3.9.0

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

@@ -1,23 +1,7 @@
 import { FC, PropsWithChildren } from 'react';
 import { FcrUIDialogProps } from '../../type';
+import { FcrUIElectronDialogConfig } from '../../dialogConfig/electron';
 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 declare const electronWindowConfig: FcrUIElectronDialogConfig;
 export {};

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

@@ -4,7 +4,7 @@ require("core-js/modules/es.object.define-property.js");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.windowConfig = exports.WhiteboardDialog = void 0;
+exports.electronWindowConfig = exports.WhiteboardDialog = void 0;
 var _mobxReact = require("mobx-react");
 var WhiteboardDialog = exports.WhiteboardDialog = (0, _mobxReact.observer)(function (_ref) {
   var dialogId = _ref.dialogId,
@@ -47,7 +47,7 @@ var WhiteboardDialog = exports.WhiteboardDialog = (0, _mobxReact.observer)(funct
 
   return null;
 });
-var windowConfig = exports.windowConfig = {
+var electronWindowConfig = exports.electronWindowConfig = {
   frame: true,
   maximizable: false,
   minimizable: false,

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

@@ -1,19 +1,9 @@
 import { PropsWithChildren } from 'react';
 import { FcrUIDialogProps } from '../../type';
+import { FcrUIWebDialogConfig } from '../../dialogConfig/browser';
+import { FcrUIElectronDialogConfig } from '../../dialogConfig/electron';
 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 declare const webDialogConfig: FcrUIWebDialogConfig;
+export declare const electronWindowConfig: FcrUIElectronDialogConfig;
 export {};

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

@@ -1,22 +1,30 @@
 "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.windowConfig = exports.WidgetDialog = exports.TITLE_BAR_HEIGHT = void 0;
+exports.webDialogConfig = exports.electronWindowConfig = exports.WidgetDialog = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 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;
-
-/**
- * TODO
- *  web 下 height不传 或者 autoHeight为true 都有默认高度160 默认宽度400 导致高度没法由iframe的高度决定
- *  要么去掉默认高度 ,要么要从 widgetConfig 拿到实际高度来设置 width
- */
-var height = 600 + TITLE_BAR_HEIGHT;
+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 WidgetDialog = exports.WidgetDialog = function WidgetDialog(_ref) {
   var children = _ref.children,
     params = _ref.params,
@@ -27,21 +35,9 @@ var WidgetDialog = exports.WidgetDialog = function WidgetDialog(_ref) {
     dialogKey: dialogKey,
     dialogId: dialogId,
     title: widgetParams.name,
-    body: children,
-    width: width,
-    height: height
+    body: children
   });
 };
-var windowConfig = exports.windowConfig = {
-  frame: false,
-  width: width,
-  height: height,
-  fullscreen: false,
-  maximizable: false,
-  trafficLightPosition: {
-    x: 10,
-    y: 10
-  },
-  resizable: true,
-  transparent: true
-};
+var baseDialogConfig = {};
+var webDialogConfig = exports.webDialogConfig = baseDialogConfig;
+var electronWindowConfig = exports.electronWindowConfig = _objectSpread({}, baseDialogConfig);

package/lib/modules/dialog/index.css

@@ -5,22 +5,13 @@
 /* .react-draggable {
   transition: all 0.3s;
 } */
-.fcr-chat-dialog-wrapper,
-.fcr-participant-dialog-wrapper,
-.fcr-livestreaming-dialog-wrapper {
+.fcr-participant-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;
@@ -30,6 +21,8 @@
   flex: 1;
   overflow: hidden;
   padding: 0 20px 20px;
+  width: 440px;
+  height: calc(408px - 46px);
 }
 .frc-common-dialog {
   background: var(--fcr_mobile_ui_scene_color_popup_fill2);

package/lib/modules/dialog/level-config.d.ts

@@ -3,6 +3,7 @@ export declare const WindowRelativeLevel: {
     CONTROL_BAR_LEVEL: number;
     VIDEO_WINDOW_LEVEL: number;
     RENAME_WINDOW_LEVEL: number;
+    ANNOTATION_MASK: number;
     MOUSE_DETECT_DEBUGGER_LEVEL: number;
 };
 export declare const WEB_DIALOG_LAYER: {

package/lib/modules/dialog/level-config.js

@@ -10,6 +10,7 @@ var WindowRelativeLevel = exports.WindowRelativeLevel = {
   CONTROL_BAR_LEVEL: 8,
   VIDEO_WINDOW_LEVEL: 8,
   RENAME_WINDOW_LEVEL: 8,
+  ANNOTATION_MASK: 7,
   MOUSE_DETECT_DEBUGGER_LEVEL: 10
 };
 var WEB_DIALOG_LAYER = exports.WEB_DIALOG_LAYER = {

package/lib/modules/dialog/store.base.js

@@ -67,7 +67,6 @@ var _objectManager = require("../../object-manager");
 var _react = require("react");
 var _i18n = require("agora-ui-foundation/lib/i18n");
 var _fcrCore = require("fcr-core");
-var _systemPreference = require("./dialogs/system-preference");
 var _DialogStoreBase;
 var _initProto, _init__openedDialogs, _init__openedConfirms, _init__screenBounds, _init_calculateMethods, _releaseDecs, _handleDialogOpenDecs, _handleDialogCloseDecs, _handleConfirmOpenDecs, _handleConfirmCloseDecs, _ref;
 function _classPrivateFieldInitSpec(e, t, a) { _checkPrivateRedeclaration(e, t), t.set(e, a); }
@@ -216,8 +215,6 @@ var DialogStoreBase = exports.DialogStoreBase = /*#__PURE__*/function () {
             reason1: this._currentHost.userInfo.userName
           }),
           img: 'host',
-          height: _systemPreference.REVOKE_HOST_HEIGHT,
-          width: _systemPreference.REVOKE_HOST_WIDTH,
           buttons: [{
             text: (0, _i18n.transI18n)('fmt_hostkey_window_button_reclaim_host'),
             withClose: true,

package/lib/modules/dialog/store.electron.d.ts

@@ -9,6 +9,7 @@ export default class DialogStore extends DialogStoreBase {
     private _mouseDetectProvider;
     private _confirmWindow;
     private _mouseOverState;
+    private _windowObserver;
     private _confirmWindowObserver;
     private _detactObserver;
     protected _dialogInfoObserver: FcrUIDialogObserver;

package/lib/modules/dialog/store.electron.js

@@ -87,6 +87,14 @@ var DialogStore = exports["default"] = /*#__PURE__*/function (_DialogStoreBase)
     _this = _callSuper(this, DialogStore, [args]);
     (0, _defineProperty2["default"])(_this, "_windowProvider", void _initProto(_this));
     (0, _defineProperty2["default"])(_this, "_mouseOverState", false);
+    (0, _defineProperty2["default"])(_this, "_windowObserver", {
+      onWindowReady: function onWindowReady(key, id, windowObj) {
+        if (key === _constant.FcrUIDialogKey.ANNOTATION_MASK || key === _constant.FcrUIDialogKey.SUB_WINDOW) {
+          // @ts-ignore
+          windowObj.rendererWindow.FcrUIMainWindowRenderer = window.FcrUIMainWindowRenderer;
+        }
+      }
+    });
     (0, _defineProperty2["default"])(_this, "_confirmWindowObserver", {
       onReady: function onReady() {
         var _window$screen = window.screen,
@@ -134,11 +142,12 @@ var DialogStore = exports["default"] = /*#__PURE__*/function (_DialogStoreBase)
     _this._renderer = args.objectManager.getObject(_objectManager.FcrUIObjectKeys.RENDERER_WRAPPER);
     _this._mouseDetectProvider = args.objectManager.getObject(_objectManager.FcrUIObjectKeys.P_MOUSE_DETECT_PROVIDER);
     _this._mouseDetectProvider.addObserver(_this._detactObserver);
+    _this._windowProvider.addObserver(_this._windowObserver);
     var dialogInfoMap = _this.dialogProvider.dialogInfoMap;
     dialogInfoMap.forEach(function (_ref, key) {
-      var windowConfig = _ref.windowConfig;
-      if (windowConfig) {
-        _this._windowProvider.setWindowOptions(key, windowConfig);
+      var electronWindowConfig = _ref.electronWindowConfig;
+      if (electronWindowConfig) {
+        _this._windowProvider.setWindowOptions(key, electronWindowConfig);
       }
     });
     _this.dialogProvider.addObserver(_this._dialogInfoObserver);
@@ -200,9 +209,6 @@ var DialogStore = exports["default"] = /*#__PURE__*/function (_DialogStoreBase)
         return;
       }
       this._mouseOverState = false;
-      this._confirmWindow.setIgnoreMouseEvents(true, {
-        forward: true
-      });
     }
   }, {
     key: "handleSceneMounted",
@@ -246,6 +252,7 @@ var DialogStore = exports["default"] = /*#__PURE__*/function (_DialogStoreBase)
     key: "release",
     value: function release() {
       _superPropGet(DialogStore, "release", this, 3)([]);
+      this._windowProvider.removeObserver(this._windowObserver);
       this._confirmWindow.removeObserver(this._confirmWindowObserver);
       this.dialogProvider.removeObserver(this._dialogInfoObserver);
       this._mouseDetectProvider.deleteDetectArea(_struct.FcrUIDetectAreaID.Confirm);
@@ -268,9 +275,9 @@ var DialogStore = exports["default"] = /*#__PURE__*/function (_DialogStoreBase)
   }, {
     key: "_handleDialogInfoAdded",
     value: function _handleDialogInfoAdded(dialogKey, dialogInfo) {
-      var windowConfig = dialogInfo.windowConfig;
-      if (windowConfig) {
-        this._windowProvider.setWindowOptions(dialogKey, windowConfig);
+      var electronWindowConfig = dialogInfo.electronWindowConfig;
+      if (electronWindowConfig) {
+        this._windowProvider.setWindowOptions(dialogKey, electronWindowConfig);
       }
     }
   }, {

package/lib/modules/dialog/type.d.ts

@@ -2,6 +2,7 @@ import React from 'react';
 import { FcrUIDialogKey } from '../../utilities/constant';
 import { FcrUIObjectManager } from '../../object-manager';
 import { DialogStoreBase } from './store.base';
+import { FcrUIWebDialogConfig } from './dialogConfig/browser';
 export type FcrUIDialogOnOpenedProps = {
     browserWindow: Electron.BrowserWindow;
     newRendererWindow: Window;
@@ -90,7 +91,8 @@ export type FcrUIDialogComponent = React.FC<FcrUIDialogProps>;
 export type FcrUIDialogInfo = {
     key: FcrUIDialogKey;
     component: FcrUIDialogComponent;
-    windowConfig?: Electron.BrowserWindowConstructorOptions;
+    electronWindowConfig?: Electron.BrowserWindowConstructorOptions;
+    webDialogConfig?: FcrUIWebDialogConfig;
 };
 export type FcrUIDialogHooksConfig = Omit<FcrUIDialogHooksProps, 'dialogKey' | 'config' | 'children' | 'onClose' | 'onOpened'>;
 export type DialogStoreArgs = {

package/lib/modules/dialog/view.js

@@ -1,10 +1,23 @@
 "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/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.DialogContainer = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 require("core-js/modules/es.array.map.js");
 require("core-js/modules/es.object.to-string.js");
 require("core-js/modules/esnext.iterator.constructor.js");
@@ -13,7 +26,11 @@ var _mobxReact = require("mobx-react");
 var _react = require("react");
 var _store = require("./store.base");
 require("./index.css");
+var _env = require("agora-foundation/lib/utilities/env");
+var _webDialogWrapper = require("./web-dialog-wrapper");
 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 DialogContainer = exports.DialogContainer = (0, _mobxReact.observer)(function () {
   var _useContext = (0, _react.useContext)(_store.StoreContext),
     dialogs = _useContext.dialogs,
@@ -25,11 +42,18 @@ var DialogContainer = exports.DialogContainer = (0, _mobxReact.observer)(functio
         dialogId = _ref.dialogId,
         params = _ref.params;
       var DialogComponent = getComponentByKey(dialogKey).component;
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(DialogComponent, {
+      var dialogComponent = /*#__PURE__*/(0, _jsxRuntime.jsx)(DialogComponent, {
         params: params,
         dialogId: dialogId,
         dialogKey: dialogKey
       }, dialogId);
+      if ((0, _env.isElectron)()) {
+        return dialogComponent;
+      }
+      var webDialogConfig = getComponentByKey(dialogKey).webDialogConfig;
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_webDialogWrapper.WebDialogWrapper, _objectSpread(_objectSpread({}, webDialogConfig), {}, {
+        children: dialogComponent
+      }), dialogId);
     })
   });
 });

package/lib/modules/dialog/web-dialog-wrapper.d.ts

@@ -0,0 +1,3 @@
+import { PropsWithChildren } from 'react';
+import { FcrUIWebDialogConfig } from './dialogConfig/browser';
+export declare const WebDialogWrapper: (props: PropsWithChildren<FcrUIWebDialogConfig>) => import("react/jsx-runtime").JSX.Element;

package/lib/modules/dialog/web-dialog-wrapper.js

@@ -0,0 +1,154 @@
+"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.WebDialogWrapper = void 0;
+require("core-js/modules/es.error.cause.js");
+require("core-js/modules/es.error.to-string.js");
+require("core-js/modules/es.parse-int.js");
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = require("react");
+var _reactRnd = require("react-rnd");
+var _levelConfig = require("./level-config");
+var _browser = require("./dialogConfig/browser");
+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 WebDialogWrapper = exports.WebDialogWrapper = function WebDialogWrapper(props) {
+  var _defaultBrowserDialog = _objectSpread(_objectSpread({}, _browser.defaultBrowserDialogConfig), props),
+    onlyTitleCanTriggerDrag = _defaultBrowserDialog.onlyTitleCanTriggerDrag,
+    maxWidth = _defaultBrowserDialog.maxWidth,
+    maxHeight = _defaultBrowserDialog.maxHeight,
+    minWidth = _defaultBrowserDialog.minWidth,
+    minHeight = _defaultBrowserDialog.minHeight,
+    enableResizing = _defaultBrowserDialog.enableResizing,
+    children = _defaultBrowserDialog.children,
+    width = _defaultBrowserDialog.width,
+    height = _defaultBrowserDialog.height;
+  var rndRef = (0, _react.useRef)(null);
+  var isSizeControlled = !!width || !!height;
+  var _useState = (0, _react.useState)({
+      width: width || 'auto',
+      height: height || 'auto'
+    }),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    webSize = _useState2[0],
+    updateSize = _useState2[1];
+  var _useState3 = (0, _react.useState)(undefined),
+    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+    position = _useState4[0],
+    updatePosition = _useState4[1];
+  var getRndSize = function getRndSize() {
+    var _rndRef$current$getSe;
+    if (!rndRef.current) {
+      throw new Error('rndRef is not found');
+    }
+    var rect = (_rndRef$current$getSe = rndRef.current.getSelfElement()) === null || _rndRef$current$getSe === void 0 ? void 0 : _rndRef$current$getSe.getBoundingClientRect();
+    if (rect) {
+      updateSize({
+        width: rect.width,
+        height: rect.height
+      });
+      var windowWidth = window.innerWidth;
+      var windowHeight = window.innerHeight;
+      if (rect.width === 0 && rect.height === 0) {
+        updatePosition({
+          x: 0,
+          y: 0
+        });
+      } else {
+        /**
+         * 注意：子节点包含 img 等 资源标签时，资源加载完成后，元素实际尺寸变化，易出现dialog不居中、布局偏移等问题
+         * 1.  问题根源：img 加载前初始宽高为 0，导致通过 getBoundingClientRect() 等 API 获取的元素宽高不准确
+         * 2.  解决方案：如为 img 标签显式设置固定宽高，确保初始布局计算与最终渲染一致
+         */
+        var x = windowWidth / 2 - rect.width / 2;
+        var y = windowHeight / 2 - rect.height / 2;
+        updatePosition({
+          x: x,
+          y: y
+        });
+      }
+    }
+  };
+  (0, _react.useEffect)(function () {
+    getRndSize();
+  }, [rndRef.current]);
+
+  // 应用尺寸限制的辅助函数
+  var constrainSize = function constrainSize(newSize) {
+    var constrainedWidth = newSize.width;
+    var constrainedHeight = newSize.height;
+
+    // 应用最小尺寸限制
+    if (minWidth && constrainedWidth < minWidth) {
+      constrainedWidth = minWidth;
+    }
+    if (minHeight && constrainedHeight < minHeight) {
+      constrainedHeight = minHeight;
+    }
+
+    // 应用最大尺寸限制
+    if (maxWidth && constrainedWidth > maxWidth) {
+      constrainedWidth = maxWidth;
+    }
+    if (maxHeight && constrainedHeight > maxHeight) {
+      constrainedHeight = maxHeight;
+    }
+    return {
+      width: constrainedWidth,
+      height: constrainedHeight
+    };
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactRnd.Rnd, {
+    ref: rndRef,
+    dragHandleClassName: onlyTitleCanTriggerDrag ? 'fcr-dialog-container-header' : 'fcr-dialog-container',
+    style: {
+      position: 'absolute',
+      touchAction: 'none',
+      display: 'flex',
+      flexDirection: 'column',
+      zIndex: _levelConfig.WEB_DIALOG_LAYER.NORMAL_DIALOG
+    },
+    size: isSizeControlled ? webSize : undefined,
+    bounds: "window",
+    position: position,
+    minWidth: minWidth,
+    minHeight: minHeight,
+    maxWidth: maxWidth,
+    maxHeight: maxHeight,
+    onDragStop: function onDragStop(e, d) {
+      updatePosition({
+        x: d.x,
+        y: d.y
+      });
+    },
+    onResizeStop: function onResizeStop(e, direction, ref, delta, position) {
+      var newSize = constrainSize({
+        width: parseInt(ref.style.width),
+        height: parseInt(ref.style.height)
+      });
+      updateSize(newSize);
+      updatePosition(position);
+    },
+    enableResizing: enableResizing,
+    children: children
+  });
+};

package/lib/modules/event-toast/index.css

@@ -7,8 +7,7 @@
   align-items: center;
   flex-direction: column;
   margin-top: 10%;
-}
-.toast-wrapper.toast-wrapper-web {
+
   position: absolute;
   height: 100%;
   top: 0;
@@ -19,6 +18,10 @@
   pointer-events: none;
 }
 
+.toast-wrapper-electron {
+  top: 5%;
+}
+
 .toast-wrapper .fcr-toast-container {
   margin-bottom: 10px;
   overflow: hidden;

package/lib/modules/event-toast/store.browser.js

@@ -24,7 +24,7 @@ var ToastStore = exports["default"] = /*#__PURE__*/function (_ToastStoreBase) {
   return (0, _createClass2["default"])(ToastStore, [{
     key: "toastWrapperClassName",
     get: function get() {
-      return 'toast-wrapper toast-wrapper-web';
+      return 'toast-wrapper';
     }
   }]);
 }(_store["default"]);

package/lib/modules/event-toast/store.electron.js

@@ -101,7 +101,7 @@ var ToastStore = exports["default"] = /*#__PURE__*/function (_ToastStoreBase) {
   return (0, _createClass2["default"])(ToastStore, [{
     key: "toastWrapperClassName",
     get: function get() {
-      return 'toast-wrapper';
+      return 'toast-wrapper toast-wrapper-electron';
     }
   }, {
     key: "handleSceneMounted",

package/lib/modules/interpreter/index.css

@@ -1,4 +1,3 @@
 .fcr-interpreter-view {
-  position: relative;
-  height: 392px;
+  height: 100%;
 }

package/lib/modules/interpreter/store.js

@@ -108,6 +108,7 @@ var _type3 = require("../../type");
 var _fcrCore = require("fcr-core");
 var _logger = require("../../utilities/logger");
 var _objectManager = require("../../object-manager");
+var _type4 = require("../../modules/toast-manager/type");
 var _excluded = ["randomKey"];
 var _InterpreterStore;
 var _initProto, _init_localInterpreterUsers, _init_interpreterUsersEditState, _init_initUsers, _openInterpreterStateDecs, _closeInterpreterStateDecs, _setInterpreterListEditStateDecs, _addInterpreterUsersDecs, _deleteInterpreterUsersDecs, _updateInterpreterUsersDecs, _queryInterpreterUsersDecs, _getInterpreterStateDecs, _openUpdateInterpreterStateToastDecs, _updateInterpreterUsersToastDecs, _interpreterUsersJoinToastDecs, _closeConfirmDialogDecs, _openInofDialogDecs, _getInitUsersDecs, _updateUsersDecs, _closeInterpreterDialogDecs, _initInterpreterStatusDecs, _ref;
@@ -422,13 +423,13 @@ var InterpreterStore = exports["default"] = /*#__PURE__*/function () {
             }
           });
         } else {
-          this._messageProvider.showToast({
-            type: 'info',
-            message: operatorUser.userRole === _type.FcrUserRole.HOST ? (0, _i18n.transI18n)('fmt_interpretation_mainwindow_toast_label_interpret_offline_controller', {
-              reason1: operatorUser.userName
-            }) : (0, _i18n.transI18n)('fmt_interpretation_interpreter_popup_label_language_change_by_cocontroller', {
-              reason1: operatorUser.userName
-            })
+          this._messageProvider.showToastByKey({
+            key: operatorUser.userRole === _type.FcrUserRole.HOST ? _type4.FcrUIToastKey.FMT_INTERPRETATION_MAINWINDOW_TOAST_LABEL_INTERPRET_OFFLINE_CONTROLLER : _type4.FcrUIToastKey.FMT_INTERPRETATION_INTERPRETER_POPUP_LABEL_LANGUAGE_CHANGE_BY_COCONTROLLER,
+            params: {
+              transI18nOptions: {
+                reason1: operatorUser.userName
+              }
+            }
           });
         }
       }
@@ -436,23 +437,25 @@ var InterpreterStore = exports["default"] = /*#__PURE__*/function () {
   }, {
     key: "_updateInterpreterUsersToast",
     value: function _updateInterpreterUsersToast(operatorUser) {
-      this._messageProvider.showToast({
-        type: 'info',
-        message: operatorUser.userRole === _type.FcrUserRole.HOST ? (0, _i18n.transI18n)('fmt_interpretation_mainwindow_toast_label_update_language', {
-          reason1: operatorUser.userName
-        }) : (0, _i18n.transI18n)('fmt_interpretation_mobile_toast_controller_toast_label_update_interpreter_by_cocontroller', {
-          reason1: operatorUser.userName
-        })
+      this._messageProvider.showToastByKey({
+        key: operatorUser.userRole === _type.FcrUserRole.HOST ? _type4.FcrUIToastKey.FMT_INTERPRETATION_MAINWINDOW_TOAST_LABEL_UPDATE_LANGUAGE : _type4.FcrUIToastKey.FMT_INTERPRETATION_MOBILE_TOAST_CONTROLLER_TOAST_LABEL_UPDATE_INTERPRETER_BY_COCONTROLLER,
+        params: {
+          transI18nOptions: {
+            reason1: operatorUser.userName
+          }
+        }
       });
     }
   }, {
     key: "_interpreterUsersJoinToast",
     value: function _interpreterUsersJoinToast(outputLanguage) {
-      this._messageProvider.showToast({
-        type: 'info',
-        message: (0, _i18n.transI18n)('fmt_interpretation_interpreter_toast_label_return_channel', {
-          reason1: outputLanguage ? _useLanguageConfig.baseLanguageConfig[outputLanguage].text : ''
-        })
+      this._messageProvider.showToastByKey({
+        key: _type4.FcrUIToastKey.FMT_INTERPRETATION_INTERPRETER_TOAST_LABEL_RETURN_CHANNEL,
+        params: {
+          transI18nOptions: {
+            reason1: outputLanguage ? _useLanguageConfig.baseLanguageConfig[outputLanguage].text : ''
+          }
+        }
       });
     }
   }, {

package/lib/modules/interpreter/utils.js

@@ -11,7 +11,7 @@ require("core-js/modules/es.object.to-string.js");
 require("core-js/modules/es.promise.js");
 require("core-js/modules/web.timers.js");
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
-var _logger = require("agora-foundation/lib/logger");
+var _logger = require("../../utilities/logger");
 var _uuid = require("uuid");
 var logger = (0, _logger.getLogger)();
 var _retryTask2 = exports.retryTask = /*#__PURE__*/function () {