fcr-ui-scene 3.8.2 → 3.9.0-alpha

package/lib-es/modules/dialog/components/normal-window/index.js

@@ -1,49 +1,29 @@
-import { useCallback, useContext } from 'react';
+import { useContext } from 'react';
 import { observer } from 'mobx-react';
 import { StoreContext } from '../../store.base';
 import { isElectron } from 'agora-foundation/lib/utilities/env';
 import { createPortal } from 'react-dom';
 import { DialogContainer } from '../dialog-container';
 import { jsx as _jsx } from "react/jsx-runtime";
-export var NormalWindow = observer(function (_ref) {
-  var dialogKey = _ref.dialogKey,
-    dialogId = _ref.dialogId,
-    body = _ref.body,
-    title = _ref.title,
-    actions = _ref.actions,
-    closable = _ref.closable,
-    autoHeight = _ref.autoHeight,
-    width = _ref.width,
-    height = _ref.height,
-    header = _ref.header,
-    minWidth = _ref.minWidth,
-    minHeight = _ref.minHeight,
-    maxWidth = _ref.maxWidth,
-    maxHeight = _ref.maxHeight,
-    hasSystemShadow = _ref.hasSystemShadow,
-    showTopIcon = _ref.showTopIcon;
+export var NormalWindow = observer(function (props) {
+  var dialogKey = props.dialogKey,
+    dialogId = props.dialogId,
+    _props$closable = props.closable,
+    closable = _props$closable === void 0 ? true : _props$closable,
+    actions = props.actions,
+    title = props.title,
+    showTopIcon = props.showTopIcon,
+    body = props.body;
   var _useContext = useContext(StoreContext),
-    getDialogRootNode = _useContext.getDialogRootNode,
-    handleDialogClose = _useContext.handleDialogClose;
-  var onClose = useCallback(function () {
-    handleDialogClose(dialogId);
-  }, [dialogId]);
+    getDialogRootNode = _useContext.getDialogRootNode;
   var container = /*#__PURE__*/_jsx(DialogContainer, {
-    title: title || header,
-    dialogKey: dialogKey,
+    title: title,
     actions: actions,
-    onClose: onClose,
     closable: closable,
-    width: width,
-    height: height,
-    minWidth: minWidth,
-    minHeight: minHeight,
-    maxWidth: maxWidth,
-    maxHeight: maxHeight,
-    autoHeight: autoHeight,
-    hasSystemShadow: hasSystemShadow,
     showTopIcon: showTopIcon,
-    children: body
+    dialogKey: dialogKey,
+    dialogId: dialogId,
+    body: body
   });
   if (isElectron()) {
     var dialogRoot = getDialogRootNode(dialogKey, dialogId);

package/lib-es/modules/dialog/dialogConfig/browser.js

@@ -0,0 +1,4 @@
+export var defaultBrowserDialogConfig = {
+  enableResizing: false,
+  onlyTitleCanTriggerDrag: true
+};

package/lib-es/modules/dialog/dialogConfig/electron.js

@@ -0,0 +1,8 @@
+export var defaultElectronWindowConfig = {
+  transparent: true,
+  frame: false,
+  resizable: false,
+  needResizeObserver: true,
+  hasShadow: true,
+  fullscreen: false
+};

package/lib-es/modules/dialog/dialogs/annotation-mask/index.js

@@ -0,0 +1,34 @@
+import { useContext } from 'react';
+import { observer } from 'mobx-react';
+import { StoreContext } from '../../store.base';
+import { createPortal } from 'react-dom';
+export var title = 'Annotation mask';
+export var electronWindowConfig = {
+  y: 0,
+  x: 0,
+  width: 200,
+  height: 200,
+  maximizable: false,
+  minimizable: false,
+  hasShadow: false,
+  useContentSize: true,
+  resizable: false,
+  transparent: true,
+  backgroundColor: '#00000000',
+  frame: false,
+  hiddenInMissionControl: true,
+  skipTaskbar: true,
+  title: title,
+  // type: 'panel',
+  enableLargerThanScreen: true,
+  needResizeObserver: false
+};
+export var AnnotationMask = observer(function (_ref) {
+  var dialogKey = _ref.dialogKey,
+    dialogId = _ref.dialogId,
+    children = _ref.children;
+  var _useContext = useContext(StoreContext),
+    getDialogRootNode = _useContext.getDialogRootNode;
+  var dialogRoot = getDialogRootNode(dialogKey, dialogId);
+  return /*#__PURE__*/createPortal(children, dialogRoot);
+});

package/lib-es/modules/dialog/dialogs/annotation-tool/index.js

@@ -1,47 +1,31 @@
+import { useContext } from 'react';
 import { observer } from 'mobx-react';
-import { NormalWindow } from '../../components/normal-window';
-import { jsx as _jsx } from "react/jsx-runtime";
-export var title = 'Annotation tool bar';
-export var windowConfig = {
+import { createPortal } from 'react-dom';
+import { StoreContext } from '../../store.base';
+export var title = 'Annotation toolbar';
+export var electronWindowConfig = {
   y: 0,
   x: 0,
   maximizable: false,
-  backgroundColor: '#00000000',
-  hiddenInMissionControl: true,
+  minimizable: false,
   hasShadow: false,
   useContentSize: true,
-  minimizable: false,
   resizable: false,
-  title: title,
-  type: 'panel',
+  transparent: true,
+  backgroundColor: '#00000000',
+  frame: false,
+  hiddenInMissionControl: true,
   skipTaskbar: true,
-  width: 800,
-  height: 100,
-  movable: false,
-  transparent: true
-};
-var hooksConfig = {
-  hasCustomShadow: false,
-  disableShortcutClose: true,
-  alwaysOnTop: 'screen-saver',
-  fullScreen: true,
-  ignoreMouseEvents: true
+  title: title,
+  needResizeObserver: false
+  // type: 'panel',
 };
-export var AnnotationBarDialog = observer(function (_ref) {
+export var AnnotationTool = observer(function (_ref) {
   var dialogKey = _ref.dialogKey,
     dialogId = _ref.dialogId,
     children = _ref.children;
-  // const body = (
-  //   <HotAreaContainer width={800} height={90} dialogKey={FcrUIDialogKey.ANNOTATION_TOOL}>
-  //     {children}
-  //   </HotAreaContainer>
-  // );
-
-  var body = children;
-  return /*#__PURE__*/_jsx(NormalWindow, {
-    dialogKey: dialogKey,
-    dialogId: dialogId,
-    title: title,
-    body: body
-  });
+  var _useContext = useContext(StoreContext),
+    getDialogRootNode = _useContext.getDialogRootNode;
+  var dialogRoot = getDialogRootNode(dialogKey, dialogId);
+  return /*#__PURE__*/createPortal(children, dialogRoot);
 });

package/lib-es/modules/dialog/dialogs/caption/index.js

@@ -1,35 +1,41 @@
+import "core-js/modules/es.symbol.js";
+import "core-js/modules/es.array.filter.js";
+import "core-js/modules/es.array.for-each.js";
+import "core-js/modules/es.array.push.js";
+import "core-js/modules/es.object.define-properties.js";
+import "core-js/modules/es.object.define-property.js";
+import "core-js/modules/es.object.get-own-property-descriptor.js";
+import "core-js/modules/es.object.get-own-property-descriptors.js";
+import "core-js/modules/es.object.keys.js";
+import "core-js/modules/es.object.to-string.js";
+import "core-js/modules/esnext.iterator.constructor.js";
+import "core-js/modules/esnext.iterator.filter.js";
+import "core-js/modules/esnext.iterator.for-each.js";
+import "core-js/modules/web.dom-collections.for-each.js";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+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) { _defineProperty(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; }
 import { NormalWindow } from '../../components/normal-window';
 import { jsx as _jsx } from "react/jsx-runtime";
 var title = 'Caption Translation';
-export var windowConfig = {
-  title: title,
-  frame: false,
-  maximizable: false,
-  minimizable: false,
-  fullscreenable: false,
-  trafficLightPosition: {
-    x: 0,
-    y: 0
-  },
-  resizable: false,
+var baseDialogConfig = {
   width: 750,
   height: 92,
-  maxHeight: 132,
-  alwaysOnTop: true
+  maxHeight: 132
 };
+export var electronWindowConfig = _objectSpread(_objectSpread({}, baseDialogConfig), {}, {
+  alwaysOnTop: true
+});
+export var webDialogConfig = baseDialogConfig;
 export var CaptionDialog = function CaptionDialog(props) {
   var dialogKey = props.dialogKey,
     dialogId = props.dialogId,
     children = props.children;
   return /*#__PURE__*/_jsx(NormalWindow, {
-    width: windowConfig.width,
-    height: windowConfig.height,
     dialogKey: dialogKey,
     dialogId: dialogId,
     showTopIcon: false,
     closable: false,
-    body: children,
-    maxHeight: windowConfig.maxHeight,
-    hasSystemShadow: true
+    body: children
   });
 };

package/lib-es/modules/dialog/dialogs/chat/index.js

@@ -1,9 +1,31 @@
-import { useI18n } from 'agora-ui-foundation/lib/i18n';
+import "core-js/modules/es.symbol.js";
+import "core-js/modules/es.array.filter.js";
+import "core-js/modules/es.array.for-each.js";
+import "core-js/modules/es.array.push.js";
+import "core-js/modules/es.object.define-properties.js";
+import "core-js/modules/es.object.define-property.js";
+import "core-js/modules/es.object.get-own-property-descriptor.js";
+import "core-js/modules/es.object.get-own-property-descriptors.js";
+import "core-js/modules/es.object.keys.js";
+import "core-js/modules/es.object.to-string.js";
+import "core-js/modules/esnext.iterator.constructor.js";
+import "core-js/modules/esnext.iterator.filter.js";
+import "core-js/modules/esnext.iterator.for-each.js";
+import "core-js/modules/web.dom-collections.for-each.js";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+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) { _defineProperty(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; }
 import { observer } from 'mobx-react';
 import { NormalWindow } from '../../components/normal-window';
 import { Fragment as _Fragment, jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
-var width = 800;
-var height = 600;
+var baseDialogConfig = {
+  width: 350,
+  minWidth: 350,
+  maxWidth: 550,
+  height: 506,
+  minHeight: 370,
+  maxHeight: 760
+};
 export var ChatDialog = observer(function (_ref) {
   var dialogKey = _ref.dialogKey,
     dialogId = _ref.dialogId,
@@ -11,32 +33,6 @@ export var ChatDialog = observer(function (_ref) {
     children = _ref.children,
     header = _ref.header,
     headerActions = _ref.headerActions;
-  var transI18n = 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
-  };
-  var hooksConfig = {
-    hasCustomShadow: false
-  };
-
-  // const isChatRoomConnected = chatState === FcrChatRoomConnectionState.Connected
-
-  // const title = isChatRoomConnected
-  //   ? transI18n('fmt_chat_label_chat')
-  //   : transI18n('fmt_aside_status_connecting');
-
-  // const height = store.waitingRoomState ? 630 : 600;
-  var height = 630;
   var actions = /*#__PURE__*/_jsxs(_Fragment, {
     children: [chatActions, headerActions]
   });
@@ -44,31 +40,14 @@ export var ChatDialog = observer(function (_ref) {
     dialogId: dialogId,
     dialogKey: dialogKey,
     body: children,
-    header: header,
-    actions: actions,
-    bodyStyle: {
-      zIndex: 11
-    },
-    width: width,
-    height: height,
-    hasSystemShadow: true
+    title: header,
+    actions: actions
   });
 });
-export var windowConfig = {
-  frame: false,
-  maximizable: false,
-  minimizable: false,
-  fullscreenable: false,
-  trafficLightPosition: {
-    x: 0,
-    y: 0
-  },
+export var electronWindowConfig = _objectSpread(_objectSpread({}, baseDialogConfig), {}, {
   resizable: true,
-  width: width,
-  height: height,
-  minWidth: 400,
-  minHeight: 400,
-  maxWidth: 1100,
-  maxHeight: 900,
   alwaysOnTop: true
-};
+});
+export var webDialogConfig = _objectSpread(_objectSpread({}, baseDialogConfig), {}, {
+  enableResizing: true
+});

package/lib-es/modules/dialog/dialogs/confirm/index.css

@@ -1,7 +1,7 @@
 .fcr-event-confirm-wrapper.fcr-event-confirm-container {
-  width: 100vw;
+  /* width: 100vw;
   height: 100vh;
-  position: absolute;
+  position: absolute; */
   top: 0;
   left: 0;
   z-index: 2000;
@@ -11,14 +11,3 @@
 .fcr-event-confirm-wrapper.fcr-event-confirm-container div {
   pointer-events: all;
 }
-
-.fcr-confirm-dialog-wrapper {
-  background: #fff;
-}
-
-.fcr-confirm-dialog-wrapper_web {
-  background: var(--fcr_mobile_ui_scene_color_popup_fill2);
-  border-radius: var(--fcr_cornerradius_xl);
-  box-shadow: var(--fcr_web_light_dropup);
-  border: 1px solid var(--fcr_ui_scene_line1);
-}

package/lib-es/modules/dialog/dialogs/confirm/index.js

@@ -10,22 +10,20 @@ import { ConfirmWindow } from '../../components/confirm';
 import { isElectron } from 'agora-foundation/lib/utilities/env';
 import './index.css';
 import { jsx as _jsx } from "react/jsx-runtime";
-export var windowConfig = {
+export var electronWindowConfig = {
   maximizable: false,
   minimizable: false,
-  resizable: false,
   fullscreen: false,
   backgroundColor: '#00000000',
   hiddenInMissionControl: true,
   hasShadow: false,
   useContentSize: true,
   title: 'Confirm',
-  alwaysOnTop: true,
   skipTaskbar: true,
   type: 'panel',
-  frame: false,
-  transparent: true,
-  show: false
+  show: false,
+  needResizeObserver: false,
+  alwaysOnTop: true
 };
 export var ConfirmDialog = observer(function (_ref) {
   var dialogId = _ref.dialogId,

package/lib-es/modules/dialog/dialogs/confirm-leave-meeting/index.js

@@ -1,38 +1,18 @@
 import { NormalWindow } from '../../components/normal-window';
 import { jsx as _jsx } from "react/jsx-runtime";
-export var ConfirmLeaveMeetingDialog = function ConfirmLeaveMeetingDialog(_ref) {
+export var ConfirmEndMeetingDialog = function ConfirmEndMeetingDialog(_ref) {
   var dialogId = _ref.dialogId,
     dialogKey = _ref.dialogKey,
     children = _ref.children;
-  var config = {
-    fullscreen: false,
-    maximizable: false,
-    width: 255,
-    height: 158,
-    resizable: false
-  };
   var body = children;
   return /*#__PURE__*/_jsx(NormalWindow, {
     dialogKey: dialogKey,
     dialogId: dialogId,
-    autoHeight: true,
-    width: config.width,
-    height: config.height,
     closable: false,
     body: body
   });
 };
-export var windowConfig = {
-  frame: false,
-  maximizable: false,
-  minimizable: false,
-  fullscreenable: false,
-  trafficLightPosition: {
-    x: 0,
-    y: 0
-  },
-  resizable: false,
-  width: 255,
-  height: 158,
+export var webDialogConfig = {};
+export var electronWindowConfig = {
   alwaysOnTop: true
 };

package/lib-es/modules/dialog/dialogs/connection-gateway/index.js

@@ -1,40 +1,17 @@
 import { NormalWindow } from '../../components/normal-window';
-import { transI18n } from 'agora-ui-foundation/lib/i18n';
 import { jsx as _jsx } from "react/jsx-runtime";
-var title = transI18n('fmt_toolbar_label_connectaudio');
 export var ConnectionGatewayDialog = function ConnectionGatewayDialog(_ref) {
   var dialogId = _ref.dialogId,
     dialogKey = _ref.dialogKey,
-    children = _ref.children,
-    params = _ref.params;
-  var width = 400;
-  var height = (params === null || params === void 0 ? void 0 : params.type) === 'phone' ? 500 : 350;
+    children = _ref.children;
   return /*#__PURE__*/_jsx(NormalWindow, {
-    width: width,
-    height: height,
     dialogId: dialogId,
     dialogKey: dialogKey,
-    autoHeight: true,
     body: children,
     title: false
   });
 };
-export var windowConfig = {
-  title: title,
-  frame: false,
-  maximizable: false,
-  minimizable: false,
-  fullscreenable: false,
-  trafficLightPosition: {
-    x: 0,
-    y: 0
-  },
-  useContentSize: true,
-  resizable: false,
-  type: 'panel',
-  hasShadow: false,
-  transparent: true,
-  width: 400 + 30,
-  height: 500 + 30,
-  backgroundColor: '#00000000'
-};
+export var webDialogConfig = {
+  onlyTitleCanTriggerDrag: false
+};
+export var electronWindowConfig = {};

package/lib-es/modules/dialog/dialogs/control-bar/index.js

@@ -2,21 +2,19 @@ import { memo, useContext } from 'react';
 import { StoreContext } from '../../store.base';
 import { createPortal } from 'react-dom';
 export var title = 'Control Bar';
-export var windowConfig = {
+export var electronWindowConfig = {
   y: 0,
   x: 0,
   maximizable: false,
   minimizable: false,
   hasShadow: false,
   useContentSize: true,
-  resizable: false,
-  transparent: true,
   backgroundColor: '#00000000',
-  frame: false,
   hiddenInMissionControl: true,
   skipTaskbar: true,
   title: title,
-  type: 'panel'
+  type: 'panel',
+  needResizeObserver: false
 };
 export var ControlBarDialog = /*#__PURE__*/memo(function (_ref) {
   var dialogId = _ref.dialogId,

package/lib-es/modules/dialog/dialogs/control-bar-leave-meeting/index.js

@@ -5,29 +5,11 @@ export var ControlBarLeaveMeetingDialog = function ControlBarLeaveMeetingDialog(
     dialogId = _ref.dialogId,
     children = _ref.children;
   var body = children;
-  var config = {
-    width: 320,
-    height: 172
-  };
   return /*#__PURE__*/_jsx(NormalWindow, {
     dialogId: dialogId,
     dialogKey: dialogKey,
-    width: config.width,
-    height: config.height,
     body: body
   });
 };
-export var windowConfig = {
-  frame: false,
-  maximizable: false,
-  minimizable: false,
-  fullscreenable: false,
-  trafficLightPosition: {
-    x: 0,
-    y: 0
-  },
-  resizable: true,
-  needResizeObserver: true,
-  width: 300,
-  height: 172
-};
+export var webDialogConfig = {};
+export var electronWindowConfig = {};

package/lib-es/modules/dialog/dialogs/device-setting/index.js

@@ -2,8 +2,6 @@ import { useI18n } from 'agora-ui-foundation/lib/i18n';
 import './index.css';
 import { NormalWindow } from '../../components/normal-window';
 import { jsx as _jsx } from "react/jsx-runtime";
-var width = 580;
-var height = 600;
 var DeviceSettingDialog = function DeviceSettingDialog(_ref) {
   var dialogId = _ref.dialogId,
     dialogKey = _ref.dialogKey,
@@ -14,23 +12,9 @@ var DeviceSettingDialog = function DeviceSettingDialog(_ref) {
     dialogId: dialogId,
     dialogKey: dialogKey,
     body: children,
-    title: title,
-    width: width,
-    height: height,
-    autoHeight: false // TODO: 既然设置 height 了，为什么还要设置 autoHeight 为 false？
+    title: title
   });
 };
-export var windowConfig = {
-  frame: false,
-  fullscreen: false,
-  maximizable: false,
-  trafficLightPosition: {
-    x: 10,
-    y: 60
-  },
-  width: width,
-  height: height,
-  resizable: false,
-  transparent: true // TODO: electronContentHeight 多减去了30px 的阴影，所以这里需要设置 transparent 为 true  来消除对内容的遮挡   有点不合理  暂时先这样处理  应该 DialogContainerBody进行优化，
-};
+export var webDialogConfig = {};
+export var electronWindowConfig = {};
 export default DeviceSettingDialog;

package/lib-es/modules/dialog/dialogs/{end-meeting → end-meeting-notice}/index.js

@@ -1,7 +1,7 @@
 import { LoginConfirmDialog } from 'agora-ui-foundation/lib/components/comfirm-dialog';
 import { NormalWindow } from '../../components/normal-window';
 import { jsx as _jsx } from "react/jsx-runtime";
-export var EndMeetingDialog = function EndMeetingDialog(_ref) {
+export var ExitMeetingNoticeDialog = function ExitMeetingNoticeDialog(_ref) {
   var dialogId = _ref.dialogId,
     dialogKey = _ref.dialogKey,
     params = _ref.params;
@@ -12,13 +12,6 @@ export var EndMeetingDialog = function EndMeetingDialog(_ref) {
     btnTxt = _ref2.btnTxt,
     key = _ref2.key,
     onConfirm = _ref2.onConfirm;
-  var config = {
-    width: 330,
-    height: 340,
-    fullscreen: false,
-    maximizable: false,
-    resizable: false
-  };
   var body = /*#__PURE__*/_jsx(LoginConfirmDialog, {
     id: key,
     title: title,
@@ -29,18 +22,15 @@ export var EndMeetingDialog = function EndMeetingDialog(_ref) {
     onConfirm: onConfirm
   });
   return /*#__PURE__*/_jsx(NormalWindow, {
-    width: config.width,
-    height: config.height,
     closable: false,
     dialogId: dialogId,
     dialogKey: dialogKey,
     body: body
   });
 };
-export var windowConfig = {
+export var webDialogConfig = {};
+export var electronWindowConfig = {
   frame: false,
-  width: 330,
-  height: 340,
   fullscreen: false,
   maximizable: false,
   resizable: false,