fcr-ui-scene 3.1.0 → 3.2.0

package/lib/modules/layout/type.d.ts

@@ -1,4 +1,5 @@
-import { FcrUserRole, FcrRoomConnectorType, FcrVideoSourceType } from 'agora-edu-core/lib/type';
+import { FcrRoomConnectorType, FcrVideoSourceType } from 'agora-edu-core';
+import { FcrUserRole } from 'agora-edu-core/lib/type';
 export declare enum FcrUIVideoWindowLayoutType {
     /** Show a carousel on top and a big video on the rest of the screen. */
     Speaker = "speaker",

package/lib/modules/layout/video-window-datasource.d.ts

@@ -1,6 +1,9 @@
 import { FcrUIVideoWindowData, FcrUIVideoWindowFoldSortingPriority, FcrUIVideoWindowLayoutType, FcrUIVideoWindowMainSortingPriority, FcrUIWindowType } from './type';
-import { FcrRoomConnectorType, FcrStreamInfo, FcrUserInfo, FcrUserRole } from 'agora-edu-core/lib/type';
-import { AgoraRtcVideoSourceType } from 'agora-rte-sdk/lib/core/rtc/type';
+import { FcrStreamInfo, FcrUserInfo, FcrUserRole } from 'agora-edu-core/lib/type';
+import { FcrRoomConnectorType, FcrVideoSourceType } from 'agora-edu-core';
+type FcrStreamUIData = Omit<FcrStreamInfo, 'owner'> & {
+    owner: FcrUserInfo;
+};
 export declare class FcrUIVideoWindowDataImpl implements FcrUIVideoWindowData {
     private _placement;
     private _isMySelf;
@@ -28,18 +31,18 @@ export declare class FcrUIVideoWindowDataImpl implements FcrUIVideoWindowData {
     get userId(): string;
     get userName(): string;
     get ownerRoleType(): FcrUserRole;
-    get videoSourceType(): AgoraRtcVideoSourceType;
+    get videoSourceType(): FcrVideoSourceType;
     get isMySelf(): boolean;
     get sortingPriority(): FcrUIVideoWindowMainSortingPriority | FcrUIVideoWindowFoldSortingPriority;
     constructor(type: FcrUIWindowType, { videoStream, audioStream, boardUserInfo, }: {
-        videoStream?: FcrStreamInfo;
-        audioStream?: FcrStreamInfo;
+        videoStream?: FcrStreamUIData;
+        audioStream?: FcrStreamUIData;
         boardUserInfo?: FcrUserInfo;
     }, _placement: 'main-list' | 'fold-list', _isMySelf: boolean, layoutType: FcrUIVideoWindowLayoutType | undefined, spotlightEnabled: boolean, canEdit?: boolean);
     setLayoutType(layoutType: FcrUIVideoWindowLayoutType): void;
-    setVideoStream(videoStream: FcrStreamInfo | undefined): void;
+    setVideoStream(videoStream: FcrStreamUIData | undefined): void;
     setVideoStreamOwnerInfo(userInfo: FcrUserInfo): void;
-    setAudioStream(audioStream: FcrStreamInfo | undefined): void;
+    setAudioStream(audioStream: FcrStreamUIData | undefined): void;
     setAudioStreamOwnerInfo(userInfo: FcrUserInfo): void;
     setPin(pin: boolean): void;
     setSpotlightEnabled(enabled: boolean): void;
@@ -63,6 +66,7 @@ export declare class FcrUIVideoWindowDataSource {
     private _spotlightPool;
     accessor spotlightEnabled: boolean;
     accessor layoutType: FcrUIVideoWindowLayoutType;
+    accessor manualLayout: FcrUIVideoWindowLayoutType;
     accessor pinLimitedCount: number;
     accessor mainListLimitedCount: number;
     accessor foldListLimitedCount: number;
@@ -70,7 +74,7 @@ export declare class FcrUIVideoWindowDataSource {
     accessor foldList: FcrUIVideoWindowDataImpl[];
     constructor();
     setSpotlightEnabled(enabled: boolean): void;
-    setLayout(layout: FcrUIVideoWindowLayoutType): void;
+    setLayout(layout: FcrUIVideoWindowLayoutType, manual?: boolean): void;
     onSpotlightRemoved(streamId: string): void;
     resetList(): void;
     addBoard(userInfo: FcrUserInfo, isMySelf: boolean, canEdit?: boolean): void;
@@ -88,6 +92,7 @@ export declare class FcrUIVideoWindowDataSource {
     clearSpeakerSpotlight(): void;
     addObserver(observer: Partial<FcrUIVideoWindowDataSourceObserver>): void;
     removeObserver(observer: Partial<FcrUIVideoWindowDataSourceObserver>): void;
+    private copyStreamInfo;
     private _syncHasScreenSharing;
     private _insertByPriority;
     private _insertBeginningByPriority;
@@ -117,3 +122,4 @@ export declare class FcrUISpeakerSpotlightPool {
         onRemoved: (streamId: string) => void;
     }): void;
 }
+export {};

package/lib/modules/layout/video-window-datasource.js

@@ -19,6 +19,8 @@ require("core-js/modules/es.object.get-own-property-descriptor.js");
 require("core-js/modules/es.regexp.exec.js");
 require("core-js/modules/es.regexp.test.js");
 require("core-js/modules/es.regexp.to-string.js");
+require("core-js/modules/esnext.function.metadata.js");
+require("core-js/modules/esnext.symbol.metadata.js");
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
@@ -39,13 +41,40 @@ require("core-js/modules/es.array.unshift.js");
 require("core-js/modules/es.date.now.js");
 require("core-js/modules/es.function.bind.js");
 require("core-js/modules/es.map.js");
+require("core-js/modules/es.object.assign.js");
 require("core-js/modules/es.object.to-string.js");
 require("core-js/modules/es.string.iterator.js");
 require("core-js/modules/es.weak-map.js");
+require("core-js/modules/esnext.async-iterator.filter.js");
+require("core-js/modules/esnext.async-iterator.find.js");
+require("core-js/modules/esnext.async-iterator.for-each.js");
+require("core-js/modules/esnext.async-iterator.some.js");
+require("core-js/modules/esnext.iterator.constructor.js");
+require("core-js/modules/esnext.iterator.filter.js");
+require("core-js/modules/esnext.iterator.find.js");
+require("core-js/modules/esnext.iterator.for-each.js");
+require("core-js/modules/esnext.iterator.some.js");
+require("core-js/modules/esnext.map.delete-all.js");
+require("core-js/modules/esnext.map.emplace.js");
+require("core-js/modules/esnext.map.every.js");
+require("core-js/modules/esnext.map.filter.js");
+require("core-js/modules/esnext.map.find.js");
+require("core-js/modules/esnext.map.find-key.js");
+require("core-js/modules/esnext.map.includes.js");
+require("core-js/modules/esnext.map.key-of.js");
+require("core-js/modules/esnext.map.map-keys.js");
+require("core-js/modules/esnext.map.map-values.js");
+require("core-js/modules/esnext.map.merge.js");
+require("core-js/modules/esnext.map.reduce.js");
+require("core-js/modules/esnext.map.some.js");
+require("core-js/modules/esnext.map.update.js");
+require("core-js/modules/esnext.weak-map.delete-all.js");
+require("core-js/modules/esnext.weak-map.emplace.js");
 require("core-js/modules/web.dom-collections.for-each.js");
 require("core-js/modules/web.dom-collections.iterator.js");
 require("core-js/modules/web.timers.js");
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _readOnlyError2 = _interopRequireDefault(require("@babel/runtime/helpers/readOnlyError"));
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
@@ -53,15 +82,14 @@ var _observable = require("agora-foundation/lib/utilities/observable");
 var _type = require("./type");
 var _mobx = require("mobx");
 var _type2 = require("agora-edu-core/lib/type");
-var _type3 = require("agora-rte-sdk/lib/core/rtc/type");
-var _type4 = require("agora-rte-sdk/lib/core/scene/type");
+var _agoraEduCore = require("agora-edu-core");
 var _FcrUIVideoWindowDataImpl, _FcrUIVideoWindowDataSource;
-var _initProto, _init__videoStream, _init__audioStream, _init__spotlightEnabled, _init__isSpeakerSpotlight, _init__boardCanEdit, _init_isPin, _init_hasScreenSharing, _setVideoStreamDecs, _setVideoStreamOwnerInfoDecs, _setAudioStreamDecs, _setAudioStreamOwnerInfoDecs, _setPinDecs, _setSpotlightEnabledDecs, _setSpeakerSpotlightDecs, _setHasScreenSharingDecs, _setBoardCanEditDecs, _ref, _initProto2, _init_spotlightEnabled, _init_layoutType, _init_pinLimitedCount, _init_mainListLimitedCount, _init_foldListLimitedCount, _init_mainList, _init_foldList, _setSpotlightEnabledDecs2, _setLayoutDecs, _onSpotlightRemovedDecs, _resetListDecs, _addBoardDecs, _updateBoardDecs, _removeBoardDecs, _mergePstnStreamOrInsertNewDataDecs, _addDecs, _updateDecs, _deleteDecs, _addPinDecs, _removePinDecs, _setSpeakerSpotlightDecs2, _toggleMainStreamDecs, _insertBeginningByPriorityDecs, _insertEndByPriorityDecs, _findInsertBeginningIndexDecs, _findInsertEndIndexDecs, _insertBoardDecs, _insertNewDataDecs, _ref3;
-function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it["return"] != null) it["return"](); } finally { if (didErr) throw err; } } }; }
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
-function _classPrivateFieldInitSpec(obj, privateMap, value) { _checkPrivateRedeclaration(obj, privateMap); privateMap.set(obj, value); }
-function _checkPrivateRedeclaration(obj, privateCollection) { if (privateCollection.has(obj)) { throw new TypeError("Cannot initialize the same private elements twice on an object"); } }
+var _initProto, _init__videoStream, _init__audioStream, _init__spotlightEnabled, _init__isSpeakerSpotlight, _init__boardCanEdit, _init_isPin, _init_hasScreenSharing, _setVideoStreamDecs, _setVideoStreamOwnerInfoDecs, _setAudioStreamDecs, _setAudioStreamOwnerInfoDecs, _setPinDecs, _setSpotlightEnabledDecs, _setSpeakerSpotlightDecs, _setHasScreenSharingDecs, _setBoardCanEditDecs, _ref, _initProto2, _init_spotlightEnabled, _init_layoutType, _init_manualLayout, _init_pinLimitedCount, _init_mainListLimitedCount, _init_foldListLimitedCount, _init_mainList, _init_foldList, _setSpotlightEnabledDecs2, _setLayoutDecs, _onSpotlightRemovedDecs, _resetListDecs, _addBoardDecs, _updateBoardDecs, _removeBoardDecs, _mergePstnStreamOrInsertNewDataDecs, _addDecs, _updateDecs, _deleteDecs, _addPinDecs, _removePinDecs, _setSpeakerSpotlightDecs2, _toggleMainStreamDecs, _insertBeginningByPriorityDecs, _insertEndByPriorityDecs, _findInsertBeginningIndexDecs, _findInsertEndIndexDecs, _insertBoardDecs, _insertNewDataDecs, _ref3;
+function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t["return"] || t["return"](); } finally { if (u) throw o; } } }; }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+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; }
 function _classPrivateFieldGet(s, a) { return s.get(_assertClassBrand(s, a)); }
 function _assertClassBrand(e, t, n) { if ("function" == typeof e ? e === t : e.has(t)) return arguments.length < 3 ? t : n; throw new TypeError("Private element is not present on this object"); }
@@ -189,20 +217,20 @@ var FcrUIVideoWindowDataImpl = exports.FcrUIVideoWindowDataImpl = /*#__PURE__*/f
     key: "audioStreamConnectorType",
     get: function get() {
       var _this$_audioStream2;
-      return ((_this$_audioStream2 = this._audioStream) === null || _this$_audioStream2 === void 0 ? void 0 : _this$_audioStream2.connectorType) || _type2.FcrRoomConnectorType.NONE;
+      return ((_this$_audioStream2 = this._audioStream) === null || _this$_audioStream2 === void 0 ? void 0 : _this$_audioStream2.connectorType) || _agoraEduCore.FcrRoomConnectorType.NONE;
     }
   }, {
     key: "videoStreamConnectorType",
     get: function get() {
       var _this$_videoStream2;
-      return ((_this$_videoStream2 = this._videoStream) === null || _this$_videoStream2 === void 0 ? void 0 : _this$_videoStream2.connectorType) || _type2.FcrRoomConnectorType.NONE;
+      return ((_this$_videoStream2 = this._videoStream) === null || _this$_videoStream2 === void 0 ? void 0 : _this$_videoStream2.connectorType) || _agoraEduCore.FcrRoomConnectorType.NONE;
     }
   }, {
     key: "hasMicrophoneAudioStream",
     get: function get() {
-      if (this.audioStreamConnectorType === _type2.FcrRoomConnectorType.NONE) {
+      if (this.audioStreamConnectorType === _agoraEduCore.FcrRoomConnectorType.NONE) {
         var _this$_videoStream3;
-        return ((_this$_videoStream3 = this._videoStream) === null || _this$_videoStream3 === void 0 ? void 0 : _this$_videoStream3.audioSourceState) === _type3.AgoraRtcMediaSourceState.STARTED && (this._videoStream.streamType === _type4.AgoraRteMediaStreamType.BOTH || this._videoStream.streamType === _type4.AgoraRteMediaStreamType.AUDIO);
+        return ((_this$_videoStream3 = this._videoStream) === null || _this$_videoStream3 === void 0 ? void 0 : _this$_videoStream3.audioSourceState) === _agoraEduCore.FcrMediaSourceState.STARTED && (this._videoStream.streamType === _agoraEduCore.FcrStreamType.BOTH || this._videoStream.streamType === _agoraEduCore.FcrStreamType.AUDIO);
       } else {
         return true;
       }
@@ -210,9 +238,9 @@ var FcrUIVideoWindowDataImpl = exports.FcrUIVideoWindowDataImpl = /*#__PURE__*/f
   }, {
     key: "phoneMicEnabled",
     get: function get() {
-      if (this.audioStreamConnectorType === _type2.FcrRoomConnectorType.PSTN) {
+      if (this.audioStreamConnectorType === _agoraEduCore.FcrRoomConnectorType.PSTN) {
         var _this$_audioStream3, _this$_videoStream4;
-        return ((_this$_audioStream3 = this._audioStream) === null || _this$_audioStream3 === void 0 ? void 0 : _this$_audioStream3.audioSourceState) === _type3.AgoraRtcMediaSourceState.STARTED || ((_this$_videoStream4 = this._videoStream) === null || _this$_videoStream4 === void 0 ? void 0 : _this$_videoStream4.streamType) === _type4.AgoraRteMediaStreamType.BOTH;
+        return ((_this$_audioStream3 = this._audioStream) === null || _this$_audioStream3 === void 0 ? void 0 : _this$_audioStream3.audioSourceState) === _agoraEduCore.FcrMediaSourceState.STARTED || ((_this$_videoStream4 = this._videoStream) === null || _this$_videoStream4 === void 0 ? void 0 : _this$_videoStream4.streamType) === _agoraEduCore.FcrStreamType.BOTH;
       } else {
         return false;
       }
@@ -220,38 +248,38 @@ var FcrUIVideoWindowDataImpl = exports.FcrUIVideoWindowDataImpl = /*#__PURE__*/f
   }, {
     key: "hasVideoStream",
     get: function get() {
-      var _this$_videoStream5;
-      return ((_this$_videoStream5 = this._videoStream) === null || _this$_videoStream5 === void 0 ? void 0 : _this$_videoStream5.videoSourceState) === _type3.AgoraRtcMediaSourceState.STARTED && (this._videoStream.streamType === _type4.AgoraRteMediaStreamType.BOTH || this._videoStream.streamType === _type4.AgoraRteMediaStreamType.VIDEO);
+      var _this$_videoStream5, _this$_videoStream6, _this$_videoStream7;
+      return ((_this$_videoStream5 = this._videoStream) === null || _this$_videoStream5 === void 0 ? void 0 : _this$_videoStream5.videoSourceState) === _agoraEduCore.FcrMediaSourceState.STARTED && (((_this$_videoStream6 = this._videoStream) === null || _this$_videoStream6 === void 0 ? void 0 : _this$_videoStream6.streamType) === _agoraEduCore.FcrStreamType.BOTH || ((_this$_videoStream7 = this._videoStream) === null || _this$_videoStream7 === void 0 ? void 0 : _this$_videoStream7.streamType) === _agoraEduCore.FcrStreamType.VIDEO);
     }
   }, {
     key: "hasLoopbackAudioStream",
     get: function get() {
-      var _this$_videoStream6;
-      return ((_this$_videoStream6 = this._videoStream) === null || _this$_videoStream6 === void 0 ? void 0 : _this$_videoStream6.audioSourceType) === _type3.AgoraRtcAudioSourceType.LOOPBACK;
+      var _this$_videoStream8;
+      return ((_this$_videoStream8 = this._videoStream) === null || _this$_videoStream8 === void 0 ? void 0 : _this$_videoStream8.audioSourceType) === _agoraEduCore.FcrAudioSourceType.LOOPBACK;
     }
   }, {
     key: "userId",
     get: function get() {
-      var _this$_videoStream7, _this$_audioStream4, _this$_boardUserInfo;
-      return ((_this$_videoStream7 = this._videoStream) === null || _this$_videoStream7 === void 0 ? void 0 : _this$_videoStream7.owner.userId) || ((_this$_audioStream4 = this._audioStream) === null || _this$_audioStream4 === void 0 ? void 0 : _this$_audioStream4.owner.userId) || ((_this$_boardUserInfo = this._boardUserInfo) === null || _this$_boardUserInfo === void 0 ? void 0 : _this$_boardUserInfo.userId) || '';
+      var _this$_videoStream9, _this$_audioStream4, _this$_boardUserInfo;
+      return ((_this$_videoStream9 = this._videoStream) === null || _this$_videoStream9 === void 0 ? void 0 : _this$_videoStream9.owner.userId) || ((_this$_audioStream4 = this._audioStream) === null || _this$_audioStream4 === void 0 ? void 0 : _this$_audioStream4.owner.userId) || ((_this$_boardUserInfo = this._boardUserInfo) === null || _this$_boardUserInfo === void 0 ? void 0 : _this$_boardUserInfo.userId) || '';
     }
   }, {
     key: "userName",
     get: function get() {
-      var _this$_videoStream8, _this$_audioStream5, _this$_boardUserInfo2;
-      return ((_this$_videoStream8 = this._videoStream) === null || _this$_videoStream8 === void 0 ? void 0 : _this$_videoStream8.owner.userName) || ((_this$_audioStream5 = this._audioStream) === null || _this$_audioStream5 === void 0 ? void 0 : _this$_audioStream5.owner.userName) || ((_this$_boardUserInfo2 = this._boardUserInfo) === null || _this$_boardUserInfo2 === void 0 ? void 0 : _this$_boardUserInfo2.userName) || '';
+      var _this$_videoStream10, _this$_audioStream5, _this$_boardUserInfo2;
+      return ((_this$_videoStream10 = this._videoStream) === null || _this$_videoStream10 === void 0 ? void 0 : _this$_videoStream10.owner.userName) || ((_this$_audioStream5 = this._audioStream) === null || _this$_audioStream5 === void 0 ? void 0 : _this$_audioStream5.owner.userName) || ((_this$_boardUserInfo2 = this._boardUserInfo) === null || _this$_boardUserInfo2 === void 0 ? void 0 : _this$_boardUserInfo2.userName) || '';
     }
   }, {
     key: "ownerRoleType",
     get: function get() {
-      var _this$_videoStream9, _this$_audioStream6, _this$_boardUserInfo3;
-      return ((_this$_videoStream9 = this._videoStream) === null || _this$_videoStream9 === void 0 ? void 0 : _this$_videoStream9.owner.userRole) || ((_this$_audioStream6 = this._audioStream) === null || _this$_audioStream6 === void 0 ? void 0 : _this$_audioStream6.owner.userRole) || ((_this$_boardUserInfo3 = this._boardUserInfo) === null || _this$_boardUserInfo3 === void 0 ? void 0 : _this$_boardUserInfo3.userRole) || _type2.FcrUserRole.AUDIENCE;
+      var _this$_videoStream11, _this$_audioStream6, _this$_boardUserInfo3;
+      return ((_this$_videoStream11 = this._videoStream) === null || _this$_videoStream11 === void 0 ? void 0 : _this$_videoStream11.owner.userRole) || ((_this$_audioStream6 = this._audioStream) === null || _this$_audioStream6 === void 0 ? void 0 : _this$_audioStream6.owner.userRole) || ((_this$_boardUserInfo3 = this._boardUserInfo) === null || _this$_boardUserInfo3 === void 0 ? void 0 : _this$_boardUserInfo3.userRole) || _type2.FcrUserRole.AUDIENCE;
     }
   }, {
     key: "videoSourceType",
     get: function get() {
-      var _this$_videoStream10;
-      return ((_this$_videoStream10 = this._videoStream) === null || _this$_videoStream10 === void 0 ? void 0 : _this$_videoStream10.videoSourceType) || _type3.AgoraRtcVideoSourceType.CAMERA;
+      var _this$_videoStream12;
+      return ((_this$_videoStream12 = this._videoStream) === null || _this$_videoStream12 === void 0 ? void 0 : _this$_videoStream12.videoSourceType) || _agoraEduCore.FcrVideoSourceType.CAMERA;
     }
   }, {
     key: "isMySelf",
@@ -262,11 +290,11 @@ var FcrUIVideoWindowDataImpl = exports.FcrUIVideoWindowDataImpl = /*#__PURE__*/f
     key: "sortingPriority",
     get: function get() {
       if (this._placement === 'main-list') {
-        var _this$_videoStream11;
+        var _this$_videoStream13;
         if (this.type === _type.FcrUIWindowType.BOARD && this._boardCanEdit) {
           return _type.FcrUIVideoWindowMainSortingPriority.HIGHEST;
         }
-        if (this.isPin || ((_this$_videoStream11 = this._videoStream) === null || _this$_videoStream11 === void 0 ? void 0 : _this$_videoStream11.videoSourceType) === _type3.AgoraRtcVideoSourceType.SCREEN || this.type === _type.FcrUIWindowType.BOARD) {
+        if (this.isPin || ((_this$_videoStream13 = this._videoStream) === null || _this$_videoStream13 === void 0 ? void 0 : _this$_videoStream13.videoSourceType) === _agoraEduCore.FcrVideoSourceType.SCREEN || this.type === _type.FcrUIWindowType.BOARD) {
           return _type.FcrUIVideoWindowMainSortingPriority.FOCUS;
         }
         if (this.isSpeakerSpotlight && this._layoutType === _type.FcrUIVideoWindowLayoutType.Speaker) {
@@ -294,14 +322,14 @@ var FcrUIVideoWindowDataImpl = exports.FcrUIVideoWindowDataImpl = /*#__PURE__*/f
           return _type.FcrUIVideoWindowMainSortingPriority.MICROPHONE_OPEN;
         }
       } else {
-        var _this$_videoStream12;
+        var _this$_videoStream14;
         if (this.isSpeakerSpotlight) {
           return _type.FcrUIVideoWindowFoldSortingPriority.FOCUS;
         }
         if (this.isPin) {
           return _type.FcrUIVideoWindowFoldSortingPriority.PIN;
         }
-        if (((_this$_videoStream12 = this._videoStream) === null || _this$_videoStream12 === void 0 ? void 0 : _this$_videoStream12.videoSourceType) === _type3.AgoraRtcVideoSourceType.SCREEN) {
+        if (((_this$_videoStream14 = this._videoStream) === null || _this$_videoStream14 === void 0 ? void 0 : _this$_videoStream14.videoSourceType) === _agoraEduCore.FcrVideoSourceType.SCREEN) {
           return _type.FcrUIVideoWindowFoldSortingPriority.SCREEN_SHARING_STREAM;
         }
         if (this.hasScreenSharing) {
@@ -401,6 +429,7 @@ var _D2 = /*#__PURE__*/new WeakMap();
 var _E2 = /*#__PURE__*/new WeakMap();
 var _F2 = /*#__PURE__*/new WeakMap();
 var _G2 = /*#__PURE__*/new WeakMap();
+var _H = /*#__PURE__*/new WeakMap();
 _ref3 = (_setSpotlightEnabledDecs2 = [_mobx.action, _mobx.action.bound], _setLayoutDecs = [_mobx.action, _mobx.action.bound], _onSpotlightRemovedDecs = [_mobx.action, _mobx.action.bound], _resetListDecs = [_mobx.action, _mobx.action.bound], _addBoardDecs = [_mobx.action, _mobx.action.bound], _updateBoardDecs = [_mobx.action, _mobx.action.bound], _removeBoardDecs = [_mobx.action, _mobx.action.bound], _mergePstnStreamOrInsertNewDataDecs = [_mobx.action, _mobx.action.bound], _addDecs = [_mobx.action, _mobx.action.bound], _updateDecs = [_mobx.action, _mobx.action.bound], _deleteDecs = [_mobx.action, _mobx.action.bound], _addPinDecs = [_mobx.action, _mobx.action.bound], _removePinDecs = [_mobx.action, _mobx.action.bound], _setSpeakerSpotlightDecs2 = [_mobx.action, _mobx.action.bound], _toggleMainStreamDecs = [_mobx.action, _mobx.action.bound], _insertBeginningByPriorityDecs = [_mobx.action, _mobx.action.bound], _insertEndByPriorityDecs = [_mobx.action, _mobx.action.bound], _findInsertBeginningIndexDecs = [_mobx.action, _mobx.action.bound], _findInsertEndIndexDecs = [_mobx.action, _mobx.action.bound], _insertBoardDecs = [_mobx.action, _mobx.action.bound], _insertNewDataDecs = [_mobx.action, _mobx.action.bound], "_observer");
 var FcrUIVideoWindowDataSource = exports.FcrUIVideoWindowDataSource = /*#__PURE__*/function () {
   function FcrUIVideoWindowDataSource() {
@@ -409,11 +438,12 @@ var FcrUIVideoWindowDataSource = exports.FcrUIVideoWindowDataSource = /*#__PURE_
     (0, _defineProperty2["default"])(this, "_spotlightPool", new FcrUISpeakerSpotlightPool());
     _classPrivateFieldInitSpec(this, _A2, _init_spotlightEnabled(this, true));
     _classPrivateFieldInitSpec(this, _B2, _init_layoutType(this, _type.FcrUIVideoWindowLayoutType.Gallery));
-    _classPrivateFieldInitSpec(this, _C2, _init_pinLimitedCount(this, 1));
-    _classPrivateFieldInitSpec(this, _D2, _init_mainListLimitedCount(this, 255));
-    _classPrivateFieldInitSpec(this, _E2, _init_foldListLimitedCount(this, 255));
-    _classPrivateFieldInitSpec(this, _F2, _init_mainList(this, []));
-    _classPrivateFieldInitSpec(this, _G2, _init_foldList(this, []));
+    _classPrivateFieldInitSpec(this, _C2, _init_manualLayout(this, _type.FcrUIVideoWindowLayoutType.Gallery));
+    _classPrivateFieldInitSpec(this, _D2, _init_pinLimitedCount(this, 1));
+    _classPrivateFieldInitSpec(this, _E2, _init_mainListLimitedCount(this, 255));
+    _classPrivateFieldInitSpec(this, _F2, _init_foldListLimitedCount(this, 255));
+    _classPrivateFieldInitSpec(this, _G2, _init_mainList(this, []));
+    _classPrivateFieldInitSpec(this, _H, _init_foldList(this, []));
     this._spotlightPool.addObserver({
       onRemoved: this.onSpotlightRemoved
     });
@@ -435,7 +465,7 @@ var FcrUIVideoWindowDataSource = exports.FcrUIVideoWindowDataSource = /*#__PURE_
       _classPrivateFieldSet(_B2, this, v);
     }
   }, {
-    key: "pinLimitedCount",
+    key: "manualLayout",
     get: function get() {
       return _classPrivateFieldGet(_C2, this);
     },
@@ -443,7 +473,7 @@ var FcrUIVideoWindowDataSource = exports.FcrUIVideoWindowDataSource = /*#__PURE_
       _classPrivateFieldSet(_C2, this, v);
     }
   }, {
-    key: "mainListLimitedCount",
+    key: "pinLimitedCount",
     get: function get() {
       return _classPrivateFieldGet(_D2, this);
     },
@@ -451,7 +481,7 @@ var FcrUIVideoWindowDataSource = exports.FcrUIVideoWindowDataSource = /*#__PURE_
       _classPrivateFieldSet(_D2, this, v);
     }
   }, {
-    key: "foldListLimitedCount",
+    key: "mainListLimitedCount",
     get: function get() {
       return _classPrivateFieldGet(_E2, this);
     },
@@ -459,7 +489,7 @@ var FcrUIVideoWindowDataSource = exports.FcrUIVideoWindowDataSource = /*#__PURE_
       _classPrivateFieldSet(_E2, this, v);
     }
   }, {
-    key: "mainList",
+    key: "foldListLimitedCount",
     get: function get() {
       return _classPrivateFieldGet(_F2, this);
     },
@@ -467,13 +497,21 @@ var FcrUIVideoWindowDataSource = exports.FcrUIVideoWindowDataSource = /*#__PURE_
       _classPrivateFieldSet(_F2, this, v);
     }
   }, {
-    key: "foldList",
+    key: "mainList",
     get: function get() {
       return _classPrivateFieldGet(_G2, this);
     },
     set: function set(v) {
       _classPrivateFieldSet(_G2, this, v);
     }
+  }, {
+    key: "foldList",
+    get: function get() {
+      return _classPrivateFieldGet(_H, this);
+    },
+    set: function set(v) {
+      _classPrivateFieldSet(_H, this, v);
+    }
   }, {
     key: "setSpotlightEnabled",
     value: function setSpotlightEnabled(enabled) {
@@ -491,7 +529,10 @@ var FcrUIVideoWindowDataSource = exports.FcrUIVideoWindowDataSource = /*#__PURE_
     }
   }, {
     key: "setLayout",
-    value: function setLayout(layout) {
+    value: function setLayout(layout, manual) {
+      if (manual) {
+        this.manualLayout = layout;
+      }
       if (this.layoutType === _type.FcrUIVideoWindowLayoutType.Gallery && layout === _type.FcrUIVideoWindowLayoutType.Speaker && this.mainList.length < 2 || this.layoutType === layout) {
         return;
       }
@@ -573,7 +614,7 @@ var FcrUIVideoWindowDataSource = exports.FcrUIVideoWindowDataSource = /*#__PURE_
     key: "_mergePstnStreamOrInsertNewData",
     value: function _mergePstnStreamOrInsertNewData(stream, list, limitCount, isMySelf, placement) {
       var existedUserPstnStream = list.find(function (item) {
-        return item.userId === stream.owner.userId && item.audioStreamConnectorType === _type2.FcrRoomConnectorType.PSTN;
+        return item.userId === stream.owner.userId && item.audioStreamConnectorType === _agoraEduCore.FcrRoomConnectorType.PSTN;
       });
       if (existedUserPstnStream) {
         existedUserPstnStream.setVideoStream(stream);
@@ -585,10 +626,11 @@ var FcrUIVideoWindowDataSource = exports.FcrUIVideoWindowDataSource = /*#__PURE_
     key: "add",
     value: function add(stream, isMySelf) {
       var _this3 = this;
-      if (stream.connectorType === _type2.FcrRoomConnectorType.PSTN) {
+      var streamCopy = this.copyStreamInfo(stream);
+      if (streamCopy.connectorType === _agoraEduCore.FcrRoomConnectorType.PSTN) {
         var handlePSTNStreamAdded = function handlePSTNStreamAdded(stream, list, limitCount, isMySelf, placement) {
           var existedUserStream = list.find(function (item) {
-            return item.userId === stream.owner.userId && item.videoSourceType === _type3.AgoraRtcVideoSourceType.CAMERA;
+            return item.userId === stream.owner.userId && item.videoSourceType === _agoraEduCore.FcrVideoSourceType.CAMERA;
           });
           if (existedUserStream) {
             existedUserStream.setAudioStream(stream);
@@ -596,15 +638,15 @@ var FcrUIVideoWindowDataSource = exports.FcrUIVideoWindowDataSource = /*#__PURE_
             _this3._insertNewData(stream, list, limitCount, isMySelf, placement);
           }
         };
-        handlePSTNStreamAdded(stream, this.mainList, this.mainListLimitedCount, isMySelf, 'main-list');
-        handlePSTNStreamAdded(stream, this.foldList, this.foldListLimitedCount, isMySelf, 'fold-list');
+        handlePSTNStreamAdded(streamCopy, this.mainList, this.mainListLimitedCount, isMySelf, 'main-list');
+        handlePSTNStreamAdded(streamCopy, this.foldList, this.foldListLimitedCount, isMySelf, 'fold-list');
       } else {
-        this._mergePstnStreamOrInsertNewData(stream, this.mainList, this.mainListLimitedCount, isMySelf, 'main-list');
-        this._mergePstnStreamOrInsertNewData(stream, this.foldList, this.foldListLimitedCount, isMySelf, 'fold-list');
+        this._mergePstnStreamOrInsertNewData(streamCopy, this.mainList, this.mainListLimitedCount, isMySelf, 'main-list');
+        this._mergePstnStreamOrInsertNewData(streamCopy, this.foldList, this.foldListLimitedCount, isMySelf, 'fold-list');
       }
-      if (stream.videoSourceType === _type3.AgoraRtcVideoSourceType.SCREEN) {
-        this._syncHasScreenSharing(true, stream.owner.userId, this.mainList, this.mainListLimitedCount, 'main-list');
-        this._syncHasScreenSharing(true, stream.owner.userId, this.foldList, this.foldListLimitedCount, 'fold-list');
+      if (streamCopy.videoSourceType === _agoraEduCore.FcrVideoSourceType.SCREEN) {
+        this._syncHasScreenSharing(true, streamCopy.owner.userId, this.mainList, this.mainListLimitedCount, 'main-list');
+        this._syncHasScreenSharing(true, streamCopy.owner.userId, this.foldList, this.foldListLimitedCount, 'fold-list');
       }
     }
   }, {
@@ -614,13 +656,13 @@ var FcrUIVideoWindowDataSource = exports.FcrUIVideoWindowDataSource = /*#__PURE_
       var handleStreamInfoUpdated = function handleStreamInfoUpdated(stream, list, limitCount, placement) {
         var existedUserStream = list[_this4._findItemIndexWithWindowId(stream.streamId, list)];
         if (existedUserStream) {
-          if (param.connectorType === _type2.FcrRoomConnectorType.PSTN) {
+          if (param.connectorType === _agoraEduCore.FcrRoomConnectorType.PSTN) {
             existedUserStream.setAudioStream(stream);
           } else {
             existedUserStream.setVideoStream(stream);
           }
-          var _index = _this4._insertByPriority(existedUserStream, list, limitCount);
-          _this4._observer.notifyObservers(placement === 'main-list' ? 'onMainListUpdated' : 'onFoldListUpdated', _index);
+          var index = _this4._insertByPriority(existedUserStream, list, limitCount);
+          _this4._observer.notifyObservers(placement === 'main-list' ? 'onMainListUpdated' : 'onFoldListUpdated', index);
         }
       };
       var handleUserInfoUpdated = function handleUserInfoUpdated(user, list, limitCount, placement) {
@@ -638,8 +680,9 @@ var FcrUIVideoWindowDataSource = exports.FcrUIVideoWindowDataSource = /*#__PURE_
         });
       };
       if ('streamId' in param) {
-        handleStreamInfoUpdated(param, this.mainList, this.mainListLimitedCount, 'main-list');
-        handleStreamInfoUpdated(param, this.foldList, this.foldListLimitedCount, 'fold-list');
+        var streamCopy = this.copyStreamInfo(param);
+        handleStreamInfoUpdated(streamCopy, this.mainList, this.mainListLimitedCount, 'main-list');
+        handleStreamInfoUpdated(streamCopy, this.foldList, this.foldListLimitedCount, 'fold-list');
       } else {
         handleUserInfoUpdated(param, this.mainList, this.mainListLimitedCount, 'main-list');
         handleUserInfoUpdated(param, this.foldList, this.foldListLimitedCount, 'fold-list');
@@ -649,6 +692,7 @@ var FcrUIVideoWindowDataSource = exports.FcrUIVideoWindowDataSource = /*#__PURE_
     key: "delete",
     value: function _delete(stream) {
       var _this5 = this;
+      var streamCopy = this.copyStreamInfo(stream);
       var handlePSTNStreamDeleted = function handlePSTNStreamDeleted(stream, list, placement) {
         var index = _this5._findItemIndexWithAudioStreamId(stream.streamId, list);
         var existedUserStream = list[index];
@@ -662,9 +706,9 @@ var FcrUIVideoWindowDataSource = exports.FcrUIVideoWindowDataSource = /*#__PURE_
           }
         }
       };
-      if (stream.connectorType === _type2.FcrRoomConnectorType.PSTN) {
-        handlePSTNStreamDeleted(stream, this.mainList, 'main-list');
-        handlePSTNStreamDeleted(stream, this.foldList, 'fold-list');
+      if (stream.connectorType === _agoraEduCore.FcrRoomConnectorType.PSTN) {
+        handlePSTNStreamDeleted(streamCopy, this.mainList, 'main-list');
+        handlePSTNStreamDeleted(streamCopy, this.foldList, 'fold-list');
       } else {
         var handleVideoStreamDeleted = function handleVideoStreamDeleted(streamId, list, placement) {
           var existStreamIndex = list.findIndex(function (item) {
@@ -676,14 +720,14 @@ var FcrUIVideoWindowDataSource = exports.FcrUIVideoWindowDataSource = /*#__PURE_
           list.splice(existStreamIndex, 1);
           _this5._observer.notifyObservers(placement === 'main-list' ? 'onMainListRemoved' : 'onFoldListRemoved', existStreamIndex);
         };
-        handleVideoStreamDeleted(stream.streamId, this.mainList, 'main-list');
-        handleVideoStreamDeleted(stream.streamId, this.foldList, 'fold-list');
+        handleVideoStreamDeleted(streamCopy.streamId, this.mainList, 'main-list');
+        handleVideoStreamDeleted(streamCopy.streamId, this.foldList, 'fold-list');
       }
       // if it is the last screen share stream of the user, remove the screen sharing flag
 
-      if (stream.videoSourceType === _type3.AgoraRtcVideoSourceType.SCREEN) {
-        this._syncHasScreenSharing(false, stream.owner.userId, this.mainList, this.mainListLimitedCount, 'main-list');
-        this._syncHasScreenSharing(false, stream.owner.userId, this.foldList, this.foldListLimitedCount, 'fold-list');
+      if (stream.videoSourceType === _agoraEduCore.FcrVideoSourceType.SCREEN) {
+        this._syncHasScreenSharing(false, streamCopy.owner.userId, this.mainList, this.mainListLimitedCount, 'main-list');
+        this._syncHasScreenSharing(false, streamCopy.owner.userId, this.foldList, this.foldListLimitedCount, 'fold-list');
       }
     }
   }, {
@@ -799,6 +843,12 @@ var FcrUIVideoWindowDataSource = exports.FcrUIVideoWindowDataSource = /*#__PURE_
     value: function removeObserver(observer) {
       this._observer.removeObserver(observer);
     }
+  }, {
+    key: "copyStreamInfo",
+    value: function copyStreamInfo(stream) {
+      var streamCopy = Object.assign({}, stream);
+      return streamCopy;
+    }
   }, {
     key: "_syncHasScreenSharing",
     value: function _syncHasScreenSharing(enable, userId, list, limitCount, placement) {
@@ -817,14 +867,14 @@ var FcrUIVideoWindowDataSource = exports.FcrUIVideoWindowDataSource = /*#__PURE_
         });
       } else {
         var remainingShare = list.some(function (item) {
-          return item.userId === userId && (item.type === _type.FcrUIWindowType.BOARD || item.videoSourceType === _type3.AgoraRtcVideoSourceType.SCREEN);
+          return item.userId === userId && (item.type === _type.FcrUIWindowType.BOARD || item.videoSourceType === _agoraEduCore.FcrVideoSourceType.SCREEN);
         });
         if (!remainingShare) {
           list.forEach(function (item) {
             if (item.userId === userId) {
               item.setHasScreenSharing(enable);
-              var _index2 = _this9._insertByPriority(item, list, limitCount);
-              _this9._observer.notifyObservers(placement === 'main-list' ? 'onMainListUpdated' : 'onFoldListUpdated', _index2);
+              var index = _this9._insertByPriority(item, list, limitCount);
+              _this9._observer.notifyObservers(placement === 'main-list' ? 'onMainListUpdated' : 'onFoldListUpdated', index);
             }
           });
         }
@@ -931,7 +981,7 @@ var FcrUIVideoWindowDataSource = exports.FcrUIVideoWindowDataSource = /*#__PURE_
   }, {
     key: "_insertNewData",
     value: function _insertNewData(stream, list, limitCount, isMySelf, placement) {
-      var videoWindowData = new FcrUIVideoWindowDataImpl(_type.FcrUIWindowType.VIDEO, stream.connectorType === _type2.FcrRoomConnectorType.PSTN ? {
+      var videoWindowData = new FcrUIVideoWindowDataImpl(_type.FcrUIWindowType.VIDEO, stream.connectorType === _agoraEduCore.FcrRoomConnectorType.PSTN ? {
         audioStream: stream
       } : {
         videoStream: stream
@@ -942,15 +992,16 @@ var FcrUIVideoWindowDataSource = exports.FcrUIVideoWindowDataSource = /*#__PURE_
   }]);
 }();
 _FcrUIVideoWindowDataSource = FcrUIVideoWindowDataSource;
-var _applyDecs$e2 = (0, _slicedToArray2["default"])(_applyDecs(_FcrUIVideoWindowDataSource, [[_mobx.observable, 1, "spotlightEnabled"], [_mobx.observable, 1, "layoutType"], [_mobx.observable, 1, "pinLimitedCount"], [_mobx.observable, 1, "mainListLimitedCount"], [_mobx.observable, 1, "foldListLimitedCount"], [_mobx.observable, 1, "mainList"], [_mobx.observable, 1, "foldList"], [_setSpotlightEnabledDecs2, 18, "setSpotlightEnabled"], [_setLayoutDecs, 18, "setLayout"], [_onSpotlightRemovedDecs, 18, "onSpotlightRemoved"], [_resetListDecs, 18, "resetList"], [_addBoardDecs, 18, "addBoard"], [_updateBoardDecs, 18, "updateBoard"], [_removeBoardDecs, 18, "removeBoard"], [_mergePstnStreamOrInsertNewDataDecs, 18, "_mergePstnStreamOrInsertNewData"], [_addDecs, 18, "add"], [_updateDecs, 18, "update"], [_deleteDecs, 18, "delete"], [_addPinDecs, 18, "addPin"], [_removePinDecs, 18, "removePin"], [_setSpeakerSpotlightDecs2, 18, "setSpeakerSpotlight"], [_toggleMainStreamDecs, 18, "toggleMainStream"], [_insertBeginningByPriorityDecs, 18, "_insertBeginningByPriority"], [_insertEndByPriorityDecs, 18, "_insertEndByPriority"], [_findInsertBeginningIndexDecs, 18, "_findInsertBeginningIndex"], [_findInsertEndIndexDecs, 18, "_findInsertEndIndex"], [_insertBoardDecs, 18, "_insertBoard"], [_insertNewDataDecs, 18, "_insertNewData"]], []).e, 8);
+var _applyDecs$e2 = (0, _slicedToArray2["default"])(_applyDecs(_FcrUIVideoWindowDataSource, [[_mobx.observable, 1, "spotlightEnabled"], [_mobx.observable, 1, "layoutType"], [_mobx.observable, 1, "manualLayout"], [_mobx.observable, 1, "pinLimitedCount"], [_mobx.observable, 1, "mainListLimitedCount"], [_mobx.observable, 1, "foldListLimitedCount"], [_mobx.observable, 1, "mainList"], [_mobx.observable, 1, "foldList"], [_setSpotlightEnabledDecs2, 18, "setSpotlightEnabled"], [_setLayoutDecs, 18, "setLayout"], [_onSpotlightRemovedDecs, 18, "onSpotlightRemoved"], [_resetListDecs, 18, "resetList"], [_addBoardDecs, 18, "addBoard"], [_updateBoardDecs, 18, "updateBoard"], [_removeBoardDecs, 18, "removeBoard"], [_mergePstnStreamOrInsertNewDataDecs, 18, "_mergePstnStreamOrInsertNewData"], [_addDecs, 18, "add"], [_updateDecs, 18, "update"], [_deleteDecs, 18, "delete"], [_addPinDecs, 18, "addPin"], [_removePinDecs, 18, "removePin"], [_setSpeakerSpotlightDecs2, 18, "setSpeakerSpotlight"], [_toggleMainStreamDecs, 18, "toggleMainStream"], [_insertBeginningByPriorityDecs, 18, "_insertBeginningByPriority"], [_insertEndByPriorityDecs, 18, "_insertEndByPriority"], [_findInsertBeginningIndexDecs, 18, "_findInsertBeginningIndex"], [_findInsertEndIndexDecs, 18, "_findInsertEndIndex"], [_insertBoardDecs, 18, "_insertBoard"], [_insertNewDataDecs, 18, "_insertNewData"]], []).e, 9);
 _init_spotlightEnabled = _applyDecs$e2[0];
 _init_layoutType = _applyDecs$e2[1];
-_init_pinLimitedCount = _applyDecs$e2[2];
-_init_mainListLimitedCount = _applyDecs$e2[3];
-_init_foldListLimitedCount = _applyDecs$e2[4];
-_init_mainList = _applyDecs$e2[5];
-_init_foldList = _applyDecs$e2[6];
-_initProto2 = _applyDecs$e2[7];
+_init_manualLayout = _applyDecs$e2[2];
+_init_pinLimitedCount = _applyDecs$e2[3];
+_init_mainListLimitedCount = _applyDecs$e2[4];
+_init_foldListLimitedCount = _applyDecs$e2[5];
+_init_mainList = _applyDecs$e2[6];
+_init_foldList = _applyDecs$e2[7];
+_initProto2 = _applyDecs$e2[8];
 var FcrUISpeakerSpotlightPool = exports.FcrUISpeakerSpotlightPool = /*#__PURE__*/function () {
   function FcrUISpeakerSpotlightPool() {
     (0, _classCallCheck2["default"])(this, FcrUISpeakerSpotlightPool);
@@ -986,11 +1037,11 @@ var FcrUISpeakerSpotlightPool = exports.FcrUISpeakerSpotlightPool = /*#__PURE__*
         try {
           for (_iterator.s(); !(_step = _iterator.n()).done;) {
             var _step$value = (0, _slicedToArray2["default"])(_step.value, 2),
-              _streamId2 = _step$value[0],
+              streamId = _step$value[0],
               time = _step$value[1];
             if (now - time - _this10.duration * 1000 >= 0) {
-              _this10.streams["delete"](_streamId2);
-              _this10._observer.notifyObservers('onRemoved', _streamId2);
+              _this10.streams["delete"](streamId);
+              _this10._observer.notifyObservers('onRemoved', streamId);
             }
           }
         } catch (err) {

package/lib/modules/live-streaming/context.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 import store from './store';
 export declare const StoreContext: import("react").Context<store>;

package/lib/modules/live-streaming/index.d.ts

@@ -1,10 +1,10 @@
-import { FcrRoomControl } from 'agora-edu-core/lib/room-control';
 import { UIModule } from '../../base';
 import { FcrUIEventStore } from '../../common/event-store';
+import { FcrBaseRoomControl } from 'agora-edu-core/lib/room-control/type';
 export declare class LiveStreamingUIModule extends UIModule {
     private _store;
     constructor({ roomControl, uiEventStore, }: {
-        roomControl: FcrRoomControl;
+        roomControl: FcrBaseRoomControl;
         uiEventStore: FcrUIEventStore;
     });
     getComponent(): import("react/jsx-runtime").JSX.Element;

package/lib/modules/live-streaming/index.dev.js

@@ -14,8 +14,8 @@ var _jsxRuntime = require("react/jsx-runtime");
 var App = (0, _root.hot)(function () {
   return null;
 });
-_reactDom["default"].render( /*#__PURE__*/(0, _jsxRuntime.jsx)(App, {}), document.querySelector('#root'));
-window.__DEV_ENGINE_IS_READY__.then( /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
+_reactDom["default"].render(/*#__PURE__*/(0, _jsxRuntime.jsx)(App, {}), document.querySelector('#root'));
+window.__DEV_ENGINE_IS_READY__.then(/*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee() {
   var engine, roomId, roomControl, roomConfig, uiEventStore, uiModule, App;
   return _regenerator["default"].wrap(function _callee$(_context) {
     while (1) switch (_context.prev = _context.next) {
@@ -29,6 +29,7 @@ window.__DEV_ENGINE_IS_READY__.then( /*#__PURE__*/(0, _asyncToGenerator2["defaul
         roomConfig = {
           userRole: _type.FcrUserRole.HOST,
           userName: 'test-user',
+          roomToken: window.__DEV_USER_TOKEN__,
           streamLatency: _type.FcrStreamLatencyLevel.ULTRA_LOW,
           createStreamConfigs: []
         };
@@ -50,7 +51,7 @@ window.__DEV_ENGINE_IS_READY__.then( /*#__PURE__*/(0, _asyncToGenerator2["defaul
             children: uiModule.getComponent()
           });
         });
-        _reactDom["default"].render( /*#__PURE__*/(0, _jsxRuntime.jsx)(App, {}), document.querySelector('#root'));
+        _reactDom["default"].render(/*#__PURE__*/(0, _jsxRuntime.jsx)(App, {}), document.querySelector('#root'));
       case 12:
       case "end":
         return _context.stop();