fcr-ui-scene 3.5.0 → 3.6.0

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

@@ -17,26 +17,21 @@ 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 _mobxReact = require("mobx-react");
 var _jsxRuntime = require("react/jsx-runtime");
-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,
-    waitingRoomState = _useContext.waitingRoomState;
+var Container = (0, _mobxReact.observer)(function (props) {
+  var store = (0, _react.useContext)(_store.StoreContext);
   var transI18n = (0, _i18n.useI18n)();
-  var container = /*#__PURE__*/(0, _jsxRuntime.jsx)(_dialogContainer["default"], {
-    title: chatRoomState === _type.FcrChatRoomConnectionState.Connected ? transI18n('fmt_chat_label_chat') : transI18n('fmt_aside_status_connecting'),
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_dialogContainer["default"], {
+    title: store.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, {
+      children: [props.chatAction, store.isSharingScreen ? null : /*#__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,
+          onClick: store.moveChatFromDialogToAside,
           className: "frc-window-header__icon fcr-no-drag",
           iconColors: {
             iconPrimary: 'var(--fcr_ui_scene_icontext1)'
@@ -44,15 +39,27 @@ var ChatDialog = exports.ChatDialog = function ChatDialog(_ref) {
         })
       })]
     }),
-    width: 800,
-    height: waitingRoomState ? 630 : 600,
+    width: (0, _env.isElectron)() ? 800 : 520 // APAAS-10264 聊天在 web 下宽度改成520
+    ,
+    height: store.waitingRoomState ? 630 : 600,
     dialogKey: _constant.FcrUIDialogKey.CHAT,
-    onClose: closeChatFromDialog,
-    children: children
+    onClose: store.closeChatFromDialog,
+    children: props.children
+  });
+});
+var ChatDialog = exports.ChatDialog = function ChatDialog(_ref) {
+  var children = _ref.children,
+    chatAction = _ref.chatAction;
+  var store = (0, _react.useContext)(_store.StoreContext);
+  var container = /*#__PURE__*/(0, _jsxRuntime.jsx)(_store.StoreContext.Provider, {
+    value: store,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Container, {
+      chatAction: chatAction,
+      children: children
+    })
   });
   if ((0, _env.isElectron)()) {
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_electron.ChatElectronDialog, {
-      chatAction: chatAction,
       children: container
     });
   }

package/lib/modules/dialog/components/confirm-leave-meeting/index.d.ts

@@ -0,0 +1,6 @@
+import { FC, PropsWithChildren } from 'react';
+export declare const ConfirmLeaveMeetingDialog: FC<PropsWithChildren<{
+    title: string;
+    onOk: () => void;
+    onCancel: () => void;
+}>>;

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

@@ -0,0 +1,86 @@
+"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.ConfirmLeaveMeetingDialog = void 0;
+var _i18n = require("agora-ui-foundation/lib/i18n");
+var _constant = require("../../../../utilities/constant");
+var _useElectron = require("../../hooks/useElectron");
+var _env = require("agora-foundation/lib/utilities/env");
+var _dialogContainer = _interopRequireDefault(require("../dialog-container"));
+var _button = require("agora-ui-foundation/lib/components/button");
+var _jsxRuntime = require("react/jsx-runtime");
+var ConfirmLeaveMeetingDialog = exports.ConfirmLeaveMeetingDialog = function ConfirmLeaveMeetingDialog(_ref) {
+  var title = _ref.title,
+    onOk = _ref.onOk,
+    onCancel = _ref.onCancel;
+  var t = (0, _i18n.useI18n)();
+  var container = /*#__PURE__*/(0, _jsxRuntime.jsx)(_dialogContainer["default"], {
+    dialogKey: _constant.FcrUIDialogKey.LEAVE_MEETING,
+    width: 255,
+    height: 138,
+    closable: false,
+    autoHeight: true,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "fcr-confirm-content-footer fcr-button-flex-column fcr-confirm-content-footer__center",
+      style: {
+        width: '215px',
+        margin: '12px auto'
+      },
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("header", {
+        className: "fcr-dialog-container-header",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("h2", {
+          children: title
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.FcrButton, {
+        size: "XS",
+        styleType: "danger",
+        type: "primary",
+        shape: "rounded",
+        block: true,
+        onClick: onOk,
+        children: t('fmt_toolbar_leave_room_end_submit')
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.FcrButton, {
+        size: "XS",
+        type: "secondary",
+        shape: "rounded",
+        block: true,
+        onClick: onCancel,
+        children: t('fmt_toolbar_tips_leave_room_end_cancel')
+      })]
+    })
+  });
+  if ((0, _env.isElectron)()) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(ConfirmLeaveMeetingElectronDialog, {
+      title: title,
+      children: container
+    });
+  }
+  return container;
+};
+var ConfirmLeaveMeetingElectronDialog = function ConfirmLeaveMeetingElectronDialog(_ref2) {
+  var children = _ref2.children,
+    title = _ref2.title;
+  var transI18n = (0, _i18n.useI18n)();
+  var config = {
+    fullscreen: false,
+    maximizable: false,
+    width: 255,
+    height: 158,
+    title: transI18n('fmt_actionbar_labels_endmeeting'),
+    resizable: false
+  };
+  (0, _useElectron.useElectronDialog)({
+    dialogKey: _constant.FcrUIDialogKey.LEAVE_MEETING,
+    config: config,
+    onClose: function onClose(_ref3) {
+      var store = _ref3.store;
+      store.closeDialogByKey(_constant.FcrUIDialogKey.LEAVE_MEETING);
+    },
+    children: children
+  });
+  return null;
+};

package/lib/modules/dialog/components/control-bar/index.d.ts

@@ -1,4 +1,3 @@
-import { AgoraRtcScreenCaptureType, AgoraRtcWindowInfo } from 'agora-rte-sdk/lib/core/rtc/type';
 import { ControlBarUIModule } from '../../../control-bar';
 import { FcrUIShareSelectionDisplayProps } from '../../../share-screen/types';
 import { PropsWithChildren } from 'react';
@@ -7,5 +6,5 @@ export declare const config: Electron.BrowserWindowConstructorOptions;
 export declare const ControlBarDialog: (props: PropsWithChildren<{
     params: FcrUIShareSelectionDisplayProps;
     module: ControlBarUIModule;
-}>) => import("react/jsx-runtime").JSX.Element;
-export declare const setBounds: (currentShareId: string, currentShareType: AgoraRtcScreenCaptureType, currentShareBounds: CurrentShareBounds, browserWindow: Electron.BrowserWindow, allApplicationWindows: AgoraRtcWindowInfo[]) => Promise<void>;
+}>) => null;
+export declare const setBounds: (currentShareBounds: CurrentShareBounds, browserWindow: Electron.BrowserWindow) => Promise<void>;

package/lib/modules/dialog/components/control-bar/index.js

@@ -16,7 +16,7 @@ var _react = require("react");
 var _store = require("../../store");
 var _platform = require("../../../../utilities/platform");
 var _mobxReact = require("mobx-react");
-var _jsxRuntime = require("react/jsx-runtime");
+var _env = require("agora-foundation/lib/utilities/env");
 var config = exports.config = {
   y: 0,
   x: 0,
@@ -34,10 +34,9 @@ var config = exports.config = {
 var ControlBarDialog = exports.ControlBarDialog = (0, _mobxReact.observer)(function (props) {
   var module = props.module,
     params = props.params;
+  var eventProvider = module.eventProvider;
   var _useContext = (0, _react.useContext)(_store.StoreContext),
     currentShareId = _useContext.currentShareId,
-    currentShareType = _useContext.currentShareType,
-    deviceStore = _useContext.deviceStore,
     currentShareBounds = _useContext.currentShareBounds;
   var children = function children(browserWindow) {
     return module.getComponent({
@@ -45,63 +44,51 @@ var ControlBarDialog = exports.ControlBarDialog = (0, _mobxReact.observer)(funct
       browserWindow: browserWindow
     });
   };
+  var setBoundsWithNewAppWindows = /*#__PURE__*/function () {
+    var _ref = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee(browserWindow) {
+      return _regenerator["default"].wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            if (browserWindow) {
+              setBounds(currentShareBounds, browserWindow);
+            }
+          case 1:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }));
+    return function setBoundsWithNewAppWindows(_x) {
+      return _ref.apply(this, arguments);
+    };
+  }();
   var _useElectronDialog = (0, _useElectron.useElectronDialog)({
       dialogKey: _constant.FcrUIDialogKey.CONTROL_BAR,
       config: config,
       children: children,
       hasCustomShadow: false,
       disableShortcutClose: true,
-      onOpened: function onOpened(_ref) {
-        var browserWindow = _ref.browserWindow;
-        (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee() {
-          var allApplicationWindows;
-          return _regenerator["default"].wrap(function _callee$(_context) {
-            while (1) switch (_context.prev = _context.next) {
-              case 0:
-                _context.next = 2;
-                return deviceStore.getWindowList();
-              case 2:
-                allApplicationWindows = _context.sent;
-                setBounds(params.currentShareId, params.currentShareType, params.currentShareBounds, browserWindow, allApplicationWindows);
-              case 4:
-              case "end":
-                return _context.stop();
-            }
-          }, _callee);
-        }))();
+      onOpened: function onOpened(_ref2) {
+        var browserWindow = _ref2.browserWindow;
+        setBoundsWithNewAppWindows(browserWindow);
+        if ((0, _env.isElectron)()) {
+          eventProvider === null || eventProvider === void 0 || eventProvider.sendEvent(_constant.FcrUIAction.OPEN_TOP_VIDEO_WINDOW);
+        }
       }
     }),
     browserWindow = _useElectronDialog.browserWindow;
   (0, _react.useEffect)(function () {
-    (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee2() {
-      var allApplicationWindows;
-      return _regenerator["default"].wrap(function _callee2$(_context2) {
-        while (1) switch (_context2.prev = _context2.next) {
-          case 0:
-            _context2.next = 2;
-            return deviceStore.getWindowList();
-          case 2:
-            allApplicationWindows = _context2.sent;
-            browserWindow && setBounds(currentShareId, currentShareType, currentShareBounds, browserWindow, allApplicationWindows);
-          case 4:
-          case "end":
-            return _context2.stop();
-        }
-      }, _callee2);
-    }))();
+    setBoundsWithNewAppWindows(browserWindow);
   }, [currentShareId]);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {});
+  return null;
 });
 var setBounds = exports.setBounds = /*#__PURE__*/function () {
-  var _ref4 = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee3(currentShareId, currentShareType, currentShareBounds, browserWindow, allApplicationWindows) {
+  var _ref3 = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee2(currentShareBounds, browserWindow) {
     var _getCurrentSharingWor, originWidth, originHeight, x, y, WINDOWS_SCREEN_BOUNDARY_WIDTH, width, height, firstBounds;
-    return _regenerator["default"].wrap(function _callee3$(_context3) {
-      while (1) switch (_context3.prev = _context3.next) {
+    return _regenerator["default"].wrap(function _callee2$(_context2) {
+      while (1) switch (_context2.prev = _context2.next) {
         case 0:
           _getCurrentSharingWor = (0, _tools.getCurrentSharingWorkArea)({
-            currentShareId: currentShareId,
-            currentShareType: currentShareType,
-            allApplicationWindows: allApplicationWindows,
             currentShareBounds: currentShareBounds
           }), originWidth = _getCurrentSharingWor.width, originHeight = _getCurrentSharingWor.height, x = _getCurrentSharingWor.x, y = _getCurrentSharingWor.y;
           /* 使用window.screen.availWidth在windows上会黑屏，详见jira:APAAS-5732
@@ -145,11 +132,11 @@ var setBounds = exports.setBounds = /*#__PURE__*/function () {
           }, 100);
         case 7:
         case "end":
-          return _context3.stop();
+          return _context2.stop();
       }
-    }, _callee3);
+    }, _callee2);
   }));
-  return function setBounds(_x, _x2, _x3, _x4, _x5) {
-    return _ref4.apply(this, arguments);
+  return function setBounds(_x2, _x3) {
+    return _ref3.apply(this, arguments);
   };
 }();

package/lib/modules/dialog/components/dialog-container/component/body.d.ts

@@ -5,4 +5,5 @@ export declare function DialogContainerBody(props: PropsWithChildren<{
     title?: string;
     actions?: React.ReactNode;
     autoHeight?: boolean;
+    closable?: boolean;
 }>): import("react/jsx-runtime").JSX.Element;

package/lib/modules/dialog/components/dialog-container/component/body.js

@@ -10,6 +10,8 @@ require("core-js/modules/es.object.get-own-property-descriptor.js");
 require("core-js/modules/es.object.get-own-property-descriptors.js");
 require("core-js/modules/es.object.keys.js");
 require("core-js/modules/es.object.to-string.js");
+require("core-js/modules/esnext.async-iterator.filter.js");
+require("core-js/modules/esnext.async-iterator.for-each.js");
 require("core-js/modules/esnext.iterator.constructor.js");
 require("core-js/modules/esnext.iterator.filter.js");
 require("core-js/modules/esnext.iterator.for-each.js");
@@ -26,6 +28,7 @@ require("../index.css");
 var _env = require("agora-foundation/lib/utilities/env");
 var _ = require("..");
 var _useElectron = require("../../../hooks/useElectron");
+var _isBoolean = _interopRequireDefault(require("lodash/isBoolean"));
 var _jsxRuntime = require("react/jsx-runtime");
 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) { (0, _defineProperty2["default"])(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; }
@@ -34,7 +37,8 @@ function DialogContainerBody(props) {
     title = props.title,
     children = props.children,
     onClick = props.onClick,
-    autoHeight = props.autoHeight;
+    autoHeight = props.autoHeight,
+    closable = props.closable;
   var _useContext = (0, _react.useContext)(_.DialogContainerStore),
     bind = _useContext.bind;
   var _ref = (0, _env.isElectron)() ? (0, _react.useContext)(_useElectron.DialogInstanceContext) : {
@@ -65,7 +69,7 @@ function DialogContainerBody(props) {
         height: resizable ? 'calc(100% - 46px)' /* 当窗口需要拉伸时，会传值为 false 的 hasCustomShadow 过来，高度不需要自适应，所以内容区高度为 100vh 减去 title 高度 46px */ : (0, _env.isElectron)() ? autoHeight ? 'auto' : 'calc(100vh - 76px)' /* 76px 包含 46px 的 title 高度，和 30px 的阴影 */ : 'calc(100% - 46px)' /* 浏览器不需要减去阴影，高度需要 100% 减去 46px title */
       } : {},
       children: children
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("a", {
+    }), (!(0, _isBoolean["default"])(closable) || closable) && /*#__PURE__*/(0, _jsxRuntime.jsx)("a", {
       className: "fcr-dialog-container-close",
       onClick: onClick,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {

package/lib/modules/dialog/components/dialog-container/index.css

@@ -27,9 +27,10 @@
   font-size: 16px;
   font-weight: 700;
   display: flex;
-  flex: 1;
+  flex: 3;
   align-items: center;
   justify-content: center;
+  color: var(--fcr_ui_scene_icontext1);
 }
 
 .fcr-dialog-container-actions {

package/lib/modules/dialog/components/dialog-container/index.d.ts

@@ -13,6 +13,7 @@ declare const DialogContainer: (props: PropsWithChildren<{
     closeInterception?: () => boolean;
     actions?: React.ReactNode;
     dialogId?: string;
+    closable?: boolean;
     autoHeight?: boolean;
 }>) => import("react/jsx-runtime").JSX.Element;
 export default DialogContainer;

package/lib/modules/dialog/components/dialog-container/index.js

@@ -35,7 +35,8 @@ var DialogContainer = (0, _mobxReact.observer)(function (props) {
     actions = props.actions,
     closeInterception = props.closeInterception,
     dialogId = props.dialogId,
-    autoHeight = props.autoHeight;
+    autoHeight = props.autoHeight,
+    closable = props.closable;
   var _useContext = (0, _react.useContext)(_store.StoreContext),
     closeDialogByKey = _useContext.closeDialogByKey,
     closeDilaogByDialogId = _useContext.closeDilaogByDialogId;
@@ -53,6 +54,7 @@ var DialogContainer = (0, _mobxReact.observer)(function (props) {
     title: title,
     onClick: handleClose,
     actions: actions,
+    closable: closable,
     autoHeight: autoHeight,
     children: children
   });

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

@@ -1,3 +1,2 @@
 import { FC, PropsWithChildren } from 'react';
-export declare const ParticipantDialogContent: ({ children }: PropsWithChildren<{}>) => import("react/jsx-runtime").JSX.Element;
 export declare const ParticipantDialog: FC<PropsWithChildren<{}>>;

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

@@ -5,10 +5,9 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ParticipantDialogContent = exports.ParticipantDialog = void 0;
+exports.ParticipantDialog = void 0;
 require("core-js/modules/es.array.concat.js");
 var _env = require("agora-foundation/lib/utilities/env");
-var _windowHeader = require("agora-ui-foundation/lib/components/window-header");
 var _i18n = require("agora-ui-foundation/lib/i18n");
 var _react = require("react");
 var _store = require("../../store");
@@ -18,36 +17,18 @@ var _dialogContainer = _interopRequireDefault(require("../dialog-container"));
 var _tooltip = require("agora-ui-foundation/lib/components/tooltip");
 var _iconButton = require("agora-ui-foundation/lib/components/icon-button");
 var _type = require("agora-ui-foundation/lib/components/icon/type");
+var _mobxReact = require("mobx-react");
 var _jsxRuntime = require("react/jsx-runtime");
-var ParticipantDialogContent = exports.ParticipantDialogContent = function ParticipantDialogContent(_ref) {
-  var children = _ref.children;
+var Container = (0, _mobxReact.observer)(function (props) {
   var store = (0, _react.useContext)(_store.StoreContext);
   var transI18n = (0, _i18n.useI18n)();
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-    className: "fcr-participant-dialog-wrapper",
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_windowHeader.FcrWindowHeader, {
-      showClose: true,
-      title: "".concat(transI18n('fmt_participants_label_participants'), "(").concat(store.participantCount, ")"),
-      type: _windowHeader.WindowType.WINDOW,
-      onTypeChange: store.moveParticipantFromDialogToAside,
-      onClose: function onClose() {
-        return store.closeDialogByKey(_constant.FcrUIDialogKey.PARTICIPANT);
-      },
-      rootClassName: 'participant-can-draggable'
-    }), children]
-  });
-};
-var ParticipantDialog = exports.ParticipantDialog = function ParticipantDialog(_ref2) {
-  var children = _ref2.children;
-  var store = (0, _react.useContext)(_store.StoreContext);
-  var transI18n = (0, _i18n.useI18n)();
-  var container = /*#__PURE__*/(0, _jsxRuntime.jsx)(_dialogContainer["default"], {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_dialogContainer["default"], {
     title: "".concat(transI18n('fmt_participants_label_participants'), "(").concat(store.participantCount, ")"),
     width: 320,
     height: 560,
     dialogKey: _constant.FcrUIDialogKey.PARTICIPANT,
     onClose: store.closeParticipantDialog,
-    actions: /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.FcrToolTip, {
+    actions: store.isSharingScreen ? null : /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.FcrToolTip, {
       content: transI18n('fmt_uimanager_option_mergeview'),
       mouseEnterDelay: 0,
       trigger: "hover",
@@ -62,6 +43,16 @@ var ParticipantDialog = exports.ParticipantDialog = function ParticipantDialog(_
     }),
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: "fcr-participant-dialog-wrapper",
+      children: props.children
+    })
+  });
+});
+var ParticipantDialog = exports.ParticipantDialog = function ParticipantDialog(_ref) {
+  var children = _ref.children;
+  var store = (0, _react.useContext)(_store.StoreContext);
+  var container = /*#__PURE__*/(0, _jsxRuntime.jsx)(_store.StoreContext.Provider, {
+    value: store,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Container, {
       children: children
     })
   });

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

@@ -0,0 +1,51 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DeviceSettingElectronDialog = void 0;
+require("core-js/modules/web.timers.js");
+var _i18n = require("agora-ui-foundation/lib/i18n");
+var _constant = require("../../../../utilities/constant");
+var _useElectron = require("../../hooks/useElectron");
+var DeviceSettingElectronDialog = exports.DeviceSettingElectronDialog = function DeviceSettingElectronDialog(_ref) {
+  var children = _ref.children;
+  var transI18n = (0, _i18n.useI18n)();
+  var config = {
+    fullscreen: false,
+    maximizable: false,
+    trafficLightPosition: {
+      x: 10,
+      y: 60
+    },
+    width: 580,
+    height: 600,
+    minWidth: 580,
+    minHeight: 600,
+    maxWidth: 670,
+    maxHeight: 800,
+    title: transI18n('fmt_settings_option_setting'),
+    resizable: false
+  };
+  var dialogKey = _constant.FcrUIDialogKey.DEVICE_SETTINGS;
+  (0, _useElectron.useElectronDialog)({
+    dialogKey: dialogKey,
+    config: config,
+    children: children,
+    onOpened: function onOpened(_ref2) {
+      var browserWindow = _ref2.browserWindow,
+        nearDisplayBounds = _ref2.nearDisplayBounds;
+      if (browserWindow) {
+        browserWindow.setAlwaysOnTop(true);
+        setTimeout(function () {
+          browserWindow.show();
+          browserWindow.setAlwaysOnTop(false);
+          browserWindow.moveTop();
+          browserWindow.focus();
+        }, 600);
+      }
+    }
+  });
+  return null;
+};

package/lib/modules/dialog/components/pre-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/modules/dialog/components/pre-setting/index.d.ts

@@ -0,0 +1,6 @@
+import { PropsWithChildren } from 'react';
+import './index.css';
+declare const DeviceSettingDialog: ({ children, onClose }: PropsWithChildren<{
+    onClose: () => void;
+}>) => import("react/jsx-runtime").JSX.Element;
+export default DeviceSettingDialog;

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

@@ -0,0 +1,38 @@
+"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 _i18n = require("agora-ui-foundation/lib/i18n");
+require("./index.css");
+var _constant = require("../../../../utilities/constant");
+var _preSettingContainer = _interopRequireDefault(require("../pre-setting-container"));
+var _jsxRuntime = require("react/jsx-runtime");
+var ELECTRON_HEIGHT = 556;
+var WEB_HEIGHT = 600;
+var DeviceSettingDialog = function DeviceSettingDialog(_ref) {
+  var children = _ref.children,
+    onClose = _ref.onClose;
+  var t = (0, _i18n.useI18n)();
+  var height = (0, _env.isElectron)() ? ELECTRON_HEIGHT : WEB_HEIGHT;
+  var container = /*#__PURE__*/(0, _jsxRuntime.jsx)(_preSettingContainer["default"], {
+    title: t('fmt_modules_labels_devicesettings'),
+    width: 580,
+    height: height,
+    dialogKey: _constant.FcrUIDialogKey.DEVICE_SETTINGS,
+    onClose: onClose,
+    children: children
+  });
+  if ((0, _env.isElectron)()) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_electron.DeviceSettingElectronDialog, {
+      children: container
+    });
+  }
+  return container;
+};
+var _default = exports["default"] = DeviceSettingDialog;

package/lib/modules/dialog/components/pre-setting-container/component/body.d.ts

@@ -0,0 +1,8 @@
+import { PropsWithChildren } from 'react';
+import '../index.css';
+export declare function DialogContainerBody(props: PropsWithChildren<{
+    onClick: () => void;
+    title?: string;
+    actions?: React.ReactNode;
+    autoHeight?: boolean;
+}>): import("react/jsx-runtime").JSX.Element;