fcr-ui-scene 3.4.0 → 3.4.2

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

@@ -5,49 +5,33 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.InterpreterElectronDialog = void 0;
-var _mobxReact = require("mobx-react");
-var _react = require("react");
-var _store = require("../../store");
-var _i18n = require("agora-ui-foundation/lib/i18n");
 var _constant = require("../../../../utilities/constant");
-var _windowHeader = require("agora-ui-foundation/lib/components/window-header");
 var _useElectron = require("../../hooks/useElectron");
-var _jsxRuntime = require("react/jsx-runtime");
-var config = {
-  frame: false,
-  fullscreen: false,
-  maximizable: false,
-  // titleBarStyle: 'hidden',
-  trafficLightPosition: {
-    x: 10,
-    y: 60
-  },
-  width: 684,
-  height: 438,
-  minWidth: 620,
-  minHeight: 300,
-  maxWidth: 800
-};
-var InterpreterElectronDialog = exports.InterpreterElectronDialog = (0, _mobxReact.observer)(function (_ref) {
+var _i18n = require("agora-ui-foundation/lib/i18n");
+var InterpreterElectronDialog = exports.InterpreterElectronDialog = function InterpreterElectronDialog(_ref) {
   var children = _ref.children;
-  var t = (0, _i18n.useI18n)();
-  var store = (0, _react.useContext)(_store.StoreContext);
-  var handleCloseClick = function handleCloseClick() {
-    store.closeInterpreterDialog();
+  var transI18n = (0, _i18n.useI18n)();
+  var config = {
+    fullscreen: false,
+    maximizable: false,
+    trafficLightPosition: {
+      x: 10,
+      y: 60
+    },
+    width: 684,
+    height: 438,
+    minWidth: 620,
+    minHeight: 300,
+    maxWidth: 1020,
+    maxHeight: 900,
+    title: transI18n('fmt_ai_transcriptions_setting_label_translator'),
+    resizable: true
   };
   (0, _useElectron.useElectronDialog)({
     config: config,
-    dialogKey: _constant.DialogKey.INTERPRETER,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-      className: "fcr-simultaneous-interpretation-dialog-wrapper",
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_windowHeader.FcrWindowHeader, {
-        showClose: true,
-        title: t('fmt_interpretation_setting_controller_option_simultaneous_interpretation'),
-        onClose: handleCloseClick,
-        type: _windowHeader.WindowType.WINDOW,
-        withWindowPopUpButton: false
-      }), children]
-    })
+    dialogKey: _constant.FcrUIDialogKey.INTERPRETER,
+    children: children,
+    hasCustomShadow: false
   });
   return null;
-});
+};

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

@@ -1,62 +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 _store = require("../../store");
 require("./index.css");
+var _dialogContainer = _interopRequireDefault(require("../dialog-container"));
+var _constant = require("../../../../utilities/constant");
 var _jsxRuntime = require("react/jsx-runtime");
-var InterpreterDialog = (0, _mobxReact.observer)(function (_ref) {
+var InterpreterDialog = function InterpreterDialog(_ref) {
   var children = _ref.children;
   var t = (0, _i18n.useI18n)();
-  var store = (0, _react.useContext)(_store.StoreContext);
-  var containerRef = (0, _react.useRef)(null);
-  var windowWidth = window.innerWidth;
-  var windowHeight = window.innerHeight;
-  var width = 684;
-  var height = 438;
-  var x = windowWidth / 2 - width / 2;
+  var container = /*#__PURE__*/(0, _jsxRuntime.jsx)(_dialogContainer["default"], {
+    title: t('fmt_interpretation_setting_controller_option_simultaneous_interpretation'),
+    width: 684,
+    height: 438,
+    dialogKey: _constant.FcrUIDialogKey.INTERPRETER,
+    children: children
+  });
   if ((0, _env.isElectron)()) {
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_electron.InterpreterElectronDialog, {
-      children: children
+      children: container
     });
   }
-  function handleCloseClick() {
-    store.closeInterpreterDialog();
-  }
-  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: 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_interpretation_setting_controller_option_simultaneous_interpretation'),
-        onClose: handleCloseClick,
-        type: _windowHeader.WindowType.WINDOW,
-        withWindowPopUpButton: false
-        // otherActionsAfter={<UserQueue />}
-      }), children]
-    })
-  });
-});
+  return container;
+};
 var _default = exports["default"] = InterpreterDialog;

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

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

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

@@ -5,29 +5,31 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ChatElectronDialog = void 0;
-var _mobxReact = require("mobx-react");
 var _constant = require("../../../../utilities/constant");
-var _ = require(".");
-var _platform = require("../../../../utilities/platform");
 var _useElectron = require("../../hooks/useElectron");
+var _i18n = require("agora-ui-foundation/lib/i18n");
 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 ChatElectronDialog = exports.ChatElectronDialog = function ChatElectronDialog(_ref) {
+  var children = _ref.children;
+  var transI18n = (0, _i18n.useI18n)();
+  var config = {
+    width: 800,
+    height: 600,
+    minWidth: 400,
+    minHeight: 400,
+    maxWidth: 1100,
+    maxHeight: 900,
+    fullscreen: false,
+    maximizable: false,
+    title: transI18n('fmt_chat_window_title'),
+    resizable: true,
+    hasShadow: true
+  };
   (0, _useElectron.useElectronDialog)({
     config: config,
-    dialogKey: _constant.DialogKey.CHAT,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.ChatDialogContent, {
-      chatAction: chatAction,
-      children: children
-    })
+    dialogKey: _constant.FcrUIDialogKey.CHAT,
+    children: children,
+    hasCustomShadow: false
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {});
-});
+};

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

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

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

@@ -1,66 +1,60 @@
 "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.ChatDialogContent = exports.ChatDialog = void 0;
+exports.ChatDialog = void 0;
 var _env = require("agora-foundation/lib/utilities/env");
-var _mobxReact = require("mobx-react");
 var _react = require("react");
-var _reactRnd = require("react-rnd");
 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("fcr-core/lib/room-control/chatroom-control/type");
+var _dialogContainer = _interopRequireDefault(require("../dialog-container"));
+var _constant = require("../../../../utilities/constant");
+var _tooltip = require("agora-ui-foundation/lib/components/tooltip");
+var _iconButton = require("agora-ui-foundation/lib/components/icon-button");
+var _type2 = require("agora-ui-foundation/lib/components/icon/type");
 var _jsxRuntime = require("react/jsx-runtime");
-var ChatDialogContent = exports.ChatDialogContent = (0, _mobxReact.observer)(function (_ref) {
+var ChatDialog = exports.ChatDialog = function ChatDialog(_ref) {
   var children = _ref.children,
     chatAction = _ref.chatAction;
   var _useContext = (0, _react.useContext)(_store.StoreContext),
     closeChatFromDialog = _useContext.closeChatFromDialog,
     moveChatFromDialogToAside = _useContext.moveChatFromDialogToAside,
-    chatRoomState = _useContext.chatRoomState;
+    chatRoomState = _useContext.chatRoomState,
+    waitingRoomState = _useContext.waitingRoomState;
   var transI18n = (0, _i18n.useI18n)();
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-    className: "fcr-chat-dialog-wrapper",
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_windowHeader.FcrWindowHeader, {
-      showClose: true,
-      rootClassName: 'chat-can-draggable',
-      title: chatRoomState === _type.FcrChatRoomConnectionState.Connected ? transI18n('fmt_chat_label_chat') : transI18n('fmt_aside_status_connecting'),
-      onTypeChange: moveChatFromDialogToAside,
-      onClose: closeChatFromDialog,
-      otherActions: chatAction,
-      type: _windowHeader.WindowType.WINDOW
-    }), children]
+  var container = /*#__PURE__*/(0, _jsxRuntime.jsx)(_dialogContainer["default"], {
+    title: chatRoomState === _type.FcrChatRoomConnectionState.Connected ? transI18n('fmt_chat_label_chat') : transI18n('fmt_aside_status_connecting'),
+    actions: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      children: [chatAction, /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.FcrToolTip, {
+        content: transI18n('fmt_uimanager_option_mergeview'),
+        mouseEnterDelay: 0,
+        trigger: "hover",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_iconButton.FcrIconButton, {
+          icon: _type2.FcrIconType.FCR_WINDOWPAGE_BIGGER,
+          onClick: moveChatFromDialogToAside,
+          className: "frc-window-header__icon fcr-no-drag",
+          iconColors: {
+            iconPrimary: 'var(--fcr_ui_scene_icontext1)'
+          }
+        })
+      })]
+    }),
+    width: 800,
+    height: waitingRoomState ? 630 : 600,
+    dialogKey: _constant.FcrUIDialogKey.CHAT,
+    onClose: closeChatFromDialog,
+    children: children
   });
-});
-var ChatDialog = exports.ChatDialog = (0, _mobxReact.observer)(function (_ref2) {
-  var children = _ref2.children,
-    chatAction = _ref2.chatAction;
   if ((0, _env.isElectron)()) {
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_electron.ChatElectronDialog, {
       chatAction: chatAction,
-      children: children
+      children: container
     });
   }
-  var width = window.innerWidth;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactRnd.Rnd, {
-    "default": {
-      width: 320,
-      height: 350,
-      x: width / 2 - 320 / 2,
-      y: 0
-    },
-    bounds: '.fcr-layout-content',
-    cancel: ".frc-window-header__operates",
-    minWidth: 320,
-    minHeight: 350,
-    dragHandleClassName: "chat-can-draggable",
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ChatDialogContent, {
-      chatAction: chatAction,
-      children: children
-    })
-  });
-});
+  return container;
+};

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

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

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

@@ -1,54 +1,84 @@
 "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 _store = require("../../store");
-var _constant = require("../../../../utilities/constant");
-var _useElectron = require("../../hooks/useElectron");
+var _context2 = require("../../context");
+var _reactDom = require("react-dom");
+var _renderer = require("../../../../utilities/renderer");
 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)(_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)
-      });
-    }
-  });
+  var store = (0, _react.useContext)(_context2.StoreContext);
   (0, _react.useEffect)(function () {
-    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 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,
+              width: (params === null || params === void 0 ? void 0 : params.width) || 415,
+              height: (params === null || params === void 0 ? void 0 : params.height) || 190,
+              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)
+            });
+          case 9:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }))();
+    return function () {
+      node && (0, _reactDom.unmountComponentAtNode)(node);
+      window.runtime.closeRendererWindow('confirm-dialog');
+    };
+  }, []);
+  return null;
 });
 var _default = exports["default"] = ConfirmElectronDialog;

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

@@ -5,16 +5,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ConfirmDialog = void 0;
-var _mobxReact = require("mobx-react");
 var _useElectron = require("../../hooks/useElectron");
 var _constant = require("../../../../utilities/constant");
 var _env = require("agora-foundation/lib/utilities/env");
 var _jsxRuntime = require("react/jsx-runtime");
-var ConfirmDialog = exports.ConfirmDialog = (0, _mobxReact.observer)(function (_ref) {
+var ConfirmDialog = exports.ConfirmDialog = function ConfirmDialog(_ref) {
   var children = _ref.children;
   var config = {
-    frame: false,
-    transparent: true,
     maximizable: false,
     backgroundColor: '#00000000',
     hiddenInMissionControl: true,
@@ -25,19 +22,21 @@ var ConfirmDialog = exports.ConfirmDialog = (0, _mobxReact.observer)(function (_
     scroll: false,
     alwaysOnTop: true,
     fullscreen: false,
-    resizable: false
+    resizable: false,
+    skipTaskbar: true
   };
   (0, _env.isElectron)() && (0, _useElectron.useElectronDialog)({
     config: config,
-    dialogKey: _constant.DialogKey.CONFIRM,
+    dialogKey: _constant.FcrUIDialogKey.CONFIRM,
     children: children,
     fullScreen: true,
     scroll: false,
     alwaysOnTop: true,
     ignoreMouseEvents: true,
-    focus: true
+    focus: true,
+    hasCustomShadow: false
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
     children: !(0, _env.isElectron)() && children
   });
-});
+};

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

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

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

@@ -5,50 +5,29 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ConnectionGatewayElectronDialog = void 0;
-var _mobxReact = require("mobx-react");
-var _react = require("react");
-var _store = require("../../store");
 var _constant = require("../../../../utilities/constant");
 var _useElectron = require("../../hooks/useElectron");
-var ConnectionGatewayElectronDialog = exports.ConnectionGatewayElectronDialog = (0, _mobxReact.observer)(function (_ref) {
-  var children = _ref.children,
-    params = _ref.params;
-  var store = (0, _react.useContext)(_store.StoreContext);
-  var height = store.currentDialogBounds.height;
-  var browserRef = (0, _react.useRef)();
+var _i18n = require("agora-ui-foundation/lib/i18n");
+var ConnectionGatewayElectronDialog = exports.ConnectionGatewayElectronDialog = function ConnectionGatewayElectronDialog(_ref) {
+  var children = _ref.children;
+  var transI18n = (0, _i18n.useI18n)();
   var config = {
-    modal: true,
-    frame: false,
+    maximizable: false,
+    minimizable: false,
+    fullscreenable: false,
     width: 400,
-    height: height,
+    height: 500,
     trafficLightPosition: {
       x: 0,
       y: 0
     },
-    resizable: false,
-    transparent: true,
-    fullscreen: false
+    title: transI18n('fmt_toolbar_label_connectaudio'),
+    resizable: false
   };
   (0, _useElectron.useElectronDialog)({
-    dialogKey: _constant.DialogKey.CONNECTION_GATEWAY,
+    dialogKey: _constant.FcrUIDialogKey.CONNECTION_GATEWAY,
     config: config,
-    children: children,
-    onOpened: function onOpened(_ref2) {
-      var browserWindow = _ref2.browserWindow;
-      browserRef.current = browserWindow;
-      browserWindow.setBounds({
-        height: params.type === 'phone' ? 500 : 350,
-        width: 400
-      });
-    }
+    children: children
   });
-  (0, _react.useEffect)(function () {
-    var _browserRef$current;
-    if (!height) return;
-    (_browserRef$current = browserRef.current) === null || _browserRef$current === void 0 || _browserRef$current.setBounds({
-      width: 400,
-      height: height
-    }, true);
-  }, [height]);
   return null;
-});
+};

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

@@ -8,7 +8,9 @@
   overflow: hidden;
 }
 .connection-gateway-dialog.electron {
+  border: none;
   box-shadow: none;
+  border-radius: 0;
 }
 .connection-gateway-dialog_close {
   width: 14px;

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

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