fcr-ui-scene 3.4.0 → 3.4.1

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

@@ -27,11 +27,20 @@
   font-weight: 700;
   color: var(--fcr_ui_scene_icontext1);
 }
+.fcr-device-settings-audio__switch-wrapper {
+  padding: 0 10px 0 12px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.fcr-device-settings-audio__switch-wrapper-switch {
+  flex-shrink: 0;
+}
 
 .fcr-device-settings-audio__switch-title {
   padding: 0 10px 0 12px;
   font-size: 12px;
-  line-height: 32px;
+  line-height: 18px;
   color: var(--fcr_ui_scene_icontext1);
   display: flex;
   align-items: center;
@@ -79,6 +88,9 @@
   align-items: center;
   column-gap: 22px;
 }
+.fcr-device-settings-audio__form-item .fcr-slider.is-disabled {
+  border: none;
+}
 
 .fcr-device-settings-audio__form-label {
   font-size: 12px;
@@ -108,6 +120,11 @@
   padding-bottom: 10px;
 }
 
+.fcr-device-settings-audio__section-reduce-noise .fcr-radio-label {
+  white-space: pre-wrap;
+  line-height: 16px;
+}
+
 .fcr-device-settings-audio__section-pro-audio {
   padding-bottom: 10px;
 }
@@ -141,4 +158,12 @@
 .fcr-microphone-detection .fcr-button {
   flex-shrink: 0;
   border-radius: var(--fcr_cornerradius_xs);
+  padding: 0 4px;
+}
+.fcr-speaker-detection .fcr-button p,
+.fcr-microphone-detection .fcr-button p {
+  width: 100px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }

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

@@ -3,7 +3,7 @@
   margin-bottom: 10px;
   border-radius: var(--fcr_cornerradius_s);
   width: 100%;
-  padding: 0 10px 10px;
+  padding: 10px;
   background: var(--fcr_mobile_ui_scene_color_popup_block5);
 }
 

package/lib/modules/setting/index.css

@@ -46,7 +46,8 @@
   border-radius: var(--fcr_cornerradius_xs);
   width: 100%;
   height: 44px;
-  padding-left: 14px;
+  padding: 0px 14px;
+  white-space: nowrap;
   font-size: 14px;
   line-height: 1;
   color: var(--fcr_ui_scene_icontext1);

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

@@ -1,22 +1,9 @@
-import { FcrDesktopMediaControl, FcrBaseRoomControl, FcrStreamControl } from 'fcr-core';
 import { UIModule } from '../../base';
 import './index.css';
-import { FcrUIEventStore } from '../../common/event-store';
-import { FcrMonitorControl } from 'fcr-core';
-import { FcrUISceneConfig } from '../../type';
-import { FcrDeviceStore } from '../../common/device-store';
+import { StoreConfig } from '../../type';
 export declare class SettingUIModule extends UIModule {
     private _store;
-    constructor(args: {
-        mediaControl: FcrDesktopMediaControl;
-        config: FcrUISceneConfig;
-        uiEventStore: FcrUIEventStore;
-        monitorControl: FcrMonitorControl;
-        streamControl: FcrStreamControl;
-        roomControl: FcrBaseRoomControl;
-        deviceStore: FcrDeviceStore;
-        parameters?: Record<string, unknown>;
-    });
+    constructor(args: StoreConfig);
     getComponent(): import("react/jsx-runtime").JSX.Element;
     protected onUnload(): void;
 }

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

@@ -9,16 +9,16 @@ var _reactDom = _interopRequireDefault(require("react-dom"));
 var _root = require("react-hot-loader/root");
 var _hooks = require("../../utilities/hooks");
 var _eventStore = require("../../common/event-store");
-var _securityStore = require("../../common/security-store");
 var _type = require("../../type");
 var _deviceStore = require("../../common/device-store");
+var _roomStore = require("../../common/room-store");
 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, token, roomControl, userName, uiEventStore, securityStore, deviceStore, uiModule, App;
+  var engine, roomId, token, roomControl, userName, uiEventStore, deviceStore, config, uiModule, App;
   return _regenerator["default"].wrap(function _callee$(_context) {
     while (1) switch (_context.prev = _context.next) {
       case 0:
@@ -40,10 +40,21 @@ window.__DEV_ENGINE_IS_READY__.then(/*#__PURE__*/(0, _asyncToGenerator2["default
         });
       case 9:
         uiEventStore = new _eventStore.FcrUIEventStore();
-        securityStore = new _securityStore.FcrSecurityStore(roomControl.getPrivilegeControl(), roomControl.getUserControl(), roomControl.getStreamControl(), roomControl.getRoomSessionControl(), uiEventStore);
         deviceStore = new _deviceStore.FcrDeviceStore(engine.getDesktopMediaControl(), uiEventStore);
-        uiModule = new _.SettingUIModule({
+        config = {
           mediaControl: engine.getDesktopMediaControl(),
+          roomControl: roomControl,
+          securityStore: null,
+          deviceStore: deviceStore,
+          uiEventStore: uiEventStore,
+          roomStore: new _roomStore.FcrRoomStore(uiEventStore, deviceStore, {}, engine),
+          streamControl: roomControl.getStreamControl(),
+          userControl: roomControl.getUserControl(),
+          privilegeControl: roomControl.getPrivilegeControl(),
+          interpreterControl: roomControl.getInterpreterControl(),
+          chatRoomControl: roomControl.getChatRoomControl(),
+          engine: null,
+          remoteVideoRenderManager: null,
           config: {
             roomToken: '',
             userName: 'lxy',
@@ -52,12 +63,10 @@ window.__DEV_ENGINE_IS_READY__.then(/*#__PURE__*/(0, _asyncToGenerator2["default
             language: 'zh-CN',
             inviteLink: ''
           },
-          uiEventStore: uiEventStore,
-          deviceStore: deviceStore,
-          monitorControl: engine.getMonitorControl(),
-          streamControl: roomControl.getStreamControl(),
-          roomControl: roomControl
-        });
+          parameters: null,
+          deviceStreamStore: null
+        };
+        uiModule = new _.SettingUIModule(config);
         App = (0, _root.hot)(function () {
           (0, _hooks.useUnmount)(function () {
             uiModule.release();

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

@@ -1,14 +1,11 @@
-import { FcrAiDenoiseLevel, FcrDesktopMediaControl, FcrMonitorControl, FcrStreamControl } from 'fcr-core';
+import { FcrAiDenoiseLevel } from 'fcr-core';
 import { FcrBeautyOptions } from 'fcr-core/lib/media-control/type';
 import { FcrPerformanceInfo } from 'fcr-core/lib/type';
 import { AgoraRtcNetworkStats } from 'agora-rte-sdk';
-import { FcrUIEventStore } from '../../common/event-store';
 import { HighlightElement } from '../../utilities/constant';
 import { DEFAULT_BEAUTY_VALUE } from 'agora-ui-foundation/lib/components/local-video-player';
-import { FcrUISceneConfig } from '../../type';
+import { FcrUISceneConfig, StoreConfig } from '../../type';
 import { VirtualBackground } from '../device-pretest/assets/virtual-backdound-resources';
-import { FcrDeviceStore } from '../../common/device-store';
-import { FcrBaseRoomControl } from 'fcr-core/lib/room-control/type';
 export interface DeviceItem {
     text: string;
     value: string;
@@ -47,9 +44,6 @@ export interface CustomSetting {
     audioVoiceChanger: boolean;
     spotlightEnabled: boolean;
 }
-export interface StoreConfig {
-    userName: string;
-}
 export { DEFAULT_BEAUTY_VALUE };
 export type BeautyKey = 'none' | 'smoothnessLevel' | 'lighteningLevel' | 'lighteningLevel';
 export default class SettingStore {
@@ -70,6 +64,7 @@ export default class SettingStore {
     private _volumeIndicationInterval;
     private _cameraTrack?;
     private _useDefaultAudioEchoCancellation;
+    private _streamInfoList;
     accessor loudestStreamVolumeLevel: number;
     accessor microphoneVolumeLevel: number;
     accessor isWifiConnected: boolean;
@@ -153,16 +148,7 @@ export default class SettingStore {
     get currentIsMirror(): boolean;
     get microphoneDetecting(): boolean;
     get speakerDetecting(): boolean;
-    constructor({ mediaControl, config, uiEventStore, deviceStore, monitorControl, streamControl, roomControl, parameters, }: {
-        mediaControl: FcrDesktopMediaControl;
-        config: FcrUISceneConfig;
-        uiEventStore: FcrUIEventStore;
-        monitorControl: FcrMonitorControl;
-        streamControl: FcrStreamControl;
-        roomControl: FcrBaseRoomControl;
-        deviceStore: FcrDeviceStore;
-        parameters?: Record<string, unknown>;
-    });
+    constructor({ mediaControl, config, uiEventStore, deviceStore, streamControl, roomControl, parameters, engine, }: StoreConfig);
     enableVirtualBackground(enable: boolean, source?: VirtualBackground): void;
     setEditBeautyKey(key: BeautyKey): void;
     enableBeautyEffect(enable: boolean): void;
@@ -207,6 +193,7 @@ export default class SettingStore {
     private _onRemoteAudioStatsUpdated;
     private _onLocalVideoStatsUpdated;
     private _onRemoteVideoStatsUpdated;
+    private _onStreamsAdded;
     private _onStreamsUpdated;
     private _onStreamsRemoved;
     private _onPerformanceUpdated;

package/lib/modules/setting/store.js

@@ -99,9 +99,10 @@ var _config = require("./config");
 var _parameters = require("../../utilities/parameters");
 var _react = require("react");
 var _env = require("agora-foundation/lib/utilities/env");
+var _i18n = require("agora-ui-foundation/lib/i18n");
 var _excluded = ["dialogId"];
 var _SettingStore;
-var _initProto, _init_loudestStreamVolumeLevel, _init_microphoneVolumeLevel, _init_isWifiConnected, _init_dialogConfig, _init_networkState, _init_performanceState, _init_localAudioStreamMap, _init_remoteAudioStreamMap, _init_localVideoStreamMap, _init_remoteVideoStreamMap, _init_systemMemorySize, _init_systemCpuDesc, _init_setting, _init_config, _init_getSystemInfoTimer, _setDialogConfigDecs, _setSettingDecs, _onEventDecs, _onNetworkStatsUpdatedDecs, _calculateSystemInfoDecs, _getSystemInformationDecs, _clearGetSystemInfoIntervalDecs, _closeDialogDecs, _onLocalAudioStatsUpdatedDecs, _onRemoteAudioStatsUpdatedDecs, _onLocalVideoStatsUpdatedDecs, _onRemoteVideoStatsUpdatedDecs, _onStreamsUpdatedDecs, _onStreamsRemovedDecs, _onPerformanceUpdatedDecs, _onAudioVolumeUpdatedDecs, _preHandleSettingDecs, _ref;
+var _initProto, _init_loudestStreamVolumeLevel, _init_microphoneVolumeLevel, _init_isWifiConnected, _init_dialogConfig, _init_networkState, _init_performanceState, _init_localAudioStreamMap, _init_remoteAudioStreamMap, _init_localVideoStreamMap, _init_remoteVideoStreamMap, _init_systemMemorySize, _init_systemCpuDesc, _init_setting, _init_config, _init_getSystemInfoTimer, _setDialogConfigDecs, _setSettingDecs, _onEventDecs, _onNetworkStatsUpdatedDecs, _calculateSystemInfoDecs, _getSystemInformationDecs, _clearGetSystemInfoIntervalDecs, _closeDialogDecs, _onLocalAudioStatsUpdatedDecs, _onRemoteAudioStatsUpdatedDecs, _onLocalVideoStatsUpdatedDecs, _onRemoteVideoStatsUpdatedDecs, _onStreamsAddedDecs, _onStreamsUpdatedDecs, _onStreamsRemovedDecs, _onPerformanceUpdatedDecs, _onAudioVolumeUpdatedDecs, _preHandleSettingDecs, _ref;
 function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t["return"] || t["return"](); } finally { if (u) throw o; } } }; }
 function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
 function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
@@ -142,7 +143,7 @@ var _L = /*#__PURE__*/new WeakMap();
 var _M = /*#__PURE__*/new WeakMap();
 var _N = /*#__PURE__*/new WeakMap();
 var _O = /*#__PURE__*/new WeakMap();
-_ref = (_setDialogConfigDecs = [_mobx.action, _mobx.action.bound], _setSettingDecs = [_mobx.action, _mobx.action.bound], _onEventDecs = [_mobx.action, _mobx.action.bound], _onNetworkStatsUpdatedDecs = [_mobx.action, _mobx.action.bound], _calculateSystemInfoDecs = [_mobx.action, _mobx.action.bound], _getSystemInformationDecs = [_mobx.action, _mobx.action.bound], _clearGetSystemInfoIntervalDecs = [_mobx.action, _mobx.action.bound], _closeDialogDecs = [_mobx.action, _mobx.action.bound], _onLocalAudioStatsUpdatedDecs = [_mobx.action, _mobx.action.bound], _onRemoteAudioStatsUpdatedDecs = [_mobx.action, _mobx.action.bound], _onLocalVideoStatsUpdatedDecs = [_mobx.action, _mobx.action.bound], _onRemoteVideoStatsUpdatedDecs = [_mobx.action, _mobx.action.bound], _onStreamsUpdatedDecs = [_mobx.action, _mobx.action.bound], _onStreamsRemovedDecs = [_mobx.action, _mobx.action.bound], _onPerformanceUpdatedDecs = [_mobx.action, _mobx.action.bound], _onAudioVolumeUpdatedDecs = [_mobx.action, _mobx.action.bound], _preHandleSettingDecs = [_mobx.action, _mobx.action.bound], "logger");
+_ref = (_setDialogConfigDecs = [_mobx.action, _mobx.action.bound], _setSettingDecs = [_mobx.action, _mobx.action.bound], _onEventDecs = [_mobx.action, _mobx.action.bound], _onNetworkStatsUpdatedDecs = [_mobx.action, _mobx.action.bound], _calculateSystemInfoDecs = [_mobx.action, _mobx.action.bound], _getSystemInformationDecs = [_mobx.action, _mobx.action.bound], _clearGetSystemInfoIntervalDecs = [_mobx.action, _mobx.action.bound], _closeDialogDecs = [_mobx.action, _mobx.action.bound], _onLocalAudioStatsUpdatedDecs = [_mobx.action, _mobx.action.bound], _onRemoteAudioStatsUpdatedDecs = [_mobx.action, _mobx.action.bound], _onLocalVideoStatsUpdatedDecs = [_mobx.action, _mobx.action.bound], _onRemoteVideoStatsUpdatedDecs = [_mobx.action, _mobx.action.bound], _onStreamsAddedDecs = [_mobx.action, _mobx.action.bound], _onStreamsUpdatedDecs = [_mobx.action, _mobx.action.bound], _onStreamsRemovedDecs = [_mobx.action, _mobx.action.bound], _onPerformanceUpdatedDecs = [_mobx.action, _mobx.action.bound], _onAudioVolumeUpdatedDecs = [_mobx.action, _mobx.action.bound], _preHandleSettingDecs = [_mobx.action, _mobx.action.bound], "logger");
 var SettingStore = exports["default"] = /*#__PURE__*/function () {
   function SettingStore(_ref2) {
     var _defaultVideoGalleryS;
@@ -150,10 +151,10 @@ var SettingStore = exports["default"] = /*#__PURE__*/function () {
       config = _ref2.config,
       uiEventStore = _ref2.uiEventStore,
       deviceStore = _ref2.deviceStore,
-      monitorControl = _ref2.monitorControl,
       streamControl = _ref2.streamControl,
       roomControl = _ref2.roomControl,
-      parameters = _ref2.parameters;
+      parameters = _ref2.parameters,
+      engine = _ref2.engine;
     (0, _classCallCheck2["default"])(this, SettingStore);
     (0, _defineProperty2["default"])(this, _ref, (_initProto(this), (0, _logger.getLogger)()));
     (0, _defineProperty2["default"])(this, "_disposers", []);
@@ -166,6 +167,7 @@ var SettingStore = exports["default"] = /*#__PURE__*/function () {
     (0, _defineProperty2["default"])(this, "_streamVolumeMap", new Map());
     (0, _defineProperty2["default"])(this, "_volumeIndicationInterval", _schedule.AgoraScheduler.Duration.second(2));
     (0, _defineProperty2["default"])(this, "_useDefaultAudioEchoCancellation", true);
+    (0, _defineProperty2["default"])(this, "_streamInfoList", new Map());
     _classPrivateFieldInitSpec(this, _A, _init_loudestStreamVolumeLevel(this, 0));
     _classPrivateFieldInitSpec(this, _B, _init_microphoneVolumeLevel(this, 0));
     _classPrivateFieldInitSpec(this, _C, _init_isWifiConnected(this, false));
@@ -210,7 +212,7 @@ var SettingStore = exports["default"] = /*#__PURE__*/function () {
     _classPrivateFieldInitSpec(this, _N, _init_config(this, undefined));
     _classPrivateFieldInitSpec(this, _O, _init_getSystemInfoTimer(this, null));
     this._mediaControl = mediaControl;
-    this._monitorControl = monitorControl;
+    this._monitorControl = engine.getMonitorControl();
     this._streamControl = streamControl;
     this._roomControl = roomControl;
     this.config = config;
@@ -255,6 +257,7 @@ var SettingStore = exports["default"] = /*#__PURE__*/function () {
       onRemoteVideoStatsUpdated: this._onRemoteVideoStatsUpdated,
       onStreamsRemoved: this._onStreamsRemoved,
       onStreamsUpdated: this._onStreamsUpdated,
+      onStreamsAdded: this._onStreamsAdded,
       onStreamVolumeIndicationUpdated: this._onAudioVolumeUpdated
     });
     this.startMicrophoneTest = this.startMicrophoneTest.bind(this);
@@ -580,6 +583,15 @@ var SettingStore = exports["default"] = /*#__PURE__*/function () {
         return _this.setting;
       }, function (setting) {
         _this._uiEventStore.notifyCustomSettingsChanged(setting);
+      }), (0, _mobx.reaction)(function () {
+        return _this.setting.shouldHideNonVideoParticipants;
+      }, function (shouldHideNonVideoParticipants) {
+        if (shouldHideNonVideoParticipants) {
+          _this._uiEventStore.showToast({
+            type: 'normal',
+            message: (0, _i18n.transI18n)('fmt_internalsetting_other_hide_no_video_toast')
+          });
+        }
       }), (0, _mobx.reaction)(function () {
         return _this.dialogConfig.activeTab;
       }, function (activeTab) {
@@ -1023,7 +1035,7 @@ var SettingStore = exports["default"] = /*#__PURE__*/function () {
   }, {
     key: "_onLocalVideoStatsUpdated",
     value: function _onLocalVideoStatsUpdated(roomId, streamId, stats) {
-      var streamInfo = this._streamControl.getStreamByStreamId(streamId);
+      var streamInfo = this._streamInfoList.get(streamId);
       if (streamInfo) {
         // console.log('onLocalVideoStatsUpdated', streamId, stats, streamInfo);
         if (streamInfo.videoSourceState === _fcrCore.FcrMediaSourceState.OPEN) {
@@ -1037,7 +1049,7 @@ var SettingStore = exports["default"] = /*#__PURE__*/function () {
   }, {
     key: "_onRemoteVideoStatsUpdated",
     value: function _onRemoteVideoStatsUpdated(roomId, streamId, stats) {
-      var streamInfo = this._streamControl.getStreamByStreamId(streamId);
+      var streamInfo = this._streamInfoList.get(streamId);
       // console.log('onRemoteVideoStatsUpdated', streamId, stats, streamInfo);
       if ((streamInfo === null || streamInfo === void 0 ? void 0 : streamInfo.videoSourceState) === _fcrCore.FcrMediaSourceState.OPEN) {
         this.remoteVideoStreamMap.set(streamId, _objectSpread(_objectSpread({}, stats), {}, {
@@ -1047,14 +1059,29 @@ var SettingStore = exports["default"] = /*#__PURE__*/function () {
       }
     }
   }, {
-    key: "_onStreamsUpdated",
-    value: function _onStreamsUpdated(roomId, events) {
-      // console.log('_onStreamsUpdated', events);
+    key: "_onStreamsAdded",
+    value: function _onStreamsAdded(roomId, events) {
       var _iterator = _createForOfIteratorHelper(events),
         _step;
       try {
         for (_iterator.s(); !(_step = _iterator.n()).done;) {
           var event = _step.value;
+          this._streamInfoList.set(event.modifiedStream.streamId, event.modifiedStream);
+        }
+      } catch (err) {
+        _iterator.e(err);
+      } finally {
+        _iterator.f();
+      }
+    }
+  }, {
+    key: "_onStreamsUpdated",
+    value: function _onStreamsUpdated(roomId, events) {
+      var _iterator2 = _createForOfIteratorHelper(events),
+        _step2;
+      try {
+        for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+          var event = _step2.value;
           if (event.modifiedStream.audioSourceState !== _fcrCore.FcrMediaSourceState.OPEN) {
             this.localAudioStreamMap["delete"](event.modifiedStream.streamId);
             this.remoteAudioStreamMap["delete"](event.modifiedStream.streamId);
@@ -1064,32 +1091,33 @@ var SettingStore = exports["default"] = /*#__PURE__*/function () {
             this.localVideoStreamMap["delete"](event.modifiedStream.streamId);
             this.remoteVideoStreamMap["delete"](event.modifiedStream.streamId);
           }
+          this._streamInfoList.set(event.modifiedStream.streamId, event.modifiedStream);
         }
       } catch (err) {
-        _iterator.e(err);
+        _iterator2.e(err);
       } finally {
-        _iterator.f();
+        _iterator2.f();
       }
     }
   }, {
     key: "_onStreamsRemoved",
     value: function _onStreamsRemoved(roomId, events) {
-      // console.log('_onStreamsRemoved', events);
-      var _iterator2 = _createForOfIteratorHelper(events),
-        _step2;
+      var _iterator3 = _createForOfIteratorHelper(events),
+        _step3;
       try {
-        for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
-          var event = _step2.value;
+        for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
+          var event = _step3.value;
           this.localAudioStreamMap["delete"](event.modifiedStream.streamId);
           this.remoteAudioStreamMap["delete"](event.modifiedStream.streamId);
           this.localVideoStreamMap["delete"](event.modifiedStream.streamId);
           this.remoteVideoStreamMap["delete"](event.modifiedStream.streamId);
           this._streamVolumeMap["delete"](event.modifiedStream.streamId);
+          this._streamInfoList["delete"](event.modifiedStream.streamId);
         }
       } catch (err) {
-        _iterator2.e(err);
+        _iterator3.e(err);
       } finally {
-        _iterator2.f();
+        _iterator3.f();
       }
     }
   }, {
@@ -1158,7 +1186,7 @@ var SettingStore = exports["default"] = /*#__PURE__*/function () {
   }]);
 }();
 _SettingStore = SettingStore;
-var _applyDecs$e = (0, _slicedToArray2["default"])(_applyDecs(_SettingStore, [[_mobx.observable, 1, "loudestStreamVolumeLevel"], [_mobx.observable, 1, "microphoneVolumeLevel"], [_mobx.observable, 1, "isWifiConnected"], [_mobx.observable, 1, "dialogConfig"], [_mobx.observable, 1, "networkState"], [_mobx.observable, 1, "performanceState"], [_mobx.observable, 1, "localAudioStreamMap"], [_mobx.observable, 1, "remoteAudioStreamMap"], [_mobx.observable, 1, "localVideoStreamMap"], [_mobx.observable, 1, "remoteVideoStreamMap"], [_mobx.observable, 1, "systemMemorySize"], [_mobx.observable, 1, "systemCpuDesc"], [_mobx.observable, 1, "setting"], [_mobx.observable, 1, "config"], [_mobx.observable, 1, "getSystemInfoTimer"], [_mobx.computed, 3, "maxVideoSendInfo"], [_mobx.computed, 3, "maxVideoReceiveInfo"], [_mobx.computed, 3, "sendScreenShareInfo"], [_mobx.computed, 3, "receiveScreenShareInfo"], [_mobx.computed, 3, "microphoneVolumeDb"], [_mobx.computed, 3, "speakerVolumeDb"], [_mobx.computed, 3, "speakerTestVolumeLevel"], [_mobx.computed, 3, "microphoneTestVolumeLevel"], [_mobx.computed, 3, "speakerVolume"], [_mobx.computed, 3, "microphoneVolume"], [_mobx.computed, 3, "isLocalMirrorEnabled"], [_mobx.computed, 3, "isLocalEditBeautyOptions"], [_mobx.computed, 3, "currentBeautyKey"], [_mobx.computed, 3, "beautyOptions"], [_mobx.computed, 3, "cameraDeviceId"], [_mobx.computed, 3, "cameraEnabled"], [_mobx.computed, 3, "showForceOpenEffectDialog"], [_mobx.computed, 3, "currentVirtualBackgroundName"], [_mobx.computed, 3, "cameraDeviceList"], [_mobx.computed, 3, "microphoneDeviceId"], [_mobx.computed, 3, "speakerDeviceId"], [_mobx.computed, 3, "speakerDeviceList"], [_mobx.computed, 3, "microphoneDeviceList"], [_mobx.computed, 3, "enableBeauty"], [_mobx.computed, 3, "virtualBackgroundList"], [_mobx.computed, 3, "currentIsMirror"], [_mobx.computed, 3, "microphoneDetecting"], [_mobx.computed, 3, "speakerDetecting"], [_decorator.bound, 2, "enableVirtualBackground"], [_decorator.bound, 2, "setEditBeautyKey"], [_decorator.bound, 2, "enableBeautyEffect"], [_decorator.bound, 2, "_initReactions"], [_decorator.bound, 2, "setCameraDevice"], [_decorator.bound, 2, "setMicrophoneDevice"], [_decorator.bound, 2, "stopSpeakerTest"], [_decorator.bound, 2, "startSpeakerTest"], [_decorator.bound, 2, "setSpeakerDevice"], [_decorator.bound, 2, "setSpeakerVolume"], [_decorator.bound, 2, "setMicrophoneVolume"], [_decorator.bound, 2, "setVideoOrientation"], [_decorator.bound, 2, "setBeautyOptions"], [_decorator.bound, 2, "toggleLocalMirrorPreview"], [_decorator.bound, 2, "startVideo"], [_decorator.bound, 2, "stopVideo"], [_decorator.bound, 2, "handleForceOpenVideoEffect"], [_decorator.bound, 2, "handleCancelForceOpenVideoEffect"], [_decorator.bound, 2, "toggleLocalMirror"], [_decorator.bound, 2, "setSettingVideoOpened"], [_decorator.bound, 2, "_syncSystemInfo"], [_decorator.bound, 2, "startCameraTest"], [_decorator.bound, 2, "stopCameraTest"], [_setDialogConfigDecs, 18, "setDialogConfig"], [_setSettingDecs, 18, "setSetting"], [_onEventDecs, 18, "_onEvent"], [_onNetworkStatsUpdatedDecs, 18, "_onNetworkStatsUpdated"], [_calculateSystemInfoDecs, 18, "calculateSystemInfo"], [_getSystemInformationDecs, 18, "getSystemInformation"], [_clearGetSystemInfoIntervalDecs, 18, "clearGetSystemInfoInterval"], [_closeDialogDecs, 18, "closeDialog"], [_onLocalAudioStatsUpdatedDecs, 18, "_onLocalAudioStatsUpdated"], [_onRemoteAudioStatsUpdatedDecs, 18, "_onRemoteAudioStatsUpdated"], [_onLocalVideoStatsUpdatedDecs, 18, "_onLocalVideoStatsUpdated"], [_onRemoteVideoStatsUpdatedDecs, 18, "_onRemoteVideoStatsUpdated"], [_onStreamsUpdatedDecs, 18, "_onStreamsUpdated"], [_onStreamsRemovedDecs, 18, "_onStreamsRemoved"], [_onPerformanceUpdatedDecs, 18, "_onPerformanceUpdated"], [_decorator.bound, 2, "_handleCameraChanged"], [_decorator.bound, 2, "_handleCameraListUpdated"], [_onAudioVolumeUpdatedDecs, 18, "_onAudioVolumeUpdated"], [_preHandleSettingDecs, 18, "_preHandleSetting"]], []).e, 16);
+var _applyDecs$e = (0, _slicedToArray2["default"])(_applyDecs(_SettingStore, [[_mobx.observable, 1, "loudestStreamVolumeLevel"], [_mobx.observable, 1, "microphoneVolumeLevel"], [_mobx.observable, 1, "isWifiConnected"], [_mobx.observable, 1, "dialogConfig"], [_mobx.observable, 1, "networkState"], [_mobx.observable, 1, "performanceState"], [_mobx.observable, 1, "localAudioStreamMap"], [_mobx.observable, 1, "remoteAudioStreamMap"], [_mobx.observable, 1, "localVideoStreamMap"], [_mobx.observable, 1, "remoteVideoStreamMap"], [_mobx.observable, 1, "systemMemorySize"], [_mobx.observable, 1, "systemCpuDesc"], [_mobx.observable, 1, "setting"], [_mobx.observable, 1, "config"], [_mobx.observable, 1, "getSystemInfoTimer"], [_mobx.computed, 3, "maxVideoSendInfo"], [_mobx.computed, 3, "maxVideoReceiveInfo"], [_mobx.computed, 3, "sendScreenShareInfo"], [_mobx.computed, 3, "receiveScreenShareInfo"], [_mobx.computed, 3, "microphoneVolumeDb"], [_mobx.computed, 3, "speakerVolumeDb"], [_mobx.computed, 3, "speakerTestVolumeLevel"], [_mobx.computed, 3, "microphoneTestVolumeLevel"], [_mobx.computed, 3, "speakerVolume"], [_mobx.computed, 3, "microphoneVolume"], [_mobx.computed, 3, "isLocalMirrorEnabled"], [_mobx.computed, 3, "isLocalEditBeautyOptions"], [_mobx.computed, 3, "currentBeautyKey"], [_mobx.computed, 3, "beautyOptions"], [_mobx.computed, 3, "cameraDeviceId"], [_mobx.computed, 3, "cameraEnabled"], [_mobx.computed, 3, "showForceOpenEffectDialog"], [_mobx.computed, 3, "currentVirtualBackgroundName"], [_mobx.computed, 3, "cameraDeviceList"], [_mobx.computed, 3, "microphoneDeviceId"], [_mobx.computed, 3, "speakerDeviceId"], [_mobx.computed, 3, "speakerDeviceList"], [_mobx.computed, 3, "microphoneDeviceList"], [_mobx.computed, 3, "enableBeauty"], [_mobx.computed, 3, "virtualBackgroundList"], [_mobx.computed, 3, "currentIsMirror"], [_mobx.computed, 3, "microphoneDetecting"], [_mobx.computed, 3, "speakerDetecting"], [_decorator.bound, 2, "enableVirtualBackground"], [_decorator.bound, 2, "setEditBeautyKey"], [_decorator.bound, 2, "enableBeautyEffect"], [_decorator.bound, 2, "_initReactions"], [_decorator.bound, 2, "setCameraDevice"], [_decorator.bound, 2, "setMicrophoneDevice"], [_decorator.bound, 2, "stopSpeakerTest"], [_decorator.bound, 2, "startSpeakerTest"], [_decorator.bound, 2, "setSpeakerDevice"], [_decorator.bound, 2, "setSpeakerVolume"], [_decorator.bound, 2, "setMicrophoneVolume"], [_decorator.bound, 2, "setVideoOrientation"], [_decorator.bound, 2, "setBeautyOptions"], [_decorator.bound, 2, "toggleLocalMirrorPreview"], [_decorator.bound, 2, "startVideo"], [_decorator.bound, 2, "stopVideo"], [_decorator.bound, 2, "handleForceOpenVideoEffect"], [_decorator.bound, 2, "handleCancelForceOpenVideoEffect"], [_decorator.bound, 2, "toggleLocalMirror"], [_decorator.bound, 2, "setSettingVideoOpened"], [_decorator.bound, 2, "_syncSystemInfo"], [_decorator.bound, 2, "startCameraTest"], [_decorator.bound, 2, "stopCameraTest"], [_setDialogConfigDecs, 18, "setDialogConfig"], [_setSettingDecs, 18, "setSetting"], [_onEventDecs, 18, "_onEvent"], [_onNetworkStatsUpdatedDecs, 18, "_onNetworkStatsUpdated"], [_calculateSystemInfoDecs, 18, "calculateSystemInfo"], [_getSystemInformationDecs, 18, "getSystemInformation"], [_clearGetSystemInfoIntervalDecs, 18, "clearGetSystemInfoInterval"], [_closeDialogDecs, 18, "closeDialog"], [_onLocalAudioStatsUpdatedDecs, 18, "_onLocalAudioStatsUpdated"], [_onRemoteAudioStatsUpdatedDecs, 18, "_onRemoteAudioStatsUpdated"], [_onLocalVideoStatsUpdatedDecs, 18, "_onLocalVideoStatsUpdated"], [_onRemoteVideoStatsUpdatedDecs, 18, "_onRemoteVideoStatsUpdated"], [_onStreamsAddedDecs, 18, "_onStreamsAdded"], [_onStreamsUpdatedDecs, 18, "_onStreamsUpdated"], [_onStreamsRemovedDecs, 18, "_onStreamsRemoved"], [_onPerformanceUpdatedDecs, 18, "_onPerformanceUpdated"], [_decorator.bound, 2, "_handleCameraChanged"], [_decorator.bound, 2, "_handleCameraListUpdated"], [_onAudioVolumeUpdatedDecs, 18, "_onAudioVolumeUpdated"], [_preHandleSettingDecs, 18, "_preHandleSetting"]], []).e, 16);
 _init_loudestStreamVolumeLevel = _applyDecs$e[0];
 _init_microphoneVolumeLevel = _applyDecs$e[1];
 _init_isWifiConnected = _applyDecs$e[2];

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

@@ -40,6 +40,8 @@
 
 .fcr-translate-settings__interpreter-mode {
   display: flex;
-  justify-content: space-evenly;
   padding: 12px;
+  flex-direction: column;
+  height: 100px;
+  justify-content: space-between;
 }

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

@@ -57,7 +57,7 @@
   z-index: 10;
   right: 6px;
   bottom: 6px;
-  border-radius: var(--fcr_cornerradius_s);
+  border-radius: var(--fcr_cornerradius_xs);
   background: var(--fcr_ui_scene_click);
 }
 
@@ -170,12 +170,13 @@
 .fcr-device-settings-video__tips {
   background-color: var(--fcr_mobile_ui_scene_color_popup_block5);
   border-radius: var(--fcr_cornerradius_s);
-  height: 32px;
+  line-height: 14px;
   display: flex;
   align-items: center;
   justify-content: center;
   margin: 20px 0px;
   color: var(--fcr_ui_scene_icontext7);
+  padding: 10px;
 }
 
 .fcr-virtual-background-setting__virtual-list {
@@ -217,6 +218,7 @@
   justify-content: center;
   background-color: var(--fcr_web_ui_scene_fill4_popup);
   flex-direction: column;
+  padding: 0 10px;
 }
 
 .fcr-virtual-background-setting__virtual-item:not(:first-child):hover
@@ -302,6 +304,7 @@
   line-height: 12px;
   color: var(--fcr_ui_scene_icontext1);
   padding: 10px 0px 8px;
+  cursor: default;
 }
 
 .fcr-beauty-setting__card-title-disable {

package/lib/modules/share-screen/index.dev.js

@@ -15,14 +15,13 @@ var _eventStore = require("../../common/event-store");
 var _dialog = require("../dialog");
 var _deviceStore = require("../../common/device-store");
 var _roomStore = require("../../common/room-store");
-var _remoteRenderer = require("../../common/remote-renderer");
 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, token, roomControl, userName, deviceStore, uiEventStore, securityStore, dialogModule, uiModule, App;
+  var engine, roomId, token, roomControl, userName, deviceStore, uiEventStore, securityStore, config, dialogModule, uiModule, App;
   return _regenerator["default"].wrap(function _callee$(_context) {
     while (1) switch (_context.prev = _context.next) {
       case 0:
@@ -45,29 +44,31 @@ window.__DEV_ENGINE_IS_READY__.then(/*#__PURE__*/(0, _asyncToGenerator2["default
         });
       case 10:
         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 = new _securityStore.FcrSecurityStore(roomControl.getPrivilegeControl(), roomControl.getUserControl(), roomControl.getStreamControl(), uiEventStore);
+        config = {
+          mediaControl: engine.getDesktopMediaControl(),
+          roomControl: roomControl,
           securityStore: securityStore,
-          userControl: roomControl.getUserControl(),
-          chatRoomControl: roomControl.getChatRoomControl(),
           deviceStore: deviceStore,
+          uiEventStore: uiEventStore,
+          roomStore: new _roomStore.FcrRoomStore(uiEventStore, deviceStore, {}, engine),
           streamControl: roomControl.getStreamControl(),
-          remoteVideoRenderManager: new _remoteRenderer.FcrRemoteVideoRenderManager(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);
         uiModule = new _.ShareScreenUIModule({
           roomControl: roomControl,
           mediaControl: engine.getDesktopMediaControl(),
           deviceStore: deviceStore,
-          deviceStreamStore: new _deviceStreamStore.FcrDeviceStreamStore({
-            mediaControl: engine.getDesktopMediaControl(),
-            roomControl: roomControl,
-            securityStore: securityStore,
-            deviceStore: deviceStore,
-            uiEventStore: uiEventStore,
-            roomStore: new _roomStore.FcrRoomStore(uiEventStore, deviceStore, {}, engine)
-          }),
+          deviceStreamStore: new _deviceStreamStore.FcrDeviceStreamStore(config),
           securityStore: securityStore,
           uiEventStore: uiEventStore,
           config: {}
@@ -83,7 +84,7 @@ window.__DEV_ENGINE_IS_READY__.then(/*#__PURE__*/(0, _asyncToGenerator2["default
           });
         });
         _reactDom["default"].render(/*#__PURE__*/(0, _jsxRuntime.jsx)(App, {}), document.querySelector('#root'));
-      case 16:
+      case 17:
       case "end":
         return _context.stop();
     }

package/lib/modules/share-screen/selection/index.css

@@ -20,6 +20,8 @@
   -webkit-app-region: no-drag;
   background-color: #fff;
   border-radius: var(--fcr_cornerradius_l);
+  display: flex;
+  flex-direction: column;
 }
 
 .share-selection-window__share-content {