fcr-ui-scene 3.4.0 → 3.4.1

package/lib/modules/layout/member-window/index.css

@@ -125,7 +125,7 @@
   opacity: 1;
 }
 .fcr-member-window-pin {
-  display: flex;
+  display: none;
   justify-content: center;
   align-items: center;
   position: absolute;
@@ -135,12 +135,13 @@
   height: 26px;
   border-radius: var(--fcr_cornerradius_xs);
   background-color: var(--fcr_ui_scene_view_toast);
-  opacity: 0;
-  transition: opacity 0.2s;
+  /* opacity: 0; */
+  /* transition: opacity 0.2s; */
   z-index: 3;
 }
 .fcr-member-window-pin-show {
-  opacity: 1;
+  /* opacity: 1; */
+  display: flex;
 }
 .fcr-member-board:hover .fcr-user-window-actions-top,
 .fcr-member-window:hover .fcr-user-window-actions-top {
@@ -160,6 +161,11 @@
   margin-left: 0px;
   display: flex;
 }
+
+.fcr-member-window-members-sharebtn-large {
+  height: 24px;
+  margin-right: 6px;
+}
 /* fcr-member-window-action start */
 
 .fcr-user-window-actions {
@@ -199,7 +205,7 @@
   overflow: hidden;
 }
 .fcr-user-window-actions-bottom-layout-info {
-  border-radius: var(--fcr_cornerradius_xxs);
+  border-radius: var(--fcr_cornerradius_xs);
   background-color: var(--fcr_ui_scene_view_toast);
   display: inline-flex;
   align-items: center;
@@ -218,13 +224,12 @@
 }
 .fcr-member-window-gallery .fcr-user-window-actions-bottom {
   height: 24px;
-  border-radius: var(--fcr_cornerradius_s);
   font-size: 12px;
 }
 
 .fcr-user-window-actions-tag {
   height: 18px;
-  border-radius: var(--fcr_cornerradius_xxs);
+  border-radius: var(--fcr_cornerradius_xs);
   display: inline-flex;
   align-items: center;
   white-space: nowrap;
@@ -232,14 +237,14 @@
 
 .fcr-member-window-gallery .fcr-user-window-actions-tag {
   height: 24px;
-  border-radius: var(--fcr_cornerradius_s);
+  border-radius: var(--fcr_cornerradius_xs);
 }
 
 .fcr-user-window-actions-tag-host {
   color: var(--fcr_ui_scene_white10);
   background: linear-gradient(90deg, #4262ff, #7c79ff);
   padding: 0 8px;
-  margin-right: 10px;
+  /* margin-right: 10px; */
 }
 
 .fcr-user-window-actions-tag-host:has(svg) {
@@ -306,6 +311,10 @@
   text-overflow: ellipsis;
 }
 
+.fcr-user-window-actions-bottom .fcr-user-window-actions-name.ml-5 {
+  margin-left: 5px;
+}
+
 .fcr-user-window-actions-name-isme {
   font-weight: normal;
 }
@@ -321,6 +330,10 @@
   display: block;
 }
 
+.member-window-actions__more-actions {
+  padding: 0;
+}
+
 /* .fcr-member-window-gallery .fcr-user-window-actions-name {
   padding: 0 4px;
 } */

package/lib/modules/layout/member-window/index.js

@@ -571,14 +571,15 @@ var MemberWindowActions = exports.MemberWindowActions = (0, _mobxReact.observer)
         className: (0, _classnames["default"])('fcr-user-window-actions-bottom-layout'),
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
           className: (0, _classnames["default"])('fcr-member-window-members-sharebtn', {
-            'fcr-member-window-members-sharebtn-show': hasScreenSharing
+            'fcr-member-window-members-sharebtn-show': hasScreenSharing,
+            'fcr-member-window-members-sharebtn-large': windowSize === 'large'
           }),
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
             type: _type.FcrIconType.FCR_MOBILE_SHARESCREEN,
             colors: {
               iconPrimary: 'var(--fcr_ui_scene_white10)'
             },
-            size: 18
+            size: windowSize === 'large' ? 24 : 18
           })
         }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
           className: "fcr-user-window-actions-bottom-layout-info",
@@ -654,7 +655,9 @@ var MemberWindowActions = exports.MemberWindowActions = (0, _mobxReact.observer)
               })
             }) : null]
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-            className: "fcr-user-window-actions-name",
+            className: (0, _classnames["default"])('fcr-user-window-actions-name', {
+              'ml-5': isManager || isShowInterpreterTag
+            }),
             children: suffixedName
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
             className: "fcr-user-window-actions-name-isme",
@@ -699,6 +702,16 @@ var MemberWindowActions = exports.MemberWindowActions = (0, _mobxReact.observer)
           trigger: "click",
           visible: isShowDropMenu,
           onVisibleChange: onVisibleChange,
+          overlayInnerStyle: {
+            border: 0,
+            boxShadow: '0px 0px 15px var(--fcr_web_light_dropup_m)',
+            borderRadius: 'var(--fcr_cornerradius_l)',
+            minWidth: '210px',
+            maxWidth: '300px',
+            width: 'fit-content'
+          },
+          overlayClassName: "member-window-actions__more-actions",
+          mouseEnterDelay: 0,
           content: /*#__PURE__*/(0, _jsxRuntime.jsx)(_participantsMore.FcrParticipantsMoreActions, {
             userType: userType,
             hasPinnedStream: hasPinnedStream,

package/lib/modules/layout/store.d.ts

@@ -33,7 +33,7 @@ export interface LayoutStoreParams {
     mediaControl: FcrDesktopMediaControl;
     securityStore: FcrSecurityStore;
     chatRoomControl: FcrChatRoomControl;
-    whiteBoardControl: FcrWhiteboardControl;
+    whiteboardControl: FcrWhiteboardControl;
     privilegeControl: FcrPrivilegeControl;
     interpreterControl: FcrInterpreterControl;
     roomControl: FcrBaseRoomControl;

package/lib/modules/layout/store.js

@@ -244,7 +244,7 @@ var LayoutStore = exports["default"] = /*#__PURE__*/function () {
     this._userControl = params.userControl;
     this._streamControl = params.streamControl;
     this._chatRoomControl = chatRoomControl;
-    this._whiteBoardControl = params.whiteBoardControl;
+    this._whiteBoardControl = params.whiteboardControl;
     this._privilegeControl = params.privilegeControl;
     this._interpreterControl = interpreterControl;
     this._roomControl = roomControl;
@@ -1136,12 +1136,6 @@ var LayoutStore = exports["default"] = /*#__PURE__*/function () {
           shouldHideNonVideoParticipants = _ref10.shouldHideNonVideoParticipants;
         this.shouldHideNonVideoParticipants = shouldHideNonVideoParticipants;
         this.enableSpotlight = spotlightEnabled;
-        if (shouldHideNonVideoParticipants) {
-          this._uiEventStore.showToast({
-            type: 'info',
-            message: (0, _i18n.transI18n)('fmt_internalsetting_other_hide_no_video_toast')
-          });
-        }
       }
       if (action === _constant.UIAction.WHITEBOARD_CHANGED) {
         var _ref11 = payload,

package/lib/modules/layout/video-window-datasource.js

@@ -674,22 +674,30 @@ var FcrUIVideoWindowDataSource = exports.FcrUIVideoWindowDataSource = /*#__PURE_
       var handleStreamInfoUpdated = function handleStreamInfoUpdated(stream, list, limitCount, placement) {
         var existedUserStream = list[_this4._findItemIndexWithWindowId(stream.streamId, list)];
         if (existedUserStream) {
+          var oldSortingPriority = existedUserStream.sortingPriority;
           if (param.connectorType === _fcrCore.FcrRoomConnectorType.PSTN) {
             existedUserStream.setAudioStream(stream);
           } else {
             existedUserStream.setVideoStream(stream);
           }
-          var index = _this4._insertByPriority(existedUserStream, list, limitCount);
-          _this4._observer.notifyObservers(placement === 'main-list' ? 'onMainListUpdated' : 'onFoldListUpdated', index);
+          var newSortingPriority = existedUserStream.sortingPriority;
+          if (oldSortingPriority !== newSortingPriority) {
+            var index = _this4._insertByPriority(existedUserStream, list, limitCount);
+            _this4._observer.notifyObservers(placement === 'main-list' ? 'onMainListUpdated' : 'onFoldListUpdated', index);
+          }
         }
       };
       var handleUserInfoUpdated = function handleUserInfoUpdated(user, list, limitCount, placement) {
         var modifiedItems = [];
         list.forEach(function (item) {
           if (item.userId === user.userId) {
+            var oldSortingPriority = item.sortingPriority;
             item.setVideoStreamOwnerInfo(user);
             item.setAudioStreamOwnerInfo(user);
-            modifiedItems.push(item);
+            var newSortingPriority = item.sortingPriority;
+            if (oldSortingPriority !== newSortingPriority) {
+              modifiedItems.push(item);
+            }
           }
         });
         modifiedItems.forEach(function (item) {

package/lib/modules/notification/index.css

@@ -3,6 +3,7 @@
   border-radius: 10px;
   position: relative;
   z-index: 9999;
+  padding: 13px 0 0 10px;
 }
 
 .waiting-room-confirm-dialog .fcr-dialog-body {

package/lib/modules/participant/attendee/index.css

@@ -14,4 +14,5 @@
 }
 .attendee__more-actions {
   max-width: 300px;
+  padding: 0;
 }

package/lib/modules/participant/attendee/index.js

@@ -423,7 +423,8 @@ var ParticipantAttendee = exports.ParticipantAttendee = (0, _mobxReact.observer)
         userId: userId
       }), videoDeviceType !== 'none' && activeTab === _constant.RoomType.MAIN_ROOM && /*#__PURE__*/(0, _jsxRuntime.jsx)(_cameraState.CameraState, {
         isCameraMuted: !hasVideo,
-        size: 28
+        size: 28,
+        renderIconType: 'surface'
       })]
     }), userActions()]
   }, userId);

package/lib/modules/participant/components/drop-menu/index.css

@@ -31,6 +31,7 @@
   background-color: transparent;
   padding: 0px 4px;
   width: auto !important;
+  border-radius: var(--fcr_cornerradius_xxs);
 }
 .room-control-options-watermark-btn--active {
   background-color: #ffffff;

package/lib/modules/participant/components/drop-menu/index.js

@@ -52,7 +52,7 @@ var RoomControlDropMenu = exports.RoomControlDropMenu = (0, _mobxReact.observer)
     hasRevokeHostPermission = _useContext.hasRevokeHostPermission;
   var allActions = [{
     title: /*#__PURE__*/(0, _jsxRuntime.jsx)(_checkbox.FcrCheckbox, {
-      defaultChecked: false,
+      checked: false,
       label: t('fmt_security_buttons_allhandsdown'),
       styleType: "white"
     }),
@@ -61,7 +61,7 @@ var RoomControlDropMenu = exports.RoomControlDropMenu = (0, _mobxReact.observer)
     classNames: 'room-control-drop-with-under-line'
   }, {
     title: /*#__PURE__*/(0, _jsxRuntime.jsx)(_checkbox.FcrCheckbox, {
-      defaultChecked: allowJoinWithMuteAudio,
+      checked: allowJoinWithMuteAudio,
       label: t('fmt_security_options_silence'),
       styleType: "white"
     }),
@@ -72,7 +72,7 @@ var RoomControlDropMenu = exports.RoomControlDropMenu = (0, _mobxReact.observer)
     }
   }, {
     title: /*#__PURE__*/(0, _jsxRuntime.jsx)(_checkbox.FcrCheckbox, {
-      defaultChecked: false,
+      checked: false,
       label: t('fmt_security_options_playnotification'),
       styleType: "white"
     }),
@@ -83,7 +83,7 @@ var RoomControlDropMenu = exports.RoomControlDropMenu = (0, _mobxReact.observer)
     }
   }, {
     title: /*#__PURE__*/(0, _jsxRuntime.jsx)(_checkbox.FcrCheckbox, {
-      defaultChecked: isLockRoomEnabled,
+      checked: isLockRoomEnabled,
       label: t('fmt_screenshare_controlbar_security_list_lock'),
       styleType: "white"
     }),
@@ -94,7 +94,7 @@ var RoomControlDropMenu = exports.RoomControlDropMenu = (0, _mobxReact.observer)
     }
   }, {
     title: /*#__PURE__*/(0, _jsxRuntime.jsx)(_checkbox.FcrCheckbox, {
-      defaultChecked: isWaitingRoomEnabled,
+      checked: isWaitingRoomEnabled,
       label: t('fmt_screenshare_options_allow'),
       styleType: "white"
     }),
@@ -110,7 +110,7 @@ var RoomControlDropMenu = exports.RoomControlDropMenu = (0, _mobxReact.observer)
     type: 'title'
   }, {
     title: /*#__PURE__*/(0, _jsxRuntime.jsx)(_checkbox.FcrCheckbox, {
-      defaultChecked: allowUnmuteSelfAudio,
+      checked: allowUnmuteSelfAudio,
       label: t('fmt_screenshare_controlbar_security_list_participant_unmute'),
       styleType: "white"
     }),
@@ -121,7 +121,7 @@ var RoomControlDropMenu = exports.RoomControlDropMenu = (0, _mobxReact.observer)
     }
   }, {
     title: /*#__PURE__*/(0, _jsxRuntime.jsx)(_checkbox.FcrCheckbox, {
-      defaultChecked: allowUnmuteSelfVideo,
+      checked: allowUnmuteSelfVideo,
       label: t('fmt_security_options_openvideo'),
       styleType: "white"
     }),
@@ -132,7 +132,7 @@ var RoomControlDropMenu = exports.RoomControlDropMenu = (0, _mobxReact.observer)
     }
   }, {
     title: /*#__PURE__*/(0, _jsxRuntime.jsx)(_checkbox.FcrCheckbox, {
-      defaultChecked: allowChangeSelfName,
+      checked: allowChangeSelfName,
       label: t('fmt_additional_label_change_name_self'),
       styleType: "white"
     }),
@@ -159,7 +159,7 @@ var RoomControlDropMenu = exports.RoomControlDropMenu = (0, _mobxReact.observer)
   if (hasRevokeHostPermission) {
     allActions.unshift({
       title: /*#__PURE__*/(0, _jsxRuntime.jsx)(_checkbox.FcrCheckbox, {
-        defaultChecked: false,
+        checked: false,
         label: t('fmt_security_options_restract'),
         styleType: "white"
       }),

package/lib/modules/participant/index.css

@@ -2,6 +2,7 @@
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
+  flex-direction: column;
   width: 100%;
   min-width: 320px;
   flex: 1;
@@ -82,3 +83,7 @@
   display: flex;
   flex: 1;
 }
+
+.participants-container .fcr-tabs {
+  margin: 0 15px;
+}

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

@@ -1,27 +1,12 @@
-import { FcrCoreEngine } from 'fcr-core';
 import { UIModule } from '../../base';
-import { FcrSecurityStore } from '../../common/security-store';
-import { FcrUIEventStore } from '../../common/event-store';
-import { FcrDeviceStore } from '../../common/device-store';
-import { FcrDeviceStreamStore } from '../../common/device-stream-store';
-import { FcrPeerSessionControl } from 'fcr-core/lib/peer-session/type';
-import { FcrInterpreterControl } from 'fcr-core/lib/room-control/interpreter-control/types';
 import { FcrMainRoomControl } from 'fcr-core/lib/room-control/type';
 import { OperateWaitingRoomMemberDialogProps } from './attendee';
-import { FcrRoomStore } from '../../common/room-store';
 import './index.css';
+import { StoreConfig } from '../../type';
 export declare class ParticipantUIModule extends UIModule {
     private _store;
-    constructor(args: {
+    constructor(args: StoreConfig & {
         roomControl: FcrMainRoomControl;
-        engine: FcrCoreEngine;
-        peerSessionControl: FcrPeerSessionControl;
-        securityStore: FcrSecurityStore;
-        uiEventStore: FcrUIEventStore;
-        deviceStore: FcrDeviceStore;
-        deviceStreamStore: FcrDeviceStreamStore;
-        interpreterControl: FcrInterpreterControl;
-        roomStore: FcrRoomStore;
     });
     getComponent(): import("react/jsx-runtime").JSX.Element;
     getWaitingRoomDialog(params: OperateWaitingRoomMemberDialogProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,5 +1,20 @@
 "use strict";
 
+require("core-js/modules/es.symbol.js");
+require("core-js/modules/es.array.filter.js");
+require("core-js/modules/es.array.for-each.js");
+require("core-js/modules/es.array.push.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");
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 require("core-js/modules/es.array.iterator.js");
@@ -13,6 +28,7 @@ require("core-js/modules/web.url-search-params.js");
 require("core-js/modules/web.url-search-params.delete.js");
 require("core-js/modules/web.url-search-params.has.js");
 require("core-js/modules/web.url-search-params.size.js");
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _reactDom = _interopRequireDefault(require("react-dom"));
 var _root = require("react-hot-loader/root");
@@ -25,14 +41,15 @@ var _dialog = require("../dialog");
 var _deviceStore = require("../../common/device-store");
 var _deviceStreamStore = require("../../common/device-stream-store");
 var _roomStore = require("../../common/room-store");
-var _remoteRenderer = require("../../common/remote-renderer");
 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 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, urlParams, isAssistant, roomId, token, roomControl, userName, deviceStore, uiEventStore, securityStore, dialogModule, deviceStreamStore, uiModule, App;
+  var engine, urlParams, isAssistant, roomId, token, roomControl, userName, deviceStore, uiEventStore, securityStore, config, dialogModule, deviceStreamStore, uiModule, App;
   return _regenerator["default"].wrap(function _callee$(_context) {
     while (1) switch (_context.prev = _context.next) {
       case 0:
@@ -57,36 +74,30 @@ window.__DEV_ENGINE_IS_READY__.then(/*#__PURE__*/(0, _asyncToGenerator2["default
         });
       case 12:
         uiEventStore = new _eventStore.FcrUIEventStore();
-        securityStore = new _securityStore.FcrSecurityStore(roomControl.getPrivilegeControl(), roomControl.getUserControl(), roomControl.getStreamControl(), roomControl.getRoomSessionControl(), uiEventStore);
-        dialogModule = new _dialog.DialogUIModule({
-          uiEventStore: uiEventStore,
-          userInfo: roomControl.getUserControl().getLocalUser(),
-          securityStore: securityStore,
-          userControl: roomControl.getUserControl(),
-          chatRoomControl: roomControl.getChatRoomControl(),
-          deviceStore: deviceStore,
-          streamControl: roomControl.getStreamControl(),
-          remoteVideoRenderManager: new _remoteRenderer.FcrRemoteVideoRenderManager(roomControl.getStreamControl())
-        });
-        deviceStreamStore = new _deviceStreamStore.FcrDeviceStreamStore({
+        securityStore = new _securityStore.FcrSecurityStore(roomControl.getPrivilegeControl(), roomControl.getUserControl(), roomControl.getStreamControl(), uiEventStore);
+        config = {
           mediaControl: engine.getDesktopMediaControl(),
           roomControl: roomControl,
           securityStore: securityStore,
           deviceStore: deviceStore,
           uiEventStore: uiEventStore,
-          roomStore: new _roomStore.FcrRoomStore(uiEventStore, deviceStore, {}, engine)
-        });
-        uiModule = new _.ParticipantUIModule({
-          roomControl: roomControl,
-          engine: engine,
-          peerSessionControl: engine.getPeerSessionControl(),
-          securityStore: securityStore,
-          uiEventStore: uiEventStore,
-          deviceStore: deviceStore,
-          deviceStreamStore: deviceStreamStore,
           roomStore: new _roomStore.FcrRoomStore(uiEventStore, deviceStore, {}, engine),
-          interpreterControl: null
-        });
+          streamControl: roomControl.getStreamControl(),
+          userControl: roomControl.getUserControl(),
+          privilegeControl: roomControl.getPrivilegeControl(),
+          interpreterControl: roomControl.getInterpreterControl(),
+          chatRoomControl: roomControl.getChatRoomControl(),
+          engine: null,
+          remoteVideoRenderManager: null,
+          config: null,
+          parameters: null,
+          deviceStreamStore: null
+        };
+        dialogModule = new _dialog.DialogUIModule(config);
+        deviceStreamStore = new _deviceStreamStore.FcrDeviceStreamStore(config);
+        uiModule = new _.ParticipantUIModule(_objectSpread(_objectSpread({}, config), {}, {
+          deviceStreamStore: deviceStreamStore
+        }));
         App = (0, _root.hot)(function () {
           (0, _hooks.useUnmount)(function () {
             uiModule.release();
@@ -98,7 +109,7 @@ window.__DEV_ENGINE_IS_READY__.then(/*#__PURE__*/(0, _asyncToGenerator2["default
           });
         });
         _reactDom["default"].render(/*#__PURE__*/(0, _jsxRuntime.jsx)(App, {}), document.querySelector('#root'));
-      case 19:
+      case 20:
       case "end":
         return _context.stop();
     }

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

@@ -1,20 +1,15 @@
-import { FcrCoreEngine, FcrPrivilegeUserRole } from 'fcr-core';
-import { FcrPeerSessionControl } from 'fcr-core/lib/peer-session/type';
+import { FcrPrivilegeUserRole } from 'fcr-core';
 import { FcrUserInfo, FcrUserRole } from 'fcr-core/lib/type';
 import { RoomType } from '../../utilities/constant';
 import { ParticipantActionType, User } from 'agora-ui-foundation/lib/components/participants/attendee';
-import { FcrSecurityStore } from '../../common/security-store';
 import { DialogKey, RoomControlType } from '../../utilities/constant';
-import { FcrUIEventStore } from '../../common/event-store';
-import { FcrDeviceStore } from '../../common/device-store';
-import { FcrDeviceStreamStore } from '../../common/device-stream-store';
 import { FcrUIMemberData } from './type';
 import { FcrUserKickedOutType } from 'fcr-core/lib/room-control/user-control/type';
 import { FcrMainRoomControl } from 'fcr-core/lib/room-control/type';
-import { FcrInterpreterControl, FcrInterpreterUserInfo, FcrLanguage } from 'fcr-core/lib/room-control/interpreter-control/types';
+import { FcrInterpreterUserInfo, FcrLanguage } from 'fcr-core/lib/room-control/interpreter-control/types';
 import { OperateWaitingRoomMemberDialogProps } from './attendee';
-import { FcrRoomStore } from '../../common/room-store';
 import { ConfirmContentProps } from 'agora-ui-foundation/lib/components/confirm-content';
+import { StoreConfig } from '../../type';
 export default class ParticipantStore {
     protected logger: import("agora-foundation/lib/logger").Logger;
     private _interpreterControl;
@@ -87,16 +82,8 @@ export default class ParticipantStore {
     get userList(): User[];
     get localMicVolume(): number;
     get hasRevokeHostPermission(): boolean;
-    constructor({ roomControl, peerSessionControl, securityStore, uiEventStore, deviceStore, deviceStreamStore, interpreterControl, roomStore, }: {
+    constructor({ roomControl, securityStore, uiEventStore, deviceStore, deviceStreamStore, roomStore, engine, }: StoreConfig & {
         roomControl: FcrMainRoomControl;
-        engine: FcrCoreEngine;
-        peerSessionControl: FcrPeerSessionControl;
-        securityStore: FcrSecurityStore;
-        uiEventStore: FcrUIEventStore;
-        deviceStore: FcrDeviceStore;
-        deviceStreamStore: FcrDeviceStreamStore;
-        interpreterControl: FcrInterpreterControl;
-        roomStore: FcrRoomStore;
     });
     setSpotlightStreamId(streamId: string): void;
     release(): void;

package/lib/modules/participant/store.js

@@ -161,13 +161,12 @@ var ParticipantStore = exports["default"] = /*#__PURE__*/function () {
   function ParticipantStore(_ref2) {
     var _this = this;
     var _roomControl = _ref2.roomControl,
-      peerSessionControl = _ref2.peerSessionControl,
       securityStore = _ref2.securityStore,
       uiEventStore = _ref2.uiEventStore,
       deviceStore = _ref2.deviceStore,
       deviceStreamStore = _ref2.deviceStreamStore,
-      interpreterControl = _ref2.interpreterControl,
-      roomStore = _ref2.roomStore;
+      roomStore = _ref2.roomStore,
+      engine = _ref2.engine;
     (0, _classCallCheck2["default"])(this, ParticipantStore);
     (0, _defineProperty2["default"])(this, _ref, (_initProto(this), (0, _logger.getLogger)()));
     (0, _defineProperty2["default"])(this, "_dataSource", new _memberListDataSource.FcrUIMemberListDataSourceImpl());
@@ -375,14 +374,14 @@ var ParticipantStore = exports["default"] = /*#__PURE__*/function () {
     });
     this._roomControl = _roomControl;
     this._streamControl = _roomControl.getStreamControl();
-    this._peerSessionControl = peerSessionControl;
+    this._peerSessionControl = engine.getPeerSessionControl();
     this._userControl = _roomControl.getUserControl();
     this._securityStore = securityStore;
     this._uiEventStore = uiEventStore;
     this._deviceStore = deviceStore;
     this._deviceStreamStore = deviceStreamStore;
     this._roomStore = roomStore;
-    this._interpreterControl = interpreterControl;
+    this._interpreterControl = _roomControl.getInterpreterControl();
     this._uiEventStore.addObserver(this._eventObserver);
     this._userControl.addObserver(this._userObserver);
     this._streamControl.addObserver(this._streamsObserver);
@@ -679,14 +678,14 @@ var ParticipantStore = exports["default"] = /*#__PURE__*/function () {
   }, {
     key: "release",
     value: function release() {
-      this._uiEventStore.addObserver(this._eventObserver);
-      this._userControl.addObserver(this._userObserver);
-      this._streamControl.addObserver(this._streamsObserver);
-      this._peerSessionControl.addObserver(this._peerSessionObserver);
-      this._roomControl.getBoardControl().addObserver(this._whitebaordObderver);
-      this._interpreterControl.addObserver(this._interpreterObserver);
-      this._roomControl.getPrivilegeControl().addObserver(this._privilegeControlObserver);
-      this._roomStore.addObserver(this._roomStoreObserver);
+      this._uiEventStore.removeObserver(this._eventObserver);
+      this._userControl.removeObserver(this._userObserver);
+      this._streamControl.removeObserver(this._streamsObserver);
+      this._peerSessionControl.removeObserver(this._peerSessionObserver);
+      this._roomControl.getBoardControl().removeObserver(this._whitebaordObderver);
+      this._interpreterControl.removeObserver(this._interpreterObserver);
+      this._roomControl.getPrivilegeControl().removeObserver(this._privilegeControlObserver);
+      this._roomStore.removeObserver(this._roomStoreObserver);
       this._disposers.forEach(function (disposer) {
         return disposer();
       });
@@ -951,6 +950,7 @@ var ParticipantStore = exports["default"] = /*#__PURE__*/function () {
             onCancel: function onCancel() {
               _this5._closeChangeNameDialog();
             },
+            closable: false,
             height: 190
           });
           this._changeNameDialogKey.push(key);

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

@@ -202,9 +202,9 @@ var AudioSettings = exports.AudioSettings = (0, _mobxReact.observer)(function ()
             label: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
               children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
                 children: item.label
-              }), item.addition && /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+              }), item.addition && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
                 className: ns.e('radio-label-addition'),
-                children: ["\uFF08", item.addition, "\uFF09"]
+                children: item.addition
               })]
             })
           }, item.value);
@@ -217,16 +217,19 @@ var AudioSettings = exports.AudioSettings = (0, _mobxReact.observer)(function ()
         className: ns.e('section-title'),
         children: t('fmt_setting_label_professional')
       }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-        className: ns.e('switch-title'),
+        className: ns.e('switch-wrapper'),
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
           children: t('fmt_setting_option_orinalvoise')
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_switch.FcrSwitch, {
-          value: setting.audioVoiceChanger,
-          onChange: function onChange(v) {
-            return setSetting({
-              audioVoiceChanger: v
-            });
-          }
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: ns.e('switch-wrapper-switch'),
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_switch.FcrSwitch, {
+            value: setting.audioVoiceChanger,
+            onChange: function onChange(v) {
+              return setSetting({
+                audioVoiceChanger: v
+              });
+            }
+          })
         })]
       }), setting.audioVoiceChanger && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
         className: ns.e('options-section'),