fcr-ui-scene 3.7.9-alpha → 3.8.0

package/lib/modules/layout/store.base.js

@@ -83,7 +83,7 @@ var _env = require("agora-foundation/lib/utilities/env");
 var _objectManager = require("../../object-manager");
 var _type7 = require("../secondary-window/type");
 var _LayoutStoreBase;
-var _initProto, _participantDecs, _init_participant, _chatDecs, _init_chat, _chatActionDecs, _init_chatAction, _stateBarDecs, _init_stateBar, _actionBarDecs, _init_actionBar, _layersDecs, _init_layers, _whiteboardDecs, _init_whiteboard, _annotationDecs, _init_annotation, _screenShareControlDecs, _init_screenShareControl, _init_collapsed, _init_aside, _init_barHovering, _init_barLocked, _init_barHidden, _init_asideWidth, _init_userVolumeMap, _init_chatRoomState, _init_whiteboardActive, _init_ownerUser, _addPinMessageDecs, _cancelPinMessageDecs, _setWhiteboardActiveDecs, _setAsideWidthDecs, _updateSlotsDecs, _toggleLayoutDecs, _toggleCollapsedDecs, _toggleAsideDecs, _asideWidthChangedDecs, _toggleLayoutBarLockDecs, _toggleLayoutBarHiddenDecs, _resetLockTimerDecs, _setHoveringHandlerDecs, _setHoveringLeaveHandlerDecs, _setScreenShareSpeakerViewSizeDecs, _handleLiveLayoutChangeDecs, _onUserInfoUpdatedDecs, _handleLayoutUpdatedDecs, _init__handleLayoutUpdated, _handleMainListLengthChangedDecs, _handleMainListChangedDecs, _setBarHoveringDecs, _handleConnectionUpdatedDecs, _findVideoWindowByUserIdDecs, _onRemoteUsersLeftDecs, _onAudioVolumeUpdatedDecs, _ref;
+var _initProto, _participantDecs, _init_participant, _chatDecs, _init_chat, _chatActionDecs, _init_chatAction, _stateBarDecs, _init_stateBar, _actionBarDecs, _init_actionBar, _layersDecs, _init_layers, _whiteboardDecs, _init_whiteboard, _annotationDecs, _init_annotation, _screenShareControlDecs, _init_screenShareControl, _subtitlesDecs, _init_subtitles, _subtitlesHistoryDecs, _init_subtitlesHistory, _subtitlesHistorySettingsDecs, _init_subtitlesHistorySettings, _init_collapsed, _init_aside, _init_barHovering, _init_barLocked, _init_barHidden, _init_asideWidth, _init_userVolumeMap, _init_chatRoomState, _init_whiteboardActive, _init_ownerUser, _addPinMessageDecs, _cancelPinMessageDecs, _setWhiteboardActiveDecs, _setAsideWidthDecs, _updateSlotsDecs, _toggleLayoutDecs, _toggleCollapsedDecs, _toggleAsideDecs, _asideWidthChangedDecs, _toggleLayoutBarLockDecs, _toggleLayoutBarHiddenDecs, _resetLockTimerDecs, _setHoveringHandlerDecs, _setHoveringLeaveHandlerDecs, _setScreenShareSpeakerViewSizeDecs, _handleLiveLayoutChangeDecs, _onUserInfoUpdatedDecs, _handleLayoutUpdatedDecs, _init__handleLayoutUpdated, _handleMainListLengthChangedDecs, _handleMainListChangedDecs, _setBarHoveringDecs, _handleConnectionUpdatedDecs, _findVideoWindowByUserIdDecs, _onRemoteUsersLeftDecs, _onAudioVolumeUpdatedDecs, _ref;
 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; }
@@ -113,7 +113,10 @@ var _P = /*#__PURE__*/new WeakMap();
 var _Q = /*#__PURE__*/new WeakMap();
 var _R = /*#__PURE__*/new WeakMap();
 var _S = /*#__PURE__*/new WeakMap();
-_ref = (_participantDecs = [_mobx.observable, _mobx.observable.ref], _chatDecs = [_mobx.observable, _mobx.observable.ref], _chatActionDecs = [_mobx.observable, _mobx.observable.ref], _stateBarDecs = [_mobx.observable, _mobx.observable.ref], _actionBarDecs = [_mobx.observable, _mobx.observable.ref], _layersDecs = [_mobx.observable, _mobx.observable.ref], _whiteboardDecs = [_mobx.observable, _mobx.observable.ref], _annotationDecs = [_mobx.observable, _mobx.observable.ref], _screenShareControlDecs = [_mobx.observable, _mobx.observable.ref], _addPinMessageDecs = [_mobx.action, _mobx.action.bound], _cancelPinMessageDecs = [_mobx.action, _mobx.action.bound], _setWhiteboardActiveDecs = [_mobx.action, _mobx.action.bound], _setAsideWidthDecs = [_mobx.action, _mobx.action.bound], _updateSlotsDecs = [_mobx.action, _mobx.action.bound], _toggleLayoutDecs = [_mobx.action, _mobx.action.bound], _toggleCollapsedDecs = [_mobx.action, _mobx.action.bound], _toggleAsideDecs = [_mobx.action, _mobx.action.bound], _asideWidthChangedDecs = [_mobx.action, _mobx.action.bound], _toggleLayoutBarLockDecs = [_mobx.action, _mobx.action.bound], _toggleLayoutBarHiddenDecs = [_mobx.action, _mobx.action.bound], _resetLockTimerDecs = [_mobx.action, _mobx.action.bound], _setHoveringHandlerDecs = [_mobx.action, _mobx.action.bound], _setHoveringLeaveHandlerDecs = [_mobx.action, _mobx.action.bound], _setScreenShareSpeakerViewSizeDecs = [(0, _decorator.debounced)(400), _decorator.bound], _handleLiveLayoutChangeDecs = [_mobx.action, _mobx.action.bound], _onUserInfoUpdatedDecs = [_mobx.action, _mobx.action.bound], _handleLayoutUpdatedDecs = [_mobx.action, _mobx.action.bound], _handleMainListLengthChangedDecs = [_mobx.action, _mobx.action.bound], _handleMainListChangedDecs = [_mobx.action, _mobx.action.bound], _setBarHoveringDecs = [_mobx.action, _mobx.action.bound], _handleConnectionUpdatedDecs = [_mobx.action, _mobx.action.bound], _findVideoWindowByUserIdDecs = [_mobx.action, _mobx.action.bound], _onRemoteUsersLeftDecs = [_mobx.action, _mobx.action.bound], _onAudioVolumeUpdatedDecs = [_mobx.action, _mobx.action.bound], "logger");
+var _T = /*#__PURE__*/new WeakMap();
+var _U = /*#__PURE__*/new WeakMap();
+var _V = /*#__PURE__*/new WeakMap();
+_ref = (_participantDecs = [_mobx.observable, _mobx.observable.ref], _chatDecs = [_mobx.observable, _mobx.observable.ref], _chatActionDecs = [_mobx.observable, _mobx.observable.ref], _stateBarDecs = [_mobx.observable, _mobx.observable.ref], _actionBarDecs = [_mobx.observable, _mobx.observable.ref], _layersDecs = [_mobx.observable, _mobx.observable.ref], _whiteboardDecs = [_mobx.observable, _mobx.observable.ref], _annotationDecs = [_mobx.observable, _mobx.observable.ref], _screenShareControlDecs = [_mobx.observable, _mobx.observable.ref], _subtitlesDecs = [_mobx.observable, _mobx.observable.ref], _subtitlesHistoryDecs = [_mobx.observable, _mobx.observable.ref], _subtitlesHistorySettingsDecs = [_mobx.observable, _mobx.observable.ref], _addPinMessageDecs = [_mobx.action, _mobx.action.bound], _cancelPinMessageDecs = [_mobx.action, _mobx.action.bound], _setWhiteboardActiveDecs = [_mobx.action, _mobx.action.bound], _setAsideWidthDecs = [_mobx.action, _mobx.action.bound], _updateSlotsDecs = [_mobx.action, _mobx.action.bound], _toggleLayoutDecs = [_mobx.action, _mobx.action.bound], _toggleCollapsedDecs = [_mobx.action, _mobx.action.bound], _toggleAsideDecs = [_mobx.action, _mobx.action.bound], _asideWidthChangedDecs = [_mobx.action, _mobx.action.bound], _toggleLayoutBarLockDecs = [_mobx.action, _mobx.action.bound], _toggleLayoutBarHiddenDecs = [_mobx.action, _mobx.action.bound], _resetLockTimerDecs = [_mobx.action, _mobx.action.bound], _setHoveringHandlerDecs = [_mobx.action, _mobx.action.bound], _setHoveringLeaveHandlerDecs = [_mobx.action, _mobx.action.bound], _setScreenShareSpeakerViewSizeDecs = [(0, _decorator.debounced)(400), _decorator.bound], _handleLiveLayoutChangeDecs = [_mobx.action, _mobx.action.bound], _onUserInfoUpdatedDecs = [_mobx.action, _mobx.action.bound], _handleLayoutUpdatedDecs = [_mobx.action, _mobx.action.bound], _handleMainListLengthChangedDecs = [_mobx.action, _mobx.action.bound], _handleMainListChangedDecs = [_mobx.action, _mobx.action.bound], _setBarHoveringDecs = [_mobx.action, _mobx.action.bound], _handleConnectionUpdatedDecs = [_mobx.action, _mobx.action.bound], _findVideoWindowByUserIdDecs = [_mobx.action, _mobx.action.bound], _onRemoteUsersLeftDecs = [_mobx.action, _mobx.action.bound], _onAudioVolumeUpdatedDecs = [_mobx.action, _mobx.action.bound], "logger");
 var LayoutStoreBase = exports.LayoutStoreBase = /*#__PURE__*/function () {
   function LayoutStoreBase(_ref2) {
     var _this = this;
@@ -126,6 +129,15 @@ var LayoutStoreBase = exports.LayoutStoreBase = /*#__PURE__*/function () {
     (0, _defineProperty2["default"])(this, "_disposers", []);
     (0, _defineProperty2["default"])(this, "_barLockTimer", 0);
     (0, _defineProperty2["default"])(this, "_liveStreamState", _type.FcrLiveStreamingState.STOPPED);
+    (0, _defineProperty2["default"])(this, "_roomProviderObserver", {
+      onRoutingChanged: this._handleRoutingChanged
+    });
+    (0, _defineProperty2["default"])(this, "_roomObserver", {
+      onLiveStreamingStateUpdated: this._handleRoomProviderLiveStreamingStateUpdated
+    });
+    (0, _defineProperty2["default"])(this, "_streamObserverByVolumeIndicationUpdated", {
+      onStreamVolumeIndicationUpdated: this._onAudioVolumeUpdated
+    });
     // Slots
     _classPrivateFieldInitSpec(this, _A, _init_participant(this, null));
     _classPrivateFieldInitSpec(this, _B, _init_chat(this, null));
@@ -136,17 +148,20 @@ var LayoutStoreBase = exports.LayoutStoreBase = /*#__PURE__*/function () {
     _classPrivateFieldInitSpec(this, _G, _init_whiteboard(this, null));
     _classPrivateFieldInitSpec(this, _H, _init_annotation(this, null));
     _classPrivateFieldInitSpec(this, _I, _init_screenShareControl(this, null));
+    _classPrivateFieldInitSpec(this, _J, _init_subtitles(this, null));
+    _classPrivateFieldInitSpec(this, _K, _init_subtitlesHistory(this, null));
+    _classPrivateFieldInitSpec(this, _L, _init_subtitlesHistorySettings(this, null));
     // State
-    _classPrivateFieldInitSpec(this, _J, _init_collapsed(this, true));
-    _classPrivateFieldInitSpec(this, _K, _init_aside(this, false));
-    _classPrivateFieldInitSpec(this, _L, _init_barHovering(this, true));
-    _classPrivateFieldInitSpec(this, _M, _init_barLocked(this, true));
-    _classPrivateFieldInitSpec(this, _N, _init_barHidden(this, false));
-    _classPrivateFieldInitSpec(this, _O, _init_asideWidth(this, _view.MinAsideWidth));
-    _classPrivateFieldInitSpec(this, _P, _init_userVolumeMap(this, new Map()));
-    _classPrivateFieldInitSpec(this, _Q, _init_chatRoomState(this, _type4.FcrChatRoomConnectionState.Disconnected));
-    _classPrivateFieldInitSpec(this, _R, _init_whiteboardActive(this, false));
-    _classPrivateFieldInitSpec(this, _S, _init_ownerUser(this, undefined));
+    _classPrivateFieldInitSpec(this, _M, _init_collapsed(this, true));
+    _classPrivateFieldInitSpec(this, _N, _init_aside(this, false));
+    _classPrivateFieldInitSpec(this, _O, _init_barHovering(this, true));
+    _classPrivateFieldInitSpec(this, _P, _init_barLocked(this, true));
+    _classPrivateFieldInitSpec(this, _Q, _init_barHidden(this, false));
+    _classPrivateFieldInitSpec(this, _R, _init_asideWidth(this, _view.MinAsideWidth));
+    _classPrivateFieldInitSpec(this, _S, _init_userVolumeMap(this, new Map()));
+    _classPrivateFieldInitSpec(this, _T, _init_chatRoomState(this, _type4.FcrChatRoomConnectionState.Disconnected));
+    _classPrivateFieldInitSpec(this, _U, _init_whiteboardActive(this, false));
+    _classPrivateFieldInitSpec(this, _V, _init_ownerUser(this, undefined));
     (0, _defineProperty2["default"])(this, "getAllowedOperations", (0, _mobxUtils.computedFn)(function (targetRole, isSelf) {
       return _this._privilegeProvider.getAllowedOperations(targetRole, isSelf);
     }));
@@ -183,7 +198,9 @@ var LayoutStoreBase = exports.LayoutStoreBase = /*#__PURE__*/function () {
     this._sharedMemberDataSource = objectManager.getObject(_objectManager.FcrUIObjectKeys.S_SHARED_MEMBER_DATA_SOURCE);
     this._pinDataSource = objectManager.getObject(_objectManager.FcrUIObjectKeys.S_SHARED_PIN_DATA_SOURCE);
     this._sharedScreenShareDataSource = objectManager.getObject(_objectManager.FcrUIObjectKeys.S_SHARED_SCREEN_SHARE_DATA_SOURCE);
+    this._roomProvider = objectManager.getObject(_objectManager.FcrUIObjectKeys.P_ROOM_PROVIDER);
     this.chatRoomState = this._chatRoomControl.getConnectionState();
+    this._roomProvider.addObserver(this._roomProviderObserver);
   }
   return (0, _createClass2["default"])(LayoutStoreBase, [{
     key: "participant",
@@ -258,7 +275,7 @@ var LayoutStoreBase = exports.LayoutStoreBase = /*#__PURE__*/function () {
       _classPrivateFieldSet(_I, this, v);
     }
   }, {
-    key: "collapsed",
+    key: "subtitles",
     get: function get() {
       return _classPrivateFieldGet(_J, this);
     },
@@ -266,7 +283,7 @@ var LayoutStoreBase = exports.LayoutStoreBase = /*#__PURE__*/function () {
       _classPrivateFieldSet(_J, this, v);
     }
   }, {
-    key: "aside",
+    key: "subtitlesHistory",
     get: function get() {
       return _classPrivateFieldGet(_K, this);
     },
@@ -274,7 +291,7 @@ var LayoutStoreBase = exports.LayoutStoreBase = /*#__PURE__*/function () {
       _classPrivateFieldSet(_K, this, v);
     }
   }, {
-    key: "barHovering",
+    key: "subtitlesHistorySettings",
     get: function get() {
       return _classPrivateFieldGet(_L, this);
     },
@@ -282,7 +299,7 @@ var LayoutStoreBase = exports.LayoutStoreBase = /*#__PURE__*/function () {
       _classPrivateFieldSet(_L, this, v);
     }
   }, {
-    key: "barLocked",
+    key: "collapsed",
     get: function get() {
       return _classPrivateFieldGet(_M, this);
     },
@@ -290,7 +307,7 @@ var LayoutStoreBase = exports.LayoutStoreBase = /*#__PURE__*/function () {
       _classPrivateFieldSet(_M, this, v);
     }
   }, {
-    key: "barHidden",
+    key: "aside",
     get: function get() {
       return _classPrivateFieldGet(_N, this);
     },
@@ -298,7 +315,7 @@ var LayoutStoreBase = exports.LayoutStoreBase = /*#__PURE__*/function () {
       _classPrivateFieldSet(_N, this, v);
     }
   }, {
-    key: "asideWidth",
+    key: "barHovering",
     get: function get() {
       return _classPrivateFieldGet(_O, this);
     },
@@ -306,7 +323,7 @@ var LayoutStoreBase = exports.LayoutStoreBase = /*#__PURE__*/function () {
       _classPrivateFieldSet(_O, this, v);
     }
   }, {
-    key: "userVolumeMap",
+    key: "barLocked",
     get: function get() {
       return _classPrivateFieldGet(_P, this);
     },
@@ -314,7 +331,7 @@ var LayoutStoreBase = exports.LayoutStoreBase = /*#__PURE__*/function () {
       _classPrivateFieldSet(_P, this, v);
     }
   }, {
-    key: "chatRoomState",
+    key: "barHidden",
     get: function get() {
       return _classPrivateFieldGet(_Q, this);
     },
@@ -322,7 +339,7 @@ var LayoutStoreBase = exports.LayoutStoreBase = /*#__PURE__*/function () {
       _classPrivateFieldSet(_Q, this, v);
     }
   }, {
-    key: "whiteboardActive",
+    key: "asideWidth",
     get: function get() {
       return _classPrivateFieldGet(_R, this);
     },
@@ -330,13 +347,37 @@ var LayoutStoreBase = exports.LayoutStoreBase = /*#__PURE__*/function () {
       _classPrivateFieldSet(_R, this, v);
     }
   }, {
-    key: "ownerUser",
+    key: "userVolumeMap",
     get: function get() {
       return _classPrivateFieldGet(_S, this);
     },
     set: function set(v) {
       _classPrivateFieldSet(_S, this, v);
     }
+  }, {
+    key: "chatRoomState",
+    get: function get() {
+      return _classPrivateFieldGet(_T, this);
+    },
+    set: function set(v) {
+      _classPrivateFieldSet(_T, this, v);
+    }
+  }, {
+    key: "whiteboardActive",
+    get: function get() {
+      return _classPrivateFieldGet(_U, this);
+    },
+    set: function set(v) {
+      _classPrivateFieldSet(_U, this, v);
+    }
+  }, {
+    key: "ownerUser",
+    get: function get() {
+      return _classPrivateFieldGet(_V, this);
+    },
+    set: function set(v) {
+      _classPrivateFieldSet(_V, this, v);
+    }
   }, {
     key: "streamControl",
     get: function get() {
@@ -375,7 +416,7 @@ var LayoutStoreBase = exports.LayoutStoreBase = /*#__PURE__*/function () {
   }, {
     key: "isMulti",
     get: function get() {
-      return this._privilegeProvider.isMulti();
+      return this._privilegeProvider.isMultiWaterMarkEnabled();
     }
   }, {
     key: "layout",
@@ -398,11 +439,6 @@ var LayoutStoreBase = exports.LayoutStoreBase = /*#__PURE__*/function () {
       // return this._sharedAnnotationDataSource.annotationHasStart;
       return false;
     }
-  }, {
-    key: "isSharingWithAudio",
-    get: function get() {
-      return this._sharedScreenShareDataSource.isSharingWithAudio;
-    }
   }, {
     key: "sourceList",
     get: function get() {
@@ -583,17 +619,17 @@ var LayoutStoreBase = exports.LayoutStoreBase = /*#__PURE__*/function () {
   }, {
     key: "allowChat",
     get: function get() {
-      return this._privilegeProvider.allowChat();
+      return this._privilegeProvider.isChatAllowed();
     }
   }, {
     key: "allowUnmuteSelfAudio",
     get: function get() {
-      return this._privilegeProvider.allowUnmuteSelfAudio();
+      return this._privilegeProvider.isUnmuteSelfAudioAllowed();
     }
   }, {
     key: "allowUnmuteSelfVideo",
     get: function get() {
-      return this._privilegeProvider.allowUnmuteSelfVideo();
+      return this._privilegeProvider.isUnmuteSelfVideoAllowed();
     }
   }, {
     key: "isHostOrCoHost",
@@ -609,27 +645,27 @@ var LayoutStoreBase = exports.LayoutStoreBase = /*#__PURE__*/function () {
   }, {
     key: "allowedAllChat",
     get: function get() {
-      return this._privilegeProvider.allowedAllChat();
+      return this._privilegeProvider.isAllChatAllowed();
     }
   }, {
     key: "allowedPublicChatAndDisallowedPrivateChat",
     get: function get() {
-      return this._privilegeProvider.allowedPublicChatAndDisallowedPrivateChat();
+      return this._privilegeProvider.isPublicChatAllowedAndPrivateChatDisallowed();
     }
   }, {
     key: "disallowedPublicChatAndDisallowedPrivateChatToParticipant",
     get: function get() {
-      return this._privilegeProvider.disallowedPublicChatAndDisallowedPrivateChatToParticipant();
+      return this._privilegeProvider.isPublicChatAndPrivateChatToParticipantDisallowed();
     }
   }, {
     key: "disallowedAllChat",
     get: function get() {
-      return this._privilegeProvider.disallowedAllChat();
+      return this._privilegeProvider.isAllChatDisallowed();
     }
   }, {
     key: "privilegeOperator",
     get: function get() {
-      return this._privilegeProvider.privilegeOperator;
+      return this._privilegeProvider.getPrivilegeOperator();
     }
   }, {
     key: "localUserId",
@@ -666,6 +702,11 @@ var LayoutStoreBase = exports.LayoutStoreBase = /*#__PURE__*/function () {
     get: function get() {
       return this._sharedLayoutDataSource.chatRenderAt;
     }
+  }, {
+    key: "subtitlesHistoryRenderAt",
+    get: function get() {
+      return this._sharedLayoutDataSource.subtitlesHistoryRenderAt;
+    }
   }, {
     key: "getWaterMarkContent",
     value: function getWaterMarkContent() {
@@ -829,6 +870,19 @@ var LayoutStoreBase = exports.LayoutStoreBase = /*#__PURE__*/function () {
         userId: userId
       });
     }
+  }, {
+    key: "closeSubtitlesHistoryFromAside",
+    value: function closeSubtitlesHistoryFromAside() {
+      this._sharedLayoutDataSource.setAsideLayout({
+        subtitlesHistory: false
+      });
+    }
+  }, {
+    key: "moveSubtitlesHistoryFromAsideToDialog",
+    value: function moveSubtitlesHistoryFromAsideToDialog() {
+      this._sharedLayoutDataSource.setSubtitlesHistoryRenderAt('dialog');
+      this._dialogProvider.openDialog(_constant.FcrUIDialogKey.SUBTITLES_HISTORY);
+    }
   }, {
     key: "toggleLayout",
     value: function toggleLayout(layout, manual) {
@@ -909,6 +963,8 @@ var LayoutStoreBase = exports.LayoutStoreBase = /*#__PURE__*/function () {
         return fn();
       });
       this._disposers = [];
+      this._roomProvider.currentRoomControl.removeObserver(this._roomObserver);
+      this._roomProvider.removeObserver(this._roomProviderObserver);
     }
   }, {
     key: "onUserInfoUpdated",
@@ -1024,8 +1080,7 @@ var LayoutStoreBase = exports.LayoutStoreBase = /*#__PURE__*/function () {
       var streamObserver = {
         onStreamsAdded: this._onStreamsAdded,
         onStreamsUpdated: this._onStreamsUpdated,
-        onStreamsRemoved: this._onStreamsRemoved,
-        onStreamVolumeIndicationUpdated: this._onAudioVolumeUpdated
+        onStreamsRemoved: this._onStreamsRemoved
       };
       var userObserver = {
         onUserInfoUpdated: this.onUserInfoUpdated,
@@ -1055,10 +1110,14 @@ var LayoutStoreBase = exports.LayoutStoreBase = /*#__PURE__*/function () {
       this._videoWindowDataSource.addObserver(videoWindowObserver);
       this._whiteBoardControl.addObserver(whiteboardObserver);
       this._chatProvider.addObserver(chatObserver);
+      if (this.enableSpotlight) {
+        this._streamControl.addObserver(this._streamObserverByVolumeIndicationUpdated);
+      }
       this._disposers.push(function () {
         _this5._roomControl.removeObserver(roomObserver);
         _this5._eventProvider.removeObserver(eventObserver);
         _this5._streamControl.removeObserver(streamObserver);
+        _this5._streamControl.removeObserver(_this5._streamObserverByVolumeIndicationUpdated);
         _this5._userControl.removeObserver(userObserver);
         _this5._videoWindowDataSource.removeObserver(videoWindowObserver);
         _this5._whiteBoardControl.removeObserver(whiteboardObserver);
@@ -1108,10 +1167,10 @@ var LayoutStoreBase = exports.LayoutStoreBase = /*#__PURE__*/function () {
       }), (0, _mobx.reaction)(function () {
         return _this5.asideContent;
       }, function (asideContent) {
-        if (asideContent.participant || asideContent.chat) {
+        if (asideContent.participant || asideContent.chat || asideContent.subtitlesHistory) {
           _this5.toggleAside(true);
         }
-        if (!asideContent.participant && !asideContent.chat) {
+        if (!asideContent.participant && !asideContent.chat && !asideContent.subtitlesHistory) {
           _this5.toggleAside(false);
         }
       }, {
@@ -1137,6 +1196,11 @@ var LayoutStoreBase = exports.LayoutStoreBase = /*#__PURE__*/function () {
       }, function (_ref6) {
         var enableSpotlight = _ref6.enableSpotlight;
         _this5._videoWindowDataSource.setSpotlightEnabled(enableSpotlight);
+        if (enableSpotlight) {
+          _this5._streamControl.addObserver(_this5._streamObserverByVolumeIndicationUpdated);
+        } else {
+          _this5._streamControl.removeObserver(_this5._streamObserverByVolumeIndicationUpdated);
+        }
       }),
       // 录制的特殊逻辑：
       // 因为录制机器人不发流，且当前切换布局的逻辑是有多个人的视频窗口才切换到 speaker layout
@@ -1251,6 +1315,29 @@ var LayoutStoreBase = exports.LayoutStoreBase = /*#__PURE__*/function () {
         }
       });
     }
+  }, {
+    key: "_handleRoutingChanged",
+    value: function _handleRoutingChanged(roomControl) {
+      var _roomControl$getRoomI;
+      var roomType = (_roomControl$getRoomI = roomControl.getRoomInfo()) === null || _roomControl$getRoomI === void 0 ? void 0 : _roomControl$getRoomI.roomType;
+      if (roomType === _type5.FcrRoomType.Mainroom) {
+        if (this._roomProvider.liveStreamingState === _type.FcrLiveStreamingState.STARTED && this._videoWindowDataSource.mainList.length > 1) {
+          this.toggleLayout(_type2.FcrUIVideoWindowLayoutType.Speaker, false);
+        }
+        this._roomProvider.currentRoomControl.addObserver(this._roomObserver);
+      } else {
+        this._roomProvider.currentRoomControl.removeObserver(this._roomObserver);
+      }
+    }
+  }, {
+    key: "_handleRoomProviderLiveStreamingStateUpdated",
+    value: function _handleRoomProviderLiveStreamingStateUpdated(roomId, state) {
+      if (this._roomProvider.currentRoomControl.getLiveStreamingState() === _type.FcrLiveStreamingState.STARTED && this._videoWindowDataSource.mainList.length > 1) {
+        this.toggleLayout(_type2.FcrUIVideoWindowLayoutType.Speaker, false);
+      } else {
+        this.toggleLayout(this.manualLayout || _type2.FcrUIVideoWindowLayoutType.Gallery, true);
+      }
+    }
   }, {
     key: "_handleLiveStreamingStateUpdated",
     value: function _handleLiveStreamingStateUpdated(_, state, url, reason) {
@@ -1266,6 +1353,10 @@ var LayoutStoreBase = exports.LayoutStoreBase = /*#__PURE__*/function () {
     key: "_handleStreamAdded",
     value: function _handleStreamAdded(modifiedStream) {
       this._videoWindowDataSource.add(modifiedStream, modifiedStream.owner.userId === this.localUserId);
+      if (this._videoWindowDataSource.mainList.length > 1 && this._roomProvider.liveStreamingState === _type.FcrLiveStreamingState.STARTED) {
+        this._videoWindowDataSource.setLayout(_type2.FcrUIVideoWindowLayoutType.Speaker, false);
+        return;
+      }
       if (this.isMultiDisplayActive) {
         // 在开启多屏模式下，屏幕共享流添加时，保持布局不变
         return;
@@ -1315,7 +1406,8 @@ var LayoutStoreBase = exports.LayoutStoreBase = /*#__PURE__*/function () {
         // 在开启多屏模式下，屏幕共享流被移除时，保持布局不变
         return;
       }
-      if (hasScreenStream) {
+      var isLiveStreaming = this._roomProvider.currentRoomControl.getLiveStreamingState() === _type.FcrLiveStreamingState.STARTED;
+      if (hasScreenStream && !isLiveStreaming) {
         if (this.manualLayout) {
           this._videoWindowDataSource.setLayout(this.manualLayout);
         } else {
@@ -1355,7 +1447,7 @@ var LayoutStoreBase = exports.LayoutStoreBase = /*#__PURE__*/function () {
   }]);
 }();
 _LayoutStoreBase = LayoutStoreBase;
-var _applyDecs$e = (0, _slicedToArray2["default"])(_applyDecs(_LayoutStoreBase, [[_participantDecs, 17, "participant"], [_chatDecs, 17, "chat"], [_chatActionDecs, 17, "chatAction"], [_stateBarDecs, 17, "stateBar"], [_actionBarDecs, 17, "actionBar"], [_layersDecs, 17, "layers"], [_whiteboardDecs, 17, "whiteboard"], [_annotationDecs, 17, "annotation"], [_screenShareControlDecs, 17, "screenShareControl"], [_mobx.observable, 1, "collapsed"], [_mobx.observable, 1, "aside"], [_mobx.observable, 1, "barHovering"], [_mobx.observable, 1, "barLocked"], [_mobx.observable, 1, "barHidden"], [_mobx.observable, 1, "asideWidth"], [_mobx.observable, 1, "userVolumeMap"], [_mobx.observable, 1, "chatRoomState"], [_mobx.observable, 1, "whiteboardActive"], [_mobx.observable, 1, "ownerUser"], [_mobx.computed, 3, "isWaterMarkEnabled"], [_mobx.computed, 3, "isMulti"], [_mobx.computed, 3, "layout"], [_mobx.computed, 3, "manualLayout"], [_mobx.computed, 3, "scalcValue"], [_mobx.computed, 3, "sourceList"], [_mobx.computed, 3, "layoutMainList"], [_mobx.computed, 3, "mainList"], [_mobx.computed, 3, "mainListMapByAudioStreamId"], [_mobx.computed, 3, "spotlightStreamId"], [_mobx.computed, 3, "foldList"], [_mobx.computed, 3, "galleryList"], [_mobx.computed, 3, "isMainWindowInScreenSharing"], [_mobx.computed, 3, "isCurrentUserInBoardSharing"], [_mobx.computed, 3, "asideLayout"], [_mobx.computed, 3, "carouselList"], [_mobx.computed, 3, "hasPinnedStream"], [_mobx.computed, 3, "isRobot"], [_mobx.computed, 3, "findSpotlightUser"], [_mobx.computed, 3, "isWhoISpeakingActive"], [_mobx.computed, 3, "microphoneEnabled"], [_mobx.computed, 3, "cameraEnabled"], [_mobx.computed, 3, "galleryMaxSize"], [_mobx.computed, 3, "asideContent"], [_mobx.computed, 3, "participantsRenderAt"], [_mobx.computed, 3, "chatRenderAt"], [_decorator.bound, 2, "getWaterMarkContent"], [_decorator.bound, 2, "hasMutePermission"], [_decorator.bound, 2, "hasUnmutePermission"], [_decorator.bound, 2, "hasRequestStartAudioPermission"], [_decorator.bound, 2, "toggleMainStream"], [_addPinMessageDecs, 18, "addPinMessage"], [_cancelPinMessageDecs, 18, "cancelPinMessage"], [_decorator.bound, 2, "addPin"], [_decorator.bound, 2, "removePin"], [_decorator.bound, 2, "setVideoOrientation"], [_decorator.bound, 2, "setAllowChat"], [_decorator.bound, 2, "handleSetPinState"], [_setWhiteboardActiveDecs, 18, "setWhiteboardActive"], [_setAsideWidthDecs, 18, "setAsideWidth"], [_updateSlotsDecs, 18, "updateSlots"], [_decorator.bound, 2, "closeParticipantFromAside"], [_decorator.bound, 2, "moveParticipantFromAsideToDialog"], [_decorator.bound, 2, "closeChatFromAside"], [_decorator.bound, 2, "closeAsideChat"], [_decorator.bound, 2, "moveChatFromAsideToDialog"], [_decorator.bound, 2, "openPrivateChat"], [_decorator.bound, 2, "openRenameDialog"], [_toggleLayoutDecs, 18, "toggleLayout"], [_toggleCollapsedDecs, 18, "toggleCollapsed"], [_toggleAsideDecs, 18, "toggleAside"], [_asideWidthChangedDecs, 18, "asideWidthChanged"], [_toggleLayoutBarLockDecs, 18, "toggleLayoutBarLock"], [_toggleLayoutBarHiddenDecs, 18, "toggleLayoutBarHidden"], [_resetLockTimerDecs, 18, "resetLockTimer"], [_setHoveringHandlerDecs, 18, "setHoveringHandler"], [_setHoveringLeaveHandlerDecs, 18, "setHoveringLeaveHandler"], [_setScreenShareSpeakerViewSizeDecs, 2, "setScreenShareSpeakerViewSize"], [_handleLiveLayoutChangeDecs, 18, "handleLiveLayoutChange"], [_onUserInfoUpdatedDecs, 18, "onUserInfoUpdated"], [_decorator.bound, 2, "stopLocalPreview"], [_decorator.bound, 2, "startLocalPreview"], [_decorator.bound, 2, "setAllowChatWithPayload"], [_decorator.bound, 2, "setScaleValue"], [_decorator.bound, 2, "muteAudio"], [_decorator.bound, 2, "sendParticipantEvent"], [_decorator.bound, 2, "onEvent"], [_decorator.bound, 2, "_addListeners"], [_mobx.computed, 3, "_hasVideoStreamUser"], [_handleMainListLengthChangedDecs, 18, "_handleMainListLengthChanged"], [_handleMainListChangedDecs, 18, "_handleMainListChanged"], [_mobx.action, 2, "_switchToSpeaker"], [_mobx.action, 2, "_switchToGallery"], [_setBarHoveringDecs, 18, "_setBarHovering"], [_handleConnectionUpdatedDecs, 18, "_handleConnectionUpdated"], [_findVideoWindowByUserIdDecs, 18, "_findVideoWindowByUserId"], [_onRemoteUsersLeftDecs, 18, "_onRemoteUsersLeft"], [_decorator.bound, 2, "_handleLiveStreamingStateUpdated"], [_decorator.bound, 2, "_handleStreamAdded"], [_decorator.bound, 2, "_onStreamsAdded"], [_decorator.bound, 2, "_onStreamsUpdated"], [_decorator.bound, 2, "_onStreamsRemoved"], [_onAudioVolumeUpdatedDecs, 18, "_onAudioVolumeUpdated"], [_handleLayoutUpdatedDecs, 16, "_handleLayoutUpdated"]], []).e, 21);
+var _applyDecs$e = (0, _slicedToArray2["default"])(_applyDecs(_LayoutStoreBase, [[_participantDecs, 17, "participant"], [_chatDecs, 17, "chat"], [_chatActionDecs, 17, "chatAction"], [_stateBarDecs, 17, "stateBar"], [_actionBarDecs, 17, "actionBar"], [_layersDecs, 17, "layers"], [_whiteboardDecs, 17, "whiteboard"], [_annotationDecs, 17, "annotation"], [_screenShareControlDecs, 17, "screenShareControl"], [_subtitlesDecs, 17, "subtitles"], [_subtitlesHistoryDecs, 17, "subtitlesHistory"], [_subtitlesHistorySettingsDecs, 17, "subtitlesHistorySettings"], [_mobx.observable, 1, "collapsed"], [_mobx.observable, 1, "aside"], [_mobx.observable, 1, "barHovering"], [_mobx.observable, 1, "barLocked"], [_mobx.observable, 1, "barHidden"], [_mobx.observable, 1, "asideWidth"], [_mobx.observable, 1, "userVolumeMap"], [_mobx.observable, 1, "chatRoomState"], [_mobx.observable, 1, "whiteboardActive"], [_mobx.observable, 1, "ownerUser"], [_mobx.computed, 3, "isWaterMarkEnabled"], [_mobx.computed, 3, "isMulti"], [_mobx.computed, 3, "layout"], [_mobx.computed, 3, "manualLayout"], [_mobx.computed, 3, "scalcValue"], [_mobx.computed, 3, "sourceList"], [_mobx.computed, 3, "layoutMainList"], [_mobx.computed, 3, "mainList"], [_mobx.computed, 3, "mainListMapByAudioStreamId"], [_mobx.computed, 3, "spotlightStreamId"], [_mobx.computed, 3, "foldList"], [_mobx.computed, 3, "galleryList"], [_mobx.computed, 3, "isMainWindowInScreenSharing"], [_mobx.computed, 3, "isCurrentUserInBoardSharing"], [_mobx.computed, 3, "asideLayout"], [_mobx.computed, 3, "carouselList"], [_mobx.computed, 3, "hasPinnedStream"], [_mobx.computed, 3, "isRobot"], [_mobx.computed, 3, "findSpotlightUser"], [_mobx.computed, 3, "isWhoISpeakingActive"], [_mobx.computed, 3, "microphoneEnabled"], [_mobx.computed, 3, "cameraEnabled"], [_mobx.computed, 3, "galleryMaxSize"], [_mobx.computed, 3, "asideContent"], [_mobx.computed, 3, "participantsRenderAt"], [_mobx.computed, 3, "chatRenderAt"], [_mobx.computed, 3, "subtitlesHistoryRenderAt"], [_decorator.bound, 2, "getWaterMarkContent"], [_decorator.bound, 2, "hasMutePermission"], [_decorator.bound, 2, "hasUnmutePermission"], [_decorator.bound, 2, "hasRequestStartAudioPermission"], [_decorator.bound, 2, "toggleMainStream"], [_addPinMessageDecs, 18, "addPinMessage"], [_cancelPinMessageDecs, 18, "cancelPinMessage"], [_decorator.bound, 2, "addPin"], [_decorator.bound, 2, "removePin"], [_decorator.bound, 2, "setVideoOrientation"], [_decorator.bound, 2, "setAllowChat"], [_decorator.bound, 2, "handleSetPinState"], [_setWhiteboardActiveDecs, 18, "setWhiteboardActive"], [_setAsideWidthDecs, 18, "setAsideWidth"], [_updateSlotsDecs, 18, "updateSlots"], [_decorator.bound, 2, "closeParticipantFromAside"], [_decorator.bound, 2, "moveParticipantFromAsideToDialog"], [_decorator.bound, 2, "closeChatFromAside"], [_decorator.bound, 2, "closeAsideChat"], [_decorator.bound, 2, "moveChatFromAsideToDialog"], [_decorator.bound, 2, "openPrivateChat"], [_decorator.bound, 2, "openRenameDialog"], [_decorator.bound, 2, "closeSubtitlesHistoryFromAside"], [_decorator.bound, 2, "moveSubtitlesHistoryFromAsideToDialog"], [_toggleLayoutDecs, 18, "toggleLayout"], [_toggleCollapsedDecs, 18, "toggleCollapsed"], [_toggleAsideDecs, 18, "toggleAside"], [_asideWidthChangedDecs, 18, "asideWidthChanged"], [_toggleLayoutBarLockDecs, 18, "toggleLayoutBarLock"], [_toggleLayoutBarHiddenDecs, 18, "toggleLayoutBarHidden"], [_resetLockTimerDecs, 18, "resetLockTimer"], [_setHoveringHandlerDecs, 18, "setHoveringHandler"], [_setHoveringLeaveHandlerDecs, 18, "setHoveringLeaveHandler"], [_setScreenShareSpeakerViewSizeDecs, 2, "setScreenShareSpeakerViewSize"], [_handleLiveLayoutChangeDecs, 18, "handleLiveLayoutChange"], [_onUserInfoUpdatedDecs, 18, "onUserInfoUpdated"], [_decorator.bound, 2, "stopLocalPreview"], [_decorator.bound, 2, "startLocalPreview"], [_decorator.bound, 2, "setAllowChatWithPayload"], [_decorator.bound, 2, "setScaleValue"], [_decorator.bound, 2, "muteAudio"], [_decorator.bound, 2, "sendParticipantEvent"], [_decorator.bound, 2, "onEvent"], [_decorator.bound, 2, "_addListeners"], [_mobx.computed, 3, "_hasVideoStreamUser"], [_handleMainListLengthChangedDecs, 18, "_handleMainListLengthChanged"], [_handleMainListChangedDecs, 18, "_handleMainListChanged"], [_mobx.action, 2, "_switchToSpeaker"], [_mobx.action, 2, "_switchToGallery"], [_setBarHoveringDecs, 18, "_setBarHovering"], [_handleConnectionUpdatedDecs, 18, "_handleConnectionUpdated"], [_findVideoWindowByUserIdDecs, 18, "_findVideoWindowByUserId"], [_onRemoteUsersLeftDecs, 18, "_onRemoteUsersLeft"], [_decorator.bound, 2, "_handleRoutingChanged"], [_decorator.bound, 2, "_handleRoomProviderLiveStreamingStateUpdated"], [_decorator.bound, 2, "_handleLiveStreamingStateUpdated"], [_decorator.bound, 2, "_handleStreamAdded"], [_decorator.bound, 2, "_onStreamsAdded"], [_decorator.bound, 2, "_onStreamsUpdated"], [_decorator.bound, 2, "_onStreamsRemoved"], [_onAudioVolumeUpdatedDecs, 18, "_onAudioVolumeUpdated"], [_handleLayoutUpdatedDecs, 16, "_handleLayoutUpdated"]], []).e, 24);
 _init_participant = _applyDecs$e[0];
 _init_chat = _applyDecs$e[1];
 _init_chatAction = _applyDecs$e[2];
@@ -1365,16 +1457,19 @@ _init_layers = _applyDecs$e[5];
 _init_whiteboard = _applyDecs$e[6];
 _init_annotation = _applyDecs$e[7];
 _init_screenShareControl = _applyDecs$e[8];
-_init_collapsed = _applyDecs$e[9];
-_init_aside = _applyDecs$e[10];
-_init_barHovering = _applyDecs$e[11];
-_init_barLocked = _applyDecs$e[12];
-_init_barHidden = _applyDecs$e[13];
-_init_asideWidth = _applyDecs$e[14];
-_init_userVolumeMap = _applyDecs$e[15];
-_init_chatRoomState = _applyDecs$e[16];
-_init_whiteboardActive = _applyDecs$e[17];
-_init_ownerUser = _applyDecs$e[18];
-_init__handleLayoutUpdated = _applyDecs$e[19];
-_initProto = _applyDecs$e[20];
+_init_subtitles = _applyDecs$e[9];
+_init_subtitlesHistory = _applyDecs$e[10];
+_init_subtitlesHistorySettings = _applyDecs$e[11];
+_init_collapsed = _applyDecs$e[12];
+_init_aside = _applyDecs$e[13];
+_init_barHovering = _applyDecs$e[14];
+_init_barLocked = _applyDecs$e[15];
+_init_barHidden = _applyDecs$e[16];
+_init_asideWidth = _applyDecs$e[17];
+_init_userVolumeMap = _applyDecs$e[18];
+_init_chatRoomState = _applyDecs$e[19];
+_init_whiteboardActive = _applyDecs$e[20];
+_init_ownerUser = _applyDecs$e[21];
+_init__handleLayoutUpdated = _applyDecs$e[22];
+_initProto = _applyDecs$e[23];
 var StoreContext = exports.StoreContext = /*#__PURE__*/(0, _react.createContext)(null);

package/lib/modules/layout/store.electron.js

@@ -56,6 +56,7 @@ var _store = require("./store.base");
 var _type = require("./type");
 var _constant = require("../../utilities/constant");
 var _videoWindow = require("../dialog/dialogs/video-window");
+var _lodash = require("lodash");
 var _LayoutStoreElectron;
 var _initProto;
 function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2["default"])(o), (0, _possibleConstructorReturn2["default"])(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2["default"])(t).constructor) : o.apply(t, e)); }
@@ -86,9 +87,7 @@ var LayoutStoreElectron = exports["default"] = /*#__PURE__*/function (_LayoutSto
     if (_this._multiDisplayProvider.isActive) {
       _this._multiDisplayProvider.setMainWindowMaximize();
     }
-    _this._disposers.push((0, _mobx.reaction)(function () {
-      return _this.isMultiDisplayActive;
-    }, function (isActive) {
+    var handleMultiDisplayActiveChange = (0, _lodash.debounce)(function (isActive) {
       var _this$_multiDisplayPr = _this._multiDisplayProvider.displayState,
         sharingBySelf = _this$_multiDisplayPr.sharingBySelf,
         isSharingScreen = _this$_multiDisplayPr.isSharingScreen;
@@ -119,6 +118,11 @@ var LayoutStoreElectron = exports["default"] = /*#__PURE__*/function (_LayoutSto
       } else if (isSharingScreen) {
         _this.toggleLayout(_type.FcrUIVideoWindowLayoutType.Speaker);
       }
+    }, 100);
+    _this._disposers.push((0, _mobx.reaction)(function () {
+      return _this.isMultiDisplayActive;
+    }, function (isActive) {
+      handleMultiDisplayActiveChange(isActive);
     }));
     return _this;
   }

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

@@ -87,10 +87,14 @@ export interface FcrLayoutSlots {
     whiteboard: React.ReactNode;
     annotation: React.ReactNode;
     screenShareControl: React.ReactNode;
+    subtitles: React.ReactNode;
+    subtitlesHistory: React.ReactNode;
+    subtitlesHistorySettings: React.ReactNode;
 }
 export interface FcrUILayoutAsideContent {
     participant: boolean;
     chat: boolean;
+    subtitlesHistory: boolean;
 }
 export interface LayoutStoreArgs {
     objectManager: FcrUIObjectManager;

package/lib/modules/layout/view.js

@@ -33,6 +33,7 @@ var Layout = exports.Layout = (0, _mobxReact.observer)(function () {
     setHoveringLeaveHandler = layoutStore.setHoveringLeaveHandler,
     asideWidth = layoutStore.asideWidth,
     chatAction = layoutStore.chatAction,
+    subtitlesHistorySettings = layoutStore.subtitlesHistorySettings,
     barHidden = layoutStore.barHidden,
     isRobot = layoutStore.isRobot,
     getWaterMarkContent = layoutStore.getWaterMarkContent,
@@ -41,11 +42,31 @@ var Layout = exports.Layout = (0, _mobxReact.observer)(function () {
     localUser = layoutStore.localUser,
     setAsideWidth = layoutStore.setAsideWidth,
     toggleAside = layoutStore.toggleAside,
-    asideWidthChanged = layoutStore.asideWidthChanged;
+    asideWidthChanged = layoutStore.asideWidthChanged,
+    subtitles = layoutStore.subtitles,
+    subtitlesHistoryRenderAt = layoutStore.subtitlesHistoryRenderAt,
+    chatRenderAt = layoutStore.chatRenderAt,
+    participantsRenderAt = layoutStore.participantsRenderAt,
+    asideContent = layoutStore.asideContent;
   var _useDelayedMeasure = (0, _hooks.useDelayedMeasure)(),
     _useDelayedMeasure2 = (0, _slicedToArray2["default"])(_useDelayedMeasure, 2),
     _ref = _useDelayedMeasure2[0],
     bounds = _useDelayedMeasure2[1];
+  var translateWidth = (0, _react.useMemo)(function () {
+    if (asideContent.subtitlesHistory && subtitlesHistoryRenderAt === 'aside') {
+      return 320;
+    }
+    return 0;
+  }, [asideContent.subtitlesHistory, subtitlesHistoryRenderAt]);
+  var chatAndParticipantWidth = (0, _react.useMemo)(function () {
+    if (asideContent.chat && chatRenderAt === 'aside') {
+      return asideWidth;
+    }
+    if (asideContent.participant && participantsRenderAt === 'aside') {
+      return asideWidth;
+    }
+    return 0;
+  }, [asideWidth, asideContent.chat, asideContent.participant, chatRenderAt, participantsRenderAt]);
   var getContainer;
   var onDragHandler = (0, _react.useCallback)(function (event) {
     event.preventDefault();
@@ -102,7 +123,7 @@ var Layout = exports.Layout = (0, _mobxReact.observer)(function () {
       children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
         className: "fcr-layout-content",
         style: {
-          width: bounds.width - asideWidth
+          width: bounds.width - asideWidth - translateWidth
         },
         children: [!isRobot && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
           className: "fcr-layout-content-bar fcr-layout-content-top",
@@ -112,7 +133,7 @@ var Layout = exports.Layout = (0, _mobxReact.observer)(function () {
             className: "fcr-layout-content-bar-body",
             children: stateBar
           })
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Carousel, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.CarouselExpandButton, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.WhoIsSpeaking, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Gallery, {}), !isRobot && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        }), subtitles, /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Carousel, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.CarouselExpandButton, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.WhoIsSpeaking, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Gallery, {}), !isRobot && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
           className: cls,
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
             className: "fcr-layout-content-bar-body",
@@ -122,9 +143,10 @@ var Layout = exports.Layout = (0, _mobxReact.observer)(function () {
           })
         })]
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Aside, {
-        width: aside ? asideWidth : 0,
+        width: aside ? chatAndParticipantWidth + translateWidth : 0,
         onDragHandler: onDragHandler,
-        chatAction: chatAction
+        chatAction: chatAction,
+        subtitlesHistorySettings: subtitlesHistorySettings
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         className: "fcr-layer",
         children: layers

package/lib/modules/notification/index.css

@@ -15,14 +15,14 @@
   align-items: center;
 }
 
-.fcr-notification-root .rc-notification {
+.fcr-notification-root .fcr-notification {
   position: absolute;
   top: 40px;
   z-index: 999;
   height: calc(100vh - 40px);
 }
 
-.rc-notification-notice-wrapper {
+.fcr-notification-notice-wrapper {
   border-radius: 10px;
   left: 10px;
 }
@@ -64,14 +64,14 @@
   transform: translateX(-50%);
   bottom: 0;
 }
-.fcr-notification_bottom .rc-notification-notice-wrapper {
+.fcr-notification_bottom .fcr-notification-notice-wrapper {
   transform: translate3d(0px, 0px, 0px) !important;
   top: unset;
   bottom: 59px;
   background-color: transparent;
   box-shadow: none;
 }
-.fcr-notification_bottom .rc-notification-notice-content {
+.fcr-notification_bottom .fcr-notification-notice-content {
   padding: 0;
   text-align: center;
 }

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

@@ -1,16 +1,18 @@
 import { NotificationStoreArgs } from './type';
 import { FcrUIManagedObject } from '../../object-manager';
-import { NotificationAPI } from 'rc-notification';
+import { WarpNotificationAPI } from 'agora-ui-foundation/lib/components/notification';
 export default class NotificationStore implements FcrUIManagedObject {
     protected logger: import("agora-foundation/lib/logger").Logger;
     private _notification;
     private _messageProvider;
     private _sharedWaitingRoomDataSource;
+    private _sharedVideoWindowDataSource;
     private _messageObserver;
-    get notification(): NotificationAPI;
+    get notification(): WarpNotificationAPI;
     constructor({ objectManager }: NotificationStoreArgs);
     get waitingRoomUserCount(): number;
-    setNotification(notification: NotificationAPI): void;
+    get layoutType(): import("../../type").FcrUIVideoWindowLayoutType;
+    setNotification(notification: WarpNotificationAPI): void;
     release(): void;
 }
 export declare const StoreContext: import("react").Context<NotificationStore>;