fcr-ui-scene 3.1.1 → 3.3.0

package/lib/modules/participant/view.d.ts

@@ -1,11 +1,11 @@
 import './index.css';
 export declare const MuteAllDialog: ({ getContainer, allowUnmuteSelfAudio, allowJoinWithMuteAudio, showMuteAllDialog, onCancel, onOk, onClose, }: {
-    getContainer?: (() => HTMLElement) | undefined;
-    allowUnmuteSelfAudio?: boolean | undefined;
-    allowJoinWithMuteAudio?: boolean | undefined;
+    getContainer?: () => HTMLElement;
+    allowUnmuteSelfAudio?: boolean;
+    allowJoinWithMuteAudio?: boolean;
     showMuteAllDialog: boolean;
-    onCancel?: (() => void) | undefined;
-    onClose?: (() => void) | undefined;
-    onOk?: ((allowUnmute: boolean, joinWidthMute: boolean) => void) | undefined;
+    onCancel?: () => void;
+    onClose?: () => void;
+    onOk?: (allowUnmute: boolean, joinWidthMute: boolean) => void;
 }) => import("react/jsx-runtime").JSX.Element;
 export declare const View: () => import("react/jsx-runtime").JSX.Element | null;

package/lib/modules/participant/view.js

@@ -10,6 +10,11 @@ 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");
 require("core-js/modules/web.dom-collections.for-each.js");
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
@@ -22,6 +27,7 @@ var _env = require("agora-foundation/lib/utilities/env");
 var _checkbox = require("agora-ui-foundation/lib/components/checkbox");
 var _dialog = require("agora-ui-foundation/lib/components/dialog");
 var _participants = require("agora-ui-foundation/lib/components/participants");
+var _tabs = require("agora-ui-foundation/lib/components/tabs");
 var _footer = require("agora-ui-foundation/lib/components/participants/footer");
 var _mobxReact = require("mobx-react");
 var _react = require("react");
@@ -32,6 +38,8 @@ var _context2 = require("../dialog/context");
 require("./index.css");
 var _roomControlDropMenu = require("./room-control-drop-menu");
 var _i18n = require("agora-ui-foundation/lib/i18n");
+var _button = require("agora-ui-foundation/lib/components/button");
+var _tooltip = require("agora-ui-foundation/lib/components/tooltip");
 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; }
@@ -68,7 +76,11 @@ var MuteAllDialog = exports.MuteAllDialog = function MuteAllDialog(_ref) {
     title: transI18n('fmt_attendies_options_muteall'),
     visible: showMuteAllDialog,
     okButtonProps: {
-      styleType: 'danger'
+      styleType: 'danger',
+      shape: 'rounded'
+    },
+    cancelButtonProps: {
+      shape: 'rounded'
     },
     onCancel: onCancel,
     okText: transI18n('fmt_attendies_button_muteall'),
@@ -87,6 +99,9 @@ var MuteAllDialog = exports.MuteAllDialog = function MuteAllDialog(_ref) {
         checked: allowUnmute,
         onChange: function onChange(checked) {
           return setAllowUnmute(checked);
+        },
+        style: {
+          marginTop: '16px'
         }
       })]
     })
@@ -130,34 +145,103 @@ var MergeConfrimDialog = function MergeConfrimDialog(_ref2) {
     })
   });
 };
-var ParticipantsContainer = (0, _mobxReact.observer)(function () {
+var ParticipantWaitingRoomFooterBtnList = function ParticipantWaitingRoomFooterBtnList(_ref3) {
+  var openRemoveAdmitWaitingRoomDialog = _ref3.openRemoveAdmitWaitingRoomDialog;
+  var t = (0, _i18n.useI18n)();
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: "fcr-participant__footer fcr-participant__footer_waiting_room",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.FcrToolTip, {
+      content: t('fmt_waitingroom_sidebar_button_removeall'),
+      mouseEnterDelay: 0,
+      trigger: "hover",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.FcrButton, {
+        type: "secondary-bordered",
+        size: "XS",
+        onClick: function onClick() {
+          openRemoveAdmitWaitingRoomDialog(_constant.DialogKey.WAITING_ROOM_ALL_REMOVE, {
+            title: t('fmt_waitingroom_sidebar_popup_removeall'),
+            type: 'removeAll',
+            tooltip: t('fmt_waitingroom_mobile_memberlist_popup_label_sure_to_remove_all')
+          });
+        },
+        children: t('fmt_waitingroom_sidebar_button_removeall')
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.FcrToolTip, {
+      content: t('fmt_waitingroom_sidebar_button_admitall'),
+      mouseEnterDelay: 0,
+      trigger: "hover",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.FcrButton, {
+        type: "secondary-bordered",
+        size: "XS",
+        onClick: function onClick() {
+          openRemoveAdmitWaitingRoomDialog(_constant.DialogKey.WAITING_ROOM_ALL_ADMIT, {
+            title: t('fmt_waitingroom_mobile_memberlist_popup_label_admit_all'),
+            type: 'admitAll',
+            tooltip: t('fmt_waitingroom_mobile_memberlist_popup_label_sure_to_admit_all')
+          });
+        },
+        children: t('fmt_waitingroom_sidebar_button_admitall')
+      })
+    })]
+  });
+};
+var ParticipantFooter = (0, _mobxReact.observer)(function (_ref4) {
+  var handlerRoomControlClick = _ref4.handlerRoomControlClick;
   var _useContext = (0, _react.useContext)(_context.StoreContext),
-    userList = _useContext.userList,
-    handlerSearchUser = _useContext.handlerSearchUser,
-    searchText = _useContext.searchText,
-    currentPerspectiveType = _useContext.currentPerspectiveType,
-    setCurrentModal = _useContext.setCurrentModal,
-    handlerRoomControlAction = _useContext.handlerRoomControlAction,
-    handlerUserAction = _useContext.handlerUserAction,
-    allowUnmuteSelfAudio = _useContext.allowUnmuteSelfAudio,
-    allowJoinWithMuteAudio = _useContext.allowJoinWithMuteAudio,
-    currentModal = _useContext.currentModal,
-    openParticipantsWindow = _useContext.openParticipantsWindow,
-    onInvite = _useContext.onInvite,
+    activeTab = _useContext.activeTab,
     hasRevokeHostPermission = _useContext.hasRevokeHostPermission,
-    checkIsPin = _useContext.checkIsPin,
-    hasPinnedStream = _useContext.hasPinnedStream,
-    enableSpotlight = _useContext.enableSpotlight,
-    mergeConfirmDialog = _useContext.mergeConfirmDialog,
-    setMergeConfirmDialog = _useContext.setMergeConfirmDialog,
-    mergeConfirmDialogOk = _useContext.mergeConfirmDialogOk,
-    mergeUserId = _useContext.mergeUserId,
-    mergeUserInfo = _useContext.mergeUserInfo,
-    getAllowedOperations = _useContext.getAllowedOperations,
-    hasMutePermission = _useContext.hasMutePermission,
-    hasUnmutePermission = _useContext.hasUnmutePermission,
-    hasRequestStartAudioPermission = _useContext.hasRequestStartAudioPermission;
+    currentPerspectiveType = _useContext.currentPerspectiveType,
+    kickOutWaitingRoomAllMember = _useContext.kickOutWaitingRoomAllMember,
+    moveToMainRoomAllMember = _useContext.moveToMainRoomAllMember,
+    openRemoveAdmitWaitingRoomDialog = _useContext.openRemoveAdmitWaitingRoomDialog;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+    children: activeTab === _constant.RoomType.MAIN_ROOM ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_footer.FcrParticipantsFooter, {
+      hasRevokeHostPermission: hasRevokeHostPermission,
+      onRoomControlClick: handlerRoomControlClick,
+      type: currentPerspectiveType,
+      moreDropMenu: /*#__PURE__*/(0, _jsxRuntime.jsx)(_roomControlDropMenu.RoomControlDropMenu, {})
+    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(ParticipantWaitingRoomFooterBtnList, {
+      openRemoveAdmitWaitingRoomDialog: openRemoveAdmitWaitingRoomDialog
+    })
+  });
+});
+var ParticipantsContainer = (0, _mobxReact.observer)(function () {
+  var _useContext2 = (0, _react.useContext)(_context.StoreContext),
+    userList = _useContext2.userList,
+    handlerSearchUser = _useContext2.handlerSearchUser,
+    searchText = _useContext2.searchText,
+    currentPerspectiveType = _useContext2.currentPerspectiveType,
+    setCurrentModal = _useContext2.setCurrentModal,
+    handlerRoomControlAction = _useContext2.handlerRoomControlAction,
+    handlerUserAction = _useContext2.handlerUserAction,
+    allowUnmuteSelfAudio = _useContext2.allowUnmuteSelfAudio,
+    allowJoinWithMuteAudio = _useContext2.allowJoinWithMuteAudio,
+    currentModal = _useContext2.currentModal,
+    openParticipantsWindow = _useContext2.openParticipantsWindow,
+    onInvite = _useContext2.onInvite,
+    hasRevokeHostPermission = _useContext2.hasRevokeHostPermission,
+    checkIsPin = _useContext2.checkIsPin,
+    hasPinnedStream = _useContext2.hasPinnedStream,
+    enableSpotlight = _useContext2.enableSpotlight,
+    mergeConfirmDialog = _useContext2.mergeConfirmDialog,
+    setMergeConfirmDialog = _useContext2.setMergeConfirmDialog,
+    mergeConfirmDialogOk = _useContext2.mergeConfirmDialogOk,
+    mergeUserId = _useContext2.mergeUserId,
+    mergeUserInfo = _useContext2.mergeUserInfo,
+    getAllowedOperations = _useContext2.getAllowedOperations,
+    hasMutePermission = _useContext2.hasMutePermission,
+    hasUnmutePermission = _useContext2.hasUnmutePermission,
+    hasRequestStartAudioPermission = _useContext2.hasRequestStartAudioPermission,
+    hasWaitingRoomPermission = _useContext2.hasWaitingRoomPermission,
+    handleActiveTab = _useContext2.handleActiveTab,
+    activeTab = _useContext2.activeTab,
+    moveToMainRoomByUserIds = _useContext2.moveToMainRoomByUserIds,
+    kickOutWaitingRoomAllMember = _useContext2.kickOutWaitingRoomAllMember,
+    moveToMainRoomAllMember = _useContext2.moveToMainRoomAllMember,
+    isNewWaitingRoomUserEnter = _useContext2.isNewWaitingRoomUserEnter,
+    waitingRoomUserCount = _useContext2.waitingRoomUserCount;
   var dialogStore = (0, _react.useContext)(_context2.StoreContext);
+  var transI18n = (0, _i18n.useI18n)();
   var handlerRoomControlClick = function handlerRoomControlClick(action, userId) {
     if (action === _constant.RoomControlType.MUTE_ALL_AUDIO) {
       setShowMuteAllDialog(true);
@@ -181,16 +265,39 @@ var ParticipantsContainer = (0, _mobxReact.observer)(function () {
   } : void 0;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     className: "participants-container",
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_participants.FcrParticipants, {
+    children: [waitingRoomUserCount > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_tabs.FcrTabs, {
+      items: [{
+        label: transI18n('fmt_waitingroom_sidebar_chat_label_meeting'),
+        key: _constant.RoomType.MAIN_ROOM
+      }, {
+        label: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: "participants-container-icon",
+          children: [isNewWaitingRoomUserEnter ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: "participants-container-red"
+          }) : null, transI18n('fmt_waitingroom_sidebar_label_waiting', {
+            reason1: waitingRoomUserCount
+          })]
+        }),
+        key: _constant.RoomType.WAITING_ROOM
+      }],
+      activeKey: activeTab,
+      onChange: function onChange(key) {
+        handleActiveTab(key);
+      }
+    }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_participants.FcrParticipants, {
       type: currentModal,
       userList: userList,
       onSearch: handlerSearchUser,
       searchText: searchText,
       onInvite: onInvite,
+      hasPinnedStream: hasPinnedStream,
+      toggleParticipantAction: handlerUserAction,
       userRenderer: function userRenderer(user) {
         return /*#__PURE__*/(0, _jsxRuntime.jsx)(_mobxReact.Observer, {
           children: function children() {
             return /*#__PURE__*/(0, _jsxRuntime.jsx)(_attendee.ParticipantAttendee, _objectSpread(_objectSpread({
+              activeTab: activeTab,
+              moveToMainRoomByUserIds: moveToMainRoomByUserIds,
               hasMutePermission: hasMutePermission,
               hasUnmutePermission: hasUnmutePermission,
               hasRequestStartAudioPermission: hasRequestStartAudioPermission,
@@ -210,11 +317,8 @@ var ParticipantsContainer = (0, _mobxReact.observer)(function () {
       //   <FcrWindowHeader type={currentModal} onTypeChange={handlerTypeChange} title="参会人" />
       // }
       ,
-      footer: /*#__PURE__*/(0, _jsxRuntime.jsx)(_footer.FcrParticipantsFooter, {
-        hasRevokeHostPermission: hasRevokeHostPermission,
-        onRoomControlClick: handlerRoomControlClick,
-        type: currentPerspectiveType,
-        moreDropMenu: /*#__PURE__*/(0, _jsxRuntime.jsx)(_roomControlDropMenu.RoomControlDropMenu, {})
+      footer: /*#__PURE__*/(0, _jsxRuntime.jsx)(ParticipantFooter, {
+        handlerRoomControlClick: handlerRoomControlClick
       })
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(MuteAllDialog, {
       getContainer: dialogContaner,
@@ -248,8 +352,8 @@ var ParticipantsContainer = (0, _mobxReact.observer)(function () {
   });
 });
 var View = exports.View = (0, _mobxReact.observer)(function () {
-  var _useContext2 = (0, _react.useContext)(_context.StoreContext),
-    currentModal = _useContext2.currentModal;
+  var _useContext3 = (0, _react.useContext)(_context.StoreContext),
+    currentModal = _useContext3.currentModal;
   if (currentModal === 'modal') {
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(ParticipantsContainer, {});
   }

package/lib/modules/setting/audio-settings/audio-settings.js

@@ -12,6 +12,8 @@ require("core-js/modules/es.date.to-string.js");
 require("core-js/modules/es.number.constructor.js");
 require("core-js/modules/es.object.to-string.js");
 require("core-js/modules/es.regexp.to-string.js");
+require("core-js/modules/esnext.async-iterator.map.js");
+require("core-js/modules/esnext.iterator.map.js");
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = require("react");
 var _radio = require("agora-ui-foundation/lib/components/radio");
@@ -27,11 +29,12 @@ var _speakerDetection = require("../../device-pretest/audio-preview/speaker-dete
 var _mobxReact = require("mobx-react");
 var _context = require("../context");
 require("./index.css");
-var _type = require("agora-edu-core/lib/type");
 var _icon = require("agora-ui-foundation/lib/components/icon");
-var _type2 = require("agora-ui-foundation/lib/components/icon/type");
+var _type = require("agora-ui-foundation/lib/components/icon/type");
 var _tooltip = require("agora-ui-foundation/lib/components/tooltip");
 var _constant = require("../../../utilities/constant");
+var _env = require("agora-foundation/lib/utilities/env");
+var _agoraEduCore = require("agora-edu-core");
 var _jsxRuntime = require("react/jsx-runtime");
 var AudioSettings = exports.AudioSettings = (0, _mobxReact.observer)(function () {
   var ns = (0, _useNamespace.useNamespace)('device-settings-audio');
@@ -68,19 +71,19 @@ var AudioSettings = exports.AudioSettings = (0, _mobxReact.observer)(function ()
   var noiseReduceOptions = (0, _react.useMemo)(function () {
     return [{
       label: t('fmt_internalsetting_label_automatic'),
-      value: _type.FcrAiDenoiseLevel.AUTO
+      value: _agoraEduCore.FcrAiDenoiseLevel.AUTO
     }, {
       label: t('fmt_setting_option_3alow'),
       addition: t('fmt_internalsetting_tips_backgroundsound'),
-      value: _type.FcrAiDenoiseLevel.LOW
+      value: _agoraEduCore.FcrAiDenoiseLevel.LOW
     }, {
       label: t('fmt_setting_option_3amoderate'),
       addition: t('fmt_internalsetting_tips_fanpan'),
-      value: _type.FcrAiDenoiseLevel.MEDIUM
+      value: _agoraEduCore.FcrAiDenoiseLevel.MEDIUM
     }, {
       label: t('fmt_setting_option_3ahigh'),
       addition: t('fmt_internalsetting_tips_dogbarking'),
-      value: _type.FcrAiDenoiseLevel.HIGH
+      value: _agoraEduCore.FcrAiDenoiseLevel.HIGH
     }];
   }, [t]);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
@@ -139,7 +142,8 @@ var AudioSettings = exports.AudioSettings = (0, _mobxReact.observer)(function ()
           microphoneDeviceList: microphoneDeviceList,
           setMicrophoneDevice: setMicrophoneDevice,
           startMicrophoneTest: startMicrophoneTest,
-          stopMicrophoneTest: stopMicrophoneTest
+          stopMicrophoneTest: stopMicrophoneTest,
+          microphoneDetecting: false
         })
       }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
         className: ns.e('form-item'),
@@ -164,7 +168,7 @@ var AudioSettings = exports.AudioSettings = (0, _mobxReact.observer)(function ()
           draggableDom: containerDom,
           disabled: setting.autoAdjustmentMicrophoneVolume
         })]
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      }), (0, _env.isElectron)() && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         className: ns.em('checkbox-wrapper', 'bordered'),
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_checkbox.FcrCheckbox, {
           size: "small",
@@ -206,7 +210,7 @@ var AudioSettings = exports.AudioSettings = (0, _mobxReact.observer)(function ()
           }, item.value);
         })
       })]
-    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    }), (0, _env.isElectron)() && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: (0, _classnames["default"])(ns.e('section'), ns.e('section-pro-audio')),
       id: _constant.HighlightElement.AUDIO_PRO_AUDIO,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
@@ -246,7 +250,7 @@ var AudioSettings = exports.AudioSettings = (0, _mobxReact.observer)(function ()
                 content: t('fmt_internalsetting_tips_optiomizeaudio'),
                 children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
                   children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
-                    type: _type2.FcrIconType.FCR_HELPQUESTION,
+                    type: _type.FcrIconType.FCR_HELPQUESTION,
                     size: 14
                   })
                 })
@@ -261,7 +265,7 @@ var AudioSettings = exports.AudioSettings = (0, _mobxReact.observer)(function ()
                 content: t('fmt_internalsetting_tips_preventechoes'),
                 children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
                   children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
-                    type: _type2.FcrIconType.FCR_HELPQUESTION,
+                    type: _type.FcrIconType.FCR_HELPQUESTION,
                     size: 14
                   })
                 })
@@ -282,7 +286,7 @@ var AudioSettings = exports.AudioSettings = (0, _mobxReact.observer)(function ()
                 content: t('fmt_internalsetting_labels_audiostereoencode'),
                 children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
                   children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
-                    type: _type2.FcrIconType.FCR_HELPQUESTION,
+                    type: _type.FcrIconType.FCR_HELPQUESTION,
                     size: 14
                   })
                 })

package/lib/modules/setting/audio-settings/index.css

@@ -53,9 +53,9 @@
   padding: 10px 12px;
   margin: 10px;
 }
-.fcr-device-settings-audio__options {
+/* .fcr-device-settings-audio__options {
   padding-left: 28px;
-}
+} */
 
 .fcr-device-settings-audio__section .fcr-radio {
   min-width: 100px;

package/lib/modules/setting/context.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 import DeviceSettingsStore from './store';
 export declare const StoreContext: import("react").Context<DeviceSettingsStore>;

package/lib/modules/setting/general-settings/general-settings.js

@@ -33,9 +33,10 @@ var GeneralSettings = exports.GeneralSettings = (0, _mobxReact.observer)(functio
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
             children: t('fmt_internalsetting_labels_voicestimulation')
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.FcrToolTip, {
+            mouseEnterDelay: 0,
             trigger: "hover",
             placement: "top",
-            content: t('fmt_internalsetting_tips_speakerpriority'),
+            content: t('fmt_internalsetting_other_spot_light_desc'),
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
               children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
                 type: _type.FcrIconType.FCR_HELPQUESTION,

package/lib/modules/setting/general-settings/index.css

@@ -3,12 +3,12 @@
   margin-bottom: 10px;
   border-radius: var(--fcr_cornerradius_s);
   width: 100%;
-  padding: 10px;
+  padding: 0 10px 10px;
   background: var(--fcr_mobile_ui_scene_color_popup_block5);
 }
 
 .fcr-general-settings__basic-form:first-child {
-  margin-top: 12px;
+  margin-top: 0px;
 }
 
 .fcr-general-settings__basic-form .fcr-checkbox {

package/lib/modules/setting/index.css

@@ -101,11 +101,7 @@
   width: 100%;
   height: 100%;
 }
-.fcr-device-settings__tab-content-wrapper .fcr-device-settings-video__bottom {
-  position: inherit;
-  bottom: 8px;
-  width: calc(100% - 30px);
-}
+
 .fcr-device-settings__tab-content-wrapper.is-tab-content-video-wrapper {
   overflow: hidden;
 }

package/lib/modules/setting/index.d.ts

@@ -1,4 +1,4 @@
-import { FcrDesktopMediaControl, FcrMainRoomControl, FcrStreamControl } from 'agora-edu-core';
+import { FcrDesktopMediaControl, FcrBaseRoomControl, FcrStreamControl } from 'agora-edu-core';
 import { UIModule } from '../../base';
 import './index.css';
 import { FcrUIEventStore } from '../../common/event-store';
@@ -13,7 +13,7 @@ export declare class SettingUIModule extends UIModule {
         uiEventStore: FcrUIEventStore;
         monitorControl: FcrMonitorControl;
         streamControl: FcrStreamControl;
-        roomControl: FcrMainRoomControl;
+        roomControl: FcrBaseRoomControl;
         deviceStore: FcrDeviceStore;
     });
     getComponent(): import("react/jsx-runtime").JSX.Element;

package/lib/modules/setting/index.dev.js

@@ -16,32 +16,34 @@ var _jsxRuntime = require("react/jsx-runtime");
 var App = (0, _root.hot)(function () {
   return null;
 });
-_reactDom["default"].render( /*#__PURE__*/(0, _jsxRuntime.jsx)(App, {}), document.querySelector('#root'));
-window.__DEV_ENGINE_IS_READY__.then( /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
-  var engine, roomId, roomControl, userName, uiEventStore, securityStore, deviceStore, uiModule, App;
+_reactDom["default"].render(/*#__PURE__*/(0, _jsxRuntime.jsx)(App, {}), document.querySelector('#root'));
+window.__DEV_ENGINE_IS_READY__.then(/*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee() {
+  var engine, roomId, token, roomControl, userName, uiEventStore, securityStore, deviceStore, uiModule, App;
   return _regenerator["default"].wrap(function _callee$(_context) {
     while (1) switch (_context.prev = _context.next) {
       case 0:
         engine = window.__DEV_ENGINE__;
         roomId = window.__DEV_ROOM_ID__;
-        _context.next = 4;
+        token = window.__DEV_USER_TOKEN__;
+        _context.next = 5;
         return engine.login();
-      case 4:
-        roomControl = engine.createRoomControl(roomId);
+      case 5:
+        roomControl = engine.createMainRoomControl(roomId);
         userName = 'test-user';
-        _context.next = 8;
+        _context.next = 9;
         return roomControl.join({
           userRole: _type.FcrUserRole.HOST,
           userName: userName,
+          roomToken: token,
           streamLatency: _type.FcrStreamLatencyLevel.ULTRA_LOW,
           createStreamConfigs: []
         });
-      case 8:
+      case 9:
         uiEventStore = new _eventStore.FcrUIEventStore();
         securityStore = new _securityStore.FcrSecurityStore(roomControl.getPrivilegeControl(), roomControl.getUserControl(), roomControl.getStreamControl(), roomControl.getRoomSessionControl(), uiEventStore);
-        deviceStore = new _deviceStore.FcrDeviceStore(userName, engine.getMediaControl());
+        deviceStore = new _deviceStore.FcrDeviceStore(userName, engine.getDesktopMediaControl());
         uiModule = new _.SettingUIModule({
-          mediaControl: engine.getMediaControl(),
+          mediaControl: engine.getDesktopMediaControl(),
           config: {
             roomToken: '',
             userName: 'lxy',
@@ -62,8 +64,8 @@ window.__DEV_ENGINE_IS_READY__.then( /*#__PURE__*/(0, _asyncToGenerator2["defaul
           });
           return uiModule.getComponent();
         });
-        _reactDom["default"].render( /*#__PURE__*/(0, _jsxRuntime.jsx)(App, {}), document.querySelector('#root'));
-      case 14:
+        _reactDom["default"].render(/*#__PURE__*/(0, _jsxRuntime.jsx)(App, {}), document.querySelector('#root'));
+      case 15:
       case "end":
         return _context.stop();
     }

package/lib/modules/setting/index.js

@@ -19,6 +19,22 @@ require("core-js/modules/es.object.get-own-property-descriptor.js");
 require("core-js/modules/es.object.to-string.js");
 require("core-js/modules/es.reflect.construct.js");
 require("core-js/modules/es.string.iterator.js");
+require("core-js/modules/esnext.function.metadata.js");
+require("core-js/modules/esnext.map.delete-all.js");
+require("core-js/modules/esnext.map.emplace.js");
+require("core-js/modules/esnext.map.every.js");
+require("core-js/modules/esnext.map.filter.js");
+require("core-js/modules/esnext.map.find.js");
+require("core-js/modules/esnext.map.find-key.js");
+require("core-js/modules/esnext.map.includes.js");
+require("core-js/modules/esnext.map.key-of.js");
+require("core-js/modules/esnext.map.map-keys.js");
+require("core-js/modules/esnext.map.map-values.js");
+require("core-js/modules/esnext.map.merge.js");
+require("core-js/modules/esnext.map.reduce.js");
+require("core-js/modules/esnext.map.some.js");
+require("core-js/modules/esnext.map.update.js");
+require("core-js/modules/esnext.symbol.metadata.js");
 require("core-js/modules/web.dom-collections.iterator.js");
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 var _typeof = require("@babel/runtime/helpers/typeof");

package/lib/modules/setting/minutes-settings/index.css

@@ -0,0 +1,65 @@
+.fcr-minutes-settings {
+  padding-top: 15px;
+}
+.fcr-minutes-settings__section {
+  margin-top: 10px;
+  border-radius: var(--fcr_cornerradius_s);
+  width: 100%;
+  background: var(--fcr_mobile_ui_scene_color_popup_block5);
+  padding-bottom: 12px;
+}
+
+.fcr-minutes-settings__section:first-child {
+  margin-top: 0;
+}
+
+.fcr-minutes-settings__section:last-child {
+  margin-bottom: 10px;
+}
+
+.fcr-minutes-settings__section-title {
+  padding: 0 10px 0 12px;
+  font-size: 13px;
+  line-height: 32px;
+  font-weight: 700;
+  color: var(--fcr_ui_scene_icontext1);
+}
+.fcr-minutes-settings__section-sub-title {
+  padding: 0 10px 0 12px;
+  font-size: 12px;
+  color: var(--fcr_ui_scene_icontext1);
+  margin-bottom: 10px;
+}
+.fcr-minutes-settings__section-content-mode {
+  display: flex;
+  gap: 7px;
+  padding: 0 9px;
+}
+.fcr-minutes-settings__mode-item-content {
+  box-sizing: border-box;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid var(--fcr_ui_scene_line1);
+  border-radius: var(--fcr_cornerradius_xs);
+  font-size: 13px;
+  padding: 5px;
+}
+.fcr-minutes-settings__mode-item {
+  flex: 1;
+  padding: 3px;
+  height: 90px;
+  box-sizing: border-box;
+  border-radius: var(--fcr_cornerradius_s);
+  border: 2px solid transparent;
+}
+.fcr-minutes-settings__mode-item-active {
+  border-radius: var(--fcr_cornerradius_s);
+  border: 2px solid var(--fcr_ui_scene_ramp_brand6);
+}
+.fcr-minutes-settings__mode-text {
+  white-space: nowrap;
+  text-align: center;
+}

package/lib/modules/setting/minutes-settings/minutes-settings.d.ts

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+import './index.css';
+export declare const MinutesSettings: FC;
+export default MinutesSettings;