fcr-ui-scene 3.3.1 → 3.4.1

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

@@ -1,74 +1,34 @@
 "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.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 _electron = require("./electron");
 var _mobxReact = require("mobx-react");
-require("./index.css");
+var _dialogContainer = _interopRequireDefault(require("../../../components/dialog-container"));
+var _constant = require("../../../../utilities/constant");
 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),
-    closeConnectionDialog = _useContext.closeConnectionDialog,
-    connectorContainerBounds = _useContext.connectorContainerBounds;
-  var windowWidth = window.innerWidth;
-  var windowHeight = window.innerHeight;
-  var width = 400;
-  var height = 350;
-  var x = windowWidth / 2 - width / 2;
-  var containerRef = (0, _react.useRef)(null);
+  var children = _ref.children,
+    _ref$params = _ref.params,
+    params = _ref$params === void 0 ? {
+      type: 'computer'
+    } : _ref$params;
+  var container = /*#__PURE__*/(0, _jsxRuntime.jsx)(_dialogContainer["default"], {
+    width: 400,
+    height: params.type === 'phone' ? 500 : 350,
+    dialogKey: _constant.DialogKey.CONNECTION_GATEWAY,
+    children: children
+  });
   if ((0, _env.isElectron)()) {
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_electron.ConnectionGatewayElectronDialog, {
-      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-        className: "connection-gateway-dialog electron",
-        children: [children, /*#__PURE__*/(0, _jsxRuntime.jsx)("a", {
-          className: "connection-gateway-dialog_close",
-          onClick: function onClick() {
-            return closeConnectionDialog(true);
-          }
-        })]
-      })
+      params: params,
+      children: container
     });
   }
-  (0, _react.useEffect)(function () {
-    var _containerRef$current, _containerRef$current2;
-    var calcHeight = connectorContainerBounds.height || height;
-    (_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 || _containerRef$current.updateSize({
-      height: calcHeight,
-      width: width
-    });
-    (_containerRef$current2 = containerRef.current) === null || _containerRef$current2 === void 0 || _containerRef$current2.updatePosition({
-      x: x,
-      y: windowHeight / 2 - calcHeight / 2
-    });
-  }, [connectorContainerBounds.height]);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactRnd.Rnd, {
-    "default": {
-      x: x,
-      y: windowHeight / 2 - height / 2,
-      width: width,
-      height: height
-    },
-    ref: containerRef,
-    bounds: '.fcr-layout-content',
-    minWidth: width,
-    minHeight: height,
-    dragHandleClassName: "connector-tabs",
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-      className: "connection-gateway-dialog",
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("a", {
-        className: "connection-gateway-dialog_close",
-        onClick: function onClick() {
-          return closeConnectionDialog(true);
-        }
-      }), children]
-    })
-  });
+  return container;
 });

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,41 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.config = exports.ControlBarDialog = void 0;
+var _constant = require("../../../../utilities/constant");
+var _useElectron = require("../../hooks/useElectron");
+var _jsxRuntime = require("react/jsx-runtime");
+var config = exports.config = {
+  y: 0,
+  x: 0,
+  maximizable: false,
+  backgroundColor: '#00000000',
+  hiddenInMissionControl: true,
+  hasShadow: false,
+  useContentSize: true,
+  minimizable: false,
+  resizable: false,
+  title: 'Control Bar',
+  type: 'panel',
+  skipTaskbar: true
+};
+var ControlBarDialog = exports.ControlBarDialog = function ControlBarDialog(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,
+    hasCustomShadow: false
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {});
+};

package/lib/modules/dialog/components/device-setting/electron.js

@@ -5,70 +5,29 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.DeviceSettingElectronDialog = void 0;
-var _mobxReact = require("mobx-react");
-var _react = require("react");
-var _context = require("../../context");
-var _i18n = require("agora-ui-foundation/lib/i18n");
 var _constant = require("../../../../utilities/constant");
-var _dialogs = require("../../dialogs");
-var _renderer = require("../../../../utilities/renderer");
-var _reactDom = require("react-dom");
-var _windowHeader = require("agora-ui-foundation/lib/components/window-header");
-var _jsxRuntime = require("react/jsx-runtime");
-var DeviceSettingElectronDialog = exports.DeviceSettingElectronDialog = (0, _mobxReact.observer)(function (_ref) {
+var _useElectron = require("../../hooks/useElectron");
+var DeviceSettingElectronDialog = exports.DeviceSettingElectronDialog = function DeviceSettingElectronDialog(_ref) {
   var children = _ref.children;
-  var store = (0, _react.useContext)(_context.StoreContext);
-  var t = (0, _i18n.useI18n)();
-  (0, _react.useEffect)(function () {
-    var node;
-    window.runtime.openRendererWindow('device-setting', function (dom, browserWindow) {
-      browserWindow.webContents.insertCSS("\n          ::-webkit-scrollbar {\n            display: none;\n          }\n        ");
-      _dialogs.dialogWindows.set(_constant.DialogKey.DEVICE_SETTINGS, browserWindow);
-      node = dom;
-      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.DEVICE_SETTINGS);
-        store.closeDeviceSettingFromDialog();
-      });
-      var handleCloseClick = function handleCloseClick() {
-        store.closeDeviceSettingFromDialog();
-      };
-      (0, _reactDom.render)(/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-        className: "fcr-device-setting-dialog-wrapper",
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_windowHeader.FcrWindowHeader, {
-          showClose: true,
-          title: t('fmt_modules_labels_devicesettings'),
-          onClose: handleCloseClick,
-          type: _windowHeader.WindowType.WINDOW,
-          withWindowPopUpButton: false
-        }), children]
-      }), dom);
-    }, {
-      frame: false,
-      fullscreen: false,
-      maximizable: false,
-      // titleBarStyle: 'hidden',
-      trafficLightPosition: {
-        x: 10,
-        y: 60
-      },
-      width: 580,
-      height: 600,
-      minWidth: 580,
-      minHeight: 600,
-      maxWidth: 670,
-      maxHeight: 800,
-      transparent: true
-    });
-    return function () {
-      node && (0, _reactDom.unmountComponentAtNode)(node);
-      window.runtime.closeRendererWindow('device-setting');
-    };
-  }, []);
+  var config = {
+    fullscreen: false,
+    maximizable: false,
+    trafficLightPosition: {
+      x: 10,
+      y: 60
+    },
+    width: 580,
+    height: 600,
+    minWidth: 580,
+    minHeight: 600,
+    maxWidth: 670,
+    maxHeight: 800
+  };
+  var dialogKey = _constant.DialogKey.DEVICE_SETTINGS;
+  (0, _useElectron.useElectronDialog)({
+    dialogKey: dialogKey,
+    config: config,
+    children: children
+  });
   return null;
-});
+};

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

@@ -1,60 +1,33 @@
 "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 _env = require("agora-foundation/lib/utilities/env");
 var _electron = require("./electron");
-var _mobxReact = require("mobx-react");
-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");
 require("./index.css");
+var _constant = require("../../../../utilities/constant");
+var _dialogContainer = _interopRequireDefault(require("../../../components/dialog-container"));
 var _jsxRuntime = require("react/jsx-runtime");
-var DeviceSettingDialog = (0, _mobxReact.observer)(function (_ref) {
+var DeviceSettingDialog = function DeviceSettingDialog(_ref) {
   var children = _ref.children;
   var t = (0, _i18n.useI18n)();
-  var store = (0, _react.useContext)(_context.StoreContext);
-  var containerRef = (0, _react.useRef)(null);
-  var windowWidth = window.innerWidth;
-  var windowHeight = window.innerHeight;
-  var width = 580;
-  var height = 556;
-  var x = windowWidth / 2 - width / 2;
+  var container = /*#__PURE__*/(0, _jsxRuntime.jsx)(_dialogContainer["default"], {
+    title: t('fmt_modules_labels_devicesettings'),
+    width: 580,
+    height: 556,
+    dialogKey: _constant.DialogKey.DEVICE_SETTINGS,
+    children: children
+  });
   if ((0, _env.isElectron)()) {
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_electron.DeviceSettingElectronDialog, {
-      children: children
+      children: container
     });
   }
-  function handleCloseClick() {
-    store.closeDeviceSettingFromDialog();
-  }
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactRnd.Rnd, {
-    "default": {
-      x: x,
-      y: windowHeight / 2 - height / 2,
-      width: width,
-      height: height
-    },
-    ref: containerRef,
-    bounds: '.fcr-layout-content',
-    minWidth: width,
-    minHeight: height,
-    dragHandleClassName: "frc-window-header",
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-      className: "fcr-device-setting-dialog-wrapper",
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_windowHeader.FcrWindowHeader, {
-        showClose: true,
-        title: t('fmt_modules_labels_devicesettings'),
-        onClose: handleCloseClick,
-        type: _windowHeader.WindowType.WINDOW,
-        withWindowPopUpButton: false
-      }), children]
-    })
-  });
-});
+  return container;
+};
 var _default = exports["default"] = DeviceSettingDialog;

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

@@ -0,0 +1,3 @@
+import { FC, PropsWithChildren } from 'react';
+import '../../index.css';
+export declare const InviteDialog: FC<PropsWithChildren<{}>>;

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

@@ -0,0 +1,49 @@
+"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.InviteDialog = void 0;
+var _env = require("agora-foundation/lib/utilities/env");
+var _constant = require("../../../../utilities/constant");
+var _useElectron = require("../../hooks/useElectron");
+require("../../index.css");
+var _dialogContainer = _interopRequireDefault(require("../../../components/dialog-container"));
+var _jsxRuntime = require("react/jsx-runtime");
+var InviteElectronDialog = function InviteElectronDialog(_ref) {
+  var children = _ref.children;
+  var config = {
+    maximizable: false,
+    minimizable: false,
+    fullscreenable: false,
+    width: 400,
+    height: 400,
+    trafficLightPosition: {
+      x: 0,
+      y: 0
+    }
+  };
+  (0, _useElectron.useElectronDialog)({
+    dialogKey: _constant.DialogKey.INVITE,
+    config: config,
+    children: children
+  });
+  return null;
+};
+var InviteDialog = exports.InviteDialog = function InviteDialog(_ref2) {
+  var children = _ref2.children;
+  var container = /*#__PURE__*/(0, _jsxRuntime.jsx)(_dialogContainer["default"], {
+    dialogKey: _constant.DialogKey.INVITE,
+    width: 400,
+    height: 400,
+    children: children
+  });
+  if ((0, _env.isElectron)()) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(InviteElectronDialog, {
+      children: container
+    });
+  }
+  return container;
+};

package/lib/modules/dialog/components/live-streaming/index.d.ts

@@ -0,0 +1,4 @@
+import { FC, PropsWithChildren } from 'react';
+export declare const LiveStreamingDialog: FC<PropsWithChildren<{
+    title: string;
+}>>;

package/lib/modules/dialog/components/live-streaming/index.js

@@ -0,0 +1,53 @@
+"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.LiveStreamingDialog = void 0;
+var _env = require("agora-foundation/lib/utilities/env");
+var _constant = require("../../../../utilities/constant");
+var _useElectron = require("../../hooks/useElectron");
+var _dialogContainer = _interopRequireDefault(require("../../../components/dialog-container"));
+var _jsxRuntime = require("react/jsx-runtime");
+var LiveStreamingDialog = exports.LiveStreamingDialog = function LiveStreamingDialog(_ref) {
+  var children = _ref.children,
+    title = _ref.title;
+  var container = /*#__PURE__*/(0, _jsxRuntime.jsx)(_dialogContainer["default"], {
+    title: title,
+    dialogKey: _constant.DialogKey.LIVE_STREAMING,
+    width: 440,
+    height: 434,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "fcr-livestreaming-dialog-content",
+      children: children
+    })
+  });
+  if ((0, _env.isElectron)()) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(LiveStreamingElectronDialog, {
+      title: title,
+      children: container
+    });
+  }
+  return container;
+};
+var LiveStreamingElectronDialog = function LiveStreamingElectronDialog(_ref2) {
+  var children = _ref2.children,
+    title = _ref2.title;
+  var config = {
+    fullscreen: false,
+    maximizable: false,
+    width: 440,
+    height: 434
+  };
+  (0, _useElectron.useElectronDialog)({
+    dialogKey: _constant.DialogKey.LIVE_STREAMING,
+    config: config,
+    onClose: function onClose(store) {
+      store.closeDialogByKey(_constant.DialogKey.LIVE_STREAMING);
+    },
+    children: children
+  });
+  return null;
+};

package/lib/modules/dialog/components/operation-waiting-room/electron.js

@@ -1,89 +1,42 @@
 "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 _jsxRuntime = require("react/jsx-runtime");
+var _useElectron = require("../../hooks/useElectron");
+var _constant = require("../../../../utilities/constant");
 var OperationWaitingRoomDialog = (0, _mobxReact.observer)(function (_ref) {
   var children = _ref.children,
     params = _ref.params;
-  var store = (0, _react.useContext)(_context2.StoreContext);
-  (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('operation-waiting-room', function (dom, browserWindow) {
-              node = dom;
-              // browserWindow.focus(); // 这里打开的confirm dialog 不会走 openRendererWindow 中的 focus 逻辑，所以单独 focus 一下
-
-              browserWindow.setBounds({
-                width: 445,
-                height: 237
-              });
-              (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", {
-                  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('operation-waiting-room');
-    };
-  }, []);
+  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,
+    x: (params === null || params === void 0 ? void 0 : params.x) || 0,
+    y: (params === null || params === void 0 ? void 0 : params.y) || 0,
+    transparent: true
+  };
+  (0, _useElectron.useElectronDialog)({
+    dialogKey: _constant.DialogKey.WAITING_ROOM_OPERATION,
+    config: config,
+    children: children,
+    onOpened: function onOpened(_ref2) {
+      var browserWindow = _ref2.browserWindow;
+      browserWindow.setBounds({
+        width: 445,
+        height: 237
+      });
+    }
+  });
   return null;
 });
 var _default = exports["default"] = OperationWaitingRoomDialog;

package/lib/modules/dialog/components/operation-waiting-room/index.js

@@ -33,7 +33,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _mobxReact = require("mobx-react");
 var _react = _interopRequireWildcard(require("react"));
-var _context3 = require("../../context");
+var _store = require("../../store");
 var _reactRnd = require("react-rnd");
 var _electron = _interopRequireDefault(require("./electron"));
 var _platform = require("../../../../utilities/platform");
@@ -49,7 +49,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 var CloseWaitingRoomDialogContent = (0, _mobxReact.observer)(function (_ref) {
   var totalWaitingRoomUser = _ref.totalWaitingRoomUser;
   var t = (0, _i18n.useI18n)();
-  var _useContext = (0, _react.useContext)(_context3.StoreContext),
+  var _useContext = (0, _react.useContext)(_store.StoreContext),
     moveToMainRoomAllMember = _useContext.moveToMainRoomAllMember,
     closeWaitingRoomDialog = _useContext.closeWaitingRoomDialog;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
@@ -107,7 +107,7 @@ var CloseWaitingRoomDialogContent = (0, _mobxReact.observer)(function (_ref) {
 });
 var OperationWaitingRoomDialog = exports.OperationWaitingRoomDialog = (0, _mobxReact.observer)(function (_ref4) {
   var params = _ref4.params;
-  var store = (0, _react.useContext)(_context3.StoreContext);
+  var store = (0, _react.useContext)(_store.StoreContext);
   var containerWidth = window.innerWidth;
   var containerHeight = window.innerHeight;
   var _ref5 = (0, _env.isElectron)() ? window.runtime.browserWindow.getBounds() : {
@@ -131,7 +131,7 @@ var OperationWaitingRoomDialog = exports.OperationWaitingRoomDialog = (0, _mobxR
       })
     });
   }
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_context3.StoreContext.Provider, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_store.StoreContext.Provider, {
     value: store,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactRnd.Rnd, {
       "default": {