fcr-ui-scene 3.7.8 → 3.8.0-alpha

package/lib/modules/dialog/store.browser.d.ts

@@ -4,7 +4,7 @@ import { FcrUIWindow } from '../../providers/window/type';
 export default class DialogStore extends DialogStoreBase {
     getDialogRendererWindow(dialogKey: FcrUIDialogKey, dialogId: string): HTMLElement;
     getDialogRootNode(dialogKey: FcrUIDialogKey, dialogId: string): HTMLElement;
-    getDialogWindow(dialogKey: FcrUIDialogKey, dialogId: string): FcrUIWindow;
+    getDialogWindow(dialogKey: FcrUIDialogKey, dialogId?: string): FcrUIWindow;
     handleMouseover(): void;
     handleMouseout(): void;
     handleSceneMounted(): void;

package/lib/modules/dialog/store.electron.d.ts

@@ -8,9 +8,7 @@ export default class DialogStore extends DialogStoreBase {
     private _renderer;
     private _mouseDetectProvider;
     private _confirmWindow;
-    private _subWindow;
     private _mouseOverState;
-    private _subWindowObserver;
     private _confirmWindowObserver;
     private _detactObserver;
     protected _dialogInfoObserver: FcrUIDialogObserver;
@@ -19,7 +17,7 @@ export default class DialogStore extends DialogStoreBase {
     constructor(args: DialogStoreArgs);
     getDialogRootNode(dialogKey: FcrUIDialogKey, dialogId: string): HTMLElement;
     getDialogRendererWindow(dialogKey: FcrUIDialogKey, dialogId: string): HTMLElement;
-    getDialogWindow(dialogKey: FcrUIDialogKey, dialogId: string): FcrUIWindow;
+    getDialogWindow(dialogKey: FcrUIDialogKey, dialogId?: string): FcrUIWindow;
     handleConfirmMouseover(): void;
     handleConfirmMouseout(): void;
     handleSceneMounted(): void;

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

@@ -87,12 +87,6 @@ var DialogStore = exports["default"] = /*#__PURE__*/function (_DialogStoreBase)
     _this = _callSuper(this, DialogStore, [args]);
     (0, _defineProperty2["default"])(_this, "_windowProvider", void _initProto(_this));
     (0, _defineProperty2["default"])(_this, "_mouseOverState", false);
-    (0, _defineProperty2["default"])(_this, "_subWindowObserver", {
-      onReady: function onReady() {
-        // @ts-ignore
-        _this._subWindow.rendererWindow.FcrUIMainWindowRenderer = window.FcrUIMainWindowRenderer;
-      }
-    });
     (0, _defineProperty2["default"])(_this, "_confirmWindowObserver", {
       onReady: function onReady() {
         var _window$screen = window.screen,
@@ -149,8 +143,6 @@ var DialogStore = exports["default"] = /*#__PURE__*/function (_DialogStoreBase)
     });
     _this.dialogProvider.addObserver(_this._dialogInfoObserver);
     _this._confirmWindow = _this._windowProvider.getWindowById(_constant.FcrUIDialogKey.CONFIRM, _constant.FcrUIDialogKey.CONFIRM);
-    _this._subWindow = _this._windowProvider.getWindowById(_constant.FcrUIDialogKey.SUB_WINDOW, _constant.FcrUIDialogKey.SUB_WINDOW);
-    _this._subWindow.addObserver(_this._subWindowObserver);
     _this._confirmWindow.addObserver(_this._confirmWindowObserver);
     _this.dialogProvider.openDialog(_constant.FcrUIDialogKey.CONFIRM);
     return _this;
@@ -255,7 +247,6 @@ var DialogStore = exports["default"] = /*#__PURE__*/function (_DialogStoreBase)
     value: function release() {
       _superPropGet(DialogStore, "release", this, 3)([]);
       this._confirmWindow.removeObserver(this._confirmWindowObserver);
-      this._subWindow.removeObserver(this._subWindowObserver);
       this.dialogProvider.removeObserver(this._dialogInfoObserver);
       this._mouseDetectProvider.deleteDetectArea(_struct.FcrUIDetectAreaID.Confirm);
       this._mouseDetectProvider.removeObserver(this._detactObserver);

package/lib/modules/event-sound/enum.d.ts

@@ -0,0 +1,5 @@
+export declare enum SoundEffectType {
+    REMOTE_USER_JOINED = "userJoin",
+    RECORDING_STARTED = "cloudRecording",
+    SPEAKER_TEST = "speakerTest"
+}

package/lib/modules/event-sound/enum.js

@@ -0,0 +1,20 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SoundEffectType = void 0;
+var SoundEffectType = exports.SoundEffectType = /*#__PURE__*/function (SoundEffectType) {
+  SoundEffectType["REMOTE_USER_JOINED"] = "userJoin";
+  SoundEffectType["RECORDING_STARTED"] = "cloudRecording";
+  SoundEffectType["SPEAKER_TEST"] = "speakerTest"; // INCOMMING_MESSAGE = 'incomming_message',
+  // INCOMMING_PRIVATE_MESSAGE = 'incomming_private_message',
+  // REMOTE_USER_JOINED = 'remote_user_joined',
+  // DISCONNECTED = 'disconnected',
+  // CONNECTED = 'connected',
+  // RECORDING_STARTED = 'recording_started',
+  // SCREEN_SHARING_STARTED = 'screen_sharing_started',
+  // BOARD_SHARING_STARTED = 'board_sharing_started',
+  return SoundEffectType;
+}({});

package/lib/modules/event-sound/index.d.ts

@@ -1,15 +1,5 @@
 import { UIModule } from '../../base';
 import { SoundEffectStore } from './store';
-export declare enum SoundEffectType {
-    INCOMMING_MESSAGE = "incomming_message",
-    INCOMMING_PRIVATE_MESSAGE = "incomming_private_message",
-    REMOTE_USER_JOINED = "remote_user_joined",
-    DISCONNECTED = "disconnected",
-    CONNECTED = "connected",
-    RECORDING_STARTED = "recording_started",
-    SCREEN_SHARING_STARTED = "screen_sharing_started",
-    BOARD_SHARING_STARTED = "board_sharing_started"
-}
 export declare class SoundEffectUIModule extends UIModule {
     private _store;
     get store(): SoundEffectStore;

package/lib/modules/event-sound/index.js

@@ -6,7 +6,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.SoundEffectUIModule = exports.SoundEffectType = void 0;
+exports.SoundEffectUIModule = void 0;
 require("core-js/modules/es.error.cause.js");
 require("core-js/modules/es.error.to-string.js");
 require("core-js/modules/es.array.concat.js");
@@ -20,17 +20,6 @@ var _base = require("../../base");
 var _store = require("./store");
 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)); }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
-var SoundEffectType = exports.SoundEffectType = /*#__PURE__*/function (SoundEffectType) {
-  SoundEffectType["INCOMMING_MESSAGE"] = "incomming_message";
-  SoundEffectType["INCOMMING_PRIVATE_MESSAGE"] = "incomming_private_message";
-  SoundEffectType["REMOTE_USER_JOINED"] = "remote_user_joined";
-  SoundEffectType["DISCONNECTED"] = "disconnected";
-  SoundEffectType["CONNECTED"] = "connected";
-  SoundEffectType["RECORDING_STARTED"] = "recording_started";
-  SoundEffectType["SCREEN_SHARING_STARTED"] = "screen_sharing_started";
-  SoundEffectType["BOARD_SHARING_STARTED"] = "board_sharing_started";
-  return SoundEffectType;
-}({});
 var SoundEffectUIModule = exports.SoundEffectUIModule = /*#__PURE__*/function (_UIModule) {
   function SoundEffectUIModule() {
     var _this;

package/lib/modules/event-sound/store.d.ts

@@ -1,7 +1,7 @@
 import { FcrUIManagedObject } from '../../object-manager';
 import { SoundEffectStoreArgs } from './type';
 export declare class SoundEffectStore implements FcrUIManagedObject {
-    protected logger: import("agora-foundation/lib/logger").Logger;
+    protected logger: import("fcr-core/lib/imports").Logger;
     private _chatRoomControl;
     private _streamControl;
     private _roomControl;
@@ -10,6 +10,7 @@ export declare class SoundEffectStore implements FcrUIManagedObject {
     private _sharedSettingDataSource;
     private _deviceProvider;
     private _facilityProvider;
+    private _privilegeProvider;
     private _duration;
     private _soundEffectTimer;
     private _soundEffectPlayerMap;
@@ -21,7 +22,6 @@ export declare class SoundEffectStore implements FcrUIManagedObject {
     private _whiteboardObserver;
     constructor({ objectManager }: SoundEffectStoreArgs);
     release(): void;
-    get soundEffectList(): Map<string, Record<string, string>>;
     private _clearSoundEffectPlayer;
     private _clearSoundEffectTimer;
     private _findSoundEffectByName;

package/lib/modules/event-sound/store.js

@@ -61,7 +61,7 @@ var _decorator = require("agora-foundation/lib/decorator");
 var _fcrCore = require("fcr-core");
 var _imports = require("fcr-core/lib/imports");
 var _type = require("fcr-core/lib/type");
-var _ = require(".");
+var _enum = require("./enum");
 var _objectManager = require("../../object-manager");
 var _parameters = require("../../utilities/parameters");
 var _soundEffectPlayer = require("./sound-effect-player");
@@ -114,6 +114,7 @@ var SoundEffectStore = exports.SoundEffectStore = /*#__PURE__*/function () {
     this._userControl = currentRoomControl.getUserControl();
     this._deviceProvider = objectManager.getObject(_objectManager.FcrUIObjectKeys.P_DEVICE_PROVIDER);
     this._facilityProvider = objectManager.getObject(_objectManager.FcrUIObjectKeys.P_FACILITY_PROVIDER);
+    this._privilegeProvider = objectManager.getObject(_objectManager.FcrUIObjectKeys.P_PRIVILEGE_PROVIDER);
     this._chatRoomControl.addObserver(this._chatRoomObserver);
     this._streamControl.addObserver(this._streamsObserver);
     this._roomControl.addObserver(this._roomObserver);
@@ -137,11 +138,6 @@ var SoundEffectStore = exports.SoundEffectStore = /*#__PURE__*/function () {
       this._clearSoundEffectTimer();
       this._clearSoundEffectPlayer();
     }
-  }, {
-    key: "soundEffectList",
-    get: function get() {
-      return this._deviceProvider.soundEffectList;
-    }
   }, {
     key: "_clearSoundEffectPlayer",
     value: function _clearSoundEffectPlayer() {
@@ -190,55 +186,58 @@ var SoundEffectStore = exports.SoundEffectStore = /*#__PURE__*/function () {
       if (!name) {
         return undefined;
       }
-      return this._deviceProvider.soundEffectList.get(name);
+      return this._deviceProvider.soundEffectPlayUrlMap.get(name);
     }
   }, {
     key: "_messageReceived",
     value: function _messageReceived(roomId, msg) {
       var isPrivate = msg.isPrivate;
       if (isPrivate) {
-        this._playSoundIfNeeded(_.SoundEffectType.INCOMMING_PRIVATE_MESSAGE);
+        // this._playSoundIfNeeded(SoundEffectType.INCOMMING_PRIVATE_MESSAGE);
       } else {
-        this._playSoundIfNeeded(_.SoundEffectType.INCOMMING_MESSAGE);
+        // this._playSoundIfNeeded(SoundEffectType.INCOMMING_MESSAGE);
       }
     }
   }, {
     key: "_onCloudRecordingStateUpdated",
     value: function _onCloudRecordingStateUpdated(roomId, state) {
       if (state === _type.FcrRecordingState.Started) {
-        this._playSoundIfNeeded(_.SoundEffectType.RECORDING_STARTED);
+        this._playSoundIfNeeded(_enum.SoundEffectType.RECORDING_STARTED);
       }
     }
   }, {
     key: "_handleStreamsAdded",
     value: function _handleStreamsAdded(roomId, events) {
-      var _this = this;
       events.forEach(function (e) {
         var modifiedStream = e.modifiedStream;
         if (modifiedStream.videoSourceType === _fcrCore.FcrVideoSourceType.SCREEN) {
-          _this._playSoundIfNeeded(_.SoundEffectType.SCREEN_SHARING_STARTED);
+          // this._playSoundIfNeeded(SoundEffectType.SCREEN_SHARING_STARTED);
         }
       });
     }
   }, {
     key: "_handleWhiteboardActive",
     value: function _handleWhiteboardActive() {
-      this._playSoundIfNeeded(_.SoundEffectType.BOARD_SHARING_STARTED);
+      // this._playSoundIfNeeded(SoundEffectType.BOARD_SHARING_STARTED);
     }
   }, {
     key: "_handleConnectionStateUpdated",
     value: function _handleConnectionStateUpdated(state) {
       if (state === _fcrCore.FcrConnectionState.DISCONNECTED) {
-        this._playSoundIfNeeded(_.SoundEffectType.DISCONNECTED);
+        // this._playSoundIfNeeded(SoundEffectType.DISCONNECTED);
       }
       if (state === _fcrCore.FcrConnectionState.CONNECTED) {
-        this._playSoundIfNeeded(_.SoundEffectType.CONNECTED);
+        // this._playSoundIfNeeded(SoundEffectType.CONNECTED);
       }
     }
   }, {
     key: "_handleUserJoined",
     value: function _handleUserJoined(roomId, events) {
-      this._playSoundIfNeeded(_.SoundEffectType.REMOTE_USER_JOINED);
+      var isRoomEnableJoinSound = this._privilegeProvider.isJoinWithPromptSoundEnabled();
+      if (!isRoomEnableJoinSound) {
+        return;
+      }
+      this._playSoundIfNeeded(_enum.SoundEffectType.REMOTE_USER_JOINED);
     }
   }, {
     key: "_playSoundIfNeeded",
@@ -252,24 +251,24 @@ var SoundEffectStore = exports.SoundEffectStore = /*#__PURE__*/function () {
   }, {
     key: "_handlePlaySoundEffect",
     value: function _handlePlaySoundEffect(name) {
-      var _this2 = this;
-      var soundEffect = this._findSoundEffectByName(name);
-      if (soundEffect) {
+      var _this = this;
+      var soundEffectUrl = this._findSoundEffectByName(name);
+      if (soundEffectUrl) {
         var timer = this._soundEffectTimer.get(name);
         if (timer) {
           return;
         }
         var player = this._soundEffectPlayerMap.get(name);
         if (player) {
-          player.play(soundEffect.url);
+          player.play(soundEffectUrl);
         } else {
           player = new _soundEffectPlayer.SoundEffectPlayer();
-          player.play(soundEffect.url);
+          player.play(soundEffectUrl);
           this._soundEffectPlayerMap.set(name, player);
         }
         var newTimer = window.setTimeout(function () {
           player.stop();
-          _this2._soundEffectTimer["delete"](name);
+          _this._soundEffectTimer["delete"](name);
         }, this._duration);
         this._soundEffectTimer.set(name, newTimer);
       }

package/lib/modules/interpreter/store.js

@@ -172,8 +172,10 @@ var InterpreterStore = exports["default"] = /*#__PURE__*/function () {
         // 查询同声传译列表
         _this.queryInterpreterUsers();
 
-        // 关闭弹窗
-        _this.closeInterpreterDialog();
+        // // 关闭弹窗
+        if (operatorUser.userId === _this._userControl.getLocalUser().userId) {
+          _this.closeInterpreterDialog();
+        }
 
         // 同声传译列表更新提醒
         _this._updateInterpreterUsersToast(operatorUser);

package/lib/modules/layout/components/Aside.d.ts

@@ -2,5 +2,6 @@ export interface AsideProps {
     width: number;
     onDragHandler: (event: React.PointerEvent<HTMLDivElement>) => void;
     chatAction: React.ReactNode;
+    subtitlesHistorySettings: React.ReactNode;
 }
-export declare const Aside: ({ width, onDragHandler, chatAction }: AsideProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Aside: (props: AsideProps) => import("react/jsx-runtime").JSX.Element;

package/lib/modules/layout/components/Aside.js

@@ -34,23 +34,29 @@ var ParticipantDialogHeader = (0, _mobxReact.observer)(function () {
     }), ")"]
   });
 });
-var Aside = exports.Aside = (0, _mobxReact.observer)(function (_ref) {
-  var width = _ref.width,
-    onDragHandler = _ref.onDragHandler,
-    chatAction = _ref.chatAction;
+var Aside = exports.Aside = (0, _mobxReact.observer)(function (props) {
+  var width = props.width,
+    onDragHandler = props.onDragHandler,
+    chatAction = props.chatAction,
+    subtitlesHistorySettings = props.subtitlesHistorySettings;
   var _useContext = (0, _react.useContext)(_store.StoreContext),
     participant_ = _useContext.participant,
     chat_ = _useContext.chat,
+    subtitlesHistory_ = _useContext.subtitlesHistory,
     asideContent = _useContext.asideContent,
     closeAsideChat = _useContext.closeAsideChat,
     moveChatFromAsideToDialog = _useContext.moveChatFromAsideToDialog,
     closeParticipantFromAside = _useContext.closeParticipantFromAside,
     moveParticipantFromAsideToDialog = _useContext.moveParticipantFromAsideToDialog,
+    closeSubtitlesHistoryFromAside = _useContext.closeSubtitlesHistoryFromAside,
+    moveSubtitlesHistoryFromAsideToDialog = _useContext.moveSubtitlesHistoryFromAsideToDialog,
     chatRoomState = _useContext.chatRoomState,
     participantsRenderAt = _useContext.participantsRenderAt,
-    chatRenderAt = _useContext.chatRenderAt;
+    chatRenderAt = _useContext.chatRenderAt,
+    subtitlesHistoryRenderAt = _useContext.subtitlesHistoryRenderAt;
   var participant = asideContent.participant && participantsRenderAt === 'aside' ? participant_ : null;
   var chat = asideContent.chat && chatRenderAt === 'aside' ? chat_ : null;
+  var subtitlesHistory = asideContent.subtitlesHistory && subtitlesHistoryRenderAt === 'aside' ? subtitlesHistory_ : null;
   var _useState = (0, _react.useState)(50),
     _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
     percent = _useState2[0],
@@ -82,7 +88,7 @@ var Aside = exports.Aside = (0, _mobxReact.observer)(function (_ref) {
   var transI18n = (0, _i18n.useI18n)();
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     className: (0, _classnames["default"])('fcr-layout-aside', {
-      'fcr-layout-aside-active': participant || chat
+      'fcr-layout-aside-active': participant || chat || subtitlesHistory
     }),
     style: {
       width: width
@@ -90,52 +96,17 @@ var Aside = exports.Aside = (0, _mobxReact.observer)(function (_ref) {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: "fcr-layout-aside-body",
       ref: ref,
-      children: [participant && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-        className: "fcr-layout-aside-body-up",
-        style: chat ? {
-          height: "".concat(percent, "%")
-        } : {
-          flex: 1
-        },
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_windowHeader.FcrWindowHeader, {
-          showClose: false // 在 Aside 中有自定义的按钮样式，不用 header 中的关闭按钮
-          ,
-          title: /*#__PURE__*/(0, _jsxRuntime.jsx)(ParticipantDialogHeader, {}),
-          type: _windowHeader.WindowType.MODAL,
-          onTypeChange: moveParticipantFromAsideToDialog,
-          onClose: closeParticipantFromAside,
-          otherActionsAfter: /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.FcrToolTip, {
-            mouseEnterDelay: 0,
-            verticalOffset: -4,
-            isArrowAndTargetCenter: true,
-            content: transI18n('fmt_uimanager_button_close'),
-            trigger: "hover",
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_iconButton.FcrIconButton, {
-                className: "frc-window-header__icon",
-                icon: _type.FcrIconType.FCR_CLOSE,
-                iconColors: {
-                  iconPrimary: 'var(--fcr_ui_scene_icontext1)'
-                },
-                onClick: closeParticipantFromAside
-              })
-            })
-          }),
-          rootClassName: 'can-draggable'
-        }), participant]
-      }), chat && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-        className: "fcr-layout-aside-body-down",
-        style: participant ? {
-          height: "".concat(100 - percent, "%")
-        } : {
-          flex: 1
+      children: [subtitlesHistory && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "fcr-layout-aside-body-column fcr-layout-side-body-translate",
+        style: {
+          flexBasis: 320
         },
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_windowHeader.FcrWindowHeader, {
           showClose: false,
-          title: chatRoomState === _type2.FcrChatRoomConnectionState.Connected ? transI18n('fmt_chat_label_chat') : transI18n('fmt_aside_status_connecting'),
-          onTypeChange: moveChatFromAsideToDialog,
-          onClose: closeAsideChat,
-          otherActions: chatAction,
+          title: transI18n('fmt_ai_transcriptions_sidebar_label_realtime_translation'),
+          onTypeChange: moveSubtitlesHistoryFromAsideToDialog,
+          onClose: closeSubtitlesHistoryFromAside,
+          otherActions: subtitlesHistorySettings,
           otherActionsAfter: /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.FcrToolTip, {
             mouseEnterDelay: 0,
             verticalOffset: -4,
@@ -149,19 +120,87 @@ var Aside = exports.Aside = (0, _mobxReact.observer)(function (_ref) {
                 iconColors: {
                   iconPrimary: 'var(--fcr_ui_scene_icontext1)'
                 },
-                onClick: closeAsideChat
+                onClick: closeSubtitlesHistoryFromAside
               })
             })
           }),
           type: _windowHeader.WindowType.MODAL
-        }), chat]
-      }), participant && chat && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        className: "fcr-layout-aside-body-divider",
-        style: {
-          top: "calc(".concat(percent, "% - ").concat(DividerHeight / 2, "px)"),
-          height: "".concat(DividerHeight, "px")
-        },
-        onPointerDown: onDragDivider
+        }), subtitlesHistory]
+      }), (participant || chat) && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "fcr-layout-aside-body-column",
+        children: [participant && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: "fcr-layout-aside-body-up",
+          style: chat ? {
+            height: "".concat(percent, "%")
+          } : {
+            flex: 1
+          },
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_windowHeader.FcrWindowHeader, {
+            showClose: false // 在 Aside 中有自定义的按钮样式，不用 header 中的关闭按钮
+            ,
+            title: /*#__PURE__*/(0, _jsxRuntime.jsx)(ParticipantDialogHeader, {}),
+            type: _windowHeader.WindowType.MODAL,
+            onTypeChange: moveParticipantFromAsideToDialog,
+            onClose: closeParticipantFromAside,
+            otherActionsAfter: /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.FcrToolTip, {
+              mouseEnterDelay: 0,
+              verticalOffset: -4,
+              isArrowAndTargetCenter: true,
+              content: transI18n('fmt_uimanager_button_close'),
+              trigger: "hover",
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_iconButton.FcrIconButton, {
+                  className: "frc-window-header__icon",
+                  icon: _type.FcrIconType.FCR_CLOSE,
+                  iconColors: {
+                    iconPrimary: 'var(--fcr_ui_scene_icontext1)'
+                  },
+                  onClick: closeParticipantFromAside
+                })
+              })
+            }),
+            rootClassName: 'can-draggable'
+          }), participant]
+        }), chat && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: "fcr-layout-aside-body-down",
+          style: participant ? {
+            height: "".concat(100 - percent, "%")
+          } : {
+            flex: 1
+          },
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_windowHeader.FcrWindowHeader, {
+            showClose: false,
+            title: chatRoomState === _type2.FcrChatRoomConnectionState.Connected ? transI18n('fmt_chat_label_chat') : transI18n('fmt_aside_status_connecting'),
+            onTypeChange: moveChatFromAsideToDialog,
+            onClose: closeAsideChat,
+            otherActions: chatAction,
+            otherActionsAfter: /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.FcrToolTip, {
+              mouseEnterDelay: 0,
+              verticalOffset: -4,
+              isArrowAndTargetCenter: true,
+              content: transI18n('fmt_uimanager_button_close'),
+              trigger: "hover",
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_iconButton.FcrIconButton, {
+                  className: "frc-window-header__icon",
+                  icon: _type.FcrIconType.FCR_CLOSE,
+                  iconColors: {
+                    iconPrimary: 'var(--fcr_ui_scene_icontext1)'
+                  },
+                  onClick: closeAsideChat
+                })
+              })
+            }),
+            type: _windowHeader.WindowType.MODAL
+          }), chat]
+        }), participant && chat && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "fcr-layout-aside-body-divider",
+          style: {
+            top: "calc(".concat(percent, "% - ").concat(DividerHeight / 2, "px)"),
+            height: "".concat(DividerHeight, "px")
+          },
+          onPointerDown: onDragDivider
+        })]
       })]
     }), (participant || chat) && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: "fcr-layout-aside-handler",

package/lib/modules/layout/components/CommonVideoRenderer.js

@@ -110,7 +110,6 @@ var CommonVideoRenderer = exports.CommonVideoRenderer = (0, _mobxReact.observer)
     microphoneEnabled = _useContext3.microphoneEnabled,
     cameraEnabled = _useContext3.cameraEnabled,
     localUser = _useContext3.localUser,
-    isSharingWithAudio = _useContext3.isSharingWithAudio,
     hasMutePermission = _useContext3.hasMutePermission,
     hasUnmutePermission = _useContext3.hasUnmutePermission,
     hasRequestStartAudioPermission = _useContext3.hasRequestStartAudioPermission;
@@ -242,7 +241,7 @@ var CommonVideoRenderer = exports.CommonVideoRenderer = (0, _mobxReact.observer)
             onZoomOut: handleZoomOut,
             onAdaptive: handleAdaptive,
             onOrigin: handleOrigin,
-            isSharingWithAudio: isSharingWithAudio
+            isSharingAudio: windowData.hasLoopbackSharing && windowData.hasMicrophoneAudioStream
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_memberWindow.MemberWindow, {
             memberWindowPreviewType: commonProps.memberWindowPreviewType,
             canShowSpeakerSpotlight: commonProps.canShowSpeakerSpotlight,

package/lib/modules/layout/components/index.css

@@ -7,7 +7,7 @@
   height: 100%;
   overflow: hidden;
   min-width: 825px;
-  min-height: 600px;
+  min-height: 460px;
 }
 
 .fcr-layout-aside {
@@ -17,7 +17,6 @@
 
 .fcr-layout-aside-active {
   display: flex;
-  flex-flow: column nowrap;
   z-index: 12;
 }
 
@@ -35,6 +34,16 @@
 }
 
 .fcr-layout-aside-body {
+  flex: 1;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 3px;
+  align-items: stretch;
+  position: relative;
+  overflow: hidden;
+}
+
+.fcr-layout-aside-body-column {
   flex: 1;
   background-color: var(--fcr_mobile_ui_scene_color_popup_block1);
   display: flex;
@@ -44,6 +53,10 @@
   overflow: hidden;
 }
 
+.fcr-layout-side-body-translate {
+  flex: 0;
+}
+
 .fcr-layout-aside-body-up {
   flex: 1;
 }

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

@@ -9,7 +9,7 @@ import { FcrUIManagedObject } from '../../object-manager';
 import { FcrUIDisplayDistributionContentType, SharingType } from '../secondary-window/type';
 import { FcrUIDialogProvider } from '../../providers/dialog/type';
 export declare abstract class LayoutStoreBase implements FcrLayoutSlots, FcrUIEventObserver, FcrUIManagedObject {
-    private readonly logger;
+    protected readonly logger: import("agora-foundation/lib/logger").Logger;
     private _videoWindowDataSource;
     protected _eventProvider: FcrUIEventProvider;
     private _messageProvider;
@@ -32,6 +32,10 @@ export declare abstract class LayoutStoreBase implements FcrLayoutSlots, FcrUIEv
     private _chatProvider;
     private _pinDataSource;
     private _sharedScreenShareDataSource;
+    private _roomProvider;
+    private _roomProviderObserver;
+    private _roomObserver;
+    private _streamObserverByVolumeIndicationUpdated;
     accessor participant: React.ReactNode;
     accessor chat: React.ReactNode;
     accessor chatAction: React.ReactNode;
@@ -41,6 +45,9 @@ export declare abstract class LayoutStoreBase implements FcrLayoutSlots, FcrUIEv
     accessor whiteboard: React.ReactNode;
     accessor annotation: React.ReactNode;
     accessor screenShareControl: React.ReactNode;
+    accessor subtitles: React.ReactNode;
+    accessor subtitlesHistory: React.ReactNode;
+    accessor subtitlesHistorySettings: React.ReactNode;
     accessor collapsed: boolean;
     accessor aside: boolean;
     accessor barHovering: boolean;
@@ -63,7 +70,6 @@ export declare abstract class LayoutStoreBase implements FcrLayoutSlots, FcrUIEv
     get manualLayout(): import("../../type").FcrUIVideoWindowLayoutType | undefined;
     get scalcValue(): number;
     get annotationHasStart(): boolean;
-    get isSharingWithAudio(): boolean;
     get sourceList(): import("../../shared-data/video-window").FcrUIVideoWindowDataImpl[];
     get layoutMainList(): import("../../shared-data/video-window").FcrUIVideoWindowDataImpl[];
     get mainList(): import("../../shared-data/video-window").FcrUIVideoWindowDataImpl[];
@@ -106,6 +112,7 @@ export declare abstract class LayoutStoreBase implements FcrLayoutSlots, FcrUIEv
     get asideContent(): import("../../type").FcrUIUpdateAsideParams;
     get participantsRenderAt(): "aside" | "dialog";
     get chatRenderAt(): "aside" | "dialog";
+    get subtitlesHistoryRenderAt(): "aside" | "dialog";
     getWaterMarkContent(): string;
     hasMutePermission(targetRole: FcrPrivilegeUserRole | FcrUserRole): boolean;
     hasUnmutePermission(targetRole: FcrPrivilegeUserRole | FcrUserRole): boolean;
@@ -132,6 +139,8 @@ export declare abstract class LayoutStoreBase implements FcrLayoutSlots, FcrUIEv
     moveChatFromAsideToDialog(): void;
     openPrivateChat(userId: string): void;
     openRenameDialog(userId: string): void;
+    closeSubtitlesHistoryFromAside(): void;
+    moveSubtitlesHistoryFromAsideToDialog(): void;
     getAllowedOperations: (targetRole: FcrUserRole, isSelf: boolean) => string[];
     toggleLayout(layout: FcrUIVideoWindowLayoutType, manual?: boolean): void;
     toggleCollapsed(collapsed?: boolean): void;
@@ -171,6 +180,8 @@ export declare abstract class LayoutStoreBase implements FcrLayoutSlots, FcrUIEv
     private _handleConnectionUpdated;
     private _findVideoWindowByUserId;
     private _onRemoteUsersLeft;
+    private _handleRoutingChanged;
+    private _handleRoomProviderLiveStreamingStateUpdated;
     private _handleLiveStreamingStateUpdated;
     private _handleStreamAdded;
     private _onStreamsAdded;