fcr-ui-scene 3.4.0 → 3.4.1

package/lib/modules/action-bar/trigger-output-language-room/useChangeOutputRoomTool.js

@@ -0,0 +1,138 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+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.map.js");
+require("core-js/modules/es.array.push.js");
+require("core-js/modules/es.array.some.js");
+require("core-js/modules/es.function.name.js");
+require("core-js/modules/es.object.to-string.js");
+require("core-js/modules/es.set.js");
+require("core-js/modules/es.string.iterator.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.async-iterator.some.js");
+require("core-js/modules/esnext.iterator.constructor.js");
+require("core-js/modules/esnext.iterator.for-each.js");
+require("core-js/modules/esnext.iterator.map.js");
+require("core-js/modules/esnext.iterator.some.js");
+require("core-js/modules/esnext.set.add-all.js");
+require("core-js/modules/esnext.set.delete-all.js");
+require("core-js/modules/esnext.set.difference.v2.js");
+require("core-js/modules/esnext.set.difference.js");
+require("core-js/modules/esnext.set.every.js");
+require("core-js/modules/esnext.set.filter.js");
+require("core-js/modules/esnext.set.find.js");
+require("core-js/modules/esnext.set.intersection.v2.js");
+require("core-js/modules/esnext.set.intersection.js");
+require("core-js/modules/esnext.set.is-disjoint-from.v2.js");
+require("core-js/modules/esnext.set.is-disjoint-from.js");
+require("core-js/modules/esnext.set.is-subset-of.v2.js");
+require("core-js/modules/esnext.set.is-subset-of.js");
+require("core-js/modules/esnext.set.is-superset-of.v2.js");
+require("core-js/modules/esnext.set.is-superset-of.js");
+require("core-js/modules/esnext.set.join.js");
+require("core-js/modules/esnext.set.map.js");
+require("core-js/modules/esnext.set.reduce.js");
+require("core-js/modules/esnext.set.some.js");
+require("core-js/modules/esnext.set.symmetric-difference.v2.js");
+require("core-js/modules/esnext.set.symmetric-difference.js");
+require("core-js/modules/esnext.set.union.v2.js");
+require("core-js/modules/esnext.set.union.js");
+require("core-js/modules/web.dom-collections.for-each.js");
+require("core-js/modules/web.dom-collections.iterator.js");
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = require("react");
+var _constant = require("./constant");
+var _i18n = require("agora-ui-foundation/lib/i18n");
+var _useLanguageConfig = require("../../interpreter/interpreter-list/interpreter-item/components/pick-language/useLanguageConfig");
+var _store = require("../store");
+var useChangeOutputRoomTool = function useChangeOutputRoomTool() {
+  var transI18n = (0, _i18n.useI18n)();
+  var guideContent1 = transI18n('fmt_interpretation_mobile_toast_controller_label_interpret_in_process');
+  var guideContent2 = transI18n('fmt_interpretation_attendness_sidbar_popup_toast_label_channel_close');
+  var closeAlllanguageBtn = {
+    text: transI18n('fmt_interpretation_mobile_attendnees_popup_option_off'),
+    // text: '原声',
+    value: _constant.CLOSE_ALL_LANGUAGE_ROOM
+  };
+  var _useState = (0, _react.useState)(guideContent1),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    guideContent = _useState2[0],
+    setGuideContent = _useState2[1];
+  var _useState3 = (0, _react.useState)(false),
+    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+    loading = _useState4[0],
+    setLoading = _useState4[1];
+  var _useState5 = (0, _react.useState)(true),
+    _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
+    mainRoomState = _useState6[0],
+    setMainRoomState = _useState6[1];
+  var _useState7 = (0, _react.useState)(closeAlllanguageBtn.value),
+    _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
+    languageRoomState = _useState8[0],
+    setLanguageRoomState = _useState8[1];
+  var _useContext = (0, _react.useContext)(_store.ActionBarContext),
+    interpreterUsers = _useContext.interpreterUsers,
+    triggerOutputLanguage = _useContext.triggerOutputLanguage,
+    interpreterState = _useContext.interpreterState;
+  var getLanguageConfig = (0, _useLanguageConfig.useLanguageConfig)();
+  var languageRoomOptions = (0, _react.useMemo)(function () {
+    var languageRoomList = [];
+    interpreterUsers === null || interpreterUsers === void 0 || interpreterUsers.forEach(function (ele) {
+      languageRoomList.push(ele.sourceLanguage, ele.targetLanguage);
+    });
+    var languageBtnList = (0, _toConsumableArray2["default"])(new Set(languageRoomList)).map(function (ele) {
+      return {
+        text: getLanguageConfig(ele).name,
+        value: ele
+      };
+    });
+    return [closeAlllanguageBtn].concat((0, _toConsumableArray2["default"])(languageBtnList));
+  }, [interpreterUsers]);
+  (0, _react.useEffect)(function () {
+    var isE = languageRoomOptions.some(function (ele) {
+      return ele.value === languageRoomState;
+    });
+    if (!isE) {
+      setLoading(true);
+      var open = !mainRoomState;
+      setLanguageRoomState(_constant.CLOSE_ALL_LANGUAGE_ROOM);
+      setLoading(false);
+      setGuideContent(guideContent2);
+      setMainRoomState(open);
+      triggerOutputLanguage({
+        language: _constant.CLOSE_ALL_LANGUAGE_ROOM,
+        orgLanguage: languageRoomState,
+        isChangeOutputByMainRoom: open,
+        callback: function callback(res) {
+          setLoading(false);
+        }
+      });
+    }
+  }, [languageRoomOptions]);
+  (0, _react.useEffect)(function () {
+    if (interpreterState) {
+      setGuideContent(guideContent1);
+    }
+  }, [interpreterState]);
+  return {
+    mainRoomState: mainRoomState,
+    setMainRoomState: setMainRoomState,
+    languageRoomState: languageRoomState,
+    setLanguageRoomState: setLanguageRoomState,
+    loading: loading,
+    setLoading: setLoading,
+    languageRoomOptions: languageRoomOptions,
+    guideContent: guideContent
+  };
+};
+var _default = exports["default"] = useChangeOutputRoomTool;

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

@@ -12,7 +12,6 @@ var _classnames = _interopRequireDefault(require("classnames"));
 var _itemPlacement = require("./item-placement");
 var _actionBarCollapesItems = require("./action-bar-collapes-items");
 require("./index.css");
-var _leave = require("./leave");
 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");
@@ -20,10 +19,11 @@ var _smaller = require("./smaller");
 var _mobxReact = require("mobx-react");
 var _store = require("./store");
 var _i18n = require("agora-ui-foundation/lib/i18n");
-var _switchInputLanguageRoom = require("./switch-input-language-room");
-var _notificationBar = require("./switch-output-language-room/notification-bar");
+var _triggerInputLanguageRoom = require("./trigger-input-language-room");
+var _notificationBar = require("./notification-bar");
 var _deviceControl = _interopRequireDefault(require("../components/device-control"));
-var _useAppItemOptions = _interopRequireDefault(require("./apps/useAppItemOptions"));
+var _useAppItemOptions = _interopRequireDefault(require("./components/apps/useAppItemOptions"));
+var _leave = require("./components/leave");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
  * @param toggleFold 用于点击折叠底部操作栏
@@ -50,7 +50,7 @@ var ToggleToolbarBtn = function ToggleToolbarBtn(_ref) {
           className: "fcr-action-bar--fold",
           type: _type.FcrIconType.FCR_DROPDOWN,
           colors: {
-            iconPrimary: 'var(--fcr_ui_scene_ramp_brand6)'
+            iconPrimary: 'var(--fcr_web_ui_scene_mainicon2)'
           }
         })
       })
@@ -112,6 +112,6 @@ var FcrActionBar = exports.FcrActionBar = (0, _mobxReact.observer)(function (pro
           })
         })]
       })
-    }), interpreter && interpreterState && /*#__PURE__*/(0, _jsxRuntime.jsx)(_switchInputLanguageRoom.SwitchInputLanguageRoom, {}), hasEnableInterpreterPermission && hasDisableInterpreterPermission && interpreterState && /*#__PURE__*/(0, _jsxRuntime.jsx)(_notificationBar.NotificationBar, {})]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_triggerInputLanguageRoom.TriggerInputLanguageRoom, {}), hasEnableInterpreterPermission && hasDisableInterpreterPermission && interpreterState && /*#__PURE__*/(0, _jsxRuntime.jsx)(_notificationBar.NotificationBar, {})]
   });
 });

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

@@ -1,10 +1,5 @@
 import { UIModule } from '../../base';
-import { FcrStreamControl, FcrUserControl } from 'fcr-core';
-import { FcrDeviceStreamStore } from '../../common/device-stream-store';
-import { FcrRoomStore } from '../../common/room-store';
-import { FcrInterpreterControl } from 'fcr-core/lib/room-control/interpreter-control/types';
-import { FcrUIEventStore } from '../../common/event-store';
-import { FcrDeviceStore } from '../../common/device-store';
+import { StoreConfig } from '../../type';
 export declare class AudioStreamUIModule extends UIModule {
     private _streamControl;
     private _userControl;
@@ -19,15 +14,7 @@ export declare class AudioStreamUIModule extends UIModule {
     private _deviceStore;
     private _streamObserverMap;
     private get _localUser();
-    constructor({ streamControl, userControl, deviceStreamStore, roomStore, uiEventStore, deviceStore, }: {
-        streamControl: FcrStreamControl;
-        userControl: FcrUserControl;
-        deviceStreamStore: FcrDeviceStreamStore;
-        roomStore: FcrRoomStore;
-        interpterControl: FcrInterpreterControl;
-        uiEventStore: FcrUIEventStore;
-        deviceStore: FcrDeviceStore;
-    });
+    constructor({ streamControl, userControl, deviceStreamStore, roomStore, uiEventStore, deviceStore, }: StoreConfig);
     protected onUnload(): void;
     private _turnOnMainRoomAudio;
     private _turnOffMainRoomAudio;

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

@@ -111,9 +111,7 @@ var AudioStreamUIModule = exports.AudioStreamUIModule = /*#__PURE__*/function (_
             _this._streamObserverMap.set(roomId, streamObserver);
             roomStreamControl.addObserver(streamObserver);
           }
-          _this._handleRemoteAudio(roomStreamControl, roomStreamControl.getStreamList()
-          // `${key}_toggleInterperterRemoteAudio111`,
-          );
+          _this._handleRemoteAudio(roomStreamControl, roomStreamControl.getStreamList());
         }
         if (event === EventType.STOP) {
           var _streamObserver = _this._streamObserverMap.get(roomId);

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

@@ -26,6 +26,7 @@
 .fcr-message-bar > span:first-child {
   margin-right: 4px;
   font-size: 12px;
+  font-weight: 300;
 }
 
 .fcr-message-bar > .fcr-select-wrapper {
@@ -78,3 +79,7 @@
 .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,7 +1,6 @@
 "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");
@@ -9,11 +8,7 @@ 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");
@@ -21,6 +16,11 @@ 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,12 +34,11 @@ 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 _selectedUser$userId, _selectedUser$userNam;
+  var _users$filter, _selectedUser$userId, _selectedUser$userNam;
   var styles = _ref.styles,
     _ref$users = _ref.users,
     users = _ref$users === void 0 ? [] : _ref$users,
@@ -57,7 +56,13 @@ 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;
@@ -101,12 +106,6 @@ 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',
@@ -129,8 +128,11 @@ var MessageBar = exports.MessageBar = (0, _mobxReact.observer)(function (_ref) {
             fontSize: "medium",
             iconTransform: popoverOpened,
             enable: true,
-            isHideIcon: roomType === _type2.FcrRoomType.Mainroom ? (users === null || users === void 0 ? void 0 : users.length) <= 1 : false,
+            isHideIcon: !hasParticipant,
             onClick: function onClick() {
+              if (!hasParticipant) {
+                return;
+              }
               setPopoverOpened(!popoverOpened);
             },
             iconReverse: true

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

@@ -57,6 +57,7 @@
   align-items: center;
   cursor: pointer;
   width: 215px !important;
+  border-radius: var(--fcr_cornerradius_l);
 }
 
 .candidate-container-selected {
@@ -72,20 +73,20 @@
 }
 
 .candidate-avatar {
-  width: 26px;
-  height: 26px;
+  width: 32px;
+  height: 32px;
   border-radius: var(--fcr_cornerradius_s);
   background: var(--for_head5);
   display: flex;
   justify-content: center;
   align-items: center;
-  margin: 0 5px;
   /* text */
   color: var(--fcr_ui_scene_white10);
   font-family: Verdana;
   font-size: 14px;
   font-weight: 700;
   line-height: 14px;
+  margin-right: 5px;
 }
 .candidate-avatar .fcr-avatar {
   border-radius: var(--fcr_cornerradius_m);
@@ -93,6 +94,8 @@
 
 .candidate-avatar-all {
   background: var(--for_head1);
+  width: 32px;
+  height: 32px;
 }
 
 .candidate {

package/lib/modules/chat/chat.js

@@ -72,21 +72,22 @@ var Chat = exports.Chat = (0, _mobxReact.observer)(function (_ref) {
     singling = _ref.singling,
     handleClickUploadImage = _ref.handleClickUploadImage;
   var t = (0, _i18n.useI18n)();
+  var _useContext = (0, _react.useContext)(_store.StoreContext),
+    chatRoomStores = _useContext.chatRoomStores,
+    hasWaitingRoomPermission = _useContext.hasWaitingRoomPermission,
+    activeTabIndex = _useContext.activeTabIndex,
+    handlerActiveTab = _useContext.handlerActiveTab;
   var defaultProps = {
     errorMsg: t('fmt_chat_tips_exceedlimit'),
     forbiddenTxt: t('fmt_chat_button_muteall'),
     styles: {
-      display: 'flex'
+      display: 'flex',
+      height: chatRoomStores[_constant.RoomType.WAITING_ROOM] && chatRoomStores[_constant.RoomType.WAITING_ROOM].userCount > 0 ? 'calc(100% - 28px)' : '100%'
     }
   };
   var styles = defaultProps.styles,
     forbiddenTxt = defaultProps.forbiddenTxt,
     errorMsg = defaultProps.errorMsg;
-  var _useContext = (0, _react.useContext)(_store.StoreContext),
-    chatRoomStores = _useContext.chatRoomStores,
-    hasWaitingRoomPermission = _useContext.hasWaitingRoomPermission,
-    activeTabIndex = _useContext.activeTabIndex,
-    handlerActiveTab = _useContext.handlerActiveTab;
   var _ref2 = chatRoomStores[activeTabIndex],
     setTargetUser = _ref2.setTargetUser,
     privateTargetUser = _ref2.privateTargetUser,

package/lib/modules/chat/index.css

@@ -64,3 +64,13 @@
   right: -16px;
   left: auto;
 }
+
+.fcr-line-system-message {
+  margin: 0 20px;
+}
+
+.chat-tabs-container .fcr-tabs {
+  margin-right: 15px;
+  margin-left: 15px;
+  width: 100%;
+}

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

@@ -1,23 +1,13 @@
 import { UIModule } from '../../base';
 import './index.css';
-import { FcrUIEventStore } from '../../common/event-store';
-import { FcrSecurityStore } from '../../common/security-store';
 import { CHAT_WRAPPER_CLASS } from 'agora-ui-foundation/lib/components/chat-wrapper';
 import { FcrChatRoomFile, FcrChatRoomMessageType } from 'fcr-core/lib/room-control/chatroom-control/type';
-import { FcrMainRoomControl, FcrWaitingRoomControl } from 'fcr-core/lib/room-control/type';
-import { FcrRoomStore } from '../../common/room-store';
+import { StoreConfig } from '../../type';
 export { CHAT_WRAPPER_CLASS };
 export declare class ChatUIModule extends UIModule {
     private _store;
-    private _chatRoomControl;
-    private _uiEventStore;
     private _uid;
-    constructor({ roomControl, uiEventStore, securityStore, roomStore, }: {
-        roomControl: FcrMainRoomControl | FcrWaitingRoomControl;
-        uiEventStore: FcrUIEventStore;
-        securityStore: FcrSecurityStore;
-        roomStore: FcrRoomStore;
-    });
+    constructor(args: StoreConfig);
     getComponent(params?: {
         singling?: boolean;
     }): import("react/jsx-runtime").JSX.Element;

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

@@ -28,7 +28,7 @@ window.__DEV_ENGINE_IS_READY__.then(/*#__PURE__*/(0, _asyncToGenerator2["default
         roomControl = engine.createMainRoomControl(roomId);
         uiEventStore = new _eventStore.FcrUIEventStore();
         deviceStore = new _deviceStore.FcrDeviceStore(engine.getDesktopMediaControl(), uiEventStore);
-        securityStore = new _securityStore.FcrSecurityStore(roomControl.getPrivilegeControl(), roomControl.getUserControl(), roomControl.getStreamControl(), roomControl.getRoomSessionControl(), uiEventStore); // TODO: dev 环境需要 join
+        securityStore = new _securityStore.FcrSecurityStore(roomControl.getPrivilegeControl(), roomControl.getUserControl(), roomControl.getStreamControl(), uiEventStore); // TODO: dev 环境需要 join
         // await roomControl.join({
         //   userRole: FcrUserRole.HOST,
         //   userName: 'zxq-test' + Math.random() * 1000,
@@ -36,10 +36,21 @@ window.__DEV_ENGINE_IS_READY__.then(/*#__PURE__*/(0, _asyncToGenerator2["default
         //   createStreamConfigs: [],
         // });
         uiModule = new _.ChatUIModule({
+          mediaControl: engine.getDesktopMediaControl(),
           roomControl: roomControl,
-          uiEventStore: uiEventStore,
           securityStore: securityStore,
-          roomStore: new _roomStore.FcrRoomStore(uiEventStore, deviceStore, {}, engine)
+          deviceStore: deviceStore,
+          uiEventStore: uiEventStore,
+          roomStore: new _roomStore.FcrRoomStore(uiEventStore, deviceStore, {}, engine),
+          streamControl: roomControl.getStreamControl(),
+          userControl: roomControl.getUserControl(),
+          privilegeControl: roomControl.getPrivilegeControl(),
+          chatRoomControl: roomControl.getChatRoomControl(),
+          engine: null,
+          remoteVideoRenderManager: null,
+          config: null,
+          parameters: null,
+          deviceStreamStore: null
         });
         App = (0, _root.hot)(function () {
           (0, _react.useEffect)(function () {

package/lib/modules/chat/index.js

@@ -85,29 +85,16 @@ function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e
 function _setFunctionName(e, t, n) { "symbol" == _typeof(t) && (t = (t = t.description) ? "[" + t + "]" : ""); try { Object.defineProperty(e, "name", { configurable: !0, value: n ? n + " " + t : t }); } catch (e) {} return e; }
 function _checkInRHS(e) { if (Object(e) !== e) throw TypeError("right-hand side of 'in' should be an object, got " + (null !== e ? _typeof(e) : "null")); return e; }
 var ChatUIModule = exports.ChatUIModule = /*#__PURE__*/function (_UIModule) {
-  function ChatUIModule(_ref) {
-    var _roomControl$getUserC;
+  function ChatUIModule(args) {
+    var _args$roomControl$get;
     var _this;
-    var roomControl = _ref.roomControl,
-      uiEventStore = _ref.uiEventStore,
-      securityStore = _ref.securityStore,
-      roomStore = _ref.roomStore;
     (0, _classCallCheck2["default"])(this, ChatUIModule);
     _this = _callSuper(this, ChatUIModule);
     (0, _defineProperty2["default"])(_this, "_store", void _initProto(_this));
-    _this._chatRoomControl = roomControl.getChatRoomControl();
-    _this._uiEventStore = uiEventStore;
-    _this._store = new _store["default"]({
-      chatRoomControl: _this._chatRoomControl,
-      userControl: roomControl.getUserControl(),
-      uiEventStore: uiEventStore,
-      securityStore: securityStore,
-      roomControl: roomControl,
-      roomStore: roomStore
-    });
+    _this._store = new _store["default"](args);
     _this.sendMessage = _this.sendMessage.bind(_this);
     _this.updateReadMsgIndex = _this.updateReadMsgIndex.bind(_this);
-    var userId = (_roomControl$getUserC = roomControl.getUserControl()) === null || _roomControl$getUserC === void 0 || (_roomControl$getUserC = _roomControl$getUserC.getLocalUser()) === null || _roomControl$getUserC === void 0 ? void 0 : _roomControl$getUserC.userId;
+    var userId = (_args$roomControl$get = args.roomControl.getUserControl()) === null || _args$roomControl$get === void 0 || (_args$roomControl$get = _args$roomControl$get.getLocalUser()) === null || _args$roomControl$get === void 0 ? void 0 : _args$roomControl$get.userId;
     _this._uid = userId !== null && userId !== void 0 ? userId : 'test' + Math.random().toString(36).substr(2);
     return _this;
   }
@@ -116,9 +103,9 @@ var ChatUIModule = exports.ChatUIModule = /*#__PURE__*/function (_UIModule) {
     key: "getComponent",
     value: function getComponent(params) {
       var _this2 = this;
-      var _ref2 = params !== null && params !== void 0 ? params : {},
-        _ref2$singling = _ref2.singling,
-        singling = _ref2$singling === void 0 ? false : _ref2$singling;
+      var _ref = params !== null && params !== void 0 ? params : {},
+        _ref$singling = _ref.singling,
+        singling = _ref$singling === void 0 ? false : _ref$singling;
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(_store.StoreContext.Provider, {
         value: this._store,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_chat.Chat, {

package/lib/modules/chat/message-list.js

@@ -313,6 +313,7 @@ var MessageList = exports.MessageList = (0, _mobxReact.observer)(function (_ref)
                 marginBottom: 16
               }
             }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_textBubble.TextBubble, {
+              classnames: "fcr-line-system-message",
               txt: "".concat((0, _util.handleChatLevelChangedSystemMsg)(t, chatLevel, publisherRole, publisherNickName, publisherIsSelf)),
               marginBottom: 15
             }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {

package/lib/modules/chat/store.js

@@ -146,7 +146,7 @@ var ChatStore = exports["default"] = /*#__PURE__*/function () {
     roomStore.addObserver({
       onJoinWaitingRoom: function onJoinWaitingRoom(roomControl) {
         var room = roomControl;
-        var securityStore = new _securityStore.FcrSecurityStore(room.getPrivilegeControl(), room.getUserControl(), room.getStreamControl(), room.getRoomSessionControl(), _this._uiEventStore);
+        var securityStore = new _securityStore.FcrSecurityStore(room.getPrivilegeControl(), room.getUserControl(), room.getStreamControl(), _this._uiEventStore);
         var userControl = room.getUserControl();
         var chatRoomControl = room.getChatRoomControl();
         _this.chatRoomStores[_constant.RoomType.WAITING_ROOM] = new ChatRoomStore({

package/lib/modules/components/device-control/components/audio-menu/index.js

@@ -121,11 +121,11 @@ var AudioMenu = (0, _mobxReact.observer)(function (_ref) {
       className: "fcr-device-popover-content-more",
       children: [connectType === _deviceStore.ConnectType.COMPUTER && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         className: "fcr-device-popover-content-more-item fcr-device-popover-content-more-item--danger",
+        onClick: function onClick() {
+          onConnectClick();
+          stopAudioByComputer();
+        },
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-          onClick: function onClick() {
-            onConnectClick();
-            stopAudioByComputer();
-          },
           children: transI18n('fmt_device_label_audio_list_leaveComputerAudio')
         })
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {

package/lib/modules/components/device-control/index.css

@@ -156,6 +156,9 @@
   white-space: nowrap;
   text-overflow: ellipsis;
 }
+.fcr-device-popover-content-more-item--danger {
+  color: var(--fcr_ui_scene_ramp_red6);
+}
 
 .fcr-device-popover-content-more-item--danger:hover {
   color: var(--fcr_ui_scene_ramp_red6);

package/lib/modules/components/dialog-container/component/body.d.ts

@@ -0,0 +1,7 @@
+import { PropsWithChildren } from 'react';
+import '../index.css';
+export declare function DialogContainerBody(props: PropsWithChildren<{
+    onClick: () => void;
+    title?: string;
+    actions?: React.ReactNode;
+}>): import("react/jsx-runtime").JSX.Element;

package/lib/modules/components/dialog-container/component/body.js

@@ -0,0 +1,46 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DialogContainerBody = DialogContainerBody;
+require("../index.css");
+var _jsxRuntime = require("react/jsx-runtime");
+function DialogContainerBody(props) {
+  var actions = props.actions,
+    title = props.title,
+    children = props.children,
+    onClick = props.onClick;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: "fcr-dialog-container",
+    onClick: function onClick(e) {
+      return e.stopPropagation();
+    },
+    children: [(title || actions) && /*#__PURE__*/(0, _jsxRuntime.jsxs)("header", {
+      className: "fcr-dialog-container-header",
+      children: [actions && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        style: {
+          flex: 1
+        }
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("h2", {
+        children: title
+      }), actions && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "fcr-dialog-container-actions",
+        children: actions
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("section", {
+      className: "fcr-dialog-container-content",
+      style: title || actions ? {
+        height: 'calc(100vh - 76px)' /* 76px 包含 46px 的 title 高度，和 30px 的阴影 */
+      } : {},
+      children: children
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("a", {
+      className: "fcr-dialog-container-close",
+      onClick: onClick,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        children: "\xD7"
+      })
+    })]
+  });
+}