fcr-ui-scene 3.3.1 → 3.4.0

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

@@ -12,18 +12,18 @@ var _react = require("react");
 var _reactRnd = require("react-rnd");
 var _windowHeader = require("agora-ui-foundation/lib/components/window-header");
 var _i18n = require("agora-ui-foundation/lib/i18n");
-var _context = require("../../context");
+var _store = require("../../store");
 require("./index.css");
 var _jsxRuntime = require("react/jsx-runtime");
 var InterpreterDialog = (0, _mobxReact.observer)(function (_ref) {
   var children = _ref.children;
   var t = (0, _i18n.useI18n)();
-  var store = (0, _react.useContext)(_context.StoreContext);
+  var store = (0, _react.useContext)(_store.StoreContext);
   var containerRef = (0, _react.useRef)(null);
   var windowWidth = window.innerWidth;
   var windowHeight = window.innerHeight;
-  var width = 506;
-  var height = 434;
+  var width = 684;
+  var height = 438;
   var x = windowWidth / 2 - width / 2;
   if ((0, _env.isElectron)()) {
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_electron.InterpreterElectronDialog, {
@@ -42,14 +42,15 @@ var InterpreterDialog = (0, _mobxReact.observer)(function (_ref) {
     },
     ref: containerRef,
     bounds: '.fcr-layout-content',
-    minWidth: width,
-    minHeight: height,
+    minWidth: 620,
+    minHeight: 300,
+    maxWidth: 800,
     dragHandleClassName: "frc-window-header",
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: "fcr-simultaneous-interpretation-dialog-wrapper",
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_windowHeader.FcrWindowHeader, {
         showClose: true,
-        title: t('fmt_modules_labels_simultaneous_interpretation'),
+        title: t('fmt_interpretation_setting_controller_option_simultaneous_interpretation'),
         onClose: handleCloseClick,
         type: _windowHeader.WindowType.WINDOW,
         withWindowPopUpButton: false

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

@@ -1,4 +1,4 @@
 import { PropsWithChildren } from 'react';
 export declare const ChatElectronDialog: ({ children, chatAction }: PropsWithChildren<{
     chatAction: React.ReactNode;
-}>) => null;
+}>) => import("react/jsx-runtime").JSX.Element;

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

@@ -6,55 +6,28 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.ChatElectronDialog = void 0;
 var _mobxReact = require("mobx-react");
-var _react = require("react");
-var _context = require("../../context");
-var _dialogs = require("../../dialogs");
 var _constant = require("../../../../utilities/constant");
-var _renderer = require("../../../../utilities/renderer");
-var _reactDom = require("react-dom");
 var _ = require(".");
 var _platform = require("../../../../utilities/platform");
+var _useElectron = require("../../hooks/useElectron");
 var _jsxRuntime = require("react/jsx-runtime");
+var config = {
+  frame: false,
+  fullscreen: false,
+  maximizable: false,
+  show: !(0, _platform.isWindows)(),
+  transparent: true
+};
 var ChatElectronDialog = exports.ChatElectronDialog = (0, _mobxReact.observer)(function (_ref) {
   var children = _ref.children,
     chatAction = _ref.chatAction;
-  var store = (0, _react.useContext)(_context.StoreContext);
-  (0, _react.useEffect)(function () {
-    var node;
-    window.runtime.openRendererWindow('chat', function (dom, browserWindow) {
-      _dialogs.dialogWindows.set(_constant.DialogKey.CHAT, browserWindow);
-      node = dom;
-      (0, _platform.isWindows)() && browserWindow.show(); // 修复 windows 下打开白屏的问题
-
-      if (store.currentDialogBounds.height) {
-        (0, _dialogs.setDialogBounds)(browserWindow, {
-          y: store.currentDialogBounds.y
-        });
-      }
-      (0, _renderer.handleWillClose)(browserWindow, function () {
-        (0, _reactDom.unmountComponentAtNode)(node);
-        _dialogs.dialogWindows["delete"](_constant.DialogKey.CHAT);
-        store.closeChatFromDialog();
-      });
-      (0, _reactDom.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_context.StoreContext.Provider, {
-        value: store,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.ChatDialogContent, {
-          chatAction: chatAction,
-          children: children
-        })
-      }), dom);
-    }, {
-      frame: false,
-      fullscreen: false,
-      maximizable: false,
-      y: store.currentDialogBounds.y,
-      show: !(0, _platform.isWindows)(),
-      transparent: true
-    });
-    return function () {
-      node && (0, _reactDom.unmountComponentAtNode)(node);
-      window.runtime.closeRendererWindow('chat');
-    };
-  }, []);
-  return null;
+  (0, _useElectron.useElectronDialog)({
+    config: config,
+    dialogKey: _constant.DialogKey.CHAT,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.ChatDialogContent, {
+      chatAction: chatAction,
+      children: children
+    })
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {});
 });

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

@@ -9,16 +9,16 @@ var _env = require("agora-foundation/lib/utilities/env");
 var _mobxReact = require("mobx-react");
 var _react = require("react");
 var _reactRnd = require("react-rnd");
-var _context = require("../../context");
+var _store = require("../../store");
 var _i18n = require("agora-ui-foundation/lib/i18n");
 var _windowHeader = require("agora-ui-foundation/lib/components/window-header");
 var _electron = require("./electron");
-var _type = require("agora-edu-core/lib/room-control/chatroom-control/type");
+var _type = require("fcr-core/lib/room-control/chatroom-control/type");
 var _jsxRuntime = require("react/jsx-runtime");
 var ChatDialogContent = exports.ChatDialogContent = (0, _mobxReact.observer)(function (_ref) {
   var children = _ref.children,
     chatAction = _ref.chatAction;
-  var _useContext = (0, _react.useContext)(_context.StoreContext),
+  var _useContext = (0, _react.useContext)(_store.StoreContext),
     closeChatFromDialog = _useContext.closeChatFromDialog,
     moveChatFromDialogToAside = _useContext.moveChatFromDialogToAside,
     chatRoomState = _useContext.chatRoomState;

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

@@ -6,5 +6,5 @@ declare const ConfirmElectronDialog: ({ children, params, }: PropsWithChildren<{
         x?: number;
         y?: number;
     };
-}>) => null;
+}>) => import("react/jsx-runtime").JSX.Element;
 export default ConfirmElectronDialog;

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

@@ -1,86 +1,54 @@
 "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;
-var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
-var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _mobxReact = require("mobx-react");
 var _react = require("react");
-var _context2 = require("../../context");
-var _reactDom = require("react-dom");
-var _renderer = require("../../../../utilities/renderer");
+var _store = require("../../store");
+var _constant = require("../../../../utilities/constant");
+var _useElectron = require("../../hooks/useElectron");
 var _jsxRuntime = require("react/jsx-runtime");
 var ConfirmElectronDialog = (0, _mobxReact.observer)(function (_ref) {
   var children = _ref.children,
     params = _ref.params;
-  var store = (0, _react.useContext)(_context2.StoreContext);
+  var store = (0, _react.useContext)(_store.StoreContext);
+  var config = {
+    frame: false,
+    fullscreen: false,
+    maximizable: false,
+    width: (params === null || params === void 0 ? void 0 : params.width) || 320,
+    height: (params === null || params === void 0 ? void 0 : params.height) || 168 + (params.closable || params.closable === undefined ? 16 : 0),
+    minWidth: 255,
+    minHeight: 160,
+    maxWidth: 620,
+    maxHeight: 700,
+    transparent: true,
+    resizable: false
+  };
+  var element = (0, _useElectron.useElectronDialog)({
+    config: config,
+    dialogKey: _constant.DialogKey.CONFIRM,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "fcr-confirm-dialog-wrapper",
+      children: children
+    }),
+    onOpened: function onOpened(_ref2) {
+      var browserWindow = _ref2.browserWindow;
+      browserWindow.setBounds({
+        width: (params === null || params === void 0 ? void 0 : params.width) || 320,
+        height: (params === null || params === void 0 ? void 0 : params.height) || 168 + (params.closable || params.closable === undefined ? 16 : 0)
+      });
+    }
+  });
   (0, _react.useEffect)(function () {
-    var node;
-    (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee() {
-      var _ref3, x, y;
-      return _regenerator["default"].wrap(function _callee$(_context) {
-        while (1) switch (_context.prev = _context.next) {
-          case 0:
-            _context.next = 2;
-            return store.setWorkArea();
-          case 2:
-            _context.t0 = _context.sent;
-            if (_context.t0) {
-              _context.next = 5;
-              break;
-            }
-            _context.t0 = {
-              x: 0,
-              y: 0
-            };
-          case 5:
-            _ref3 = _context.t0;
-            x = _ref3.x;
-            y = _ref3.y;
-            window.runtime.openRendererWindow('confirm-dialog', function (dom, browserWindow) {
-              node = dom;
-              browserWindow.focus(); // 这里打开的confirm dialog 不会走 openRendererWindow 中的 focus 逻辑，所以单独 focus 一下
-
-              (0, _renderer.handleWillClose)(browserWindow, function () {
-                (0, _reactDom.unmountComponentAtNode)(node);
-              });
-              (0, _reactDom.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_context2.StoreContext.Provider, {
-                value: store,
-                children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-                  className: "fcr-confirm-dialog-wrapper",
-                  children: children
-                })
-              }), dom);
-            }, {
-              frame: false,
-              fullscreen: false,
-              maximizable: false,
-              // TODO:
-              width: (params === null || params === void 0 ? void 0 : params.width) || 320,
-              height: (params === null || params === void 0 ? void 0 : params.height) || 168 + (params.closable || params.closable === undefined ? 16 : 0),
-              minWidth: 255,
-              minHeight: 160,
-              maxWidth: 620,
-              maxHeight: 700,
-              x: x + ((params === null || params === void 0 ? void 0 : params.x) || 0),
-              y: y + ((params === null || params === void 0 ? void 0 : params.y) || 0),
-              transparent: true
-            });
-          case 9:
-          case "end":
-            return _context.stop();
-        }
-      }, _callee);
-    }))();
-    return function () {
-      node && (0, _reactDom.unmountComponentAtNode)(node);
-      window.runtime.closeRendererWindow('confirm-dialog');
-    };
-  }, []);
-  return null;
+    var _element$browserWindo;
+    element === null || element === void 0 || (_element$browserWindo = element.browserWindow) === null || _element$browserWindo === void 0 || _element$browserWindo.setBounds({
+      height: store.currentDialogBounds.height
+    });
+  }, [store.currentDialogBounds.height]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {});
 });
 var _default = exports["default"] = ConfirmElectronDialog;

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

@@ -1,10 +1,2 @@
 import { FC, PropsWithChildren } from 'react';
-import { ConfirmContentProps } from 'agora-ui-foundation/lib/components/confirm-content';
-export declare const ConfirmDialog: FC<PropsWithChildren<{
-    dialogType: string;
-    params: (ConfirmContentProps & {
-        height?: number;
-        x?: number;
-        y?: number;
-    }) | undefined;
-}>>;
+export declare const ConfirmDialog: FC<PropsWithChildren<{}>>;

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

@@ -1,89 +1,43 @@
 "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.iterator.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/es.string.iterator.js");
-require("core-js/modules/es.weak-map.js");
-require("core-js/modules/esnext.async-iterator.filter.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.filter.js");
-require("core-js/modules/esnext.iterator.for-each.js");
-require("core-js/modules/esnext.weak-map.delete-all.js");
-require("core-js/modules/esnext.weak-map.emplace.js");
-require("core-js/modules/web.dom-collections.for-each.js");
-require("core-js/modules/web.dom-collections.iterator.js");
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ConfirmDialog = void 0;
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _mobxReact = require("mobx-react");
-var _react = _interopRequireWildcard(require("react"));
-var _context = require("../../context");
-var _reactRnd = require("react-rnd");
-var _electron = _interopRequireDefault(require("./electron"));
-var _platform = require("../../../../utilities/platform");
+var _useElectron = require("../../hooks/useElectron");
+var _constant = require("../../../../utilities/constant");
+var _env = require("agora-foundation/lib/utilities/env");
 var _jsxRuntime = require("react/jsx-runtime");
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
-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 ConfirmDialog = exports.ConfirmDialog = (0, _mobxReact.observer)(function (_ref) {
-  var children = _ref.children,
-    dialogType = _ref.dialogType,
-    params = _ref.params;
-  var store = (0, _react.useContext)(_context.StoreContext);
-  var containerWidth = window.innerWidth;
-  var containerHeight = window.innerHeight;
-  var _ref2 = dialogType === 'electron' ? window.runtime.browserWindow.getBounds() : {
-      x: document.body.offsetLeft,
-      y: document.body.offsetTop
-    },
-    offsetX = _ref2.x,
-    offsetY = _ref2.y;
-  var width = (params === null || params === void 0 ? void 0 : params.width) || 415;
-  var height = (params === null || params === void 0 ? void 0 : params.height) || 180;
-  var x = containerWidth / 2 - width / 2 + ((0, _platform.isWindows)() ? offsetX : 0);
-  var y = containerHeight / 2 - height / 2 + ((0, _platform.isWindows)() ? offsetY : 0);
-  if (dialogType === 'electron') {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_electron["default"], {
-      params: _objectSpread(_objectSpread({}, params), {}, {
-        x: x,
-        y: y
-      }),
-      children: children
-    });
-  }
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_context.StoreContext.Provider, {
-    value: store,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactRnd.Rnd, {
-      "default": {
-        x: x,
-        y: y,
-        width: width,
-        height: height
-      },
-      maxHeight: 700,
-      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: children
-      })
-    })
+  var children = _ref.children;
+  var config = {
+    frame: false,
+    transparent: true,
+    maximizable: false,
+    backgroundColor: '#00000000',
+    hiddenInMissionControl: true,
+    hasShadow: false,
+    useContentSize: true,
+    minimizable: false,
+    title: 'Confirm',
+    scroll: false,
+    alwaysOnTop: true,
+    fullscreen: false,
+    resizable: false
+  };
+  (0, _env.isElectron)() && (0, _useElectron.useElectronDialog)({
+    config: config,
+    dialogKey: _constant.DialogKey.CONFIRM,
+    children: children,
+    fullScreen: true,
+    scroll: false,
+    alwaysOnTop: true,
+    ignoreMouseEvents: true,
+    focus: true
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+    children: !(0, _env.isElectron)() && children
   });
 });

package/lib/modules/dialog/components/connection-gateway/electron.d.ts

@@ -1,2 +1,5 @@
 import { PropsWithChildren } from 'react';
-export declare const ConnectionGatewayElectronDialog: ({ children }: PropsWithChildren<{}>) => null;
+import { ParamsType } from '.';
+export declare const ConnectionGatewayElectronDialog: ({ children, params }: PropsWithChildren<{
+    params: ParamsType;
+}>) => null;

package/lib/modules/dialog/components/connection-gateway/electron.js

@@ -7,51 +7,41 @@ Object.defineProperty(exports, "__esModule", {
 exports.ConnectionGatewayElectronDialog = void 0;
 var _mobxReact = require("mobx-react");
 var _react = require("react");
-var _reactDom = require("react-dom");
-var _context = require("../../context");
-var _dialogs = require("../../dialogs");
+var _store = require("../../store");
 var _constant = require("../../../../utilities/constant");
-var _renderer = require("../../../../utilities/renderer");
-var _jsxRuntime = require("react/jsx-runtime");
+var _useElectron = require("../../hooks/useElectron");
 var ConnectionGatewayElectronDialog = exports.ConnectionGatewayElectronDialog = (0, _mobxReact.observer)(function (_ref) {
-  var children = _ref.children;
-  var store = (0, _react.useContext)(_context.StoreContext);
-  var height = store.connectorContainerBounds.height;
+  var children = _ref.children,
+    params = _ref.params;
+  var store = (0, _react.useContext)(_store.StoreContext);
+  var height = store.currentDialogBounds.height;
   var browserRef = (0, _react.useRef)();
-  (0, _react.useEffect)(function () {
-    var node;
-    window.runtime.openRendererWindow('connection-gateway', function (dom, browserWindow) {
-      browserWindow.webContents.insertCSS("\n          ::-webkit-scrollbar {\n            display: none;\n          }\n        ");
+  var config = {
+    modal: true,
+    frame: false,
+    width: 400,
+    height: height,
+    trafficLightPosition: {
+      x: 0,
+      y: 0
+    },
+    resizable: false,
+    transparent: true,
+    fullscreen: false
+  };
+  (0, _useElectron.useElectronDialog)({
+    dialogKey: _constant.DialogKey.CONNECTION_GATEWAY,
+    config: config,
+    children: children,
+    onOpened: function onOpened(_ref2) {
+      var browserWindow = _ref2.browserWindow;
       browserRef.current = browserWindow;
-      browserWindow.focus();
-      _dialogs.dialogWindows.set(_constant.DialogKey.CONNECTION_GATEWAY, browserWindow);
-      node = dom;
-      (0, _renderer.handleWillClose)(browserWindow, function () {
-        (0, _reactDom.unmountComponentAtNode)(node);
-        _dialogs.dialogWindows["delete"](_constant.DialogKey.CONNECTION_GATEWAY);
-        store.closeConnectionDialog();
+      browserWindow.setBounds({
+        height: params.type === 'phone' ? 500 : 350,
+        width: 400
       });
-      (0, _reactDom.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_context.StoreContext.Provider, {
-        value: store,
-        children: children
-      }), dom);
-    }, {
-      frame: false,
-      width: 400,
-      height: height,
-      titleBarStyle: 'default',
-      trafficLightPosition: {
-        x: 0,
-        y: 0
-      },
-      resizable: false,
-      transparent: true
-    });
-    return function () {
-      node && (0, _reactDom.unmountComponentAtNode)(node);
-      window.runtime.closeRendererWindow('connection-gateway');
-    };
-  }, []);
+    }
+  });
   (0, _react.useEffect)(function () {
     var _browserRef$current;
     if (!height) return;

package/lib/modules/dialog/components/connection-gateway/index.d.ts

@@ -1,3 +1,8 @@
 import { FC } from 'react';
 import './index.css';
-export declare const ConnectionGatewayDialog: FC<{}>;
+export type ParamsType = {
+    type: 'phone' | 'computer';
+};
+export declare const ConnectionGatewayDialog: FC<{
+    params: ParamsType;
+}>;

package/lib/modules/dialog/components/connection-gateway/index.js

@@ -8,16 +8,20 @@ exports.ConnectionGatewayDialog = void 0;
 var _env = require("agora-foundation/lib/utilities/env");
 var _react = require("react");
 var _reactRnd = require("react-rnd");
-var _context = require("../../context");
+var _store = require("../../store");
 var _electron = require("./electron");
 var _mobxReact = require("mobx-react");
 require("./index.css");
 var _jsxRuntime = require("react/jsx-runtime");
 var ConnectionGatewayDialog = exports.ConnectionGatewayDialog = (0, _mobxReact.observer)(function (_ref) {
-  var children = _ref.children;
-  var _useContext = (0, _react.useContext)(_context.StoreContext),
+  var children = _ref.children,
+    _ref$params = _ref.params,
+    params = _ref$params === void 0 ? {
+      type: 'computer'
+    } : _ref$params;
+  var _useContext = (0, _react.useContext)(_store.StoreContext),
     closeConnectionDialog = _useContext.closeConnectionDialog,
-    connectorContainerBounds = _useContext.connectorContainerBounds;
+    currentDialogBounds = _useContext.currentDialogBounds;
   var windowWidth = window.innerWidth;
   var windowHeight = window.innerHeight;
   var width = 400;
@@ -26,6 +30,7 @@ var ConnectionGatewayDialog = exports.ConnectionGatewayDialog = (0, _mobxReact.o
   var containerRef = (0, _react.useRef)(null);
   if ((0, _env.isElectron)()) {
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_electron.ConnectionGatewayElectronDialog, {
+      params: params,
       children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
         className: "connection-gateway-dialog electron",
         children: [children, /*#__PURE__*/(0, _jsxRuntime.jsx)("a", {
@@ -39,7 +44,7 @@ var ConnectionGatewayDialog = exports.ConnectionGatewayDialog = (0, _mobxReact.o
   }
   (0, _react.useEffect)(function () {
     var _containerRef$current, _containerRef$current2;
-    var calcHeight = connectorContainerBounds.height || height;
+    var calcHeight = currentDialogBounds.height || height;
     (_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 || _containerRef$current.updateSize({
       height: calcHeight,
       width: width
@@ -48,7 +53,7 @@ var ConnectionGatewayDialog = exports.ConnectionGatewayDialog = (0, _mobxReact.o
       x: x,
       y: windowHeight / 2 - calcHeight / 2
     });
-  }, [connectorContainerBounds.height]);
+  }, [currentDialogBounds.height]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactRnd.Rnd, {
     "default": {
       x: x,

package/lib/modules/dialog/components/control-bar/index.d.ts

@@ -0,0 +1,7 @@
+import { ControlBarUIModule } from '../../../control-bar';
+import { PropsWithChildren } from 'react';
+export declare const config: Electron.BrowserWindowConstructorOptions;
+export declare const ControlBarDialog: (props: PropsWithChildren<{
+    params: any;
+    module: ControlBarUIModule;
+}>) => import("react/jsx-runtime").JSX.Element;

package/lib/modules/dialog/components/control-bar/index.js

@@ -0,0 +1,42 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.config = exports.ControlBarDialog = void 0;
+var _mobxReact = require("mobx-react");
+var _constant = require("../../../../utilities/constant");
+var _useElectron = require("../../hooks/useElectron");
+var _jsxRuntime = require("react/jsx-runtime");
+var config = exports.config = {
+  y: 0,
+  x: 0,
+  frame: false,
+  transparent: true,
+  maximizable: false,
+  backgroundColor: '#00000000',
+  hiddenInMissionControl: true,
+  hasShadow: false,
+  useContentSize: true,
+  minimizable: false,
+  resizable: false,
+  title: 'Control Bar',
+  type: 'panel'
+};
+var ControlBarDialog = exports.ControlBarDialog = (0, _mobxReact.observer)(function (props) {
+  var module = props.module,
+    params = props.params;
+  var children = function children(browserWindow) {
+    return module.getComponent({
+      params: params,
+      browserWindow: browserWindow
+    });
+  };
+  (0, _useElectron.useElectronDialog)({
+    dialogKey: _constant.DialogKey.CONTROL_BAR,
+    config: config,
+    children: children
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {});
+});