fcr-ui-scene 3.7.4 → 3.7.5

package/lib/modules/whiteboard/index.js

@@ -1,145 +1,31 @@
 "use strict";
 
-require("core-js/modules/es.symbol.js");
-require("core-js/modules/es.symbol.description.js");
-require("core-js/modules/es.symbol.to-primitive.js");
-require("core-js/modules/es.error.cause.js");
-require("core-js/modules/es.error.to-string.js");
-require("core-js/modules/es.array.filter.js");
-require("core-js/modules/es.array.is-array.js");
-require("core-js/modules/es.date.to-primitive.js");
-require("core-js/modules/es.function.name.js");
-require("core-js/modules/es.map.js");
-require("core-js/modules/es.number.constructor.js");
-require("core-js/modules/es.object.create.js");
-require("core-js/modules/es.object.define-properties.js");
 require("core-js/modules/es.object.define-property.js");
-require("core-js/modules/es.object.get-own-property-descriptor.js");
-require("core-js/modules/es.object.get-own-property-descriptors.js");
-require("core-js/modules/es.object.keys.js");
 require("core-js/modules/es.reflect.construct.js");
-require("core-js/modules/esnext.function.metadata.js");
-require("core-js/modules/esnext.iterator.filter.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.symbol.metadata.js");
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.FcrWhiteboardUIModule = void 0;
-var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+require("core-js/modules/es.error.cause.js");
+require("core-js/modules/es.error.to-string.js");
 require("core-js/modules/es.array.concat.js");
-require("core-js/modules/es.array.find.js");
-require("core-js/modules/es.array.for-each.js");
-require("core-js/modules/es.array.includes.js");
-require("core-js/modules/es.array.iterator.js");
-require("core-js/modules/es.array.push.js");
-require("core-js/modules/es.array.some.js");
-require("core-js/modules/es.function.bind.js");
-require("core-js/modules/es.object.to-string.js");
-require("core-js/modules/es.object.values.js");
-require("core-js/modules/es.set.js");
-require("core-js/modules/es.string.includes.js");
-require("core-js/modules/es.string.iterator.js");
-require("core-js/modules/es.weak-map.js");
-require("core-js/modules/esnext.iterator.constructor.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.set.add-all.js");
-require("core-js/modules/esnext.set.delete-all.js");
-require("core-js/modules/esnext.set.difference.v2.js");
-require("core-js/modules/esnext.set.difference.js");
-require("core-js/modules/esnext.set.every.js");
-require("core-js/modules/esnext.set.filter.js");
-require("core-js/modules/esnext.set.find.js");
-require("core-js/modules/esnext.set.intersection.v2.js");
-require("core-js/modules/esnext.set.intersection.js");
-require("core-js/modules/esnext.set.is-disjoint-from.v2.js");
-require("core-js/modules/esnext.set.is-disjoint-from.js");
-require("core-js/modules/esnext.set.is-subset-of.v2.js");
-require("core-js/modules/esnext.set.is-subset-of.js");
-require("core-js/modules/esnext.set.is-superset-of.v2.js");
-require("core-js/modules/esnext.set.is-superset-of.js");
-require("core-js/modules/esnext.set.join.js");
-require("core-js/modules/esnext.set.map.js");
-require("core-js/modules/esnext.set.reduce.js");
-require("core-js/modules/esnext.set.some.js");
-require("core-js/modules/esnext.set.symmetric-difference.v2.js");
-require("core-js/modules/esnext.set.symmetric-difference.js");
-require("core-js/modules/esnext.set.union.v2.js");
-require("core-js/modules/esnext.set.union.js");
-require("core-js/modules/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 _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _type = require("./type");
-var _view = require("./view");
-var _context2 = require("./context");
-var _mobx = require("mobx");
-var _utils = require("./utils");
-var _decorator = require("agora-foundation/lib/decorator");
-var _multiWindow = require("./components/multi-window");
-var _constant = require("../../utilities/constant");
-var _store = require("./components/toolbar/store");
 var _base = require("../../base");
-var _store2 = require("./components/control-bar/store");
-var _reactDom = _interopRequireDefault(require("react-dom"));
-var _type2 = require("fcr-core/lib/type");
-var _fcrCore = require("fcr-core");
-var _libs = _interopRequireDefault(require("./components/switch-theme/libs"));
-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 _store = require("./store");
+var _store2 = require("./store.electron");
+var _store3 = require("./store.browser");
+var _view = require("./view");
+var _env = require("agora-foundation/lib/utilities/env");
 var _jsxRuntime = require("react/jsx-runtime");
-var _FcrWhiteboardUIModule;
-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)); }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
-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"); }
-function _applyDecs(e, t, r, n, o, a) { function i(e, t, r) { return function (n, o) { return r && r(n), e[t].call(n, o); }; } function c(e, t) { for (var r = 0; r < e.length; r++) e[r].call(t); return t; } function s(e, t, r, n) { if ("function" != typeof e && (n || void 0 !== e)) throw new TypeError(t + " must " + (r || "be") + " a function" + (n ? "" : " or undefined")); return e; } function applyDec(e, t, r, n, o, a, c, u, l, f, p, d, h) { function m(e) { if (!h(e)) throw new TypeError("Attempted to access private element on non-instance"); } var y, v = t[0], g = t[3], b = !u; if (!b) { r || Array.isArray(v) || (v = [v]); var w = {}, S = [], A = 3 === o ? "get" : 4 === o || d ? "set" : "value"; f ? (p || d ? w = { get: _setFunctionName(function () { return g(this); }, n, "get"), set: function set(e) { t[4](this, e); } } : w[A] = g, p || _setFunctionName(w[A], n, 2 === o ? "" : A)) : p || (w = Object.getOwnPropertyDescriptor(e, n)); } for (var P = e, j = v.length - 1; j >= 0; j -= r ? 2 : 1) { var D = v[j], E = r ? v[j - 1] : void 0, I = {}, O = { kind: ["field", "accessor", "method", "getter", "setter", "class"][o], name: n, metadata: a, addInitializer: function (e, t) { if (e.v) throw Error("attempted to call addInitializer after decoration was finished"); s(t, "An initializer", "be", !0), c.push(t); }.bind(null, I) }; try { if (b) (y = s(D.call(E, P, O), "class decorators", "return")) && (P = y);else { var k, F; O["static"] = l, O["private"] = f, f ? 2 === o ? k = function k(e) { return m(e), w.value; } : (o < 4 && (k = i(w, "get", m)), 3 !== o && (F = i(w, "set", m))) : (k = function k(e) { return e[n]; }, (o < 2 || 4 === o) && (F = function F(e, t) { e[n] = t; })); var N = O.access = { has: f ? h.bind() : function (e) { return n in e; } }; if (k && (N.get = k), F && (N.set = F), P = D.call(E, d ? { get: w.get, set: w.set } : w[A], O), d) { if ("object" == _typeof(P) && P) (y = s(P.get, "accessor.get")) && (w.get = y), (y = s(P.set, "accessor.set")) && (w.set = y), (y = s(P.init, "accessor.init")) && S.push(y);else if (void 0 !== P) throw new TypeError("accessor decorators must return an object with get, set, or init properties or void 0"); } else s(P, (p ? "field" : "method") + " decorators", "return") && (p ? S.push(P) : w[A] = P); } } finally { I.v = !0; } } return (p || d) && u.push(function (e, t) { for (var r = S.length - 1; r >= 0; r--) t = S[r].call(e, t); return t; }), p || b || (f ? d ? u.push(i(w, "get"), i(w, "set")) : u.push(2 === o ? w[A] : i.call.bind(w[A])) : Object.defineProperty(e, n, w)), P; } function u(e, t) { return Object.defineProperty(e, Symbol.metadata || Symbol["for"]("Symbol.metadata"), { configurable: !0, enumerable: !0, value: t }); } if (arguments.length >= 6) var l = a[Symbol.metadata || Symbol["for"]("Symbol.metadata")]; var f = Object.create(null == l ? null : l), p = function (e, t, r, n) { var o, a, i = [], s = function s(t) { return _checkInRHS(t) === e; }, u = new Map(); function l(e) { e && i.push(c.bind(null, e)); } for (var f = 0; f < t.length; f++) { var p = t[f]; if (Array.isArray(p)) { var d = p[1], h = p[2], m = p.length > 3, y = 16 & d, v = !!(8 & d), g = 0 == (d &= 7), b = h + "/" + v; if (!g && !m) { var w = u.get(b); if (!0 === w || 3 === w && 4 !== d || 4 === w && 3 !== d) throw Error("Attempted to decorate a public method/accessor that has the same name as a previously decorated public method/accessor. This is not currently supported by the decorators plugin. Property name was: " + h); u.set(b, !(d > 2) || d); } applyDec(v ? e : e.prototype, p, y, m ? "#" + h : _toPropertyKey(h), d, n, v ? a = a || [] : o = o || [], i, v, m, g, 1 === d, v && m ? s : r); } } return l(o), l(a), i; }(e, t, o, f); return r.length || u(e, f), { e: p, get c() { var t = []; return r.length && [u(applyDec(e, [r], n, e.name, 5, f, t), f), c.bind(null, t, e)]; } }; }
-function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
-function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-function _setFunctionName(e, t, n) { "symbol" == _typeof(t) && (t = (t = t.description) ? "[" + t + "]" : ""); try { Object.defineProperty(e, "name", { configurable: !0, value: n ? n + " " + t : t }); } catch (e) {} return e; }
-function _checkInRHS(e) { if (Object(e) !== e) throw TypeError("right-hand side of 'in' should be an object, got " + (null !== e ? _typeof(e) : "null")); return e; }
-var _A = /*#__PURE__*/new WeakMap();
-var _B = /*#__PURE__*/new WeakMap();
-var _C = /*#__PURE__*/new WeakMap();
-var _D = /*#__PURE__*/new WeakMap();
-var _E = /*#__PURE__*/new WeakMap();
-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;
@@ -148,717 +34,42 @@ var FcrWhiteboardUIModule = exports.FcrWhiteboardUIModule = /*#__PURE__*/functio
       args[_key] = arguments[_key];
     }
     _this = _callSuper(this, FcrWhiteboardUIModule, [].concat(args));
-    (0, _defineProperty2["default"])(_this, _ref, (_initProto(_this), (0, _logger.createLogger)({
+    (0, _defineProperty2["default"])(_this, "logger", (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);
-    (0, _defineProperty2["default"])(_this, "_joinSuccessed", false);
-    (0, _defineProperty2["default"])(_this, "_isActive", false);
-    (0, _defineProperty2["default"])(_this, "_timer", null);
-    (0, _defineProperty2["default"])(_this, "_isMyBoard", false);
-    (0, _defineProperty2["default"])(_this, "_boardObserver", {
-      onActive: function onActive(_, operatorUser) {
-        return _this._handleActive({
-          operatorUser: operatorUser
-        });
-      },
-      onInactive: function onInactive(reason, operatorUser) {
-        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;
-        if (!isMeOperated && isMeOwner) {
-          _this._alertWhenBeenStopByOthers(operatorUser);
-        }
-        _this.onDestroy({
-          operatorUser: operatorUser
-        });
-      },
-      onBackgroundColorUpdated: _this._setBackground,
-      onConnectionStateUpdated: function () {
-        var _onConnectionStateUpdated = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee(state) {
-          var _this$_whiteboardCont, _this$_whiteboardCont2, mainWindow, isActive, ownerUserId, _this$_userControl, ownerUser;
-          return _regenerator["default"].wrap(function (_context) {
-            while (1) switch (_context.prev = _context.next) {
-              case 0:
-                _this._setConnectionState(state);
-                if (state === _fcrCore.FcrConnectionState.DISCONNECTED) {
-                  if (_this._joined) {
-                    (_this$_whiteboardCont = _this._whiteboardControl) === null || _this$_whiteboardCont === void 0 || _this$_whiteboardCont.open();
-                  } else {
-                    _this.unmount();
-                    _this.unload();
-                  }
-                }
-                if (state === _fcrCore.FcrConnectionState.CONNECTED) {
-                  _this._setJoinSuccessed(true);
-                  mainWindow = (_this$_whiteboardCont2 = _this._whiteboardControl) === null || _this$_whiteboardCont2 === void 0 ? void 0 : _this$_whiteboardCont2.getMainWindow();
-                  _this.logger.info('Fcr board join success');
-                  if (_this._whiteboardControl) {
-                    isActive = _this._whiteboardControl.getActivity();
-                    ownerUserId = _this._whiteboardControl.getOwnerId();
-                    if (isActive) {
-                      ownerUser = (_this$_userControl = _this._userControl) === null || _this$_userControl === void 0 ? void 0 : _this$_userControl.getUser(ownerUserId);
-                      _this._controlbarStore.ownerUser = ownerUser;
-                    }
-                  }
-                  _this._boardMainWindow = mainWindow;
-                  _this.mount();
-                }
-              case 1:
-              case "end":
-                return _context.stop();
-            }
-          }, _callee);
-        }));
-        function onConnectionStateUpdated(_x) {
-          return _onConnectionStateUpdated.apply(this, arguments);
-        }
-        return onConnectionStateUpdated;
-      }()
-    });
-    (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__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));
+    }));
+    (0, _defineProperty2["default"])(_this, "_store", null);
     return _this;
   }
   (0, _inherits2["default"])(FcrWhiteboardUIModule, _UIModule);
   return (0, _createClass2["default"])(FcrWhiteboardUIModule, [{
-    key: "_isMultiDisplay",
-    get: function get() {
-      return _classPrivateFieldGet(_A, this);
-    },
-    set: function set(v) {
-      _classPrivateFieldSet(_A, this, v);
-    }
-  }, {
-    key: "_lonelyWindowState",
-    get: function get() {
-      return _classPrivateFieldGet(_B, this);
-    },
-    set: function set(v) {
-      _classPrivateFieldSet(_B, this, v);
-    }
-  }, {
-    key: "_ownerUser",
-    get: function get() {
-      return _classPrivateFieldGet(_C, this);
-    },
-    set: function set(v) {
-      _classPrivateFieldSet(_C, this, v);
-    }
-  }, {
-    key: "_isHost",
-    get: function get() {
-      return _classPrivateFieldGet(_D, this);
-    },
-    set: function set(v) {
-      _classPrivateFieldSet(_D, this, v);
-    }
-  }, {
-    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() {
-      var _this$_securityStore;
-      return (_this$_securityStore = this._securityStore) === null || _this$_securityStore === void 0 ? void 0 : _this$_securityStore.hasWriteBoardPermission();
-    }
-  }, {
-    key: "contentAreaSize",
+    key: "store",
     get: function get() {
-      var layoutContentDom = document.querySelector(".".concat(_utils.layoutContentClassName));
-      var contentAreaSize = {
-        width: 0,
-        height: 0,
-        top: 0,
-        left: 0
-      };
-      if (layoutContentDom) {
-        var _layoutContentDom$get = layoutContentDom.getBoundingClientRect(),
-          width = _layoutContentDom$get.width,
-          height = _layoutContentDom$get.height,
-          left = _layoutContentDom$get.left,
-          top = _layoutContentDom$get.top;
-        contentAreaSize.width = width;
-        contentAreaSize.height = height;
-        contentAreaSize.left = left;
-        contentAreaSize.top = top;
+      if (!this._store) {
+        throw new Error('WhitebaordStore is not initialized');
       }
-      return contentAreaSize;
+      return this._store;
     }
   }, {
     key: "onNodeWillActive",
     value: function onNodeWillActive() {
-      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;
-      this._whiteboardControl = this._roomControl.getSharingControl().getBoardControl();
-      this._toolbarStore = new _store.ToolbarStore(this._whiteboardControl, this._roomControl, this.annotationProvider, this.eventProvider, this.sharedAnnotationDataSource);
-      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,
-        userControl: userControl,
-        securityStore: this.privilegeProvider,
-        annotationProvider: this.annotationProvider,
-        sharedAnnotationDataSource: this.sharedAnnotationDataSource
+      this._store = (0, _env.isElectron)() ? new _store2.WhitebaordStore({
+        objectManager: this.objectManager
+      }) : new _store3.WhitebaordStore({
+        objectManager: this.objectManager
       });
-      this._whiteboardControl.addObserver(this._boardObserver);
-      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);
-      window.addEventListener('resize', this._resetCanvasPosition);
-      var isActive = this._whiteboardControl.getActivity();
-      var ownerUserId = this._whiteboardControl.getOwnerId();
-      this._isActive = isActive;
-      if (isActive) {
-        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();
+      this.store.release();
     }
   }, {
     key: "getComponent",
     value: function getComponent(dom) {
-      var component = /*#__PURE__*/(0, _jsxRuntime.jsx)(_context2.BoardUIContext.Provider, {
-        value: this._boardStore,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_store.ToolbarContext.Provider, {
-          value: this._toolbarStore,
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_store2.WhiteboardControlBarUIContext.Provider, {
-            value: this._controlbarStore,
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_multiWindow.MultiWindowWidgetDialog, {
-              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_view.Whiteboard, {})
-            })
-          })
-        })
-      });
-      if (dom) {
-        dom.classList.add(_utils.widgetContainerClassName);
-        this._outerDom = dom;
-        return _reactDom["default"].render(component, dom);
-      }
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        className: _utils.widgetContainerClassName,
-        children: component
-      });
-    }
-  }, {
-    key: "onEvent",
-    value: function onEvent(event, payload) {
-      var _this$_whiteboardCont4;
-      switch (event) {
-        case _constant.FcrUIAction.OPEN_WHITEBOARD:
-          if (!this._isActive) {
-            var _this$_whiteboardCont3;
-            (_this$_whiteboardCont3 = this._whiteboardControl) === null || _this$_whiteboardCont3 === void 0 || _this$_whiteboardCont3.active();
-          }
-          break;
-        case _constant.FcrUIAction.CLOSE_WHITEBOARD:
-          (_this$_whiteboardCont4 = this._whiteboardControl) === null || _this$_whiteboardCont4 === void 0 || _this$_whiteboardCont4.inactive();
-          break;
-        case _constant.FcrUIAction.WHITEBOARD_CHANGED:
-          this._setCanvasBound(payload.action);
-          if (payload.action === _type.WhiteboardControlbarEvents.LONEYWINDOW) {
-            this._lonelyWindowState = payload.payload ? _type.LonelyWindowState.OPEN : _type.LonelyWindowState.CLOSE;
-            this.onDestroy();
-            break;
-          }
-          if (payload.action === _type.WhiteboardControlbarEvents.ENABLE_CONTROL) {
-            var _this$_boardStore;
-            (_this$_boardStore = this._boardStore) === null || _this$_boardStore === void 0 || _this$_boardStore.setWriteEnable(payload.payload);
-            break;
-          }
-          break;
-        // TODO:
-        // case FcrUIAction.TOGGLE_LAYOUT:
-        //   if (payload.layout === FcrUIVideoWindowLayoutType.Gallery) {
-        //     if (this._boardDom) {
-        //       const style = {
-        //         width: '100%',
-        //         height: '100%',
-        //         left: 0,
-        //         top: 0,
-        //       };
-        //       Object.assign(this._boardDom.style, style);
-        //     }
-        //   } else {
-        //     this._resetCanvasPosition();
-        //   }
-        //   break;
-        case _constant.FcrUIAction.CAROUSEL_COLLAPSED:
-          this._resetCanvasPosition();
-          break;
-      }
-    }
-  }, {
-    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$_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$_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'
-        });
-      }
-      if (!this._joined) return;
-      this._isActive = false;
-      // this._close();
-      this.unmount();
-      this.unload();
-      this._disposers.forEach(function (d) {
-        return d();
-      });
-      this._disposers = [];
-      window.removeEventListener('resize', this._resetCanvasPosition);
-    }
-  }, {
-    key: "mount",
-    value: function mount() {
-      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();
-        _boardDom.appendChild(view);
-        _boardMainWindow.setContainerSizeRatio(aspectRatio);
-        this._addDisposers();
-        this._repositionToolbar();
-        if (this._boardMainWindow) {
-          var _this$_whiteboardCont5, _this$_whiteboardCont6;
-          this._setBackground(((_this$_whiteboardCont5 = this._whiteboardControl) === null || _this$_whiteboardCont5 === void 0 ? void 0 : _this$_whiteboardCont5.getBackgroundColor()) || this._boardBackground);
-          // this._toolbarStore!.observables.layoutReady = [
-          //   LonelyWindowState.CLOSE,
-          //   LonelyWindowState.DEFAULT,
-          // ].includes(this._lonelyWindowState);
-
-          var isActive = (_this$_whiteboardCont6 = this._whiteboardControl) === null || _this$_whiteboardCont6 === void 0 ? void 0 : _this$_whiteboardCont6.getActivity();
-          if (isActive && this._whiteboardControl) {
-            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$_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$_uiEventStore4 = this._uiEventStore) === null || _this$_uiEventStore4 === void 0 || _this$_uiEventStore4.sendEvent(_constant.FcrUIAction.WHITEBOARD_CHANGED, {
-              action: _type.WhiteboardBaseEvents.SET_OWNER_USER_ID,
-              payload: ownerUserId
-            });
-            (_this$_toolbarStore = this._toolbarStore) === null || _this$_toolbarStore === void 0 || _this$_toolbarStore.resetToolbarVars();
-          } else {
-            this.logger.warn('whiteboard mount, getBoardActiveInfo activeInfo isActive is false , ownerUserId is null');
-          }
-        }
-      }
-    }
-  }, {
-    key: "unmount",
-    value: function unmount() {
-      if (this._mounted && this._boardMainWindow) {
-        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;
-        (_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
-        });
-        this._ownerUser = undefined;
-        this._initialized = false;
-        this._close();
-      }
-      this._mounted = false;
-      if (this._timer) clearTimeout(this._timer);
-    }
-  }, {
-    key: "unload",
-    value: function unload() {
-      if (this._outerDom) {
-        _reactDom["default"].unmountComponentAtNode(this._outerDom);
-        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() {
-      var bgColor = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '#ffffff';
-      if (this._boardMainWindow) {
-        var _this$_boardMainWindo;
-        var themes = (0, _libs["default"])();
-        var _ref3 = themes.find(function (theme) {
-            return theme.background === bgColor;
-          }) || {
-            colors: []
-          },
-          colors = _ref3.colors;
-        (_this$_boardMainWindo = this._boardMainWindow) === null || _this$_boardMainWindo === void 0 || _this$_boardMainWindo.setBackgroundColor(bgColor);
-        if (colors && colors.length > 0) {
-          this._toolbarStore.observables.colors = colors;
-        }
-      }
-    }
-  }, {
-    key: "_checkBoard",
-    value: function _checkBoard() {
-      if (!this._initialized) {
-        this._open();
-      }
-    }
-  }, {
-    key: "_boardUIEvents",
-    value: function _boardUIEvents(observables) {
-      var _this2 = this;
-      return {
-        handleBoardDomLoad: function handleBoardDomLoad(ref) {
-          _this2._boardDom = ref;
-          if (_this2._boardDom) {
-            _this2.mount();
-          } else {
-            _this2._mounted = false;
-          }
-        },
-        handleCollectorDomLoad: function handleCollectorDomLoad(ref) {
-          _this2._collectorDom = ref;
-        },
-        handleClose: function handleClose() {
-          // this._close();
-          // this._isActive = false;
-          // this.unmount();
-          // console.log('whiteboard close');
-        },
-        handleOpen: function handleOpen() {
-          // console.log('whiteboard open');
-          // !this._initialized && this._open();
-        },
-        setPrivilege: function setPrivilege(canOperate) {
-          observables.canOperate = canOperate;
-        },
-        setWriteEnable: function setWriteEnable(enable) {
-          observables.writeEnabled = enable;
-          observables.canOperate = enable;
-          _this2._repositionToolbar();
-        },
-        setWhiteboardVisible: function setWhiteboardVisible(visible) {
-          observables.whiteboardVisible = visible;
-        }
-      };
-    }
-  }, {
-    key: "_setCanvasBound",
-    value: function _setCanvasBound(oprate) {
-      if (!Object.values(_type.WhiteboardControlbarEvents).includes(oprate) || oprate === _type.WhiteboardControlbarEvents.ENABLE_CONTROL) return;
-      if (this._boardDom && this._boardMainWindow) {
-        var contianHeight = this._boardDom.parentElement.clientHeight;
-        var ratio = contianHeight / this._initHeight;
-        var origin = this._initHeight / contianHeight;
-        var thatStyle = this._boardDom.style;
-        thatStyle.transition = 'transform ease .5s';
-        var _ref4 = this._controlbarStore,
-          scaleValue = _ref4.scaleValue;
-        if (_utils.ZOOM_IN_CANVAS) {
-          // this._boardMainWindow.setViewMode(ViewMode.Freedom);
-        }
-        this._resetScaleState();
-        if (oprate === _type.WhiteboardControlbarEvents.ZOOMIN) {
-          if (scaleValue < this._initHeight / contianHeight) {
-            var calcValue = scaleValue + ratio;
-            this._controlbarStore.isMaxmum = false;
-            var result = calcValue > origin ? origin : calcValue;
-            this._controlbarStore.scaleValue = result;
-          } else {
-            this._controlbarStore.isMaxmum = true;
-          }
-        }
-        if (oprate === _type.WhiteboardControlbarEvents.ZOOMOUT) {
-          if (scaleValue > 1) {
-            var _calcValue = scaleValue - ratio;
-            this._controlbarStore.isMinimum = false;
-            var _result = _calcValue > 1 ? _calcValue : 1;
-            this._controlbarStore.scaleValue = _result;
-          } else {
-            this._controlbarStore.isMinimum = true;
-          }
-        }
-        if (oprate === _type.WhiteboardControlbarEvents.ORIGIN) {
-          this._controlbarStore.isOriginal = true;
-          this._controlbarStore.scaleValue = origin;
-        }
-        if (oprate === _type.WhiteboardControlbarEvents.ADAPTIVE) {
-          this._controlbarStore.isAdaptived = true;
-          this._controlbarStore.scaleValue = 1;
-        }
-        var value = this._controlbarStore.scaleValue;
-        if (!_utils.ZOOM_IN_CANVAS) {
-          // scale 无法监听到尺寸变化，会导致画笔位置偏移，所以使用改变宽高的方式进行计算
-          var width = this._initWidth * ratio * value;
-          var height = this._initHeight * ratio * value;
-          thatStyle.width = "".concat(width, "px");
-          thatStyle.height = "".concat(height, "px");
-          thatStyle.position = 'absolute';
-          thatStyle.left = "-".concat(width / 2, "px");
-          thatStyle.marginLeft = '50%';
-          thatStyle.top = "-".concat((height - contianHeight) / 2, "px");
-          // thatStyle.transform = `scale(${value})`;
-        } else {
-          // this._boardMainWindow.zoom(value);
-        }
-      }
-    }
-  }, {
-    key: "_resetCanvasPosition",
-    value: function _resetCanvasPosition() {
-      var _this3 = this;
-      if (this._timer) clearTimeout(this._timer);
-      this._timer = setTimeout(function () {
-        if (!_this3._boardDom) return;
-        _this3._repositionToolbar();
-        var thatStyle = _this3._boardDom.style;
-        _this3._controlbarStore.scaleValue = 1;
-        thatStyle.transform = "scale(1)";
-      }, 300);
-    }
-  }, {
-    key: "_resetScaleState",
-    value: function _resetScaleState() {
-      this._controlbarStore.isAdaptived = false;
-      this._controlbarStore.isMaxmum = false;
-      this._controlbarStore.isMinimum = false;
-      this._controlbarStore.isOriginal = false;
-    }
-  }, {
-    key: "_createBoardUIContext",
-    value: function _createBoardUIContext() {
-      var observables = (0, _mobx.observable)({
-        canOperate: this._isHost,
-        minimized: false,
-        contentAreaSize: this.contentAreaSize,
-        connectionState: this._connectionState,
-        joinSuccessed: this._joinSuccessed,
-        progress: 0,
-        writeEnabled: this._isHost,
-        whiteboardVisible: false
-      });
-      return _objectSpread({
-        observables: observables
-      }, this._boardUIEvents(observables));
-    }
-  }, {
-    key: "_repositionToolbar",
-    value: function _repositionToolbar() {
-      this._toolbarStore.repositionToolbar();
-    }
-  }, {
-    key: "_setConnectionState",
-    value: function _setConnectionState(state) {
-      this._connectionState = state;
-      if (this._boardStore) {
-        this._boardStore.observables.connectionState = state;
-      }
-    }
-  }, {
-    key: "_open",
-    value: function _open() {
-      var _this$_whiteboardCont8;
-      this._joined = true;
-      this._initialized = true;
-      (_this$_whiteboardCont8 = this._whiteboardControl) === null || _this$_whiteboardCont8 === void 0 || _this$_whiteboardCont8.open();
-      this.logger.info('[whiteboard] open');
-    }
-  }, {
-    key: "_close",
-    value: function _close() {
-      this._joined = false;
-      this._setJoinSuccessed(false);
-      if (this._whiteboardControl) {
-        this._whiteboardControl.close();
-        this.logger.info('[whiteboard] close');
-      }
-    }
-  }, {
-    key: "_setJoinSuccessed",
-    value: function _setJoinSuccessed(joinSuccessed) {
-      if (this._boardStore) {
-        this._boardStore.observables.joinSuccessed = joinSuccessed;
-      }
-    }
-  }, {
-    key: "_addDisposers",
-    value: function _addDisposers() {
-      var _this4 = this;
-      this._disposers.push((0, _mobx.reaction)(function () {
-        return _this4.hasPrivilege;
-      }, function (privilege) {
-        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 _this4._boardStore.observables.writeEnabled;
-      }, function (writeEnabled) {
-        if (writeEnabled) setTimeout(_this4._repositionToolbar, 0);
-      }), (0, _mobx.reaction)(function () {
-        return _this4._localUser;
-      }, function (user) {
-        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 _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'), {
-        reason1: userName
-      });
-      var dialogId = this._uiEventStore.openConfirmDialog({
-        title: (0, _i18n.transI18n)('fmt_screenshare_whiteboard_tips_stoppedboard'),
-        content: content,
-        okText: (0, _i18n.transI18n)('fmt_screenshare_whiteboard_button_gotit'),
-        showCancel: false,
-        icon: _type3.FcrIconType.FCR_SCREENSHARING,
-        onOk: function onOk() {
-          var _this5$_uiEventStore;
-          (_this5$_uiEventStore = _this5._uiEventStore) === null || _this5$_uiEventStore === void 0 || _this5$_uiEventStore.closeConfirm(dialogId);
-        },
-        onCancel: function onCancel() {
-          var _this5$_uiEventStore2;
-          (_this5$_uiEventStore2 = _this5._uiEventStore) === null || _this5$_uiEventStore2 === void 0 || _this5$_uiEventStore2.closeConfirm(dialogId);
-        },
-        width: 400,
-        height: 160
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_store.WhiteboardStoreContext.Provider, {
+        value: this.store,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_view.Whiteboard, {})
       });
     }
   }]);
-}(_base.UIModule);
-_FcrWhiteboardUIModule = FcrWhiteboardUIModule;
-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;
+}(_base.UIModule);