fcr-ui-scene 3.4.1 → 3.4.3

package/lib/modules/action-bar/switch-output-language-room/index.js

@@ -11,6 +11,7 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 require("core-js/modules/es.array.concat.js");
 require("core-js/modules/es.array.for-each.js");
 require("core-js/modules/es.array.iterator.js");
+require("core-js/modules/es.array.join.js");
 require("core-js/modules/es.array.map.js");
 require("core-js/modules/es.array.push.js");
 require("core-js/modules/es.array.some.js");
@@ -60,6 +61,7 @@ var _radio = require("agora-ui-foundation/lib/components/radio");
 var _guideTooltip = require("./guide-tooltip");
 var _useLanguageConfig = require("../../interpreter/interpreter-list/interpreter-item/components/pick-language/useLanguageConfig");
 var _loadingWrapper = require("../../interpreter/loading-wrapper");
+var _logger = require("agora-foundation/lib/logger");
 var _jsxRuntime = require("react/jsx-runtime");
 var OutputByMainRoom = (0, _mobxReact.observer)(function (_ref) {
   var changeOutputRoomTool = _ref.changeOutputRoomTool;
@@ -77,8 +79,7 @@ var OutputByMainRoom = (0, _mobxReact.observer)(function (_ref) {
     onClick: function onClick() {
       var open = !mainRoomState;
       changeOutputByMainRoom({
-        event: open ? _store.EventType.START : _store.EventType.STOP,
-        action: 'changeOutputByMainRoom'
+        event: open ? _store.EventType.START : _store.EventType.STOP
       });
       setMainRoomState(open);
     }
@@ -206,6 +207,11 @@ var useChangeOutputRoomTool = function useChangeOutputRoomTool() {
         value: ele
       };
     });
+    (0, _logger.getLogger)().info("interpreterLog- interpreterUsers ".concat(interpreterUsers === null || interpreterUsers === void 0 ? void 0 : interpreterUsers.map(function (ele) {
+      return "".concat(ele.sourceLanguage, "-").concat(ele.targetLanguage);
+    }).join(',')), "interpreterLog- languageBtnList ".concat(languageBtnList === null || languageBtnList === void 0 ? void 0 : languageBtnList.map(function (ele) {
+      return "".concat(ele.value);
+    }).join(',')));
     return [closeAlllanguageBtn].concat((0, _toConsumableArray2["default"])(languageBtnList));
   }, [interpreterUsers]);
   (0, _react.useEffect)(function () {

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

@@ -0,0 +1,94 @@
+import { FcrIconProps } from 'agora-ui-foundation/lib/components/icon';
+import { FcrIconType } from 'agora-ui-foundation/lib/components/icon/type';
+import { PopoverProps } from 'agora-ui-foundation/lib/components/popover';
+import { ToolTipProps } from 'agora-ui-foundation/lib/components/tooltip';
+import { FcrRoomType } from 'fcr-core/lib/room-control/type';
+import { FcrUserInfo, FcrUserRole } from 'fcr-core/lib/type';
+import { MouseEventHandler } from 'react';
+export interface Item {
+    name: string;
+    width: number;
+    order: number;
+}
+export type ActionBarItemPlacementProps = {
+    placement: 'left' | 'mid' | 'right';
+};
+export type FcrActionBarProps = {};
+export type ActionBarCollapseContext = {
+    setItem: (id: string, item: Item) => void;
+    visibleList: string[];
+    collapseList?: string[];
+    toggleLayoutBarLock: (state: boolean) => void;
+};
+export interface ActionBarItemProps extends React.ComponentProps<'div'> {
+    className?: string;
+    icon: FcrIconType | React.ReactNode;
+    iconColors: FcrIconProps['colors'];
+    active?: boolean;
+    onClick?: () => void;
+    disabled?: boolean;
+    title: string;
+    order?: number;
+    id: string;
+    moreVisible?: boolean;
+}
+export interface ActionBarItemWithPopoverProps extends ActionBarItemProps {
+    popoverProps?: PopoverProps;
+}
+export interface AppItemProps {
+    name: string;
+    onClick: MouseEventHandler<HTMLDivElement>;
+    fcrToolTipProps?: ToolTipProps;
+    fcrIconProps: FcrIconProps;
+    permission: boolean;
+}
+export interface AppItemsPorps {
+    closeActionBarItemWithPopover?: (visible: boolean) => void;
+}
+export interface InterpreterPropsType {
+    id: string;
+    order: number;
+}
+export interface AssignHostProps {
+    remoteUsers: FcrUserInfo[];
+    assignHost: (user: FcrUserInfo) => void;
+    setPopoverOpened: React.Dispatch<React.SetStateAction<boolean>>;
+    handleKeepConnect?: () => void;
+    loading?: boolean;
+}
+export interface LeaveMeetingProps {
+    setPopoverOpened: React.Dispatch<React.SetStateAction<boolean>>;
+    end: () => void;
+    leave: () => void;
+    isLocked: boolean;
+    keepPhoneAudioConnection: () => void;
+    localUserRole: FcrUserRole;
+    remoteUsers: FcrUserInfo[];
+    hasAssignHostBeforeLeavingPermission: boolean;
+    hasEndRoomPermission: boolean;
+    isPstnUser: boolean;
+    assignHost: (user: FcrUserInfo) => void;
+    setHeight?: () => void;
+}
+export interface MenuItemProps {
+    setVisible: React.Dispatch<React.SetStateAction<boolean>>;
+}
+export interface StopCloudRecordingProps {
+    stopCloudRecording: () => void;
+}
+export interface guideTooltipPropsRef {
+    setShow: React.Dispatch<React.SetStateAction<boolean>>;
+    show: boolean;
+}
+export interface GuideTooltipProps {
+    children: React.ReactNode;
+    guideContent: string | React.ReactNode;
+    content: string;
+}
+export interface FcrCloudRecordingParams {
+    action: 'start' | 'pause' | 'resume' | 'stop';
+}
+export type ChatRoomStoreMap = {
+    [K in FcrRoomType]?: number;
+};
+export type RoomTypeKeys = keyof typeof FcrRoomType;

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

@@ -1,5 +1,4 @@
 import { FC } from 'react';
 import './index.css';
-type FcrActionBarProps = {};
+import { FcrActionBarProps } from './types';
 export declare const FcrActionBar: FC<FcrActionBarProps>;
-export {};

package/lib/modules/action-bar/view.js

@@ -9,18 +9,18 @@ exports.FcrActionBar = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = require("react");
 var _classnames = _interopRequireDefault(require("classnames"));
-var _itemPlacement = require("./item-placement");
-var _actionBarCollapesItems = require("./action-bar-collapes-items");
+var _placement = require("./components/placement");
+var _collapse = require("./components/collapse");
 require("./index.css");
 var _icon = require("agora-ui-foundation/lib/components/icon");
 var _type = require("agora-ui-foundation/lib/components/icon/type");
 var _tooltip = require("agora-ui-foundation/lib/components/tooltip");
-var _smaller = require("./smaller");
+var _smaller = require("./components/smaller");
 var _mobxReact = require("mobx-react");
 var _store = require("./store");
 var _i18n = require("agora-ui-foundation/lib/i18n");
-var _triggerInputLanguageRoom = require("./trigger-input-language-room");
-var _notificationBar = require("./notification-bar");
+var _triggerOutputLanguage = require("./components/trigger-output-language");
+var _notificationBar = require("./components/notification-bar");
 var _deviceControl = _interopRequireDefault(require("../components/device-control"));
 var _useAppItemOptions = _interopRequireDefault(require("./components/apps/useAppItemOptions"));
 var _leave = require("./components/leave");
@@ -96,22 +96,22 @@ var FcrActionBar = exports.FcrActionBar = (0, _mobxReact.observer)(function (pro
           })
         })]
       }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_itemPlacement.ActionBarItemPlacement, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_placement.ActionBarItemPlacement, {
           placement: "left",
           children: !opened && /*#__PURE__*/(0, _jsxRuntime.jsx)(_deviceControl["default"], {})
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_itemPlacement.ActionBarItemPlacement, {
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_placement.ActionBarItemPlacement, {
           placement: "mid",
-          children: !opened && isMainRoom && /*#__PURE__*/(0, _jsxRuntime.jsx)(_actionBarCollapesItems.ActionBarCollapseItems, {
+          children: !opened && isMainRoom && /*#__PURE__*/(0, _jsxRuntime.jsx)(_collapse.ActionBarCollapseItems, {
             appItemOptions: appItemOptions,
-            children: _actionBarCollapesItems.midActionOrderMap
+            children: _collapse.midActionOrderMap
           })
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_itemPlacement.ActionBarItemPlacement, {
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_placement.ActionBarItemPlacement, {
           placement: "right",
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_leave.End, {
             onPopoverChanged: setOpenState
           })
         })]
       })
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_triggerInputLanguageRoom.TriggerInputLanguageRoom, {}), hasEnableInterpreterPermission && hasDisableInterpreterPermission && interpreterState && /*#__PURE__*/(0, _jsxRuntime.jsx)(_notificationBar.NotificationBar, {})]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_triggerOutputLanguage.TriggerOutputLanguage, {}), hasEnableInterpreterPermission && hasDisableInterpreterPermission && interpreterState && /*#__PURE__*/(0, _jsxRuntime.jsx)(_notificationBar.NotificationBar, {})]
   });
 });

package/lib/modules/audio-stream/index.d.ts

@@ -1,21 +1,33 @@
-import { UIModule } from '../../base';
-import { StoreConfig } from '../../type';
+import { FcrUINode, FcrUIRootNode, UIModule } from '../../base';
+import { FcrUIInterpreterProvider } from '../../providers/interpreter-provider';
+import { FcrUIEventProvider } from '../../providers/event-provider';
+import { FcrUIDeviceProvider } from '../../providers/device-provider';
+import { FcrUIDeviceStreamProvider } from '../../providers/device-stream-provider';
+import { FcrUIMainRoomControlProvider } from '../../providers/room-provider';
 export declare class AudioStreamUIModule extends UIModule {
+    protected parentNode: FcrUINode;
+    protected rootNode: FcrUIRootNode;
     private _streamControl;
     private _userControl;
-    private _deviceStreamStore;
     private _isPstn;
     private _disposers;
     private _streamObserver;
-    private _uiEventObserver;
-    private _roomObserver;
-    private _uiEventStore;
-    private _roomStore;
-    private _deviceStore;
+    private _eventObserver;
+    private _deviceObserver;
+    private _interpreterObserver;
+    private _interpreterProvider;
+    private _eventProvider;
+    private _deviceProvider;
     private _streamObserverMap;
     private get _localUser();
-    constructor({ streamControl, userControl, deviceStreamStore, roomStore, uiEventStore, deviceStore, }: StoreConfig);
-    protected onUnload(): void;
+    mainRoomControlProvider?: FcrUIMainRoomControlProvider;
+    interpreterProvider?: FcrUIInterpreterProvider;
+    eventProvider?: FcrUIEventProvider;
+    deviceProvider?: FcrUIDeviceProvider;
+    deviceStreamProvider?: FcrUIDeviceStreamProvider;
+    constructor(parentNode: FcrUINode, rootNode: FcrUIRootNode);
+    onNodeWillActive(): void;
+    nodeWillInactive(): void;
     private _turnOnMainRoomAudio;
     private _turnOffMainRoomAudio;
     getComponent(): null;

package/lib/modules/audio-stream/index.js

@@ -15,9 +15,6 @@ require("core-js/modules/es.array.map.js");
 require("core-js/modules/es.map.js");
 require("core-js/modules/es.object.to-string.js");
 require("core-js/modules/es.string.iterator.js");
-require("core-js/modules/esnext.async-iterator.find.js");
-require("core-js/modules/esnext.async-iterator.for-each.js");
-require("core-js/modules/esnext.async-iterator.map.js");
 require("core-js/modules/esnext.iterator.constructor.js");
 require("core-js/modules/esnext.iterator.find.js");
 require("core-js/modules/esnext.iterator.for-each.js");
@@ -55,43 +52,45 @@ var EventType = /*#__PURE__*/function (EventType) {
   return EventType;
 }(EventType || {});
 var AudioStreamUIModule = exports.AudioStreamUIModule = /*#__PURE__*/function (_UIModule) {
-  function AudioStreamUIModule(_ref) {
+  function AudioStreamUIModule(parentNode, rootNode) {
     var _this;
-    var _streamControl = _ref.streamControl,
-      userControl = _ref.userControl,
-      deviceStreamStore = _ref.deviceStreamStore,
-      roomStore = _ref.roomStore,
-      uiEventStore = _ref.uiEventStore,
-      deviceStore = _ref.deviceStore;
     (0, _classCallCheck2["default"])(this, AudioStreamUIModule);
-    _this = _callSuper(this, AudioStreamUIModule);
+    _this = _callSuper(this, AudioStreamUIModule, [parentNode, rootNode]);
     (0, _defineProperty2["default"])(_this, "_isPstn", false);
     (0, _defineProperty2["default"])(_this, "_disposers", []);
     (0, _defineProperty2["default"])(_this, "_streamObserverMap", new Map());
     (0, _defineProperty2["default"])(_this, "_turnOnMainRoomAudio", function () {
       var streamControl = _this._streamControl;
-      var streamList = streamControl.getStreamList();
-      // 订阅主房间音频
-      _this._handleRemoteAudio(streamControl, streamList
-      //  'turnOnMainRoomAudio'
-      );
-      // 监听主房间音频
-      streamControl.addObserver(_this._streamObserver);
+      if (streamControl) {
+        var streamList = streamControl.getStreamList();
+        // 订阅主房间音频
+        _this._handleRemoteAudio(streamControl, streamList
+        //  'turnOnMainRoomAudio'
+        );
+        if (_this._streamObserver) {
+          streamControl.addObserver(_this._streamObserver);
+        }
+        // 监听主房间音频
+      }
     });
     (0, _defineProperty2["default"])(_this, "_turnOffMainRoomAudio", function () {
       var streamControl = _this._streamControl;
       var streamList = streamControl.getStreamList();
-      // 取消订阅主房间音频
-      _this._handleStopAudio(streamControl, streamList);
-      // 取消监听主房间音频
-      streamControl.removeObserver(_this._streamObserver);
+      if (streamControl && streamList) {
+        // 取消订阅主房间音频
+        _this._handleStopAudio(streamControl, streamList);
+      }
+      if (_this._streamObserver) {
+        // 取消监听主房间音频
+        streamControl.removeObserver(_this._streamObserver);
+      }
     });
     // 切换主房间音频
     (0, _defineProperty2["default"])(_this, "_toggleMainRemoteAudio", function (event) {
       // this._isMainRoomAudioOff = event !== EventType.START;
-      _this._deviceStore.setMainRoomAudioOff(event !== EventType.START);
-      if (_this._deviceStore.isAudioConnected) {
-        if (!_this._deviceStore.isMainRoomAudioOff) {
+      _this._deviceProvider.setMainRoomAudioOff(event !== EventType.START);
+      if (_this._deviceProvider.isAudioConnected) {
+        if (!_this._deviceProvider.isMainRoomAudioOff) {
           _this._turnOnMainRoomAudio();
         } else {
           _this._turnOffMainRoomAudio();
@@ -100,8 +99,8 @@ var AudioStreamUIModule = exports.AudioStreamUIModule = /*#__PURE__*/function (_
     });
     // 切换翻译官房间音频
     (0, _defineProperty2["default"])(_this, "_toggleInterperterRemoteAudio", function (roomControl, event, key) {
-      var _ref2 = roomControl.getRoomInfo() || {},
-        roomId = _ref2.roomId;
+      var _ref = roomControl.getRoomInfo() || {},
+        roomId = _ref.roomId;
       var roomStreamControl = roomControl.getStreamControl();
       if (roomId) {
         if (event === EventType.START) {
@@ -132,9 +131,6 @@ var AudioStreamUIModule = exports.AudioStreamUIModule = /*#__PURE__*/function (_
           // stop playing all remote audio streams
           if (stream.owner.userId !== _this._localUser.userId) {
             _this.logger.info('stop play remote audio', stream.streamId);
-            _this.logger.info("interpreterLog- stop subscribe remote audio execution scenario  by this._isPstn=".concat(_this._isPstn, " "), stream.streamId
-            // key,
-            );
             streamControl.stopPlayRemoteAudioStream(stream.streamId);
           }
         });
@@ -145,15 +141,9 @@ var AudioStreamUIModule = exports.AudioStreamUIModule = /*#__PURE__*/function (_
             var isAudioDeviceStarted = stream.audioSourceState === _fcrCore.FcrMediaSourceState.OPEN;
             if (isAudioPublished && isAudioDeviceStarted) {
               _this.logger.info('start play remote audio', stream.streamId);
-              _this.logger.info("interpreterLog- start subscribe remote audio execution scenario  by this._isPstn=".concat(_this._isPstn, "%isAudioPublished && isAudioDeviceStarted=").concat(isAudioPublished && isAudioDeviceStarted), stream.streamId
-              // key,
-              );
               streamControl.startPlayRemoteAudioStream(stream.streamId);
             } else {
               _this.logger.info('stop play remote audio', stream.streamId);
-              _this.logger.info("interpreterLog- stop subscribe remote audio execution scenario  by this._isPstn=".concat(_this._isPstn, "%isAudioPublished && isAudioDeviceStarted=").concat(isAudioPublished && isAudioDeviceStarted), stream.streamId
-              // key,
-              );
               streamControl.stopPlayRemoteAudioStream(stream.streamId);
             }
           }
@@ -162,9 +152,10 @@ var AudioStreamUIModule = exports.AudioStreamUIModule = /*#__PURE__*/function (_
     });
     (0, _defineProperty2["default"])(_this, "_handleStopAudio", function (streamControl, streams) {
       streams.forEach(function (stream) {
-        if (stream.owner.userId === _this._localUser.userId) return;
-        _this.logger.info("interpreterLog- stop subscribe remote audio execution scenario  by _handleStopAudio", stream.streamId);
-        streamControl.stopPlayRemoteAudioStream(stream.streamId);
+        if (stream.owner.userId !== _this._localUser.userId) {
+          _this.logger.info('stop play remote audio', stream.streamId);
+          streamControl.stopPlayRemoteAudioStream(stream.streamId);
+        }
       });
     });
     (0, _defineProperty2["default"])(_this, "_hasLocalPstnStream", function (streams) {
@@ -175,26 +166,12 @@ var AudioStreamUIModule = exports.AudioStreamUIModule = /*#__PURE__*/function (_
     });
     (0, _defineProperty2["default"])(_this, "_handleUiEvent", function (action, payload) {
       switch (action) {
-        case _constant.UIAction.CONNECT_AUDIO:
-          // this._isAudioConnected = true;
-          _this._deviceStore.setAudioConnected(true);
-          if (!_this._deviceStore.isMainRoomAudioOff) {
-            _this._turnOnMainRoomAudio();
-          }
-          break;
-        case _constant.UIAction.DISCONNECT_AUDIO:
-          // this._isAudioConnected = false;
-          _this._deviceStore.setAudioConnected(false);
-          if (!_this._deviceStore.isMainRoomAudioOff) {
-            _this._turnOffMainRoomAudio();
-          }
-          break;
         // 切换语言房间订阅  ( 翻译官切换收听语言房间 为输出的语音房间时 单独出发订阅订阅 )
-        case _constant.UIAction.TOGGLE_INTERPRETER_REMOTE_AUDIO:
-          _this._toggleInterperterRemoteAudio(payload.roomControl, payload.event, 'UIAction.TOGGLE_INTERPRETER_REMOTE_AUDIO');
+        case _constant.FcrUIAction.TOGGLE_INTERPRETER_REMOTE_AUDIO:
+          _this._toggleInterperterRemoteAudio(payload.roomControl, payload.event, 'FcrUIAction.TOGGLE_INTERPRETER_REMOTE_AUDIO');
           break;
         //  切换收主房间(原声)订阅
-        case _constant.UIAction.TOGGLE_MAINROOM_REMOTE_AUDIO:
+        case _constant.FcrUIAction.TOGGLE_MAINROOM_REMOTE_AUDIO:
           _this._toggleMainRemoteAudio(payload.event);
           break;
       }
@@ -219,15 +196,11 @@ var AudioStreamUIModule = exports.AudioStreamUIModule = /*#__PURE__*/function (_
           _this._isPstn = true;
           _this.logger.info('found local PSTN stream, close microphone');
           // close microphone as audio input and output through mobile phone
-          _this._deviceStreamStore.enableMicrophoneWithStream(false);
+          _this._deviceProvider.setMicrophoneEnabled(false);
           _this.logger.info('found local PSTN stream, stop play all remote audio');
-          _this._handleRemoteAudio(streamControl, streamControl.getStreamList()
-          // '_handleStreamsAdded1111',
-          );
+          _this._handleRemoteAudio(streamControl, streamControl.getStreamList());
         } else {
-          _this._handleRemoteAudio(streamControl, streams
-          // '_handleStreamsAdded222'
-          );
+          _this._handleRemoteAudio(streamControl, streams);
         }
       };
       var onStreamsUpdated = function onStreamsUpdated(roomId, events) {
@@ -239,7 +212,7 @@ var AudioStreamUIModule = exports.AudioStreamUIModule = /*#__PURE__*/function (_
           _this._isPstn = true;
           _this.logger.info('found local PSTN stream, close microphone');
           // close microphone as audio input and output through mobile phone
-          _this._deviceStreamStore.enableMicrophoneWithStream(false);
+          _this._deviceProvider.setMicrophoneEnabled(false);
           _this.logger.info('found local PSTN stream, stop play all remote audio');
           _this._handleRemoteAudio(streamControl, streamControl.getStreamList()
           // '_handleStreamsUpdated11111',
@@ -266,7 +239,6 @@ var AudioStreamUIModule = exports.AudioStreamUIModule = /*#__PURE__*/function (_
             return;
           }
           _this.logger.info('stop play remote audio', event.modifiedStream.streamId);
-          _this.logger.info("interpreterLog- stop subscribe remote audio execution scenario  by _handleStreamsRemoved", event.modifiedStream.streamId);
           _this._streamControl.stopPlayRemoteAudioStream(event.modifiedStream.streamId);
         });
       };
@@ -276,27 +248,27 @@ var AudioStreamUIModule = exports.AudioStreamUIModule = /*#__PURE__*/function (_
         onStreamsRemoved: onStreamsRemoved
       };
     });
-    _this._streamControl = _streamControl;
-    _this._userControl = userControl;
-    _this._deviceStreamStore = deviceStreamStore;
-    _this._roomStore = roomStore;
-    _this._uiEventStore = uiEventStore;
-    _this._deviceStore = deviceStore;
-    _this._streamObserver = _this._createStreamObserver(_this._streamControl);
-    _this._uiEventObserver = {
+    _this.parentNode = parentNode;
+    _this.rootNode = rootNode;
+    _this._eventObserver = {
       onEvent: _this._handleUiEvent
     };
-    _this._roomObserver = {
+    _this._interpreterObserver = {
       onJoinInterpretingRoomSuccess: _this._handleJoinInterpretingRoomSuccess,
       onLeaveInterpretingRoom: _this._handleLeaveInterpretingRoom
     };
-    uiEventStore.addObserver(_this._uiEventObserver);
-    roomStore.addObserver(_this._roomObserver);
-    var _streams = _this._streamControl.getStreamList();
-    _this._isPstn = _this._hasLocalPstnStream(_streams);
-    if (!_this._deviceStore.isMainRoomAudioOff && _this._deviceStore.isAudioConnected) {
-      _this._turnOnMainRoomAudio();
-    }
+    _this._deviceObserver = {
+      onAudioConnected: function onAudioConnected() {
+        if (!_this._deviceProvider.isMainRoomAudioOff) {
+          _this._turnOnMainRoomAudio();
+        }
+      },
+      onAudioDisconnected: function onAudioDisconnected() {
+        if (!_this._deviceProvider.isMainRoomAudioOff) {
+          _this._turnOffMainRoomAudio();
+        }
+      }
+    };
     return _this;
   }
   (0, _inherits2["default"])(AudioStreamUIModule, _UIModule);
@@ -306,14 +278,35 @@ var AudioStreamUIModule = exports.AudioStreamUIModule = /*#__PURE__*/function (_
       return this._userControl.getLocalUser();
     }
   }, {
-    key: "onUnload",
-    value: function onUnload() {
+    key: "onNodeWillActive",
+    value: function onNodeWillActive() {
+      var _this$mainRoomControl, _this$mainRoomControl2;
+      this._streamControl = (_this$mainRoomControl = this.mainRoomControlProvider) === null || _this$mainRoomControl === void 0 ? void 0 : _this$mainRoomControl.mainRoomControl.getStreamControl();
+      this._userControl = (_this$mainRoomControl2 = this.mainRoomControlProvider) === null || _this$mainRoomControl2 === void 0 ? void 0 : _this$mainRoomControl2.mainRoomControl.getUserControl();
+      this._interpreterProvider = this.interpreterProvider;
+      this._eventProvider = this.eventProvider;
+      this._deviceProvider = this.deviceProvider;
+      var streams = this._streamControl.getStreamList();
+      this._isPstn = this._hasLocalPstnStream(streams);
+      this._streamObserver = this._createStreamObserver(this._streamControl);
+      this._deviceProvider.addObserver(this._deviceObserver);
+      this._interpreterProvider.addObserver(this._interpreterObserver);
+      this._eventProvider.addObserver(this._eventObserver);
+      if (!this._deviceProvider.isMainRoomAudioOff && this._deviceProvider.isAudioConnected) {
+        this._turnOnMainRoomAudio();
+      }
+    }
+  }, {
+    key: "nodeWillInactive",
+    value: function nodeWillInactive() {
       this._disposers.forEach(function (disposer) {
         return disposer();
       });
-      this._uiEventStore.removeObserver(this._uiEventObserver);
-      this._roomStore.removeObserver(this._roomObserver);
+      this._disposers = [];
+      this._eventProvider.removeObserver(this._eventObserver);
+      this._interpreterProvider.removeObserver(this._interpreterObserver);
       this._streamControl.removeObserver(this._streamObserver);
+      this._deviceProvider.removeObserver(this._deviceObserver);
     }
   }, {
     key: "getComponent",

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

@@ -26,7 +26,6 @@
 .fcr-message-bar > span:first-child {
   margin-right: 4px;
   font-size: 12px;
-  font-weight: 300;
 }
 
 .fcr-message-bar > .fcr-select-wrapper {
@@ -79,7 +78,3 @@
 .fcr-msg-bar-break-max-width {
   max-width: 75px;
 }
-
-.fcr-message-bar .fcr-text-bubble {
-  font-weight: 300;
-}

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

@@ -1,6 +1,7 @@
 "use strict";
 
 require("core-js/modules/es.symbol.js");
+require("core-js/modules/es.array.filter.js");
 require("core-js/modules/es.array.for-each.js");
 require("core-js/modules/es.array.push.js");
 require("core-js/modules/es.object.define-properties.js");
@@ -8,7 +9,11 @@ require("core-js/modules/es.object.define-property.js");
 require("core-js/modules/es.object.get-own-property-descriptor.js");
 require("core-js/modules/es.object.get-own-property-descriptors.js");
 require("core-js/modules/es.object.keys.js");
+require("core-js/modules/es.object.to-string.js");
+require("core-js/modules/esnext.async-iterator.filter.js");
 require("core-js/modules/esnext.async-iterator.for-each.js");
+require("core-js/modules/esnext.iterator.constructor.js");
+require("core-js/modules/esnext.iterator.filter.js");
 require("core-js/modules/esnext.iterator.for-each.js");
 require("core-js/modules/web.dom-collections.for-each.js");
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -16,11 +21,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.MessageBar = void 0;
-require("core-js/modules/es.array.filter.js");
-require("core-js/modules/es.object.to-string.js");
-require("core-js/modules/esnext.async-iterator.filter.js");
-require("core-js/modules/esnext.iterator.constructor.js");
-require("core-js/modules/esnext.iterator.filter.js");
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _type = require("agora-ui-foundation/lib/components/icon/type");
@@ -34,11 +34,12 @@ var _chatSelect = require("../chat-select");
 var _store = require("../store");
 var _mobxReact = require("mobx-react");
 var _i18n = require("agora-ui-foundation/lib/i18n");
+var _type2 = require("fcr-core/lib/room-control/type");
 var _jsxRuntime = require("react/jsx-runtime");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var MessageBar = exports.MessageBar = (0, _mobxReact.observer)(function (_ref) {
-  var _users$filter, _selectedUser$userId, _selectedUser$userNam;
+  var _selectedUser$userId, _selectedUser$userNam;
   var styles = _ref.styles,
     _ref$users = _ref.users,
     users = _ref$users === void 0 ? [] : _ref$users,
@@ -56,13 +57,7 @@ var MessageBar = exports.MessageBar = (0, _mobxReact.observer)(function (_ref) {
     _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
     popoverOpened = _useState4[0],
     setPopoverOpened = _useState4[1];
-  var hasParticipant = users === null || users === void 0 || (_users$filter = users.filter(function (user) {
-    return user.userId !== _store.USER_ALL;
-  })) === null || _users$filter === void 0 ? void 0 : _users$filter.length;
   var onPopoverChanged = function onPopoverChanged(visible) {
-    if (!hasParticipant) {
-      return;
-    }
     setPopoverOpened(visible);
   };
   var selectedUserId = (_selectedUser$userId = selectedUser === null || selectedUser === void 0 ? void 0 : selectedUser.userId) !== null && _selectedUser$userId !== void 0 ? _selectedUser$userId : _store.USER_ALL;
@@ -106,6 +101,12 @@ var MessageBar = exports.MessageBar = (0, _mobxReact.observer)(function (_ref) {
         onSelect: handleSelected
       }),
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        onClick: function onClick() {
+          if ((users === null || users === void 0 ? void 0 : users.length) <= 1) {
+            return;
+          }
+          setPopoverOpened(!popoverOpened);
+        },
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_textBubble.TextBubble, {
           styles: {
             padding: '4px 1px 4px 4px',
@@ -128,11 +129,8 @@ var MessageBar = exports.MessageBar = (0, _mobxReact.observer)(function (_ref) {
             fontSize: "medium",
             iconTransform: popoverOpened,
             enable: true,
-            isHideIcon: !hasParticipant,
+            isHideIcon: roomType === _type2.FcrRoomType.Mainroom ? (users === null || users === void 0 ? void 0 : users.length) <= 1 : false,
             onClick: function onClick() {
-              if (!hasParticipant) {
-                return;
-              }
               setPopoverOpened(!popoverOpened);
             },
             iconReverse: true