fcr-ui-scene 3.3.0 → 3.4.0

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, {});
+});

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

@@ -7,68 +7,49 @@ Object.defineProperty(exports, "__esModule", {
 exports.DeviceSettingElectronDialog = void 0;
 var _mobxReact = require("mobx-react");
 var _react = require("react");
-var _context = require("../../context");
+var _store = require("../../store");
 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 _useElectron = require("../../hooks/useElectron");
 var _jsxRuntime = require("react/jsx-runtime");
 var DeviceSettingElectronDialog = exports.DeviceSettingElectronDialog = (0, _mobxReact.observer)(function (_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 store = (0, _react.useContext)(_store.StoreContext);
+  var config = {
+    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
+  };
+  var dialogKey = _constant.DialogKey.DEVICE_SETTINGS;
+  (0, _useElectron.useElectronDialog)({
+    dialogKey: dialogKey,
+    config: config,
+    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: function onClose() {
+          return store.closeDialogByKey(dialogKey);
+        },
+        type: _windowHeader.WindowType.WINDOW,
+        withWindowPopUpButton: false
+      }), children]
+    })
+  });
   return null;
 });

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

@@ -12,13 +12,14 @@ 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 _constant = require("../../../../utilities/constant");
 var _jsxRuntime = require("react/jsx-runtime");
 var DeviceSettingDialog = (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;
@@ -31,7 +32,7 @@ var DeviceSettingDialog = (0, _mobxReact.observer)(function (_ref) {
     });
   }
   function handleCloseClick() {
-    store.closeDeviceSettingFromDialog();
+    store.closeDialogByKey(_constant.DialogKey.DEVICE_SETTINGS);
   }
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactRnd.Rnd, {
     "default": {

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,68 @@
+"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 _react = require("react");
+var _store = require("../../store");
+var _env = require("agora-foundation/lib/utilities/env");
+var _draggableDialog = require("agora-ui-foundation/lib/components/dialog/draggable-dialog");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _constant = require("../../../../utilities/constant");
+var _windowHeader = require("agora-ui-foundation/lib/components/window-header");
+var _useElectron = require("../../hooks/useElectron");
+require("../../index.css");
+var _platform = require("../../../../utilities/platform");
+var _jsxRuntime = require("react/jsx-runtime");
+var InviteElectronDialog = function InviteElectronDialog(_ref) {
+  var children = _ref.children;
+  var _useContext = (0, _react.useContext)(_store.StoreContext),
+    closeInviteDialog = _useContext.closeInviteDialog;
+  var config = {
+    titleBarStyle: 'hidden',
+    transparent: true,
+    maximizable: false,
+    minimizable: false,
+    fullscreenable: false,
+    width: 420,
+    height: 420
+  };
+  (0, _useElectron.useElectronDialog)({
+    dialogKey: _constant.DialogKey.INVITE,
+    config: config,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: (0, _classnames["default"])('invite-dialog'),
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_windowHeader.FcrWindowHeader, {
+        type: _windowHeader.WindowType.WINDOW,
+        enableMaximize: false,
+        enableMinimize: false,
+        withWindowPopUpButton: false,
+        onClose: closeInviteDialog,
+        showClose: (0, _platform.isWindows)()
+      }), children]
+    }),
+    onClose: closeInviteDialog
+  });
+  return null;
+};
+var InviteDialog = exports.InviteDialog = function InviteDialog(_ref2) {
+  var children = _ref2.children;
+  var _useContext2 = (0, _react.useContext)(_store.StoreContext),
+    closeInviteDialog = _useContext2.closeInviteDialog;
+  if ((0, _env.isElectron)()) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(InviteElectronDialog, {
+      children: children
+    });
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_draggableDialog.FcrDraggableModal, {
+    title: '',
+    onClose: closeInviteDialog,
+    width: 400,
+    height: 350,
+    rootClassName: "invite-dialog",
+    children: children
+  });
+};

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,88 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.LiveStreamingDialog = void 0;
+var _mobxReact = require("mobx-react");
+var _react = require("react");
+var _store = require("../../store");
+var _windowHeader = require("agora-ui-foundation/lib/components/window-header");
+var _env = require("agora-foundation/lib/utilities/env");
+var _reactRnd = require("react-rnd");
+var _constant = require("../../../../utilities/constant");
+var _useElectron = require("../../hooks/useElectron");
+var _jsxRuntime = require("react/jsx-runtime");
+var LiveStreamingDialogContent = (0, _mobxReact.observer)(function (_ref) {
+  var children = _ref.children,
+    title = _ref.title;
+  var _useContext = (0, _react.useContext)(_store.StoreContext),
+    closeLiveStreamingDialog = _useContext.closeLiveStreamingDialog;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: "fcr-livestreaming-dialog-wrapper",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_windowHeader.FcrWindowHeader, {
+      showClose: true,
+      title: title,
+      type: _windowHeader.WindowType.WINDOW,
+      onClose: closeLiveStreamingDialog,
+      withWindowPopUpButton: false
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "fcr-livestreaming-dialog-content",
+      children: children
+    })]
+  });
+});
+var LiveStreamingDialog = exports.LiveStreamingDialog = function LiveStreamingDialog(_ref2) {
+  var children = _ref2.children,
+    title = _ref2.title;
+  var defaultSize = {
+    x: (document.body.clientWidth - 440) / 2,
+    y: (document.body.clientHeight - 434) / 2,
+    width: 440,
+    height: 434
+  };
+  if ((0, _env.isElectron)()) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(LiveStreamingElectronDialog, {
+      title: title,
+      children: children
+    });
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactRnd.Rnd, {
+    "default": defaultSize,
+    maxHeight: 700,
+    maxWidth: 620,
+    minWidth: 440,
+    minHeight: 434,
+    bounds: '.fcr-layout-content',
+    dragHandleClassName: "frc-window-header",
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(LiveStreamingDialogContent, {
+      title: title,
+      children: children
+    })
+  });
+};
+var LiveStreamingElectronDialog = (0, _mobxReact.observer)(function (_ref3) {
+  var children = _ref3.children,
+    title = _ref3.title;
+  var config = {
+    frame: false,
+    fullscreen: false,
+    maximizable: false,
+    width: 440,
+    height: 434,
+    transparent: true
+  };
+  (0, _useElectron.useElectronDialog)({
+    dialogKey: _constant.DialogKey.LIVE_STREAMING,
+    config: config,
+    onClose: function onClose(store) {
+      store.closeDialogByKey(_constant.DialogKey.LIVE_STREAMING);
+    },
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(LiveStreamingDialogContent, {
+      title: title,
+      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": {