fcr-ui-scene 3.8.1-beta → 3.8.2

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

@@ -0,0 +1,74 @@
+import { useI18n } from 'agora-ui-foundation/lib/i18n';
+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;
+export var ChatDialog = observer(function (_ref) {
+  var dialogKey = _ref.dialogKey,
+    dialogId = _ref.dialogId,
+    chatActions = _ref.chatActions,
+    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]
+  });
+  return /*#__PURE__*/_jsx(NormalWindow, {
+    dialogId: dialogId,
+    dialogKey: dialogKey,
+    body: children,
+    header: header,
+    actions: actions,
+    bodyStyle: {
+      zIndex: 11
+    },
+    width: width,
+    height: height,
+    hasSystemShadow: true
+  });
+});
+export var windowConfig = {
+  frame: false,
+  maximizable: false,
+  minimizable: false,
+  fullscreenable: false,
+  trafficLightPosition: {
+    x: 0,
+    y: 0
+  },
+  resizable: true,
+  width: width,
+  height: height,
+  minWidth: 400,
+  minHeight: 400,
+  maxWidth: 1100,
+  maxHeight: 900,
+  alwaysOnTop: true
+};

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

@@ -0,0 +1,24 @@
+.fcr-event-confirm-wrapper.fcr-event-confirm-container {
+  width: 100vw;
+  height: 100vh;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 2000;
+  pointer-events: none;
+}
+
+.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

@@ -0,0 +1,51 @@
+import "core-js/modules/es.array.map.js";
+import "core-js/modules/es.object.to-string.js";
+import "core-js/modules/esnext.iterator.constructor.js";
+import "core-js/modules/esnext.iterator.map.js";
+import { observer } from 'mobx-react';
+import { useContext } from 'react';
+import { StoreContext } from '../../store.base';
+import { createPortal } from 'react-dom';
+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 = {
+  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
+};
+export var ConfirmDialog = observer(function (_ref) {
+  var dialogId = _ref.dialogId,
+    dialogKey = _ref.dialogKey,
+    children = _ref.children;
+  var _useContext = useContext(StoreContext),
+    getDialogRootNode = _useContext.getDialogRootNode,
+    confirms = _useContext.confirms;
+  var content = /*#__PURE__*/_jsx("div", {
+    className: "fcr-event-confirm-wrapper fcr-event-confirm-container",
+    children: confirms.map(function (confirm, index) {
+      return /*#__PURE__*/_jsx(ConfirmWindow, {
+        id: confirm.id,
+        confirm: confirm.params
+      }, confirm.id);
+    })
+  });
+  if (isElectron()) {
+    var dialogRoot = getDialogRootNode(dialogKey, dialogId);
+    return /*#__PURE__*/createPortal(content, dialogRoot);
+  }
+  return content;
+});

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

@@ -0,0 +1,38 @@
+import { NormalWindow } from '../../components/normal-window';
+import { jsx as _jsx } from "react/jsx-runtime";
+export var ConfirmLeaveMeetingDialog = function ConfirmLeaveMeetingDialog(_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,
+  alwaysOnTop: true
+};

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

@@ -0,0 +1,40 @@
+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;
+  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'
+};

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

@@ -0,0 +1,40 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import "core-js/modules/es.array.concat.js";
+import { observer } from 'mobx-react';
+import FcrTabFrame from '../../../components/tab-frame';
+import { useContext, useState } from 'react';
+import { FcrUIConnectType } from '../../../../type';
+import { transI18n } from 'agora-ui-foundation/lib/i18n';
+import { StoreContext } from '../../../pc-audio-connect/main-scene/store';
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+export var GatewayConnectorTabs = observer(function (props) {
+  var type = props.type,
+    computerChildren = props.computerChildren,
+    phoneChildren = props.phoneChildren;
+  var _useContext = useContext(StoreContext),
+    connectType = _useContext.connectType,
+    hasOwnPstnStream = _useContext.hasOwnPstnStream;
+  var _useState = useState("".concat(type)),
+    _useState2 = _slicedToArray(_useState, 2),
+    activeTabKey = _useState2[0],
+    setActiveTabKey = _useState2[1];
+  var tabs = [{
+    label: "".concat(transI18n('fmt_PSTN_label_pcaudio')).concat(connectType === FcrUIConnectType.COMPUTER ? "-".concat(transI18n('fmt_PSTN_status_connected')) : ''),
+    key: 'computer',
+    content: computerChildren
+  }, {
+    label: "".concat(transI18n('fmt_pstn_options_phoneaudio')).concat(hasOwnPstnStream ? "-".concat(transI18n('fmt_PSTN_status_connected')) : ''),
+    key: 'phone',
+    content: phoneChildren
+  }];
+  var onChange = function onChange(tab) {
+    setActiveTabKey(tab);
+  };
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: /*#__PURE__*/_jsx(FcrTabFrame, {
+      activeKey: activeTabKey,
+      onChange: onChange,
+      tabs: tabs
+    })
+  });
+});

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

@@ -0,0 +1,29 @@
+import { memo, useContext } from 'react';
+import { StoreContext } from '../../store.base';
+import { createPortal } from 'react-dom';
+export var title = 'Control Bar';
+export var windowConfig = {
+  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'
+};
+export var ControlBarDialog = /*#__PURE__*/memo(function (_ref) {
+  var dialogId = _ref.dialogId,
+    dialogKey = _ref.dialogKey,
+    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/control-bar-leave-meeting/index.js

@@ -0,0 +1,33 @@
+import { NormalWindow } from '../../components/normal-window';
+import { jsx as _jsx } from "react/jsx-runtime";
+export var ControlBarLeaveMeetingDialog = function ControlBarLeaveMeetingDialog(_ref) {
+  var dialogKey = _ref.dialogKey,
+    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
+};

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

@@ -0,0 +1,26 @@
+.fcr-device-setting-dialog-wrapper {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  background: var(--fcr_mobile_ui_scene_color_popup_fill2);
+  border-radius: 16px;
+  box-shadow: var(--fcr_web_light_dropup);
+  border: 1px solid var(--fcr_ui_scene_line1);
+}
+
+.fcr-device-setting-dialog-wrapper .frc-window-header {
+  cursor: move;
+  height: 46px;
+}
+
+.fcr-device-setting-dialog-wrapper .fcr-device-settings {
+  height: calc(100% - 46px);
+}
+.fcr-device-setting-dialog-wrapper .fcr-device-settings-audio {
+  padding: 0;
+}
+
+.fcr-device-setting-dialog-wrapper .frc-window-header .frc-window-header__title {
+  height: 46px;
+  line-height: 46px;
+}

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

@@ -0,0 +1,36 @@
+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,
+    children = _ref.children;
+  var transI18n = useI18n();
+  var title = transI18n('fmt_settings_option_setting');
+  return /*#__PURE__*/_jsx(NormalWindow, {
+    dialogId: dialogId,
+    dialogKey: dialogKey,
+    body: children,
+    title: title,
+    width: width,
+    height: height,
+    autoHeight: false // TODO: 既然设置 height 了，为什么还要设置 autoHeight 为 false？
+  });
+};
+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 default DeviceSettingDialog;

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

@@ -0,0 +1,48 @@
+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) {
+  var dialogId = _ref.dialogId,
+    dialogKey = _ref.dialogKey,
+    params = _ref.params;
+  var _ref2 = params,
+    title = _ref2.title,
+    desc = _ref2.desc,
+    imgSrc = _ref2.imgSrc,
+    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,
+    desc: desc,
+    imgSrc: imgSrc,
+    showImg: true,
+    btnTxt: btnTxt,
+    onConfirm: onConfirm
+  });
+  return /*#__PURE__*/_jsx(NormalWindow, {
+    width: config.width,
+    height: config.height,
+    closable: false,
+    dialogId: dialogId,
+    dialogKey: dialogKey,
+    body: body
+  });
+};
+export var windowConfig = {
+  frame: false,
+  width: 330,
+  height: 340,
+  fullscreen: false,
+  maximizable: false,
+  resizable: false,
+  alwaysOnTop: true
+};

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

@@ -0,0 +1,30 @@
+.fcr-simultaneous-interpretation-dialog-wrapper {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  background: var(--fcr_mobile_ui_scene_color_popup_fill2);
+  border-radius: 16px;
+  box-shadow: var(--fcr_web_light_dropup);
+  border: 1px solid var(--fcr_ui_scene_line1);
+}
+
+.fcr-simultaneous-interpretation-dialog-wrapper .frc-window-header {
+  cursor: move;
+  height: 46px;
+}
+
+.fcr-simultaneous-interpretation-dialog-wrapper .fcr-device-settings {
+  cursor: move;
+  height: calc(100% - 46px);
+}
+.fcr-simultaneous-interpretation-dialog-wrapper .fcr-device-settings-audio {
+  padding: 0;
+}
+
+.fcr-simultaneous-interpretation-dialog-wrapper .frc-window-header .frc-window-header__title {
+  height: 46px;
+  line-height: 46px;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+}

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

@@ -0,0 +1,38 @@
+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 = 684;
+var height = 438;
+export var InterpreterDialog = function InterpreterDialog(_ref) {
+  var dialogKey = _ref.dialogKey,
+    dialogId = _ref.dialogId,
+    children = _ref.children;
+  var transI18n = useI18n();
+  var title = transI18n('fmt_ai_transcriptions_setting_label_translator');
+  return /*#__PURE__*/_jsx(NormalWindow, {
+    dialogKey: dialogKey,
+    dialogId: dialogId,
+    title: title,
+    body: children,
+    width: width,
+    height: height
+  });
+};
+export var windowConfig = {
+  fullscreen: false,
+  maximizable: false,
+  trafficLightPosition: {
+    x: 10,
+    y: 60
+  },
+  width: width,
+  height: height,
+  // minWidth: 620,
+  // minHeight: 300,
+  // maxWidth: 1020,
+  // maxHeight: 900,
+  resizable: false,
+  hasShadow: true,
+  frame: false
+};

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

@@ -0,0 +1,51 @@
+import { FcrUIDialogKey } from '../../../../utilities/constant';
+import '../../index.css';
+import { useI18n } from 'agora-ui-foundation/lib/i18n';
+import { NormalWindow } from '../../components/normal-window';
+import { jsx as _jsx } from "react/jsx-runtime";
+export var InviteDialog = function InviteDialog(_ref) {
+  var dialogKey = _ref.dialogKey,
+    dialogId = _ref.dialogId,
+    children = _ref.children;
+  var transI18n = useI18n();
+
+  //  onOpened={({ browserWindow, nearDisplayBounds }) => {
+  //     const { y } = browserWindow.getBounds();
+  //     const { width: part_w, x: part_x } = dialogWindows
+  //       .get(FcrUIDialogKey.PARTICIPANT)
+  //       ?.getBounds() || {
+  //       width: 0,
+  //       x: 0,
+  //     };
+  //     const offsetInLeft = part_x - config.width - shadowOffset;
+  //     const offsetInRight = part_x + part_w;
+  //     const x = nearDisplayBounds.width / 2 < part_x ? offsetInLeft : offsetInRight;
+  //     part_w > 0 && browserWindow.setBounds({ x, y });
+  //   }}
+
+  return /*#__PURE__*/_jsx(NormalWindow, {
+    dialogId: dialogId,
+    dialogKey: FcrUIDialogKey.INVITE,
+    width: 430,
+    height: 420,
+    body: children
+  });
+};
+export var windowConfig = {
+  frame: false,
+  maximizable: false,
+  minimizable: false,
+  fullscreenable: false,
+  width: 400 + 30,
+  height: 390 + 30,
+  trafficLightPosition: {
+    x: 0,
+    y: 0
+  },
+  resizable: false,
+  hasShadow: false,
+  useContentSize: true,
+  transparent: true,
+  backgroundColor: '#00000000',
+  alwaysOnTop: true
+};

package/lib-es/modules/dialog/dialogs/live-streaming/index.js

@@ -0,0 +1,30 @@
+import { useI18n } from 'agora-ui-foundation/lib/i18n';
+import { NormalWindow } from '../../components/normal-window';
+import { observer } from 'mobx-react';
+import { jsx as _jsx } from "react/jsx-runtime";
+export var LiveStreamingDialog = observer(function (_ref) {
+  var dialogId = _ref.dialogId,
+    dialogKey = _ref.dialogKey,
+    children = _ref.children;
+  var transI18n = useI18n();
+  var body = /*#__PURE__*/_jsx("div", {
+    className: "fcr-livestreaming-dialog-content",
+    children: children
+  });
+  return /*#__PURE__*/_jsx(NormalWindow, {
+    dialogId: dialogId,
+    dialogKey: dialogKey,
+    title: transI18n('fmt_live_label_push_platform'),
+    width: 440,
+    height: 434,
+    body: body
+  });
+});
+export var windowConfig = {
+  frame: false,
+  fullscreen: false,
+  maximizable: false,
+  width: 440,
+  height: 434,
+  resizable: false
+};

package/lib-es/modules/dialog/dialogs/mute-all/index.css

@@ -0,0 +1,20 @@
+.fcr-mute-all-dialog-content {
+  margin-left: 20px;
+}
+
+.fcr-mute-all-dialog-footer {
+  margin-top: 10px;
+  margin-bottom: 20px;
+  display: flex;
+  justify-content: flex-end;
+}
+
+.fcr-mute-all-dialog-title {
+  padding-top: 20px;
+  padding-bottom: 20px;
+}
+
+.fcr-mute-all-dialog-footer .fcr-button-danger {
+  margin-left: 10px;
+  margin-right: 20px;
+}

package/lib-es/modules/dialog/dialogs/mute-all/index.js

@@ -0,0 +1,42 @@
+import { useI18n } from 'agora-ui-foundation/lib/i18n';
+import { NormalWindow } from '../../components/normal-window';
+import './index.css';
+import { jsx as _jsx } from "react/jsx-runtime";
+export var MuteAllDialog = function MuteAllDialog(_ref) {
+  var dialogKey = _ref.dialogKey,
+    dialogId = _ref.dialogId,
+    children = _ref.children;
+  var transI18n = useI18n();
+  var title = transI18n('fmt_attendies_options_muteall');
+  var body = /*#__PURE__*/_jsx("div", {
+    className: "fcr-mute-all-dialog-content",
+    children: children
+  });
+  var config = {
+    width: 320,
+    height: 172
+  };
+  return /*#__PURE__*/_jsx(NormalWindow, {
+    closable: false,
+    title: title,
+    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: false,
+  width: 320,
+  height: 172,
+  alwaysOnTop: true
+};

package/lib-es/modules/dialog/dialogs/participant/components/actions.js

@@ -0,0 +1,23 @@
+import { FcrToolTip } from 'agora-ui-foundation/lib/components/tooltip';
+import { FcrIconButton } from 'agora-ui-foundation/lib/components/icon-button';
+import { FcrIconType } from 'agora-ui-foundation/lib/components/icon/type';
+import { useI18n } from 'agora-ui-foundation/lib/i18n';
+import { jsx as _jsx } from "react/jsx-runtime";
+export var ParticipantActions = function ParticipantActions(_ref) {
+  var _ref$handleMergeView = _ref.handleMergeView,
+    handleMergeView = _ref$handleMergeView === void 0 ? function () {} : _ref$handleMergeView;
+  var transI18n = useI18n();
+  return /*#__PURE__*/_jsx(FcrToolTip, {
+    content: transI18n('fmt_uimanager_option_mergeview'),
+    mouseEnterDelay: 0,
+    trigger: "hover",
+    children: /*#__PURE__*/_jsx(FcrIconButton, {
+      icon: FcrIconType.FCR_TOGGLE_DIALOG,
+      onClick: handleMergeView,
+      className: "frc-window-header__icon fcr-toggle-window-header__icon fcr-no-drag",
+      iconColors: {
+        iconPrimary: 'var(--fcr_ui_scene_icontext1)'
+      }
+    })
+  });
+};