fcr-ui-scene 3.4.1 → 3.4.2

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

@@ -86,12 +86,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 +115,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 +152,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 +184,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 +291,7 @@ var StateBarStore = exports["default"] = /*#__PURE__*/function () {
       _classPrivateFieldSet(_K, this, v);
     }
   }, {
-    key: "layoutSize",
+    key: "cloudRecordingState",
     get: function get() {
       return _classPrivateFieldGet(_L, this);
     },
@@ -286,29 +299,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 +344,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 +402,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 +425,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 +434,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 +497,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 +529,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 +570,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 +582,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;

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

@@ -1,10 +1,37 @@
 import { UIModule } from '../../base';
-import { UIAction } from '../../utilities/constant';
-import { StoreConfig } from '../../type';
+import { FcrUIAction } from '../../utilities/constant';
+import { FcrUIEventProvider } from '../../providers/event-provider';
+import { FcrUICurrentRoomControlProvider, FcrUIMainRoomControlProvider, FcrUIWaitingRoomControlProvider } from '../../providers/room-provider';
+import { FcrUIPrivilegeProvider } from '../../providers/privilege-provider';
+import { FcrUIDeviceProvider } from '../../providers/device-provider';
+import { FcrUIDeviceStreamProvider } from '../../providers/device-stream-provider';
+import { FcrUISharedSpeakerSpotlightDataSource } from '../../shared-data-source/speaker-spotlight';
+import { FcrUISharedPinDataSource } from '../../shared-data-source/pin-data';
+import { FcrUISharedLayoutDataSource } from '../../shared-data-source/layout-data';
+import { FcrUISharedInterpreterDataSource } from '../../shared-data-source/interpreter';
+import { FcrUISharedSettingDataSource } from '../../shared-data-source/setting';
+import { FcrUIChatProvider } from '../../providers/chat-provider';
+import { FcrUIVideoWindowDataSource } from '../../shared-data-source/video-window';
+import { FcrUIRemoteVideoRenderProvider } from '../../providers/renderer-provider';
 export declare class VideoWindowUIModule extends UIModule {
-    private _store;
-    constructor(args: StoreConfig);
+    private _store?;
+    eventProvider?: FcrUIEventProvider;
+    deviceProvider?: FcrUIDeviceProvider;
+    currentRoomControlProvider?: FcrUICurrentRoomControlProvider;
+    mainRoomControlProvider?: FcrUIMainRoomControlProvider;
+    waitingRoomControlProvider?: FcrUIWaitingRoomControlProvider;
+    privilegeProvider?: FcrUIPrivilegeProvider;
+    deviceStreamProvider?: FcrUIDeviceStreamProvider;
+    sharedSpeakerSpotlightDataSource?: FcrUISharedSpeakerSpotlightDataSource;
+    sharedPinDataSource?: FcrUISharedPinDataSource;
+    sharedLayoutDataSource?: FcrUISharedLayoutDataSource;
+    sharedInterpreterDataSource?: FcrUISharedInterpreterDataSource;
+    sharedSettingDataSource?: FcrUISharedSettingDataSource;
+    chatProvider?: FcrUIChatProvider;
+    sharedVideoWindowDataSource?: FcrUIVideoWindowDataSource;
+    remoteRenderProvider?: FcrUIRemoteVideoRenderProvider;
+    onNodeWillActive(): void;
+    onNodeWillInactive(): void;
     getComponent(): import("react/jsx-runtime").JSX.Element;
-    onUnload(): void;
-    onUiEvent(event: UIAction, payload: any): void;
+    onUiEvent(event: FcrUIAction, payload: any): void;
 }

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

@@ -26,24 +26,53 @@ var _base = require("../../base");
 var _store = _interopRequireWildcard(require("./store"));
 var _view = require("./view");
 var _constant = require("../../utilities/constant");
+var _type = require("./type");
+var _env = require("agora-foundation/lib/utilities/env");
 var _jsxRuntime = require("react/jsx-runtime");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
 function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2["default"])(o), (0, _possibleConstructorReturn2["default"])(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2["default"])(t).constructor) : o.apply(t, e)); }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 var VideoWindowUIModule = exports.VideoWindowUIModule = /*#__PURE__*/function (_UIModule) {
-  function VideoWindowUIModule(args) {
-    var _this;
+  function VideoWindowUIModule() {
     (0, _classCallCheck2["default"])(this, VideoWindowUIModule);
-    _this = _callSuper(this, VideoWindowUIModule);
-    _this._store = new _store["default"](args);
-    args.uiEventStore.addObserver({
-      onEvent: _this.onUiEvent.bind(_this)
-    });
-    return _this;
+    return _callSuper(this, VideoWindowUIModule, arguments);
   }
   (0, _inherits2["default"])(VideoWindowUIModule, _UIModule);
   return (0, _createClass2["default"])(VideoWindowUIModule, [{
+    key: "onNodeWillActive",
+    value: function onNodeWillActive() {
+      var _this$currentRoomCont, _this$currentRoomCont2;
+      this.eventProvider = this.eventProvider;
+      var userControl = (_this$currentRoomCont = this.currentRoomControlProvider) === null || _this$currentRoomCont === void 0 || (_this$currentRoomCont = _this$currentRoomCont.currentRoomControl) === null || _this$currentRoomCont === void 0 ? void 0 : _this$currentRoomCont.getUserControl();
+      var streamControl = (_this$currentRoomCont2 = this.currentRoomControlProvider) === null || _this$currentRoomCont2 === void 0 || (_this$currentRoomCont2 = _this$currentRoomCont2.currentRoomControl) === null || _this$currentRoomCont2 === void 0 ? void 0 : _this$currentRoomCont2.getStreamControl();
+      var securityStore = this.privilegeProvider;
+      this._store = new _store["default"]({
+        uiEventStore: this.eventProvider,
+        userControl: userControl,
+        streamControl: streamControl,
+        securityStore: securityStore,
+        deviceStore: this.deviceProvider,
+        deviceStreamStore: this.deviceStreamProvider,
+        sharedSpeakerSpotlightDataSource: this.sharedSpeakerSpotlightDataSource,
+        sharedPinDataSource: this.sharedPinDataSource,
+        sharedLayoutDataSource: this.sharedLayoutDataSource,
+        sharedInterpreterDataSource: this.sharedInterpreterDataSource,
+        sharedSettingDataSource: this.sharedSettingDataSource,
+        chatProvider: this.chatProvider,
+        sharedVideoWindowDataSource: this.sharedVideoWindowDataSource,
+        remoteRenderProvider: this.remoteRenderProvider
+      });
+      this.eventProvider.addObserver({
+        onEvent: this.onUiEvent.bind(this)
+      });
+    }
+  }, {
+    key: "onNodeWillInactive",
+    value: function onNodeWillInactive() {
+      this._store.release();
+    }
+  }, {
     key: "getComponent",
     value: function getComponent() {
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(_store.StoreContext.Provider, {
@@ -51,21 +80,40 @@ var VideoWindowUIModule = exports.VideoWindowUIModule = /*#__PURE__*/function (_
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_view.View, {})
       });
     }
-  }, {
-    key: "onUnload",
-    value: function onUnload() {
-      this._store.release();
-    }
   }, {
     key: "onUiEvent",
     value: function onUiEvent(event, payload) {
+      var _this$_store;
       switch (event) {
-        case _constant.UIAction.STOP_SHARE_SCREEN:
+        case _constant.FcrUIAction.STOP_SHARE_SCREEN:
           this._store.closeVideoWindow();
           break;
-        case _constant.UIAction.CLOSE_VIDEO_WINDOW:
+        case _constant.FcrUIAction.CLOSE_VIDEO_WINDOW:
           this._store.closeVideoWindow();
           break;
+        case _constant.FcrUIAction.SET_CURRENT_SHARE_SCREEN:
+          var _ref = payload,
+            id = _ref.id,
+            type = _ref.type,
+            bounds = _ref.bounds;
+          (0, _env.isElectron)() && ((_this$_store = this._store) === null || _this$_store === void 0 ? void 0 : _this$_store.getCurrentDisplayBounds(id, type, bounds));
+          break;
+        case _constant.FcrUIAction.VIDEO_WINDOW_RESIZE:
+          var _ref2 = payload,
+            width = _ref2.width,
+            height = _ref2.height;
+          this._store.videoWindowCurrentHeight = height;
+          this._store.videoWindowCurrentWidth = width;
+          break;
+        case _constant.FcrUIAction.FOLD_LIST_CHANGED:
+          this._store.foldList = payload || [];
+          // 没有远端可以看了，如果当前在middle模式，切换到small模式
+          if (!this._store.shouldHaveMiddleView && this._store.videoWindowPreviewType === _type.FcrVideoWindowPreviewType.MIDDLE) {
+            this._store.setVideoWindowPreviewType(_type.FcrVideoWindowPreviewType.SMALL);
+          } else {
+            this._store.handleFoldListChanged();
+          }
+          break;
       }
     }
   }]);

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

@@ -17,6 +17,7 @@
 }
 .fcr-video-window-members .fcr-video-window-members-item {
   width: 100%;
+  min-height: 144px;
   overflow: hidden;
   flex: 1;
   box-sizing: border-box;