fcr-ui-scene 3.4.1 → 3.4.3

package/lib/modules/state-bar/meeting-details.js

@@ -6,11 +6,11 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.MeetingDetails = void 0;
-require("core-js/modules/es.array.concat.js");
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+require("core-js/modules/es.date.to-string.js");
 require("core-js/modules/es.regexp.exec.js");
 require("core-js/modules/es.string.replace.js");
 require("core-js/modules/web.timers.js");
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _button = require("agora-ui-foundation/lib/components/button");
 var _icon = require("agora-ui-foundation/lib/components/icon");
 var _type = require("agora-ui-foundation/lib/components/icon/type");
@@ -23,6 +23,7 @@ var _store = require("./store");
 require("./meeting-detail.css");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _meetingTime = require("../../hooks/meeting-time");
+var _meetingDetail2 = require("../../utilities/meeting-detail");
 var _jsxRuntime = require("react/jsx-runtime");
 var CopyState = /*#__PURE__*/function (CopyState) {
   CopyState[CopyState["COPYINIT"] = 1] = "COPYINIT";
@@ -31,13 +32,25 @@ var CopyState = /*#__PURE__*/function (CopyState) {
   CopyState[CopyState["FAILED"] = 4] = "FAILED";
   return CopyState;
 }(CopyState || {});
+var isNextDayAfterDuration = function isNextDayAfterDuration(startTimeStamp, duration) {
+  var futureTimestamp = startTimeStamp + duration;
+  var currentDate = new Date(startTimeStamp);
+  var futureDate = new Date(futureTimestamp);
+  var currentYear = currentDate.getFullYear();
+  var currentMonth = currentDate.getMonth();
+  var currentDay = currentDate.getDate();
+  var futureYear = futureDate.getFullYear();
+  var futureMonth = futureDate.getMonth();
+  var futureDay = futureDate.getDate();
+  return futureYear > currentYear || futureYear === currentYear && futureMonth > currentMonth || futureYear === currentYear && futureMonth === currentMonth && futureDay > currentDay;
+};
 var MeetingDetails = exports.MeetingDetails = (0, _mobxReact.observer)(function () {
   var t = (0, _i18n.useI18n)();
   var copyTimer = null;
   var _useState = (0, _react.useState)({
       copyState: CopyState.COPYINIT,
       copyIcon: _type.FcrIconType.FCR_LINK,
-      copyText: t('fmt_sharing_button_copydetailed')
+      copyText: t('fmt_popup_button_meetinginfor')
     }),
     _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
     copyInfoState = _useState2[0],
@@ -62,14 +75,8 @@ var MeetingDetails = exports.MeetingDetails = (0, _mobxReact.observer)(function
   }, []);
   if (!roomInfo || !localUser) return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {});
   var displayMeetingId = (0, _tools.renderMeetingId)(meetingId, roomInfo.roomId);
-  var detailText = t('fmt_link_invitation', {
-    reason1: localUser.userName,
-    reason2: roomInfo === null || roomInfo === void 0 ? void 0 : roomInfo.roomName,
-    // reason3: dayjs(scheduleInfo?.startTime ?? 0).format('YYYY-MM-DD HH:mm:ss'),
-    reason3: '',
-    reason4: shareLink,
-    reason5: !!password ? "".concat(t('fmt_meeting_creatpage_label_password'), ": ").concat(password) : ''
-  });
+  var duration = (scheduleInfo === null || scheduleInfo === void 0 ? void 0 : scheduleInfo.duration) || 0;
+  var detailText = (0, _meetingDetail2.generateMeetingDetail)(localUser.userName, roomInfo.roomName, (0, _meetingDetail2.generateMeetingDuration)((scheduleInfo === null || scheduleInfo === void 0 ? void 0 : scheduleInfo.startTime) || 0, duration), shareLink, displayMeetingId, password !== null && password !== void 0 ? password : '');
   function handleCopyMeetingId(copyContent) {
     if (!copyContent) return;
     var content = meetingId ? copyContent : copyContent.replace(/\s+/g, '');
@@ -111,7 +118,7 @@ var MeetingDetails = exports.MeetingDetails = (0, _mobxReact.observer)(function
       });
     });
   }
-  function handlerCopyMeetingDetail(detailText) {
+  function handlerCopyMeetingDetail() {
     if (copyInfoState.copyState !== CopyState.COPYINIT) {
       return;
     }
@@ -147,7 +154,7 @@ var MeetingDetails = exports.MeetingDetails = (0, _mobxReact.observer)(function
         setCopyInfoState({
           copyState: CopyState.COPYINIT,
           copyIcon: _type.FcrIconType.FCR_LINK,
-          copyText: t('fmt_sharing_button_copydetailed')
+          copyText: t('fmt_popup_button_meetinginfor')
         });
       }, 1000);
     }
@@ -181,30 +188,32 @@ var MeetingDetails = exports.MeetingDetails = (0, _mobxReact.observer)(function
             size: 20
           })
         })]
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      }), !!password && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
         className: "meeting-details__content-share-link",
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
-          children: t('fmt_sharing_label_invitationlink')
+          children: t('fmt_meeting_mainwindow_topbar_left_popup_label_meeting_password', {
+            reason1: ''
+          })
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-          children: shareLink
+          children: password
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
           onClick: function onClick() {
-            return handlerCopyMeetingShareLink(shareLink);
+            return handleCopyMeetingPassword(password !== null && password !== void 0 ? password : '');
           },
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
             type: _type.FcrIconType.FCR_COPY_ICON,
             size: 20
           })
         })]
-      }), !!password && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
         className: "meeting-details__content-share-link",
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
-          children: t('fmt_meeting_creatpage_label_password')
+          children: t('fmt_sharing_label_invitationlink')
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-          children: password
+          children: shareLink
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
           onClick: function onClick() {
-            return handleCopyMeetingPassword(password !== null && password !== void 0 ? password : '');
+            return handlerCopyMeetingShareLink(shareLink);
           },
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
             type: _type.FcrIconType.FCR_COPY_ICON,
@@ -217,9 +226,7 @@ var MeetingDetails = exports.MeetingDetails = (0, _mobxReact.observer)(function
       children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_button.FcrButton, {
         size: "XS",
         shape: "rounded",
-        onClick: function onClick() {
-          return handlerCopyMeetingDetail(detailText);
-        },
+        onClick: handlerCopyMeetingDetail,
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
           className: (0, _classnames["default"])({
             'meeting-details__reset-icon': copyInfoState.copyState === CopyState.COPYING

package/lib/modules/state-bar/meeting-network-state.js

@@ -95,7 +95,7 @@ var MeetingNetworkState = exports.MeetingNetworkState = (0, _mobxReact.observer)
       onClick: function onClick() {
         openDeviceSettingDialog({
           activeTab: _store2.DeviceSettingTab.STATE,
-          highlightSelector: _constant.HighlightElement.NETWORK_STATE
+          highlightSelector: _constant.FcrUIHighlightElement.NETWORK_STATE
         });
       },
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {

package/lib/modules/state-bar/store.d.ts

@@ -1,9 +1,13 @@
 import { FcrRecordingState, FcrRoomInfo, FcrRoomSchedule, FcrUserInfo } from 'fcr-core/lib/type';
-import { FcrUIEventStore, FcrUIToastParams } from '../../common/event-store';
+import { FcrUIEventProvider } from '../../providers/event-provider';
 import { DeviceSettingDialogConfig } from '../setting/store';
-import { FcrSecurityStore } from '../../common/security-store';
-import { FcrUISceneConfig } from '../../type';
+import { FcrUISceneConfig, FcrUIToastParams } from '../../type';
 import { FcrMainRoomControl, FcrWaitingRoomControl } from 'fcr-core/lib/room-control/type';
+import { FcrUIPrivilegeProvider } from '../../providers/privilege-provider';
+import { FcrUISharedLayoutDataSource } from '../../shared-data-source/layout-data';
+import { FcrUIVideoWindowLayoutType } from '../layout/type';
+import { FcrUIRoomProvider } from '../../providers/room-provider';
+import { FcrUIVideoWindowDataSource } from '../../shared-data-source/video-window';
 export type NetworkStatus = 'excellent' | 'average' | 'poor' | 'unknown';
 export declare const GALLERY_MIN_SIZE = 825;
 export default class StateBarStore {
@@ -13,6 +17,9 @@ export default class StateBarStore {
     private _uiEventStore;
     private _securityStore;
     private _config;
+    private _roomProvider;
+    private _sharedLayoutDataSource;
+    private _sharedVideoWindowDataSource;
     private _roomObserver;
     accessor networkStatus: NetworkStatus;
     accessor localUser: FcrUserInfo | undefined;
@@ -29,8 +36,6 @@ export default class StateBarStore {
     };
     accessor attendeeCount: number;
     accessor asideOpenedItem: Set<string>;
-    accessor layoutSize: number;
-    accessor layoutView: 'speaker' | 'gallery';
     accessor cloudRecordingState: FcrRecordingState;
     accessor meetingId: string | undefined;
     get isUserHost(): boolean;
@@ -40,22 +45,27 @@ export default class StateBarStore {
     get hasStopLiveStreamingPermission(): boolean;
     get hasGetLiveStreamingLinkPermission(): boolean;
     get password(): string | undefined;
-    constructor({ roomControl, uiEventStore, securityStore, config, parameters, }: {
+    get layoutSize(): number;
+    get layoutView(): import("../../type").FcrUIVideoWindowLayoutType;
+    get asideLayout(): import("../../type").FcrUIUpdateAsideParams;
+    constructor({ roomControl, uiEventStore, securityStore, config, parameters, sharedLayoutDataSource, roomProvider, sharedVideoWindowDataSource, }: {
         roomControl: FcrMainRoomControl | FcrWaitingRoomControl;
-        uiEventStore: FcrUIEventStore;
-        securityStore: FcrSecurityStore;
+        uiEventStore: FcrUIEventProvider;
+        securityStore: FcrUIPrivilegeProvider;
         config: FcrUISceneConfig;
         parameters?: Record<string, unknown>;
+        sharedLayoutDataSource: FcrUISharedLayoutDataSource;
+        roomProvider: FcrUIRoomProvider;
+        sharedVideoWindowDataSource: FcrUIVideoWindowDataSource;
     });
     isLockRoomEnabled(): boolean;
     setNetworkStatus(networkStatus: NetworkStatus): void;
     setLocalUser(localUser: FcrUserInfo): void;
     setRoomInfo(roomInfo: FcrRoomInfo | undefined): void;
     setScheduleInfo(scheduleInfo: FcrRoomSchedule): void;
-    toggleLayout(layout: 'speaker' | 'gallery'): void;
+    toggleLayout(layout: FcrUIVideoWindowLayoutType): void;
     toggleLayoutBarLock(state: boolean): void;
     openVideoWindowDialog(): void;
-    refreshLayoutSize(size: 16 | 25): void;
     release(): void;
     openDeviceSettingDialog(arg?: Partial<DeviceSettingDialogConfig>): void;
     stopLiveStreamingDialog(): void;

package/lib/modules/state-bar/store.js

@@ -45,7 +45,6 @@ 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/es.weak-map.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.for-each.js");
 require("core-js/modules/esnext.set.add-all.js");
@@ -86,12 +85,11 @@ var _store = require("../setting/store");
 var _decorator = require("agora-foundation/lib/decorator");
 var _constant = require("../../utilities/constant");
 var _debounce = _interopRequireDefault(require("lodash/debounce"));
-var _components = require("../layout/components");
-var _parameters = require("../../utilities/parameters");
 var _type2 = require("fcr-core/lib/room-control/type");
 var _react = require("react");
+var _view = require("../layout/view");
 var _StateBarStore;
-var _initProto, _init_networkStatus, _init_localUser, _init_roomInfo, _init_scheduleInfo, _init_isLiveStreaming, _init_liveStreamingPlayUrl, _init_galleryWidth, _init_browserWidth, _init_networkStats, _init_attendeeCount, _init_asideOpenedItem, _init_layoutSize, _init_layoutView, _init_cloudRecordingState, _init_meetingId, _setNetworkStatusDecs, _setLocalUserDecs, _setRoomInfoDecs, _setScheduleInfoDecs, _stopLiveStreamingDialogDecs, _uiEventsDecs, _setBrowserWidthDecs, _onNetworkStatsUpdatedDecs, _onLiveStreamingStateUpdatedDecs, _ref;
+var _initProto, _init_networkStatus, _init_localUser, _init_roomInfo, _init_scheduleInfo, _init_isLiveStreaming, _init_liveStreamingPlayUrl, _init_galleryWidth, _init_browserWidth, _init_networkStats, _init_attendeeCount, _init_asideOpenedItem, _init_cloudRecordingState, _init_meetingId, _setNetworkStatusDecs, _setLocalUserDecs, _setRoomInfoDecs, _setScheduleInfoDecs, _stopLiveStreamingDialogDecs, _uiEventsDecs, _setBrowserWidthDecs, _onNetworkStatsUpdatedDecs, _onLiveStreamingStateUpdatedDecs, _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; }
@@ -116,19 +114,19 @@ var _J = /*#__PURE__*/new WeakMap();
 var _K = /*#__PURE__*/new WeakMap();
 var _L = /*#__PURE__*/new WeakMap();
 var _M = /*#__PURE__*/new WeakMap();
-var _N = /*#__PURE__*/new WeakMap();
-var _O = /*#__PURE__*/new WeakMap();
 _ref = (_setNetworkStatusDecs = [_mobx.action, _mobx.action.bound], _setLocalUserDecs = [_mobx.action, _mobx.action.bound], _setRoomInfoDecs = [_mobx.action, _mobx.action.bound], _setScheduleInfoDecs = [_mobx.action, _mobx.action.bound], _stopLiveStreamingDialogDecs = [_mobx.action, _mobx.action.bound], _uiEventsDecs = [_mobx.action, _mobx.action.bound], _setBrowserWidthDecs = [_mobx.action, _mobx.action.bound], _onNetworkStatsUpdatedDecs = [_mobx.action, _mobx.action.bound], _onLiveStreamingStateUpdatedDecs = [_mobx.action, _mobx.action.bound], "logger");
 var StateBarStore = exports["default"] = /*#__PURE__*/function () {
   function StateBarStore(_ref2) {
-    var _defaultVideoGalleryS,
-      _this$_roomControl$ge,
+    var _this$_roomControl$ge,
       _this = this;
     var roomControl = _ref2.roomControl,
       uiEventStore = _ref2.uiEventStore,
       securityStore = _ref2.securityStore,
       config = _ref2.config,
-      parameters = _ref2.parameters;
+      parameters = _ref2.parameters,
+      sharedLayoutDataSource = _ref2.sharedLayoutDataSource,
+      roomProvider = _ref2.roomProvider,
+      sharedVideoWindowDataSource = _ref2.sharedVideoWindowDataSource;
     (0, _classCallCheck2["default"])(this, StateBarStore);
     (0, _defineProperty2["default"])(this, _ref, (_initProto(this), (0, _logger.getLogger)()));
     (0, _defineProperty2["default"])(this, "_disposer", []);
@@ -153,21 +151,19 @@ var StateBarStore = exports["default"] = /*#__PURE__*/function () {
     }));
     _classPrivateFieldInitSpec(this, _J, _init_attendeeCount(this));
     _classPrivateFieldInitSpec(this, _K, _init_asideOpenedItem(this, new Set()));
-    _classPrivateFieldInitSpec(this, _L, _init_layoutSize(this));
-    _classPrivateFieldInitSpec(this, _M, _init_layoutView(this, 'gallery'));
-    _classPrivateFieldInitSpec(this, _N, _init_cloudRecordingState(this, _type.FcrRecordingState.Stopped));
-    _classPrivateFieldInitSpec(this, _O, _init_meetingId(this, undefined));
+    // @observable accessor layoutSize: number;
+    // @observable accessor layoutView: 'speaker' | 'gallery' = 'gallery';
+    _classPrivateFieldInitSpec(this, _L, _init_cloudRecordingState(this, _type.FcrRecordingState.Stopped));
+    _classPrivateFieldInitSpec(this, _M, _init_meetingId(this, undefined));
     this._config = config;
     this._roomControl = roomControl;
     this._uiEventStore = uiEventStore;
     this._securityStore = securityStore;
+    this._roomProvider = roomProvider;
     this.attendeeCount = 0;
     this.isLiveStreaming = this._roomControl.getLiveStreamingState() === _type.FcrLiveStreamingState.STARTED;
-    var defaultVideoGallerySize = (0, _parameters.getDefaultVideoGallerySize)(parameters);
-    if (defaultVideoGallerySize) {
-      defaultVideoGallerySize = Math.min(Math.max(defaultVideoGallerySize, 16), 25);
-    }
-    this.layoutSize = (_defaultVideoGalleryS = defaultVideoGallerySize) !== null && _defaultVideoGalleryS !== void 0 ? _defaultVideoGalleryS : 16;
+    this._sharedLayoutDataSource = sharedLayoutDataSource;
+    this._sharedVideoWindowDataSource = sharedVideoWindowDataSource;
     this._roomControl.addObserver(this._roomObserver);
     this._uiEventStore.addObserver({
       onEvent: this._uiEvents.bind(this)
@@ -187,7 +183,23 @@ var StateBarStore = exports["default"] = /*#__PURE__*/function () {
       return _this.isLiveStreaming;
     }, this._setBrowserWidth()), (0, _mobx.reaction)(function () {
       return _this.cloudRecordingState;
-    }, this._setBrowserWidth()), resizeDispose);
+    }, this._setBrowserWidth()), (0, _mobx.reaction)(function () {
+      return _this.asideLayout;
+    }, function (asideLayout) {
+      if (asideLayout.participant) {
+        _this.asideOpenedItem.add('participant');
+      }
+      if (asideLayout.participant === false) {
+        _this.asideOpenedItem["delete"]('participant');
+      }
+      if (asideLayout.chat) {
+        _this.asideOpenedItem.add('chat');
+      }
+      if (asideLayout.chat === false) {
+        _this.asideOpenedItem["delete"]('chat');
+      }
+      _this._setBrowserWidth(window.innerWidth)(); // 打开或关闭边栏
+    }), resizeDispose);
   }
   return (0, _createClass2["default"])(StateBarStore, [{
     key: "networkStatus",
@@ -278,7 +290,7 @@ var StateBarStore = exports["default"] = /*#__PURE__*/function () {
       _classPrivateFieldSet(_K, this, v);
     }
   }, {
-    key: "layoutSize",
+    key: "cloudRecordingState",
     get: function get() {
       return _classPrivateFieldGet(_L, this);
     },
@@ -286,29 +298,13 @@ var StateBarStore = exports["default"] = /*#__PURE__*/function () {
       _classPrivateFieldSet(_L, this, v);
     }
   }, {
-    key: "layoutView",
+    key: "meetingId",
     get: function get() {
       return _classPrivateFieldGet(_M, this);
     },
     set: function set(v) {
       _classPrivateFieldSet(_M, this, v);
     }
-  }, {
-    key: "cloudRecordingState",
-    get: function get() {
-      return _classPrivateFieldGet(_N, this);
-    },
-    set: function set(v) {
-      _classPrivateFieldSet(_N, this, v);
-    }
-  }, {
-    key: "meetingId",
-    get: function get() {
-      return _classPrivateFieldGet(_O, this);
-    },
-    set: function set(v) {
-      _classPrivateFieldSet(_O, this, v);
-    }
   }, {
     key: "isUserHost",
     get: function get() {
@@ -347,6 +343,24 @@ var StateBarStore = exports["default"] = /*#__PURE__*/function () {
       var _this$_roomControl$ge3;
       return (_this$_roomControl$ge3 = this._roomControl.getRoomInfo()) === null || _this$_roomControl$ge3 === void 0 ? void 0 : _this$_roomControl$ge3.password;
     }
+  }, {
+    key: "layoutSize",
+    get: function get() {
+      var _this$_sharedLayoutDa;
+      return (_this$_sharedLayoutDa = this._sharedLayoutDataSource) === null || _this$_sharedLayoutDa === void 0 ? void 0 : _this$_sharedLayoutDa.layoutSize;
+    }
+  }, {
+    key: "layoutView",
+    get: function get() {
+      var _this$_sharedVideoWin;
+      return (_this$_sharedVideoWin = this._sharedVideoWindowDataSource) === null || _this$_sharedVideoWin === void 0 ? void 0 : _this$_sharedVideoWin.layoutType;
+    }
+  }, {
+    key: "asideLayout",
+    get: function get() {
+      var _this$_sharedLayoutDa2;
+      return (_this$_sharedLayoutDa2 = this._sharedLayoutDataSource) === null || _this$_sharedLayoutDa2 === void 0 ? void 0 : _this$_sharedLayoutDa2.asideLayout;
+    }
   }, {
     key: "isLockRoomEnabled",
     value: function isLockRoomEnabled() {
@@ -387,25 +401,17 @@ var StateBarStore = exports["default"] = /*#__PURE__*/function () {
   }, {
     key: "toggleLayout",
     value: function toggleLayout(layout) {
-      this._uiEventStore.toggleLayout({
-        layout: layout,
-        manual: true
-      });
+      this._sharedVideoWindowDataSource.setLayout(layout, true);
     }
   }, {
     key: "toggleLayoutBarLock",
     value: function toggleLayoutBarLock(state) {
-      this._uiEventStore.sendEvent(_constant.UIAction.TOGGLE_LAYOUT_BAR_LOCK, state);
+      this._uiEventStore.sendEvent(_constant.FcrUIAction.TOGGLE_LAYOUT_BAR_LOCK, state);
     }
   }, {
     key: "openVideoWindowDialog",
     value: function openVideoWindowDialog() {
-      this._uiEventStore.openDialog(_constant.DialogKey.VIDEO_WINDOW);
-    }
-  }, {
-    key: "refreshLayoutSize",
-    value: function refreshLayoutSize(size) {
-      this.layoutSize = size;
+      this._uiEventStore.openDialog(_constant.FcrUIDialogKey.VIDEO_WINDOW);
     }
   }, {
     key: "release",
@@ -418,7 +424,7 @@ var StateBarStore = exports["default"] = /*#__PURE__*/function () {
     key: "openDeviceSettingDialog",
     value: function openDeviceSettingDialog(arg) {
       var activeTab = (arg === null || arg === void 0 ? void 0 : arg.activeTab) || _store.DeviceSettingTab.VIDEO;
-      var highlightSelector = (arg === null || arg === void 0 ? void 0 : arg.highlightSelector) || _constant.HighlightElement.VIDEO_MAX_PERSON;
+      var highlightSelector = (arg === null || arg === void 0 ? void 0 : arg.highlightSelector) || _constant.FcrUIHighlightElement.VIDEO_MAX_PERSON;
       this._uiEventStore.openDeviceSettingDialog({
         activeTab: activeTab,
         highlightSelector: highlightSelector
@@ -427,27 +433,27 @@ var StateBarStore = exports["default"] = /*#__PURE__*/function () {
   }, {
     key: "stopLiveStreamingDialog",
     value: function stopLiveStreamingDialog() {
-      this._uiEventStore.stopLiveStreaming();
+      this._roomProvider.stopLiveStreaming();
     }
   }, {
     key: "startCloudRecording",
     value: function startCloudRecording() {
-      this._uiEventStore.cloudRecording('start');
+      this._roomProvider.startCloudRecording();
     }
   }, {
     key: "pauseCloudRecording",
     value: function pauseCloudRecording() {
-      this._uiEventStore.cloudRecording('pause');
+      this._roomProvider.pauseCloudRecording();
     }
   }, {
     key: "resumeCloudRecording",
     value: function resumeCloudRecording() {
-      this._uiEventStore.cloudRecording('resume');
+      this._roomProvider.resumeCloudRecording();
     }
   }, {
     key: "stopCloudRecording",
     value: function stopCloudRecording() {
-      this._uiEventStore.cloudRecording('stop');
+      this._roomProvider.stopCloudRecording();
     }
   }, {
     key: "getShareLink",
@@ -490,35 +496,27 @@ var StateBarStore = exports["default"] = /*#__PURE__*/function () {
   }, {
     key: "_uiEvents",
     value: function _uiEvents(action, payload) {
-      if (action === _constant.UIAction.LAYOUT_SIZE_CHANGED) {
-        var _ref3 = payload,
-          size = _ref3.size;
-        this.refreshLayoutSize(size);
-      }
-      if (action === _constant.UIAction.LAYOUT_CHANGED) {
-        var _ref4 = payload,
-          layout = _ref4.layout;
-        this.layoutView = layout;
-      }
-      if (action === _constant.UIAction.ASIDE_WIDTH_CHANGED) {
+      if (action === _constant.FcrUIAction.ASIDE_WIDTH_CHANGED) {
         this._setBrowserWidth(window.innerWidth, payload)(); // 拖动边栏
       }
-      if (action === _constant.UIAction.UPDATE_ASIDE) {
-        if (payload.participant) {
-          this.asideOpenedItem.add('participant');
-        }
-        if (payload.participant === false) {
-          this.asideOpenedItem["delete"]('participant');
-        }
-        if (payload.chat) {
-          this.asideOpenedItem.add('chat');
-        }
-        if (payload.chat === false) {
-          this.asideOpenedItem["delete"]('chat');
-        }
-        this._setBrowserWidth(window.innerWidth)(); // 打开或关闭边栏
-      }
-      if (action === _constant.UIAction.MAIN_LIST_LENGTH_CHANGED) {
+
+      // if (action === FcrUIAction.UPDATE_ASIDE) {
+      //   if (payload.participant) {
+      //     this.asideOpenedItem.add('participant');
+      //   }
+      //   if (payload.participant === false) {
+      //     this.asideOpenedItem.delete('participant');
+      //   }
+      //   if (payload.chat) {
+      //     this.asideOpenedItem.add('chat');
+      //   }
+      //   if (payload.chat === false) {
+      //     this.asideOpenedItem.delete('chat');
+      //   }
+      //   this._setBrowserWidth(window.innerWidth)(); // 打开或关闭边栏
+      // }
+
+      if (action === _constant.FcrUIAction.MAIN_LIST_LENGTH_CHANGED) {
         this.attendeeCount = payload;
       }
     }
@@ -530,7 +528,7 @@ var StateBarStore = exports["default"] = /*#__PURE__*/function () {
         var _e$target;
         var offsetWidth = _this2.isLiveStreaming && _this2.cloudRecordingState !== _type.FcrRecordingState.Stopped ? 210 : 0; // 同时打开直播和云录制会导致状态栏拥挤，所以需要针对这个情况进行计算
         var contain = (e === null || e === void 0 || (_e$target = e.target) === null || _e$target === void 0 ? void 0 : _e$target.innerWidth) || width || window.innerWidth;
-        var needSubstact = minus || _components.MinAsideWidth;
+        var needSubstact = minus || _view.MinAsideWidth;
         (0, _mobx.runInAction)(function () {
           _this2.galleryWidth = minus && width ? width - offsetWidth - minus // 拖动侧边栏时的算法
           : _this2.asideOpenedItem.has('chat') || _this2.asideOpenedItem.has('participant') ? contain - needSubstact - offsetWidth // 打开或关闭侧边栏时的算法
@@ -571,7 +569,7 @@ var StateBarStore = exports["default"] = /*#__PURE__*/function () {
   }]);
 }();
 _StateBarStore = StateBarStore;
-var _applyDecs$e = (0, _slicedToArray2["default"])(_applyDecs(_StateBarStore, [[_mobx.observable, 1, "networkStatus"], [_mobx.observable, 1, "localUser"], [_mobx.observable, 1, "roomInfo"], [_mobx.observable, 1, "scheduleInfo"], [_mobx.observable, 1, "isLiveStreaming"], [_mobx.observable, 1, "liveStreamingPlayUrl"], [_mobx.observable, 1, "galleryWidth"], [_mobx.observable, 1, "browserWidth"], [_mobx.observable, 1, "networkStats"], [_mobx.observable, 1, "attendeeCount"], [_mobx.observable, 1, "asideOpenedItem"], [_mobx.observable, 1, "layoutSize"], [_mobx.observable, 1, "layoutView"], [_mobx.observable, 1, "cloudRecordingState"], [_mobx.observable, 1, "meetingId"], [_mobx.computed, 3, "isUserHost"], [_mobx.computed, 3, "shouldShowMeetingTime"], [_mobx.computed, 3, "isMainRoom"], [_mobx.computed, 3, "hasStartCloudRecordingPermission"], [_mobx.computed, 3, "hasStopLiveStreamingPermission"], [_mobx.computed, 3, "hasGetLiveStreamingLinkPermission"], [_mobx.computed, 3, "password"], [_decorator.bound, 2, "isLockRoomEnabled"], [_setNetworkStatusDecs, 18, "setNetworkStatus"], [_setLocalUserDecs, 18, "setLocalUser"], [_setRoomInfoDecs, 18, "setRoomInfo"], [_setScheduleInfoDecs, 18, "setScheduleInfo"], [_mobx.action, 2, "refreshLayoutSize"], [_decorator.bound, 2, "openDeviceSettingDialog"], [_stopLiveStreamingDialogDecs, 18, "stopLiveStreamingDialog"], [_decorator.bound, 2, "startCloudRecording"], [_decorator.bound, 2, "pauseCloudRecording"], [_decorator.bound, 2, "resumeCloudRecording"], [_decorator.bound, 2, "stopCloudRecording"], [_decorator.bound, 2, "getShareLink"], [_decorator.bound, 2, "showToast"], [_uiEventsDecs, 18, "_uiEvents"], [_setBrowserWidthDecs, 18, "_setBrowserWidth"], [_onNetworkStatsUpdatedDecs, 18, "_onNetworkStatsUpdated"], [_onLiveStreamingStateUpdatedDecs, 18, "_onLiveStreamingStateUpdated"]], []).e, 16);
+var _applyDecs$e = (0, _slicedToArray2["default"])(_applyDecs(_StateBarStore, [[_mobx.observable, 1, "networkStatus"], [_mobx.observable, 1, "localUser"], [_mobx.observable, 1, "roomInfo"], [_mobx.observable, 1, "scheduleInfo"], [_mobx.observable, 1, "isLiveStreaming"], [_mobx.observable, 1, "liveStreamingPlayUrl"], [_mobx.observable, 1, "galleryWidth"], [_mobx.observable, 1, "browserWidth"], [_mobx.observable, 1, "networkStats"], [_mobx.observable, 1, "attendeeCount"], [_mobx.observable, 1, "asideOpenedItem"], [_mobx.observable, 1, "cloudRecordingState"], [_mobx.observable, 1, "meetingId"], [_mobx.computed, 3, "isUserHost"], [_mobx.computed, 3, "shouldShowMeetingTime"], [_mobx.computed, 3, "isMainRoom"], [_mobx.computed, 3, "hasStartCloudRecordingPermission"], [_mobx.computed, 3, "hasStopLiveStreamingPermission"], [_mobx.computed, 3, "hasGetLiveStreamingLinkPermission"], [_mobx.computed, 3, "password"], [_decorator.bound, 2, "isLockRoomEnabled"], [_setNetworkStatusDecs, 18, "setNetworkStatus"], [_setLocalUserDecs, 18, "setLocalUser"], [_setRoomInfoDecs, 18, "setRoomInfo"], [_setScheduleInfoDecs, 18, "setScheduleInfo"], [_decorator.bound, 2, "openDeviceSettingDialog"], [_stopLiveStreamingDialogDecs, 18, "stopLiveStreamingDialog"], [_decorator.bound, 2, "startCloudRecording"], [_decorator.bound, 2, "pauseCloudRecording"], [_decorator.bound, 2, "resumeCloudRecording"], [_decorator.bound, 2, "stopCloudRecording"], [_decorator.bound, 2, "getShareLink"], [_decorator.bound, 2, "showToast"], [_uiEventsDecs, 18, "_uiEvents"], [_setBrowserWidthDecs, 18, "_setBrowserWidth"], [_onNetworkStatsUpdatedDecs, 18, "_onNetworkStatsUpdated"], [_onLiveStreamingStateUpdatedDecs, 18, "_onLiveStreamingStateUpdated"]], []).e, 14);
 _init_networkStatus = _applyDecs$e[0];
 _init_localUser = _applyDecs$e[1];
 _init_roomInfo = _applyDecs$e[2];
@@ -583,9 +581,7 @@ _init_browserWidth = _applyDecs$e[7];
 _init_networkStats = _applyDecs$e[8];
 _init_attendeeCount = _applyDecs$e[9];
 _init_asideOpenedItem = _applyDecs$e[10];
-_init_layoutSize = _applyDecs$e[11];
-_init_layoutView = _applyDecs$e[12];
-_init_cloudRecordingState = _applyDecs$e[13];
-_init_meetingId = _applyDecs$e[14];
-_initProto = _applyDecs$e[15];
+_init_cloudRecordingState = _applyDecs$e[11];
+_init_meetingId = _applyDecs$e[12];
+_initProto = _applyDecs$e[13];
 var StoreContext = exports.StoreContext = /*#__PURE__*/(0, _react.createContext)(null);

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

@@ -71,10 +71,10 @@ var View = exports.View = (0, _mobxReact.observer)(function () {
     isFullScreen ? (0, _screen.enterFullScreen)() : (0, _screen.exitFullScreen)();
   }, [isFullScreen]);
   var screenHandler = function screenHandler(event) {
-    if (event.action === _constant.RendererEventAction.ENTER_FULL_SCREEN) {
+    if (event.action === _constant.FcrUIRendererEventAction.ENTER_FULL_SCREEN) {
       setIsFullScreen(true);
     }
-    if (event.action === _constant.RendererEventAction.LEAVE_FULL_SCREEN) {
+    if (event.action === _constant.FcrUIRendererEventAction.LEAVE_FULL_SCREEN) {
       setIsFullScreen(false);
     }
   };

package/lib/modules/video-window/deviceState/index.d.ts

@@ -1,7 +1,7 @@
 import { ConnectionTabType } from './../type';
-import { ConnectType } from '../../../common/device-store';
+import { FcrUIConnectType } from '../../../type';
 interface DeviceStateProps {
-    connectType: ConnectType;
+    connectType: FcrUIConnectType;
     openConnection: (type: ConnectionTabType) => void;
     microphoneVolumeLevel: number;
     enableMicrophone: (enable: boolean) => void;

package/lib/modules/video-window/deviceState/index.js

@@ -1,17 +1,15 @@
 "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.DeviceState = exports.AudioRecordinDeviceIcon = void 0;
-var _react = _interopRequireDefault(require("react"));
 var _mobxReact = require("mobx-react");
 var _icon = require("agora-ui-foundation/lib/components/icon");
 var _type = require("agora-ui-foundation/lib/components/icon/type");
 var _microphoneIndicator = require("agora-ui-foundation/lib/components/microphone-indicator");
-var _deviceStore = require("../../../common/device-store");
+var _type2 = require("../../../type");
 var _jsxRuntime = require("react/jsx-runtime");
 var DeviceState = exports.DeviceState = (0, _mobxReact.observer)(function (_ref) {
   var connectType = _ref.connectType,
@@ -20,7 +18,7 @@ var DeviceState = exports.DeviceState = (0, _mobxReact.observer)(function (_ref)
     enableMicrophone = _ref.enableMicrophone,
     microphoneEnabled = _ref.microphoneEnabled;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-    children: [connectType === _deviceStore.ConnectType.NONE && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    children: [connectType === _type2.FcrUIConnectType.NONE && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       onClick: function onClick() {
         return openConnection('computer');
       },
@@ -32,7 +30,7 @@ var DeviceState = exports.DeviceState = (0, _mobxReact.observer)(function (_ref)
           iconSecondary: 'var(--fcr_ui_scene_ramp_green6)'
         }
       })
-    }), connectType === _deviceStore.ConnectType.COMPUTER && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    }), connectType === _type2.FcrUIConnectType.COMPUTER && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       onClick: function onClick() {
         enableMicrophone(!microphoneEnabled);
       },
@@ -40,7 +38,7 @@ var DeviceState = exports.DeviceState = (0, _mobxReact.observer)(function (_ref)
         micEnabled: microphoneEnabled,
         volume: microphoneVolumeLevel
       })
-    }), connectType === _deviceStore.ConnectType.PHONE && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    }), connectType === _type2.FcrUIConnectType.PHONE && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
         type: microphoneVolumeLevel > 20 ? _type.FcrIconType.FCR_PHONECALL3 : microphoneVolumeLevel > 10 ? _type.FcrIconType.FCR_PHONECALL2 : _type.FcrIconType.FCR_PHONECALL1,
         size: 32,

package/lib/modules/video-window/index.css

@@ -1,7 +1,3 @@
-html,
-body {
-  background: transparent;
-}
 .fcr-video-window-dialog-wrapper {
   display: flex;
   flex-direction: column;
@@ -10,6 +6,7 @@ body {
   box-sizing: border-box;
   overflow: hidden;
 }
+
 .fcr-video-window-dialog-wrapper.electron {
   border: none !important;
   box-shadow: none !important;