fcr-ui-scene 3.7.2 → 3.7.4-rc.1

package/lib/modules/whiteboard/index.js

@@ -115,9 +115,10 @@ var _types = require("fcr-core/lib/room-control/whiteboard-control/types");
 var _i18n = require("agora-ui-foundation/lib/i18n");
 var _type3 = require("agora-ui-foundation/lib/components/icon/type");
 var _logger = require("../../utilities/logger");
+var _type4 = require("../secondary-window/type");
 var _jsxRuntime = require("react/jsx-runtime");
 var _FcrWhiteboardUIModule;
-var _initProto, _init__lonelyWindowState, _init__ownerUser, _init__isHost, _init__boardBackground, _init__localUser, _onPropertiesUpdateDecs, _mountDecs, _unmountDecs, _unloadDecs, _setBackgroundDecs, _boardUIEventsDecs, _repositionToolbarDecs, _setConnectionStateDecs, _openLonelyWindowDecs, _setJoinSuccessedDecs, _ref;
+var _initProto, _init__isMultiDisplay, _init__lonelyWindowState, _init__ownerUser, _init__isHost, _init__boardBackground, _init__localUser, _handleActiveDecs, _mountDecs, _unmountDecs, _unloadDecs, _setBackgroundDecs, _boardUIEventsDecs, _repositionToolbarDecs, _setConnectionStateDecs, _setJoinSuccessedDecs, _ref;
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 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)); }
@@ -137,7 +138,8 @@ var _B = /*#__PURE__*/new WeakMap();
 var _C = /*#__PURE__*/new WeakMap();
 var _D = /*#__PURE__*/new WeakMap();
 var _E = /*#__PURE__*/new WeakMap();
-_ref = (_onPropertiesUpdateDecs = [_mobx.action, _mobx.action.bound], _mountDecs = [_mobx.action, _mobx.action.bound], _unmountDecs = [_mobx.action, _mobx.action.bound], _unloadDecs = [_mobx.action, _mobx.action.bound], _setBackgroundDecs = [_mobx.action, _mobx.action.bound], _boardUIEventsDecs = [_mobx.action, _mobx.action.bound], _repositionToolbarDecs = [_mobx.action, _mobx.action.bound], _setConnectionStateDecs = [_mobx.action, _mobx.action.bound], _openLonelyWindowDecs = [_mobx.action, _mobx.action.bound], _setJoinSuccessedDecs = [_mobx.action, _mobx.action.bound], "_disposers");
+var _F = /*#__PURE__*/new WeakMap();
+_ref = (_handleActiveDecs = [_mobx.action, _mobx.action.bound], _mountDecs = [_mobx.action, _mobx.action.bound], _unmountDecs = [_mobx.action, _mobx.action.bound], _unloadDecs = [_mobx.action, _mobx.action.bound], _setBackgroundDecs = [_mobx.action, _mobx.action.bound], _boardUIEventsDecs = [_mobx.action, _mobx.action.bound], _repositionToolbarDecs = [_mobx.action, _mobx.action.bound], _setConnectionStateDecs = [_mobx.action, _mobx.action.bound], _setJoinSuccessedDecs = [_mobx.action, _mobx.action.bound], "logger");
 var FcrWhiteboardUIModule = exports.FcrWhiteboardUIModule = /*#__PURE__*/function (_UIModule) {
   function FcrWhiteboardUIModule() {
     var _this;
@@ -146,7 +148,10 @@ var FcrWhiteboardUIModule = exports.FcrWhiteboardUIModule = /*#__PURE__*/functio
       args[_key] = arguments[_key];
     }
     _this = _callSuper(this, FcrWhiteboardUIModule, [].concat(args));
-    (0, _defineProperty2["default"])(_this, _ref, (_initProto(_this), []));
+    (0, _defineProperty2["default"])(_this, _ref, (_initProto(_this), (0, _logger.createLogger)({
+      prefix: 'FcrWhiteboardUIModule'
+    })));
+    (0, _defineProperty2["default"])(_this, "_disposers", []);
     (0, _defineProperty2["default"])(_this, "_connectionState", _fcrCore.FcrConnectionState.DISCONNECTED);
     (0, _defineProperty2["default"])(_this, "_initWidth", 1920);
     (0, _defineProperty2["default"])(_this, "_initHeight", 1220);
@@ -156,17 +161,19 @@ var FcrWhiteboardUIModule = exports.FcrWhiteboardUIModule = /*#__PURE__*/functio
     (0, _defineProperty2["default"])(_this, "_isMyBoard", false);
     (0, _defineProperty2["default"])(_this, "_boardObserver", {
       onActive: function onActive(_, operatorUser) {
-        return _this.onPropertiesUpdate({
+        return _this._handleActive({
           operatorUser: operatorUser
         });
       },
       onInactive: function onInactive(reason, operatorUser) {
-        var _this$_localUser, _this$_ownerUser, _this$_ownerUser2;
+        var _this$_localUser, _this$_ownerUser;
+        _this._controlbarStore.controlEnabled = false;
         var currentUserId = (_this$_localUser = _this._localUser) === null || _this$_localUser === void 0 ? void 0 : _this$_localUser.userId;
         var isMeOperated = (operatorUser === null || operatorUser === void 0 ? void 0 : operatorUser.userId) === currentUserId;
         var isMeOwner = ((_this$_ownerUser = _this._ownerUser) === null || _this$_ownerUser === void 0 ? void 0 : _this$_ownerUser.userId) === currentUserId;
-        _this.logger.info("Fcr board has inactive effect, the reason is ".concat(reason, ", the operator is ").concat(operatorUser === null || operatorUser === void 0 ? void 0 : operatorUser.userName, ", the owner is ").concat((_this$_ownerUser2 = _this._ownerUser) === null || _this$_ownerUser2 === void 0 ? void 0 : _this$_ownerUser2.userName));
-        !isMeOperated && isMeOwner && _this._alertWhenBeenStopByOthers(operatorUser);
+        if (!isMeOperated && isMeOwner) {
+          _this._alertWhenBeenStopByOthers(operatorUser);
+        }
         _this.onDestroy({
           operatorUser: operatorUser
         });
@@ -178,7 +185,6 @@ var FcrWhiteboardUIModule = exports.FcrWhiteboardUIModule = /*#__PURE__*/functio
           return _regenerator["default"].wrap(function (_context) {
             while (1) switch (_context.prev = _context.next) {
               case 0:
-                _this.logger.info('Fcr board connection state changed to', state);
                 _this._setConnectionState(state);
                 if (state === _fcrCore.FcrConnectionState.DISCONNECTED) {
                   if (_this._joined) {
@@ -215,23 +221,68 @@ var FcrWhiteboardUIModule = exports.FcrWhiteboardUIModule = /*#__PURE__*/functio
         return onConnectionStateUpdated;
       }()
     });
-    (0, _defineProperty2["default"])(_this, "logger", (0, _logger.createLogger)({
-      prefix: 'FcrWhiteboardUIModule'
-    }));
+    (0, _defineProperty2["default"])(_this, "_multiDisplayObserver", {
+      onContentDistributionUpdated: function onContentDistributionUpdated(distribution) {
+        if (distribution.secondaryWindow.type === _type4.FcrUIDisplayDistributionContentType.HIDDEN) {
+          _this._isActive && _this._checkBoard();
+        } else {
+          _this.unmount();
+        }
+      }
+    });
+    (0, _defineProperty2["default"])(_this, "_streamObserver", {
+      onStreamsRemoved: function onStreamsRemoved(roomId, events) {
+        var seizeData = events.find(function (event) {
+          var _event$cause;
+          return ((_event$cause = event.cause) === null || _event$cause === void 0 ? void 0 : _event$cause.data.reason) === _types.FcrBoardInactiveReason.SEIZE;
+        });
+        var isMyStream = events.some(function (event) {
+          var _this$_localUser2;
+          return event.modifiedStream.owner.userId === ((_this$_localUser2 = _this._localUser) === null || _this$_localUser2 === void 0 ? void 0 : _this$_localUser2.userId);
+        });
+        if (seizeData) {
+          var _seizeData$operatorUs, _this$_localUser3;
+          var operatorIsMe = ((_seizeData$operatorUs = seizeData.operatorUser) === null || _seizeData$operatorUs === void 0 ? void 0 : _seizeData$operatorUs.userId) !== ((_this$_localUser3 = _this._localUser) === null || _this$_localUser3 === void 0 ? void 0 : _this$_localUser3.userId);
+          if (isMyStream && operatorIsMe) {
+            _this._alertWhenBeenStopByOthers(seizeData === null || seizeData === void 0 ? void 0 : seizeData.operatorUser);
+          }
+          if (!isMyStream) {
+            var _this$_uiEventStore, _seizeData$operatorUs2;
+            (_this$_uiEventStore = _this._uiEventStore) === null || _this$_uiEventStore === void 0 || _this$_uiEventStore.showToast({
+              type: 'info',
+              message: "".concat(seizeData === null || seizeData === void 0 || (_seizeData$operatorUs2 = seizeData.operatorUser) === null || _seizeData$operatorUs2 === void 0 ? void 0 : _seizeData$operatorUs2.userName, " ").concat((0, _i18n.transI18n)('fmt_screenshare_whiteboard_lables_newshare'))
+            });
+          }
+        }
+      }
+    });
+    (0, _defineProperty2["default"])(_this, "_userObserver", {
+      onUserInfoUpdated: function onUserInfoUpdated(_, event) {
+        var _this$_localUser4;
+        if (event.modifiedUser.userId === ((_this$_localUser4 = _this._localUser) === null || _this$_localUser4 === void 0 ? void 0 : _this$_localUser4.userId)) {
+          _this._localUser = event.modifiedUser;
+          _this._isHost = [_type2.FcrUserRole.HOST, _type2.FcrUserRole.COHOST].includes(_this._localUser.userRole);
+        }
+      }
+    });
+    (0, _defineProperty2["default"])(_this, "_eventObserver", {
+      onEvent: _this.onEvent.bind(_this)
+    });
     (0, _defineProperty2["default"])(_this, "_mounted", false);
     (0, _defineProperty2["default"])(_this, "_initialized", false);
     (0, _defineProperty2["default"])(_this, "_joined", false);
     (0, _defineProperty2["default"])(_this, "_grantedUsers", new Set());
-    _classPrivateFieldInitSpec(_this, _A, _init__lonelyWindowState(_this, _type.LonelyWindowState.DEFAULT));
-    _classPrivateFieldInitSpec(_this, _B, _init__ownerUser(_this, undefined));
-    _classPrivateFieldInitSpec(_this, _C, _init__isHost(_this, false));
-    _classPrivateFieldInitSpec(_this, _D, _init__boardBackground(_this, '#ffffff'));
-    _classPrivateFieldInitSpec(_this, _E, _init__localUser(_this, undefined));
+    _classPrivateFieldInitSpec(_this, _A, _init__isMultiDisplay(_this, false));
+    _classPrivateFieldInitSpec(_this, _B, _init__lonelyWindowState(_this, _type.LonelyWindowState.DEFAULT));
+    _classPrivateFieldInitSpec(_this, _C, _init__ownerUser(_this, undefined));
+    _classPrivateFieldInitSpec(_this, _D, _init__isHost(_this, false));
+    _classPrivateFieldInitSpec(_this, _E, _init__boardBackground(_this, '#ffffff'));
+    _classPrivateFieldInitSpec(_this, _F, _init__localUser(_this, undefined));
     return _this;
   }
   (0, _inherits2["default"])(FcrWhiteboardUIModule, _UIModule);
   return (0, _createClass2["default"])(FcrWhiteboardUIModule, [{
-    key: "_lonelyWindowState",
+    key: "_isMultiDisplay",
     get: function get() {
       return _classPrivateFieldGet(_A, this);
     },
@@ -239,7 +290,7 @@ var FcrWhiteboardUIModule = exports.FcrWhiteboardUIModule = /*#__PURE__*/functio
       _classPrivateFieldSet(_A, this, v);
     }
   }, {
-    key: "_ownerUser",
+    key: "_lonelyWindowState",
     get: function get() {
       return _classPrivateFieldGet(_B, this);
     },
@@ -247,7 +298,7 @@ var FcrWhiteboardUIModule = exports.FcrWhiteboardUIModule = /*#__PURE__*/functio
       _classPrivateFieldSet(_B, this, v);
     }
   }, {
-    key: "_isHost",
+    key: "_ownerUser",
     get: function get() {
       return _classPrivateFieldGet(_C, this);
     },
@@ -255,7 +306,7 @@ var FcrWhiteboardUIModule = exports.FcrWhiteboardUIModule = /*#__PURE__*/functio
       _classPrivateFieldSet(_C, this, v);
     }
   }, {
-    key: "_boardBackground",
+    key: "_isHost",
     get: function get() {
       return _classPrivateFieldGet(_D, this);
     },
@@ -263,13 +314,21 @@ var FcrWhiteboardUIModule = exports.FcrWhiteboardUIModule = /*#__PURE__*/functio
       _classPrivateFieldSet(_D, this, v);
     }
   }, {
-    key: "_localUser",
+    key: "_boardBackground",
     get: function get() {
       return _classPrivateFieldGet(_E, this);
     },
     set: function set(v) {
       _classPrivateFieldSet(_E, this, v);
     }
+  }, {
+    key: "_localUser",
+    get: function get() {
+      return _classPrivateFieldGet(_F, this);
+    },
+    set: function set(v) {
+      _classPrivateFieldSet(_F, this, v);
+    }
   }, {
     key: "hasPrivilege",
     get: function get() {
@@ -302,9 +361,7 @@ var FcrWhiteboardUIModule = exports.FcrWhiteboardUIModule = /*#__PURE__*/functio
   }, {
     key: "onNodeWillActive",
     value: function onNodeWillActive() {
-      var _this$currentRoomCont,
-        _this2 = this,
-        _this$_uiEventStore;
+      var _this$currentRoomCont, _this$_uiEventStore2;
       this._uiEventStore = this.eventProvider;
       this._roomControl = (_this$currentRoomCont = this.currentRoomControlProvider) === null || _this$currentRoomCont === void 0 ? void 0 : _this$currentRoomCont.currentRoomControl;
       this._securityStore = this.privilegeProvider;
@@ -313,6 +370,7 @@ var FcrWhiteboardUIModule = exports.FcrWhiteboardUIModule = /*#__PURE__*/functio
       var streamControl = this._roomControl.getStreamControl();
       var userControl = this._roomControl.getUserControl();
       this._userControl = userControl;
+      this._streamControl = streamControl;
       this._controlbarStore = new _store2.WhiteboardControlBarStore({
         uiEventStore: this.eventProvider,
         streamControl: streamControl,
@@ -322,44 +380,11 @@ var FcrWhiteboardUIModule = exports.FcrWhiteboardUIModule = /*#__PURE__*/functio
         sharedAnnotationDataSource: this.sharedAnnotationDataSource
       });
       this._whiteboardControl.addObserver(this._boardObserver);
-      streamControl.addObserver({
-        onStreamsRemoved: function onStreamsRemoved(roomId, events) {
-          var seizeData = events.find(function (event) {
-            var _event$cause;
-            return ((_event$cause = event.cause) === null || _event$cause === void 0 ? void 0 : _event$cause.data.reason) === _types.FcrBoardInactiveReason.SEIZE;
-          });
-          var isMyStream = events.some(function (event) {
-            var _this2$_localUser;
-            return event.modifiedStream.owner.userId === ((_this2$_localUser = _this2._localUser) === null || _this2$_localUser === void 0 ? void 0 : _this2$_localUser.userId);
-          });
-          if (seizeData) {
-            var _seizeData$operatorUs, _this2$_localUser2;
-            var operatorIsMe = ((_seizeData$operatorUs = seizeData.operatorUser) === null || _seizeData$operatorUs === void 0 ? void 0 : _seizeData$operatorUs.userId) !== ((_this2$_localUser2 = _this2._localUser) === null || _this2$_localUser2 === void 0 ? void 0 : _this2$_localUser2.userId);
-            if (isMyStream && operatorIsMe) {
-              _this2._alertWhenBeenStopByOthers(seizeData === null || seizeData === void 0 ? void 0 : seizeData.operatorUser);
-            }
-            if (!isMyStream) {
-              var _this2$_uiEventStore, _seizeData$operatorUs2;
-              (_this2$_uiEventStore = _this2._uiEventStore) === null || _this2$_uiEventStore === void 0 || _this2$_uiEventStore.showToast({
-                type: 'info',
-                message: "".concat(seizeData === null || seizeData === void 0 || (_seizeData$operatorUs2 = seizeData.operatorUser) === null || _seizeData$operatorUs2 === void 0 ? void 0 : _seizeData$operatorUs2.userName, " ").concat((0, _i18n.transI18n)('fmt_screenshare_whiteboard_lables_newshare'))
-              });
-            }
-          }
-        }
-      });
-      userControl.addObserver({
-        onUserInfoUpdated: function onUserInfoUpdated(_, event) {
-          var _this2$_localUser3;
-          if (event.modifiedUser.userId === ((_this2$_localUser3 = _this2._localUser) === null || _this2$_localUser3 === void 0 ? void 0 : _this2$_localUser3.userId)) {
-            _this2._localUser = event.modifiedUser;
-            _this2._isHost = [_type2.FcrUserRole.HOST, _type2.FcrUserRole.COHOST].includes(_this2._localUser.userRole);
-          }
-        }
-      });
-      (_this$_uiEventStore = this._uiEventStore) === null || _this$_uiEventStore === void 0 || _this$_uiEventStore.addObserver({
-        onEvent: this.onEvent.bind(this)
-      });
+      this.multiDisplayProvider.addObserver(this._multiDisplayObserver);
+      this._streamControl.addObserver(this._streamObserver);
+      this._userControl.addObserver(this._userObserver);
+      (_this$_uiEventStore2 = this._uiEventStore) === null || _this$_uiEventStore2 === void 0 || _this$_uiEventStore2.addObserver(this._eventObserver);
+      this._isMultiDisplay = this.multiDisplayProvider.isActive;
       this._boardStore = this._createBoardUIContext();
       this._localUser = this._userControl.getLocalUser();
       this._isHost = [_type2.FcrUserRole.HOST, _type2.FcrUserRole.COHOST].includes(this._localUser.userRole);
@@ -368,15 +393,19 @@ var FcrWhiteboardUIModule = exports.FcrWhiteboardUIModule = /*#__PURE__*/functio
       var ownerUserId = this._whiteboardControl.getOwnerId();
       this._isActive = isActive;
       if (isActive) {
-        this._checkBoard();
-        this._ownerUser = this._userControl.getUser(ownerUserId);
-        this._boardBackground = this._whiteboardControl.getBackgroundColor();
+        if (!this._isMultiDisplay) {
+          this.logger.info('[whiteboard]: is active');
+          this._checkBoard();
+          this._ownerUser = this._userControl.getUser(ownerUserId);
+          this._boardBackground = this._whiteboardControl.getBackgroundColor();
+        }
       }
     }
   }, {
     key: "onNodeWillInactive",
     value: function onNodeWillInactive() {
       this.onDestroy();
+      this.release();
     }
   }, {
     key: "getComponent",
@@ -452,20 +481,21 @@ var FcrWhiteboardUIModule = exports.FcrWhiteboardUIModule = /*#__PURE__*/functio
       }
     }
   }, {
-    key: "onPropertiesUpdate",
-    value: function onPropertiesUpdate(params) {
+    key: "_handleActive",
+    value: function _handleActive(params) {
       // this._checkPrivilege(props);
+      this.logger.info('[whiteboard] active');
       this._checkBoard();
     }
   }, {
     key: "onDestroy",
     value: function onDestroy(params) {
-      var _this$_securityStore2, _this$_localUser2;
+      var _this$_securityStore2, _this$_localUser5;
       var _ref2 = params || {},
         operatorUser = _ref2.operatorUser;
-      if ((_this$_securityStore2 = this._securityStore) !== null && _this$_securityStore2 !== void 0 && _this$_securityStore2.hasStartScreenSharePermission() && (operatorUser === null || operatorUser === void 0 ? void 0 : operatorUser.userId) !== ((_this$_localUser2 = this._localUser) === null || _this$_localUser2 === void 0 ? void 0 : _this$_localUser2.userId) && this._isActive) {
-        var _this$_uiEventStore2;
-        (_this$_uiEventStore2 = this._uiEventStore) === null || _this$_uiEventStore2 === void 0 || _this$_uiEventStore2.showToast({
+      if ((_this$_securityStore2 = this._securityStore) !== null && _this$_securityStore2 !== void 0 && _this$_securityStore2.hasStartScreenSharePermission() && (operatorUser === null || operatorUser === void 0 ? void 0 : operatorUser.userId) !== ((_this$_localUser5 = this._localUser) === null || _this$_localUser5 === void 0 ? void 0 : _this$_localUser5.userId) && this._isActive) {
+        var _this$_uiEventStore3;
+        (_this$_uiEventStore3 = this._uiEventStore) === null || _this$_uiEventStore3 === void 0 || _this$_uiEventStore3.showToast({
           message: this._isMyBoard ? (0, _i18n.transI18n)('fmt_screenshare_whiteboard_tips_stoppedboard') : (0, _i18n.transI18n)('fmt_screenshare_whiteboard_tips_stopped'),
           type: 'info'
         });
@@ -487,6 +517,7 @@ var FcrWhiteboardUIModule = exports.FcrWhiteboardUIModule = /*#__PURE__*/functio
       var _boardMainWindow = this._boardMainWindow,
         _boardDom = this._boardDom;
       if (_boardDom && _boardMainWindow && !this._mounted) {
+        this.logger.info('[whiteboard] mount');
         this._mounted = true;
         var aspectRatio = this._initHeight / this._initWidth;
         var view = _boardMainWindow.getContentView();
@@ -504,13 +535,13 @@ var FcrWhiteboardUIModule = exports.FcrWhiteboardUIModule = /*#__PURE__*/functio
 
           var isActive = (_this$_whiteboardCont6 = this._whiteboardControl) === null || _this$_whiteboardCont6 === void 0 ? void 0 : _this$_whiteboardCont6.getActivity();
           if (isActive && this._whiteboardControl) {
-            var _this$_userControl2, _this$_ownerUser3, _this$_localUser3, _this$_boardStore2, _this$_boardStore3, _this$_uiEventStore3, _this$_toolbarStore;
+            var _this$_userControl2, _this$_ownerUser2, _this$_localUser6, _this$_boardStore2, _this$_boardStore3, _this$_uiEventStore4, _this$_toolbarStore;
             var ownerUserId = this._whiteboardControl.getOwnerId();
             this._ownerUser = (_this$_userControl2 = this._userControl) === null || _this$_userControl2 === void 0 ? void 0 : _this$_userControl2.getUser(ownerUserId);
-            this._isMyBoard = ((_this$_ownerUser3 = this._ownerUser) === null || _this$_ownerUser3 === void 0 ? void 0 : _this$_ownerUser3.userId) === ((_this$_localUser3 = this._localUser) === null || _this$_localUser3 === void 0 ? void 0 : _this$_localUser3.userId);
+            this._isMyBoard = ((_this$_ownerUser2 = this._ownerUser) === null || _this$_ownerUser2 === void 0 ? void 0 : _this$_ownerUser2.userId) === ((_this$_localUser6 = this._localUser) === null || _this$_localUser6 === void 0 ? void 0 : _this$_localUser6.userId);
             (_this$_boardStore2 = this._boardStore) === null || _this$_boardStore2 === void 0 || _this$_boardStore2.setPrivilege(this._isMyBoard || this._isHost);
             (_this$_boardStore3 = this._boardStore) === null || _this$_boardStore3 === void 0 || _this$_boardStore3.setWriteEnable(this._isMyBoard || this._isHost);
-            (_this$_uiEventStore3 = this._uiEventStore) === null || _this$_uiEventStore3 === void 0 || _this$_uiEventStore3.sendEvent(_constant.FcrUIAction.WHITEBOARD_CHANGED, {
+            (_this$_uiEventStore4 = this._uiEventStore) === null || _this$_uiEventStore4 === void 0 || _this$_uiEventStore4.sendEvent(_constant.FcrUIAction.WHITEBOARD_CHANGED, {
               action: _type.WhiteboardBaseEvents.SET_OWNER_USER_ID,
               payload: ownerUserId
             });
@@ -525,16 +556,11 @@ var FcrWhiteboardUIModule = exports.FcrWhiteboardUIModule = /*#__PURE__*/functio
     key: "unmount",
     value: function unmount() {
       if (this._mounted && this._boardMainWindow) {
-        var _this$_boardDom, _this$_uiEventStore4;
+        var _this$_boardDom, _this$_uiEventStore5;
+        this.logger.info('[whiteboard] unmount');
         (_this$_boardDom = this._boardDom) === null || _this$_boardDom === void 0 || _this$_boardDom.removeChild(this._boardMainWindow.getContentView());
         this._boardMainWindow = undefined;
-        if (this._lonelyWindowState === _type.LonelyWindowState.OPEN) {
-          this._openLonelyWindow();
-        }
-        if (this._lonelyWindowState === _type.LonelyWindowState.CLOSE) {
-          this._open();
-        }
-        (_this$_uiEventStore4 = this._uiEventStore) === null || _this$_uiEventStore4 === void 0 || _this$_uiEventStore4.sendEvent(_constant.FcrUIAction.WHITEBOARD_CHANGED, {
+        (_this$_uiEventStore5 = this._uiEventStore) === null || _this$_uiEventStore5 === void 0 || _this$_uiEventStore5.sendEvent(_constant.FcrUIAction.WHITEBOARD_CHANGED, {
           action: _type.WhiteboardBaseEvents.SET_OWNER_USER_ID,
           payload: null
         });
@@ -553,6 +579,21 @@ var FcrWhiteboardUIModule = exports.FcrWhiteboardUIModule = /*#__PURE__*/functio
         this._outerDom = undefined;
       }
     }
+  }, {
+    key: "release",
+    value: function release() {
+      var _this$_toolbarStore2, _this$_controlbarStor, _this$_whiteboardCont7, _this$_uiEventStore6, _this$_userControl3, _this$_streamControl;
+      (_this$_toolbarStore2 = this._toolbarStore) === null || _this$_toolbarStore2 === void 0 || _this$_toolbarStore2.release();
+      (_this$_controlbarStor = this._controlbarStore) === null || _this$_controlbarStor === void 0 || _this$_controlbarStor.release();
+      this._boardStore = undefined;
+      this._toolbarStore = undefined;
+      this._controlbarStore = undefined;
+      (_this$_whiteboardCont7 = this._whiteboardControl) === null || _this$_whiteboardCont7 === void 0 || _this$_whiteboardCont7.removeObserver(this._boardObserver);
+      this.multiDisplayProvider.removeObserver(this._multiDisplayObserver);
+      (_this$_uiEventStore6 = this._uiEventStore) === null || _this$_uiEventStore6 === void 0 || _this$_uiEventStore6.removeObserver(this._eventObserver);
+      (_this$_userControl3 = this._userControl) === null || _this$_userControl3 === void 0 || _this$_userControl3.removeObserver(this._userObserver);
+      (_this$_streamControl = this._streamControl) === null || _this$_streamControl === void 0 || _this$_streamControl.removeObserver(this._streamObserver);
+    }
   }, {
     key: "_setBackground",
     value: function _setBackground() {
@@ -582,18 +623,18 @@ var FcrWhiteboardUIModule = exports.FcrWhiteboardUIModule = /*#__PURE__*/functio
   }, {
     key: "_boardUIEvents",
     value: function _boardUIEvents(observables) {
-      var _this3 = this;
+      var _this2 = this;
       return {
         handleBoardDomLoad: function handleBoardDomLoad(ref) {
-          _this3._boardDom = ref;
-          if (_this3._boardDom) {
-            _this3.mount();
+          _this2._boardDom = ref;
+          if (_this2._boardDom) {
+            _this2.mount();
           } else {
-            _this3._mounted = false;
+            _this2._mounted = false;
           }
         },
         handleCollectorDomLoad: function handleCollectorDomLoad(ref) {
-          _this3._collectorDom = ref;
+          _this2._collectorDom = ref;
         },
         handleClose: function handleClose() {
           // this._close();
@@ -611,7 +652,7 @@ var FcrWhiteboardUIModule = exports.FcrWhiteboardUIModule = /*#__PURE__*/functio
         setWriteEnable: function setWriteEnable(enable) {
           observables.writeEnabled = enable;
           observables.canOperate = enable;
-          _this3._repositionToolbar();
+          _this2._repositionToolbar();
         },
         setWhiteboardVisible: function setWhiteboardVisible(visible) {
           observables.whiteboardVisible = visible;
@@ -682,13 +723,13 @@ var FcrWhiteboardUIModule = exports.FcrWhiteboardUIModule = /*#__PURE__*/functio
   }, {
     key: "_resetCanvasPosition",
     value: function _resetCanvasPosition() {
-      var _this4 = this;
+      var _this3 = this;
       if (this._timer) clearTimeout(this._timer);
       this._timer = setTimeout(function () {
-        if (!_this4._boardDom) return;
-        _this4._repositionToolbar();
-        var thatStyle = _this4._boardDom.style;
-        _this4._controlbarStore.scaleValue = 1;
+        if (!_this3._boardDom) return;
+        _this3._repositionToolbar();
+        var thatStyle = _this3._boardDom.style;
+        _this3._controlbarStore.scaleValue = 1;
         thatStyle.transform = "scale(1)";
       }, 300);
     }
@@ -733,10 +774,11 @@ var FcrWhiteboardUIModule = exports.FcrWhiteboardUIModule = /*#__PURE__*/functio
   }, {
     key: "_open",
     value: function _open() {
-      var _this$_whiteboardCont7;
+      var _this$_whiteboardCont8;
       this._joined = true;
       this._initialized = true;
-      (_this$_whiteboardCont7 = this._whiteboardControl) === null || _this$_whiteboardCont7 === void 0 || _this$_whiteboardCont7.open();
+      (_this$_whiteboardCont8 = this._whiteboardControl) === null || _this$_whiteboardCont8 === void 0 || _this$_whiteboardCont8.open();
+      this.logger.info('[whiteboard] open');
     }
   }, {
     key: "_close",
@@ -745,17 +787,9 @@ var FcrWhiteboardUIModule = exports.FcrWhiteboardUIModule = /*#__PURE__*/functio
       this._setJoinSuccessed(false);
       if (this._whiteboardControl) {
         this._whiteboardControl.close();
+        this.logger.info('[whiteboard] close');
       }
     }
-  }, {
-    key: "_openLonelyWindow",
-    value: function _openLonelyWindow() {
-      var _this$_uiEventStore5, _this$_uiEventStore6;
-      (_this$_uiEventStore5 = this._uiEventStore) === null || _this$_uiEventStore5 === void 0 || _this$_uiEventStore5.openDialog(_constant.FcrUIDialogKey.WHITEBOARD);
-      (_this$_uiEventStore6 = this._uiEventStore) === null || _this$_uiEventStore6 === void 0 || _this$_uiEventStore6.openDialog(_constant.FcrUIDialogKey.TOOLBAR);
-      // this._toolbarStore!.observables.layoutReady = false;
-      this._open();
-    }
   }, {
     key: "_setJoinSuccessed",
     value: function _setJoinSuccessed(joinSuccessed) {
@@ -766,32 +800,32 @@ var FcrWhiteboardUIModule = exports.FcrWhiteboardUIModule = /*#__PURE__*/functio
   }, {
     key: "_addDisposers",
     value: function _addDisposers() {
-      var _this5 = this;
+      var _this4 = this;
       this._disposers.push((0, _mobx.reaction)(function () {
-        return _this5.hasPrivilege;
+        return _this4.hasPrivilege;
       }, function (privilege) {
-        var _this5$_boardStore, _this5$_boardStore2;
-        var p = privilege || _this5._isHost || _this5._isMyBoard;
-        (_this5$_boardStore = _this5._boardStore) === null || _this5$_boardStore === void 0 || _this5$_boardStore.setWriteEnable(_this5._isHost || _this5._isMyBoard);
-        (_this5$_boardStore2 = _this5._boardStore) === null || _this5$_boardStore2 === void 0 || _this5$_boardStore2.setPrivilege(p);
+        var _this4$_boardStore, _this4$_boardStore2;
+        var p = privilege || _this4._isHost || _this4._isMyBoard;
+        (_this4$_boardStore = _this4._boardStore) === null || _this4$_boardStore === void 0 || _this4$_boardStore.setWriteEnable(_this4._isHost || _this4._isMyBoard);
+        (_this4$_boardStore2 = _this4._boardStore) === null || _this4$_boardStore2 === void 0 || _this4$_boardStore2.setPrivilege(p);
       }), (0, _mobx.reaction)(function () {
-        return _this5._boardStore.observables.writeEnabled;
+        return _this4._boardStore.observables.writeEnabled;
       }, function (writeEnabled) {
-        if (writeEnabled) setTimeout(_this5._repositionToolbar, 0);
+        if (writeEnabled) setTimeout(_this4._repositionToolbar, 0);
       }), (0, _mobx.reaction)(function () {
-        return _this5._localUser;
+        return _this4._localUser;
       }, function (user) {
-        var _this5$_boardStore3;
-        _this5._isHost = [_type2.FcrUserRole.HOST, _type2.FcrUserRole.COHOST].includes(user.userRole);
-        var hasPrivilege = _this5.hasPrivilege || _this5._isHost || _this5._isMyBoard;
-        (_this5$_boardStore3 = _this5._boardStore) === null || _this5$_boardStore3 === void 0 || _this5$_boardStore3.setPrivilege(hasPrivilege);
-        _this5._boardStore.setWriteEnable(_this5._isHost || _this5._isMyBoard);
+        var _this4$_boardStore3;
+        _this4._isHost = [_type2.FcrUserRole.HOST, _type2.FcrUserRole.COHOST].includes(user.userRole);
+        var hasPrivilege = _this4.hasPrivilege || _this4._isHost || _this4._isMyBoard;
+        (_this4$_boardStore3 = _this4._boardStore) === null || _this4$_boardStore3 === void 0 || _this4$_boardStore3.setPrivilege(hasPrivilege);
+        _this4._boardStore.setWriteEnable(_this4._isHost || _this4._isMyBoard);
       }));
     }
   }, {
     key: "_alertWhenBeenStopByOthers",
     value: function _alertWhenBeenStopByOthers(userInfo) {
-      var _this6 = this;
+      var _this5 = this;
       var userRole = userInfo.userRole,
         userName = userInfo.userName;
       var content = (0, _i18n.transI18n)("fmt_whiteboard_dialog_share_stopped_message_".concat(_type2.FcrUserRole.HOST === userRole ? 'host' : 'cohost'), {
@@ -804,12 +838,12 @@ var FcrWhiteboardUIModule = exports.FcrWhiteboardUIModule = /*#__PURE__*/functio
         showCancel: false,
         icon: _type3.FcrIconType.FCR_SCREENSHARING,
         onOk: function onOk() {
-          var _this6$_uiEventStore;
-          (_this6$_uiEventStore = _this6._uiEventStore) === null || _this6$_uiEventStore === void 0 || _this6$_uiEventStore.closeConfirm(dialogId);
+          var _this5$_uiEventStore;
+          (_this5$_uiEventStore = _this5._uiEventStore) === null || _this5$_uiEventStore === void 0 || _this5$_uiEventStore.closeConfirm(dialogId);
         },
         onCancel: function onCancel() {
-          var _this6$_uiEventStore2;
-          (_this6$_uiEventStore2 = _this6._uiEventStore) === null || _this6$_uiEventStore2 === void 0 || _this6$_uiEventStore2.closeConfirm(dialogId);
+          var _this5$_uiEventStore2;
+          (_this5$_uiEventStore2 = _this5._uiEventStore) === null || _this5$_uiEventStore2 === void 0 || _this5$_uiEventStore2.closeConfirm(dialogId);
         },
         width: 400,
         height: 160
@@ -818,12 +852,13 @@ var FcrWhiteboardUIModule = exports.FcrWhiteboardUIModule = /*#__PURE__*/functio
   }]);
 }(_base.UIModule);
 _FcrWhiteboardUIModule = FcrWhiteboardUIModule;
-var _applyDecs$e = _applyDecs(_FcrWhiteboardUIModule, [[_mobx.observable, 1, "_lonelyWindowState"], [_mobx.observable, 1, "_ownerUser"], [_mobx.observable, 1, "_isHost"], [_mobx.observable, 1, "_boardBackground"], [_mobx.observable, 1, "_localUser"], [_mobx.computed, 3, "hasPrivilege"], [_onPropertiesUpdateDecs, 18, "onPropertiesUpdate"], [_mountDecs, 18, "mount"], [_unmountDecs, 18, "unmount"], [_unloadDecs, 18, "unload"], [_setBackgroundDecs, 18, "_setBackground"], [_boardUIEventsDecs, 18, "_boardUIEvents"], [_decorator.bound, 2, "_setCanvasBound"], [_decorator.bound, 2, "_resetCanvasPosition"], [_repositionToolbarDecs, 18, "_repositionToolbar"], [_setConnectionStateDecs, 18, "_setConnectionState"], [_decorator.bound, 2, "_close"], [_openLonelyWindowDecs, 18, "_openLonelyWindow"], [_setJoinSuccessedDecs, 18, "_setJoinSuccessed"]], [], 0, void 0, _base.UIModule).e;
-var _applyDecs$e2 = (0, _slicedToArray2["default"])(_applyDecs$e, 6);
-_init__lonelyWindowState = _applyDecs$e2[0];
-_init__ownerUser = _applyDecs$e2[1];
-_init__isHost = _applyDecs$e2[2];
-_init__boardBackground = _applyDecs$e2[3];
-_init__localUser = _applyDecs$e2[4];
-_initProto = _applyDecs$e2[5];
+var _applyDecs$e = _applyDecs(_FcrWhiteboardUIModule, [[_mobx.observable, 1, "_isMultiDisplay"], [_mobx.observable, 1, "_lonelyWindowState"], [_mobx.observable, 1, "_ownerUser"], [_mobx.observable, 1, "_isHost"], [_mobx.observable, 1, "_boardBackground"], [_mobx.observable, 1, "_localUser"], [_mobx.computed, 3, "hasPrivilege"], [_handleActiveDecs, 18, "_handleActive"], [_mountDecs, 18, "mount"], [_unmountDecs, 18, "unmount"], [_unloadDecs, 18, "unload"], [_setBackgroundDecs, 18, "_setBackground"], [_boardUIEventsDecs, 18, "_boardUIEvents"], [_decorator.bound, 2, "_setCanvasBound"], [_decorator.bound, 2, "_resetCanvasPosition"], [_repositionToolbarDecs, 18, "_repositionToolbar"], [_setConnectionStateDecs, 18, "_setConnectionState"], [_decorator.bound, 2, "_close"], [_setJoinSuccessedDecs, 18, "_setJoinSuccessed"]], [], 0, void 0, _base.UIModule).e;
+var _applyDecs$e2 = (0, _slicedToArray2["default"])(_applyDecs$e, 7);
+_init__isMultiDisplay = _applyDecs$e2[0];
+_init__lonelyWindowState = _applyDecs$e2[1];
+_init__ownerUser = _applyDecs$e2[2];
+_init__isHost = _applyDecs$e2[3];
+_init__boardBackground = _applyDecs$e2[4];
+_init__localUser = _applyDecs$e2[5];
+_initProto = _applyDecs$e2[6];
 _applyDecs$e;

package/lib/plugins/module-dev-plugin.js

@@ -126,6 +126,7 @@ window.__DEV_ENGINE_IS_READY__ = createRoom(roomId).then(/*#__PURE__*/function (
                   },
                   frameRate: 15,
                   bitrate: 800
+                  // isMirror: false,
                 },
                 lowVideoEncoderConfig: {
                   dimensions: {
@@ -134,6 +135,7 @@ window.__DEV_ENGINE_IS_READY__ = createRoom(roomId).then(/*#__PURE__*/function (
                   },
                   frameRate: 15,
                   bitrate: 400
+                  // isMirror: false,
                 },
                 enableDualStreamMode: false
               },
@@ -145,6 +147,7 @@ window.__DEV_ENGINE_IS_READY__ = createRoom(roomId).then(/*#__PURE__*/function (
                   },
                   frameRate: 15,
                   bitrate: 800
+                  // isMirror: false,
                 },
                 lowVideoEncoderConfig: {
                   dimensions: {
@@ -153,6 +156,7 @@ window.__DEV_ENGINE_IS_READY__ = createRoom(roomId).then(/*#__PURE__*/function (
                   },
                   frameRate: 15,
                   bitrate: 400
+                  // isMirror: false,
                 },
                 enableDualStreamMode: false
               },

package/lib/providers/ability-provider.js

@@ -55,5 +55,7 @@ var FcrUIAbilityProviderImpl = exports.FcrUIAbilityProviderImpl = /*#__PURE__*/(
     return result;
   });
   this._abilityControl = _abilityControl;
+  // @ts-ignore
+  window._abilityProvider = this;
 });
 (0, _base.registerDependency)('abilityProvider');

package/lib/providers/annotation-provider.js

@@ -62,8 +62,8 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _constant = require("../utilities/constant");
 var _base = require("../base");
 var _mobx = require("mobx");
-var _type = require("agora-rte-sdk/lib/core/rtc/type");
 var _imports = require("fcr-core/lib/imports");
+var _type = require("fcr-core/lib/type");
 var _rendererEvent = require("../utilities/renderer-event");
 var _type2 = require("../modules/whiteboard/type");
 var _dialogUtils = require("../utilities/dialog-utils");
@@ -104,7 +104,7 @@ var FcrUIAnnotationProviderImpl = exports.FcrUIAnnotationProviderImpl = /*#__PUR
     _classPrivateFieldInitSpec(this, _C, _init_isShowToolbar(this, false));
     _classPrivateFieldInitSpec(this, _D, _init_currentShareInfo(this, {
       id: '',
-      type: _type.AgoraRtcScreenCaptureType.SCREEN,
+      type: _type.FcrScreenCaptureType.SCREEN,
       bounds: {
         x: 0,
         y: 0,
@@ -284,7 +284,7 @@ var FcrUIAnnotationProviderImpl = exports.FcrUIAnnotationProviderImpl = /*#__PUR
           while (1) switch (_context2.prev = _context2.next) {
             case 0:
               targetBounds = null;
-              if (this.currentShareInfo.type === _type.AgoraRtcScreenCaptureType.SCREEN) {
+              if (this.currentShareInfo.type === _type.FcrScreenCaptureType.SCREEN) {
                 _ref2 = info || this.currentShareInfo, bounds = _ref2.bounds;
                 _getCurrentSharingWor = (0, _dialogUtils.getCurrentSharingWorkArea)({
                   currentShareBounds: bounds