fcr-ui-scene 3.1.1 → 3.2.0

package/lib/fragments/toolbar/store.js

@@ -15,6 +15,22 @@ require("core-js/modules/es.number.constructor.js");
 require("core-js/modules/es.object.create.js");
 require("core-js/modules/es.object.define-property.js");
 require("core-js/modules/es.object.get-own-property-descriptor.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");
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
@@ -26,6 +42,8 @@ require("core-js/modules/es.array.iterator.js");
 require("core-js/modules/es.object.to-string.js");
 require("core-js/modules/es.string.iterator.js");
 require("core-js/modules/es.weak-map.js");
+require("core-js/modules/esnext.weak-map.delete-all.js");
+require("core-js/modules/esnext.weak-map.emplace.js");
 require("core-js/modules/web.dom-collections.iterator.js");
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
@@ -37,8 +55,8 @@ var _rendererEvent = require("../../utilities/renderer-event");
 var _decorator = require("agora-foundation/lib/decorator");
 var _ToolbarStore;
 var _initProto, _init_observables;
-function _classPrivateFieldInitSpec(obj, privateMap, value) { _checkPrivateRedeclaration(obj, privateMap); privateMap.set(obj, value); }
-function _checkPrivateRedeclaration(obj, privateCollection) { if (privateCollection.has(obj)) { throw new TypeError("Cannot initialize the same private elements twice on an object"); } }
+function _classPrivateFieldInitSpec(e, t, a) { _checkPrivateRedeclaration(e, t), t.set(e, a); }
+function _checkPrivateRedeclaration(e, t) { if (t.has(e)) throw new TypeError("Cannot initialize the same private elements twice on an object"); }
 function _classPrivateFieldSet(s, a, r) { return s.set(_assertClassBrand(s, a), r), r; }
 function _classPrivateFieldGet(s, a) { return s.get(_assertClassBrand(s, a)); }
 function _assertClassBrand(e, t, n) { if ("function" == typeof e ? e === t : e.has(t)) return arguments.length < 3 ? t : n; throw new TypeError("Private element is not present on this object"); }

package/lib/fragments/toolbar/view.js

@@ -10,6 +10,8 @@ require("core-js/modules/es.array.map.js");
 require("core-js/modules/es.date.to-string.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 _mobxReact = require("mobx-react");
 var _hooks = require("./hooks");
 var _jsxRuntime = require("react/jsx-runtime");

package/lib/global.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="agora-toolchain/electron/runtime.d.ts" />
 declare module '*.css';
 declare module '*.svga';
 declare module '*.svg';

package/lib/hooks/meeting-time.d.ts

@@ -1,10 +1,10 @@
-import { FcrScheduleInfo } from 'agora-edu-core/lib/type';
+import { FcrRoomSchedule } from 'agora-edu-core/lib/type';
 declare enum MeetingStatus {
     NORMAL = "normal",
     SOON_TO_END = "soon2end",
     OVERTIME = "overtime"
 }
-export declare const useMeetingTime: (scheduleInfo: FcrScheduleInfo | undefined) => {
+export declare const useMeetingTime: (scheduleInfo: FcrRoomSchedule | undefined) => {
     totalHourText: string;
     totalMinuteText: string;
     status: MeetingStatus;

package/lib/modules/action-bar/action-bar-collapes-items.js

@@ -18,6 +18,15 @@ require("core-js/modules/es.function.name.js");
 require("core-js/modules/es.object.to-string.js");
 require("core-js/modules/es.string.includes.js");
 require("core-js/modules/es.string.iterator.js");
+require("core-js/modules/esnext.async-iterator.filter.js");
+require("core-js/modules/esnext.async-iterator.find.js");
+require("core-js/modules/esnext.async-iterator.map.js");
+require("core-js/modules/esnext.async-iterator.reduce.js");
+require("core-js/modules/esnext.iterator.constructor.js");
+require("core-js/modules/esnext.iterator.filter.js");
+require("core-js/modules/esnext.iterator.find.js");
+require("core-js/modules/esnext.iterator.map.js");
+require("core-js/modules/esnext.iterator.reduce.js");
 require("core-js/modules/web.dom-collections.iterator.js");
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _debounce = _interopRequireDefault(require("lodash/debounce"));

package/lib/modules/action-bar/chat/index.js

@@ -17,8 +17,8 @@ var _i18n = require("agora-ui-foundation/lib/i18n");
 var _avatar = require("agora-ui-foundation/lib/components/avatar");
 var _context = require("../context");
 var _fcr_chat_reddot = _interopRequireDefault(require("../../../../public/assets/fcr_chat_reddot.svg"));
-var _type2 = require("agora-edu-core/lib/type");
 var _mobxReact = require("mobx-react");
+var _type2 = require("agora-edu-core/lib/room-control/chatroom-control/type");
 var _jsxRuntime = require("react/jsx-runtime");
 var Chat = exports.Chat = (0, _mobxReact.observer)(function (_ref) {
   var id = _ref.id,

package/lib/modules/action-bar/context.d.ts

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

package/lib/modules/action-bar/device/index.d.ts

@@ -1,8 +1,8 @@
 import { FC } from 'react';
 import './index.css';
 export declare const AudioRecordinDeviceIcon: ({ size, micEnabled }: {
-    size?: number | undefined;
-    micEnabled?: boolean | undefined;
+    size?: number;
+    micEnabled?: boolean;
 }) => import("react/jsx-runtime").JSX.Element;
 export declare const MicrophoneDevice: FC;
 export declare const CameraDevice: FC;

package/lib/modules/action-bar/device/index.js

@@ -7,6 +7,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.MicrophoneDevice = exports.CameraDevice = exports.AudioRecordinDeviceIcon = void 0;
 require("core-js/modules/es.array.map.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");
 require("./index.css");

package/lib/modules/action-bar/index.css

@@ -210,3 +210,7 @@ html {
   box-shadow: var(--fcr_web_light_dropup_m);
   border-radius: var(--fcr_cornerradius_s);
 }
+
+.security-drop-menu-checkbox .fcr-checkbox-label {
+  color: inherit;
+}

package/lib/modules/action-bar/index.d.ts

@@ -1,12 +1,12 @@
 import { UIModule } from '../../base';
 import './index.css';
-import { FcrDesktopMediaControl, FcrMainRoomControl, FcrStreamControl, FcrUserControl } from 'agora-edu-core';
+import { FcrDesktopMediaControl, FcrBaseRoomControl, FcrStreamControl, FcrUserControl } from 'agora-edu-core';
 import { FcrUIEventStore } from '../../common/event-store';
 import { FcrDeviceStore } from '../../common/device-store';
 import { FcrSecurityStore } from '../../common/security-store';
 import { FcrDeviceStreamStore } from '../../common/device-stream-store';
 interface FcrActionBarUIModuleArgs {
-    roomControl: FcrMainRoomControl;
+    roomControl: FcrBaseRoomControl;
     userControl: FcrUserControl;
     uiEventStore: FcrUIEventStore;
     deviceStore: FcrDeviceStore;

package/lib/modules/action-bar/index.dev.js

@@ -17,7 +17,7 @@ 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'));
+_reactDom["default"].render(/*#__PURE__*/(0, _jsxRuntime.jsx)(App, {}), document.querySelector('#root'));
 var Layout = function Layout(props) {
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
     style: {
@@ -35,7 +35,7 @@ var Layout = function Layout(props) {
     })
   });
 };
-window.__DEV_ENGINE_IS_READY__.then( /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
+window.__DEV_ENGINE_IS_READY__.then(/*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee() {
   var engine, roomId, roomControl, userRole, userName, userControl, uiEventStore, securityStore, deviceStore, deviceStreamStore, uiModule, App;
   return _regenerator["default"].wrap(function _callee$(_context) {
     while (1) switch (_context.prev = _context.next) {
@@ -52,6 +52,7 @@ window.__DEV_ENGINE_IS_READY__.then( /*#__PURE__*/(0, _asyncToGenerator2["defaul
         return roomControl.join({
           userRole: userRole,
           userName: userName,
+          roomToken: window.__DEV_USER_TOKEN__,
           streamLatency: _type.FcrStreamLatencyLevel.ULTRA_LOW,
           createStreamConfigs: []
         });
@@ -59,9 +60,9 @@ window.__DEV_ENGINE_IS_READY__.then( /*#__PURE__*/(0, _asyncToGenerator2["defaul
         userControl = roomControl.getUserControl();
         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());
         deviceStreamStore = new _deviceStreamStore.FcrDeviceStreamStore({
-          mediaControl: engine.getMediaControl(),
+          mediaControl: engine.getDesktopMediaControl(),
           roomControl: roomControl,
           securityStore: securityStore,
           deviceStore: deviceStore,
@@ -74,7 +75,7 @@ window.__DEV_ENGINE_IS_READY__.then( /*#__PURE__*/(0, _asyncToGenerator2["defaul
           deviceStore: deviceStore,
           deviceStreamStore: deviceStreamStore,
           uiEventStore: uiEventStore,
-          mediaControl: engine.getMediaControl(),
+          mediaControl: engine.getDesktopMediaControl(),
           streamControl: roomControl.getStreamControl()
         });
         App = (0, _root.hot)(function () {
@@ -85,7 +86,7 @@ window.__DEV_ENGINE_IS_READY__.then( /*#__PURE__*/(0, _asyncToGenerator2["defaul
           });
           return uiModule === null || uiModule === void 0 ? void 0 : uiModule.getComponent();
         });
-        _reactDom["default"].render( /*#__PURE__*/(0, _jsxRuntime.jsx)(Layout, {
+        _reactDom["default"].render(/*#__PURE__*/(0, _jsxRuntime.jsx)(Layout, {
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(App, {})
         }), document.querySelector('#root'));
       case 17:

package/lib/modules/action-bar/item-placement.d.ts

@@ -1,8 +1,7 @@
-/// <reference types="react" />
 type ActionBarItemPlacementProps = {
     placement: 'left' | 'mid' | 'right';
 };
 export declare const ActionBarItemPlacement: import("react").ForwardRefExoticComponent<ActionBarItemPlacementProps & {
-    children?: import("react").ReactNode;
+    children?: import("react").ReactNode | undefined;
 } & import("react").RefAttributes<HTMLDivElement>>;
 export {};

package/lib/modules/action-bar/item.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", {

package/lib/modules/action-bar/leave/assign-host.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import './index.css';
 interface AssignHostProps {
     setPopoverOpened: React.Dispatch<React.SetStateAction<boolean>>;

package/lib/modules/action-bar/leave/assign-host.js

@@ -15,6 +15,7 @@ var _react = require("react");
 require("./index.css");
 var _context2 = require("../context");
 var _chatSelect = require("../../chat/chat-select");
+var _i18n = require("agora-ui-foundation/lib/i18n");
 var _jsxRuntime = require("react/jsx-runtime");
 var AssignHost = exports.AssignHost = (0, _mobxReact.observer)(function (props) {
   var _useContext = (0, _react.useContext)(_context2.ActionBarContext),
@@ -24,8 +25,9 @@ var AssignHost = exports.AssignHost = (0, _mobxReact.observer)(function (props)
     _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
     selected = _useState2[0],
     setSelected = _useState2[1];
+  var t = (0, _i18n.useI18n)();
   var handleLeave = /*#__PURE__*/function () {
-    var _ref = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
+    var _ref = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee() {
       var user;
       return _regenerator["default"].wrap(function _callee$(_context) {
         while (1) switch (_context.prev = _context.next) {
@@ -48,12 +50,12 @@ var AssignHost = exports.AssignHost = (0, _mobxReact.observer)(function (props)
     type: "assign-host",
     title: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: "assign-host-title",
-      children: "Assign a New Host"
+      children: t('fmt_toolbar_button_assignnewhost')
     }),
     bottomBar: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: "assign-host-bottom",
       onClick: handleLeave,
-      children: "Assign and Leave"
+      children: t('fmt_toolbar_button_assignleave')
     }),
     candidateUsers: remoteUsers,
     selectedUid: remoteUsers[selected].userId,

package/lib/modules/action-bar/leave/index.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", {
@@ -103,7 +108,7 @@ var End = exports.End = (0, _mobxReact.observer)(function (props) {
         shape: "rounded",
         size: "XS"
       }, buttonProps), {}, {
-        children: popoverOpened ? 'Cancel' : localUserRole === _type.FcrUserRole.HOST ? transI18n('fmt_toolbar_button_end') : transI18n('fmt_toolbar_button_leave')
+        children: popoverOpened ? transI18n('fmt_toolbar_button_cancel') : localUserRole === _type.FcrUserRole.HOST ? transI18n('fmt_toolbar_button_end') : transI18n('fmt_toolbar_button_leave')
       }))
     })
   });

package/lib/modules/action-bar/leave/leave-meeting.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import './index.css';
 interface LeaveMeetingProps {
     setPopoverOpened: React.Dispatch<React.SetStateAction<boolean>>;

package/lib/modules/action-bar/more/poppover-content.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import './index.css';
 interface MenuItemProps {
     setVisible: React.Dispatch<React.SetStateAction<boolean>>;

package/lib/modules/action-bar/more/poppover-content.js

@@ -7,6 +7,10 @@ require("core-js/modules/es.object.define-properties.js");
 require("core-js/modules/es.object.define-property.js");
 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/esnext.async-iterator.filter.js");
+require("core-js/modules/esnext.async-iterator.for-each.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", {
@@ -21,6 +25,12 @@ require("core-js/modules/es.array.sort.js");
 require("core-js/modules/es.number.constructor.js");
 require("core-js/modules/es.object.keys.js");
 require("core-js/modules/es.object.to-string.js");
+require("core-js/modules/esnext.array.group.js");
+require("core-js/modules/esnext.async-iterator.map.js");
+require("core-js/modules/esnext.async-iterator.reduce.js");
+require("core-js/modules/esnext.iterator.constructor.js");
+require("core-js/modules/esnext.iterator.map.js");
+require("core-js/modules/esnext.iterator.reduce.js");
 var _mobxReact = require("mobx-react");
 var _react = require("react");
 var _type = require("agora-edu-core/lib/type");

package/lib/modules/action-bar/screen-share/submenu.js

@@ -132,6 +132,7 @@ var SubMenu = exports.SubMenu = (0, _mobxReact.observer)(function () {
     title: /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.FcrButton, {
       size: "XS",
       styleType: "danger",
+      shape: "rounded",
       block: true,
       children: t('fmt_screenshare_button_disableshare', {
         reason1: boardOwnerUser ? boardOwnerUser.userName : t('fmt_actionbar_screenshare_labels_others')

package/lib/modules/action-bar/security/drop-menu.js

@@ -1,11 +1,30 @@
 "use strict";
 
+require("core-js/modules/es.symbol.js");
+require("core-js/modules/es.array.for-each.js");
+require("core-js/modules/es.object.define-properties.js");
 require("core-js/modules/es.object.define-property.js");
+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/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", {
   value: true
 });
 exports.SecurityMenu = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+require("core-js/modules/es.array.filter.js");
+require("core-js/modules/es.array.map.js");
 require("core-js/modules/es.array.push.js");
+require("core-js/modules/es.object.to-string.js");
+require("core-js/modules/esnext.async-iterator.map.js");
+require("core-js/modules/esnext.iterator.map.js");
 var _dropMenu = require("agora-ui-foundation/lib/components/drop-menu");
 var _context = require("../context");
 var _react = require("react");
@@ -13,6 +32,8 @@ var _checkbox = require("agora-ui-foundation/lib/components/checkbox");
 var _mobxReact = require("mobx-react");
 var _i18n = require("agora-ui-foundation/lib/i18n");
 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; }
 var SecurityMenu = exports.SecurityMenu = (0, _mobxReact.observer)(function () {
   var _useContext = (0, _react.useContext)(_context.ActionBarContext),
     isLockRoomEnabled = _useContext.isLockRoomEnabled,
@@ -159,6 +180,18 @@ var SecurityMenu = exports.SecurityMenu = (0, _mobxReact.observer)(function () {
     classNames: 'room-control-drop-disable'
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_dropMenu.FcrDropMenu, {
-    options: allActions
+    options: allActions.filter(function (v) {
+      return v.type !== 'disabled';
+    }).map(function (v) {
+      if (v.type === 'primary') {
+        return _objectSpread(_objectSpread({}, v), {}, {
+          title: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: "security-drop-menu-checkbox",
+            children: v.title
+          })
+        });
+      }
+      return _objectSpread({}, v);
+    })
   });
 });

package/lib/modules/action-bar/security/index.js

@@ -30,7 +30,7 @@ var Security = exports.Security = (0, _mobxReact.observer)(function (_ref) {
         content: /*#__PURE__*/(0, _jsxRuntime.jsx)(_dropMenu.SecurityMenu, {}),
         overlayClassName: 'attendee__footer-more-actions',
         overlayInnerStyle: {
-          boxShadow: 'none',
+          boxShadow: 'var(--fcr_web_light_dropup_m)',
           border: 'none',
           width: '256px'
         },

package/lib/modules/action-bar/settings/index.js

@@ -30,7 +30,7 @@ var Settings = exports.Settings = function Settings(_ref) {
       title: title,
       onClick: function onClick() {
         openDeviceSettingDialog({
-          activeTab: _store.DeviceSettingTab.VIDEO
+          activeTab: _store.DeviceSettingTab.GENERAL
         });
       },
       iconColors: {

package/lib/modules/action-bar/store.d.ts

@@ -1,5 +1,5 @@
-import { FcrDesktopMediaControl, FcrMainRoomControl, FcrStreamControl, FcrUserControl } from 'agora-edu-core';
-import { FcrChatRoomReceiveBaseMessage, FcrLiveStreamingState, FcrRecordingState, FcrUserInfo, FcrUserRole, FcrSharePermissionProps } from 'agora-edu-core/lib/type';
+import { FcrBaseRoomControl, FcrDesktopMediaControl, FcrStreamControl, FcrUserControl } from 'agora-edu-core';
+import { FcrLiveStreamingState, FcrRecordingState, FcrUserInfo, FcrUserRole } from 'agora-edu-core/lib/type';
 import { FcrUIEventStore } from '../../common/event-store';
 import { DeviceSettingDialogConfig } from '../setting/store';
 import { FcrSecurityStore } from '../../common/security-store';
@@ -7,8 +7,9 @@ import { FcrDeviceStore } from '../../common/device-store';
 import { ConnectType, ConnectionTabType } from './type';
 import { FcrDeviceStreamStore } from '../../common/device-stream-store';
 import { FcrSharePermissionState } from 'agora-edu-core/lib/room-control/whiteboard-control/enums';
+import { FcrChatRoomReceiveBaseMessage } from 'agora-edu-core/lib/room-control/chatroom-control/type';
 interface ActionBarStoreArgs {
-    roomControl: FcrMainRoomControl;
+    roomControl: FcrBaseRoomControl;
     userControl: FcrUserControl;
     uiEventStore: FcrUIEventStore;
     deviceStore: FcrDeviceStore;
@@ -39,9 +40,11 @@ export default class ActionBarStore {
     private _deviceStreamStore;
     private _uiEventStore;
     private _securityStore;
+    private _screenVideoTrack;
     private _userObserver;
     private _roomObserver;
     private _uiEventObserver;
+    private _observer;
     private _openedDialogIdMap;
     private _participantVisible;
     private _chatVisible;
@@ -111,20 +114,9 @@ export default class ActionBarStore {
     enableMicrophone(enable: boolean): void;
     setMicrophoneId(microphoneId: string): void;
     setSpeakerId(speakerId: string): void;
-    setAllowBoardWrite(): Promise<{
-        msg: string;
-        data: Record<string, FcrSharePermissionProps>;
-        code: number;
-        ts: number;
-    }>;
-    setAllowScreenShare(state?: FcrSharePermissionState): Promise<{
-        msg: string;
-        data: Record<string, FcrSharePermissionProps>;
-        code: number;
-        ts: number;
-    }>;
+    setAllowBoardWrite(): Promise<void>;
+    setAllowScreenShare(state?: FcrSharePermissionState): Promise<void>;
     closeBoard(): void;
-    enableShare(state: FcrSharePermissionState): Promise<void>;
     assignHost(user: FcrUserInfo): void;
     leave(): void;
     keepPhoneAudioConnection(): void;
@@ -153,7 +145,6 @@ export default class ActionBarStore {
     startScreenShare(): void;
     openWhiteboard(): void;
     closeWhiteboard(): void;
-    stopScreenShare(): void;
     openLiveStreamingDialog(): void;
     closeLiveStreamingDialog(): void;
     toggleConnection(): void;
@@ -170,6 +161,7 @@ export default class ActionBarStore {
     private _handleLiveStreamingStateUpdated;
     private _handleNewMessageEvent;
     private _handleChatVisible;
+    private _handlerTraceScreenCaptureStateUpdate;
     private _onEvent;
     private _handleCloudRecordingStateUpdated;
     private _handleStreamsAddedOrUpdated;