fcr-ui-scene 3.8.2 → 3.9.0-alpha

package/lib-es/fragments/annotation/style.css

@@ -1,9 +1,8 @@
-.fragment-annotation-wrapper {
-  width: '100vw';
-  height: '100vh';
-  overflow: 'hidden';
+.fcr-fragment-whiteboard-view {
+  width: 100vw;
+  height: 100vh;
 }
 
-.fragment-annotation-wrapper-visible-hidden {
-  visibility: hidden;
+body {
+  background: rgba(0, 0, 0, 0.01);
 }

package/lib-es/fragments/annotation/view.js

@@ -1,58 +1,19 @@
-import { useContext, useEffect } from 'react';
-import { observer } from 'mobx-react';
-import classNames from 'classnames';
+import { useContext, useMemo } from 'react';
 import { FragmentAnnotationStoreContext } from './store';
+import { observer } from 'mobx-react';
+import { FcrBoardToolType } from 'fcr-core/lib/room-control/whiteboard-control-v2/enum';
 import './style.css';
-// import '../../modules/annotation/board-cursor.css';
-
-import { isMac } from '../../utilities/platform';
+import './cursor.css';
 import { jsx as _jsx } from "react/jsx-runtime";
 var View = observer(function () {
   var _useContext = useContext(FragmentAnnotationStoreContext),
-    handleBoardDomLoad = _useContext.handleBoardDomLoad,
     currentTool = _useContext.currentTool,
-    drawing = _useContext.drawing,
-    setDrawing = _useContext.setDrawing;
-  var cursorClassname = "board-widget-cursor-".concat(currentTool);
-  var boardWidgetAppCls = classNames('fragment-annotation-wrapper', 'board-widget-app', cursorClassname.toLowerCase());
-  var handleMouseMove = function handleMouseMove(e) {
-    requestIdleCallback(function (idle) {
-      if (!drawing && idle.timeRemaining() > 0) {
-        // renderer.sendEvent({
-        //   action: FcrUIRendererEventAction.FRAGMENT_ANNOTATION_MOUSE_MOVE,
-        //   payload: {
-        //     x: e.screenX,
-        //     y: e.screenY,
-        //   },
-        // });
-      }
-    }, {
-      timeout: 1000
-    });
-    // !drawing &&
-    //   sendEvent({
-    //     action: FcrUIRendererEventAction.FRAGMENT_ANNOTATION_MOUSE_MOVE,
-    //     payload: {
-    //       x: e.clientX,
-    //       y: e.clientY,
-    //     },
-    //   });
-  };
-  useEffect(function () {
-    if (isMac()) return;
-    drawing ? window.removeEventListener('mousemove', handleMouseMove) : window.addEventListener('mousemove', handleMouseMove);
-    return function () {
-      window.removeEventListener('mousemove', handleMouseMove);
-    };
-  }, [drawing]);
+    handleBoardDomLoad = _useContext.handleBoardDomLoad;
+  var cursor = useMemo(function () {
+    return FcrBoardToolType[currentTool].toLowerCase();
+  }, [currentTool]);
   return /*#__PURE__*/_jsx("div", {
-    onMouseDown: function onMouseDown() {
-      return setDrawing(true);
-    },
-    onMouseUp: function onMouseUp() {
-      return setDrawing(false);
-    },
-    className: boardWidgetAppCls,
+    className: "fcr-fragment-whiteboard-view board-widget-cursor-".concat(cursor),
     ref: handleBoardDomLoad
   });
 });

package/lib-es/fragments/base.js

@@ -2,7 +2,7 @@ import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import { changeLanguage } from 'agora-ui-foundation/lib/i18n';
-import { getLanguage } from '../utilities/tools';
+import { getLanguage } from 'agora-foundation/lib/utilities/tools';
 import { getLogger } from '../utilities/logger';
 import { FcrUIRendererWrapper } from '../utilities/renderer';
 export var BaseFragment = /*#__PURE__*/function () {

package/lib-es/fragments/whiteboard/libs.js

@@ -0,0 +1,147 @@
+import { FcrBoardToolType } from 'fcr-core/lib/room-control/whiteboard-control-v2/enum';
+import { FcrIconType } from 'agora-ui-foundation/lib/components/icon/type';
+import { FcrBoardShape } from 'fcr-core/lib/room-control/whiteboard-control-v2/enum';
+import { transI18n } from 'agora-ui-foundation/lib/i18n';
+export function convertTool(type) {
+  switch (type) {
+    case FcrBoardToolType.ARROW:
+      return 'arrow';
+    case FcrBoardToolType.CURVE:
+      return 'curve';
+    case FcrBoardToolType.ELLIPSE:
+      return 'ellipse';
+    case FcrBoardToolType.ERASER:
+      return 'eraser';
+    case FcrBoardToolType.LASER_POINTER:
+      return 'laser';
+    case FcrBoardToolType.TEXT:
+      return 'text';
+    case FcrBoardToolType.RECTANGLE:
+      return 'rectangle';
+    case FcrBoardToolType.TRIANGLE:
+      return 'triangle';
+    case FcrBoardToolType.SELECTOR:
+      return 'selector';
+    case FcrBoardToolType.STRAIGHT:
+      return 'line';
+    // case FcrBoardToolType.PENTAGRAM:
+    //   return 'pentagram';
+    // case FcrBoardToolType.RHOMBUS:
+    //   return 'rhombus';
+    case FcrBoardToolType.HAND:
+      return 'grab';
+    default:
+      return 'curve';
+  }
+}
+export var engineRestConfig = {
+  dualCameraVideoStreamConfig: {
+    highVideoEncoderConfig: {
+      dimensions: {
+        width: 0,
+        height: 0
+      },
+      frameRate: 0,
+      bitrate: 0,
+      orientationMode: undefined,
+      degradationPreference: undefined,
+      isMirror: undefined
+    },
+    lowVideoEncoderConfig: {
+      dimensions: {
+        width: 0,
+        height: 0
+      },
+      frameRate: 0,
+      bitrate: 0,
+      orientationMode: undefined,
+      degradationPreference: undefined,
+      isMirror: undefined
+    },
+    enableDualStreamMode: false
+  },
+  dualScreenVideoStreamConfig: {
+    highVideoEncoderConfig: {
+      dimensions: {
+        width: 0,
+        height: 0
+      },
+      frameRate: 0,
+      bitrate: 0,
+      orientationMode: undefined,
+      degradationPreference: undefined,
+      isMirror: undefined
+    },
+    lowVideoEncoderConfig: {
+      dimensions: {
+        width: 0,
+        height: 0
+      },
+      frameRate: 0,
+      bitrate: 0,
+      orientationMode: undefined,
+      degradationPreference: undefined,
+      isMirror: undefined
+    },
+    enableDualStreamMode: false
+  },
+  parameters: {
+    rte: {
+      rtcClientIsDisabled: true
+    }
+  }
+};
+export var tools = [{
+  iconType: FcrIconType.FCR_WHITEBOARD_SHAP_SQUARE,
+  shape: FcrBoardShape.Rectangle,
+  tip: transI18n('fmt_whiteboard_tips_rectangle')
+}, {
+  iconType: FcrIconType.FCR_WHITEBOARD_SHAP_CIRCLE,
+  shape: FcrBoardShape.Ellipse,
+  tip: transI18n('fmt_whiteboard_tips_circle')
+}, {
+  iconType: FcrIconType.FCR_WHITEBOARD_SHAP_TRIANGLE,
+  shape: FcrBoardShape.Triangle,
+  tip: transI18n('fmt_whiteboard_tips_triangle')
+}, {
+  iconType: FcrIconType.FCR_WHITEBOARD_SHAP_LINE,
+  shape: FcrBoardShape.Straight,
+  tip: transI18n('fmt_whiteboard_tips_straight')
+}, {
+  iconType: FcrIconType.FCR_WHITEBOARD_SHAP_ARROW,
+  shape: FcrBoardShape.Arrow,
+  tip: transI18n('fmt_whiteboard_tips_arrow')
+}];
+export var lineWidths = [{
+  iconType: FcrIconType.FCR_PENSIZE,
+  width: 2
+}, {
+  iconType: FcrIconType.FCR_PENSIZE,
+  width: 4
+}, {
+  iconType: FcrIconType.FCR_PENSIZE,
+  width: 5
+}, {
+  iconType: FcrIconType.FCR_PENSIZE,
+  width: 6
+}];
+export function convertShapeToBoardToolType(shape) {
+  switch (shape) {
+    case FcrBoardShape.Arrow:
+      return FcrBoardToolType.ARROW;
+    case FcrBoardShape.Curve:
+      return FcrBoardToolType.CURVE;
+    case FcrBoardShape.Ellipse:
+      return FcrBoardToolType.ELLIPSE;
+    case FcrBoardShape.Pentagram:
+      return FcrBoardToolType.PENTAGRAM;
+    case FcrBoardShape.Rectangle:
+      return FcrBoardToolType.RECTANGLE;
+    case FcrBoardShape.Straight:
+      return FcrBoardToolType.STRAIGHT;
+    case FcrBoardShape.Triangle:
+      return FcrBoardToolType.TRIANGLE;
+    default:
+      return FcrBoardToolType.NONE;
+  }
+}

package/lib-es/fragments/whiteboard/store.js

@@ -8,7 +8,6 @@ var _FragmentWhiteboardStore;
 var _initProto, _init_currentTool;
 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) { _defineProperty(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; }
-import _regeneratorRuntime from "@babel/runtime/regenerator";
 import "core-js/modules/es.symbol.js";
 import "core-js/modules/es.symbol.description.js";
 import "core-js/modules/es.symbol.to-primitive.js";
@@ -34,9 +33,7 @@ import "core-js/modules/es.object.get-own-property-descriptor.js";
 import "core-js/modules/es.object.get-own-property-descriptors.js";
 import "core-js/modules/es.object.keys.js";
 import "core-js/modules/es.object.to-string.js";
-import "core-js/modules/es.regexp.exec.js";
 import "core-js/modules/es.string.iterator.js";
-import "core-js/modules/es.string.search.js";
 import "core-js/modules/es.weak-map.js";
 import "core-js/modules/esnext.function.metadata.js";
 import "core-js/modules/esnext.iterator.constructor.js";
@@ -62,10 +59,7 @@ import "core-js/modules/esnext.weak-map.delete-all.js";
 import "core-js/modules/esnext.weak-map.emplace.js";
 import "core-js/modules/web.dom-collections.for-each.js";
 import "core-js/modules/web.dom-collections.iterator.js";
-import "core-js/modules/web.url-search-params.js";
-import "core-js/modules/web.url-search-params.delete.js";
-import "core-js/modules/web.url-search-params.has.js";
-import "core-js/modules/web.url-search-params.size.js";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
 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; }
@@ -76,18 +70,18 @@ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol"
 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; }
-import { FcrConnectionState, FcrCoreEngine, FcrRegion } from 'fcr-core';
-import { createContext } from 'react';
-import { createFragmentLogger } from '../../utilities/logger';
-import { engineRestConfig } from '../annotation/libs';
 import { bound } from 'agora-foundation/lib/decorator';
-import { FcrAnnotationControlFactoryImpl, FcrWhiteboardControlFactoryImpl } from 'fcr-core/lib/imports';
+import { FcrConnectionState, FcrCoreEngine, FcrRegion, FcrCoreEngineConfig } from 'fcr-core';
+import { FcrWhiteboardControlFactoryImpl } from 'fcr-core/lib/imports';
 import { FcrBoardToolType } from 'fcr-core';
-import { WhiteboardToolAction } from '../../modules/secondary-window/type';
-import { convertShapeToBoardToolType } from '../annotation/toolbar/components/graphic-tool/graphic-panel/libs';
 import { observable } from 'mobx';
-import { storage } from '../../utilities/tools';
-var STORAGE_KEY_ANNOTATION_BOARD_OPTIONS = 'annotation_board_options';
+import { createContext } from 'react';
+import tinycolor from 'tinycolor2';
+import { WhiteboardToolAction } from '../../modules/secondary-window/type';
+import '../../plugins/rtm-plugin';
+import { createFragmentLogger } from '../../utilities/logger';
+import { storage } from 'agora-foundation/lib/utilities/tools';
+import { convertShapeToBoardToolType, engineRestConfig } from './libs';
 var STORAGE_KEY_WHITEBOARD_OPTIONS = 'whiteboard_options';
 var STORAGE_KEY_ANNOTATION_NICKNAME = 'annotation_nickname';
 var _A = /*#__PURE__*/new WeakMap();
@@ -99,7 +93,6 @@ export var FragmentWhiteboardStore = /*#__PURE__*/function () {
       prefix: 'FragmentWhiteboardStore'
     })));
     _defineProperty(this, "_engine", null);
-    _defineProperty(this, "_sharingType", 'whiteboard');
     _defineProperty(this, "_isMounted", false);
     _defineProperty(this, "_boardObserver", {
       onConnectionStateUpdated: this._handleConnectionStateUpdated
@@ -120,53 +113,55 @@ export var FragmentWhiteboardStore = /*#__PURE__*/function () {
         _this.logger.info("[whiteboard-fragment]: onBackgroundColorUpdated ".concat(color));
         (_this$_boardInstance = _this._boardInstance) === null || _this$_boardInstance === void 0 || _this$_boardInstance.setBackgroundColor(color);
       },
-      onSharingUserUpdated: function onSharingUserUpdated(userInfo) {
-        _this.logger.info("[whiteboard-fragment]: onSharingUserUpdated ".concat(userInfo));
-      },
       onPermissionUpdated: function onPermissionUpdated(hasWriteBoardPermission) {
         _this.logger.info("[whiteboard-fragment]: onPermissionUpdated ".concat(hasWriteBoardPermission));
-        if (_this._sharingType === 'whiteboard') {
-          // 子窗口的白板需要独立更新权限, FcrMainRoomControlImpl 内只处理了主窗口权限更新
-          if (_this._whiteboardControl) {
-            _this._whiteboardControl.setOperationPrivilege(hasWriteBoardPermission);
-          }
-        } else {
-          // TODO
+
+        // 子窗口的白板需要独立更新权限, FcrMainRoomControlImpl 内只处理了主窗口权限更新
+        if (_this._whiteboardControl) {
+          _this._whiteboardControl.setOperationPrivilege(hasWriteBoardPermission);
         }
       },
       onWhiteboardInActive: function onWhiteboardInActive() {
         _this.logger.info("[whiteboard-fragment]: onWhiteboardInActive");
         _this.unload();
       },
-      onWhiteboardToolSelected: function onWhiteboardToolSelected(tools) {
-        var _this$_boardInstance2, _this$_boardInstance3, _this$_boardInstance4, _this$_boardInstance5, _this$_boardInstance6, _this$_boardInstance7, _this$_boardInstance8;
-        var action = tools.action,
-          tool = tools.tool;
-        _this.logger.info("[whiteboard-fragment]: onWhiteboardToolSelected ".concat(action, " - ").concat(tool));
-        switch (action) {
-          case WhiteboardToolAction.TOOL:
-            _this.currentTool = tool;
-            (_this$_boardInstance2 = _this._boardInstance) === null || _this$_boardInstance2 === void 0 || _this$_boardInstance2.setToolType(tool);
-            break;
-          case WhiteboardToolAction.SHAPE:
-            _this.currentTool = convertShapeToBoardToolType(tool);
-            (_this$_boardInstance3 = _this._boardInstance) === null || _this$_boardInstance3 === void 0 || _this$_boardInstance3.setToolType(convertShapeToBoardToolType(tool));
-            break;
-          case WhiteboardToolAction.WIDTH:
-            (_this$_boardInstance4 = _this._boardInstance) === null || _this$_boardInstance4 === void 0 || _this$_boardInstance4.setStrokeWidth(tool);
-            break;
-          case WhiteboardToolAction.COLOR:
-            (_this$_boardInstance5 = _this._boardInstance) === null || _this$_boardInstance5 === void 0 || _this$_boardInstance5.setStrokeColor(tool);
-            break;
-          case WhiteboardToolAction.UNDO:
-            (_this$_boardInstance6 = _this._boardInstance) === null || _this$_boardInstance6 === void 0 || _this$_boardInstance6.undo();
-            break;
-          case WhiteboardToolAction.REDO:
-            (_this$_boardInstance7 = _this._boardInstance) === null || _this$_boardInstance7 === void 0 || _this$_boardInstance7.redo();
-            break;
-          case WhiteboardToolAction.CLEAR:
-            (_this$_boardInstance8 = _this._boardInstance) === null || _this$_boardInstance8 === void 0 || _this$_boardInstance8.clean();
-            break;
+      onWhiteboardStrokeColorChanged: function onWhiteboardStrokeColorChanged(color) {
+        var _this$_boardInstance2;
+        _this.logger.info("[whiteboard-fragment]: onWhiteboardStrokeColorChanged ".concat(color));
+        (_this$_boardInstance2 = _this._boardInstance) === null || _this$_boardInstance2 === void 0 || _this$_boardInstance2.setStrokeColor(tinycolor(color).toRgb());
+      },
+      onWhiteboardStrokeWidthChanged: function onWhiteboardStrokeWidthChanged(width) {
+        var _this$_boardInstance3;
+        _this.logger.info("[whiteboard-fragment]: onWhiteboardStrokeWidthChanged ".concat(width));
+        (_this$_boardInstance3 = _this._boardInstance) === null || _this$_boardInstance3 === void 0 || _this$_boardInstance3.setStrokeWidth(width);
+      },
+      onWhiteboardToolSelected: function onWhiteboardToolSelected(_ref) {
+        var _this$_boardInstance6, _this$_boardInstance7, _this$_boardInstance8;
+        var tool = _ref.tool,
+          shape = _ref.shape,
+          action = _ref.action;
+        if (tool !== undefined) {
+          var _this$_boardInstance4;
+          _this.currentTool = tool;
+          (_this$_boardInstance4 = _this._boardInstance) === null || _this$_boardInstance4 === void 0 || _this$_boardInstance4.setToolType(tool);
+        }
+        if (shape !== undefined) {
+          var _this$_boardInstance5;
+          _this.currentTool = convertShapeToBoardToolType(shape);
+          (_this$_boardInstance5 = _this._boardInstance) === null || _this$_boardInstance5 === void 0 || _this$_boardInstance5.setToolType(convertShapeToBoardToolType(shape));
+        }
+        if (action) {
+          switch (action) {
+            case WhiteboardToolAction.UNDO:
+              (_this$_boardInstance6 = _this._boardInstance) === null || _this$_boardInstance6 === void 0 || _this$_boardInstance6.undo();
+              break;
+            case WhiteboardToolAction.REDO:
+              (_this$_boardInstance7 = _this._boardInstance) === null || _this$_boardInstance7 === void 0 || _this$_boardInstance7.redo();
+              break;
+            case WhiteboardToolAction.CLEAR:
+              (_this$_boardInstance8 = _this._boardInstance) === null || _this$_boardInstance8 === void 0 || _this$_boardInstance8.clean();
+              break;
+          }
         }
       },
       onSaveDraft: function () {
@@ -197,27 +192,18 @@ export var FragmentWhiteboardStore = /*#__PURE__*/function () {
     });
     _defineProperty(this, "_engineObserver", {});
     _classPrivateFieldInitSpec(this, _A, _init_currentTool(this, FcrBoardToolType.NONE));
-    var urlParams = new URLSearchParams(window.location.search);
-    var type = urlParams.get('type');
     window.require = parent.window.require;
     var appId = storage.get('annotation_rtm_app_id') || '';
     var boardOptions = storage.get(STORAGE_KEY_WHITEBOARD_OPTIONS);
     var _JSON$parse = JSON.parse(boardOptions || '{}'),
       roomToken = _JSON$parse.boardUserToken,
       userId = _JSON$parse.boardUserUuid;
-    if (type === 'annotation') {
-      this._sharingType = 'annotation';
-      this.logger.info("[whiteboard-fragment]: sharing type is annotation, with a annotation user id: ".concat(userId));
-    } else {
-      this._sharingType = 'whiteboard';
-      this.logger.info("[whiteboard-fragment]: sharing type is whiteboard, with a board user id: ".concat(userId));
-    }
     if (!roomToken) {
-      this.logger.error("[whiteboard-fragment]: room token is not found, the sharing type is ".concat(this._sharingType));
+      this.logger.error("[whiteboard-fragment]: room token is not found");
       return;
     }
     if (!userId) {
-      this.logger.error("[whiteboard-fragment]: user id is not found, the sharing type is ".concat(this._sharingType));
+      this.logger.error("[whiteboard-fragment]: user id is not found");
       return;
     }
     this._init(this._initEngine({
@@ -247,11 +233,6 @@ export var FragmentWhiteboardStore = /*#__PURE__*/function () {
     get: function get() {
       return this._boardDom;
     }
-  }, {
-    key: "sharingType",
-    get: function get() {
-      return this._sharingType;
-    }
   }, {
     key: "mainWindowRenderer",
     get: function get() {
@@ -312,13 +293,13 @@ export var FragmentWhiteboardStore = /*#__PURE__*/function () {
       // @ts-ignore
       window.parent.FcrUIMainWindowRenderer.notifyObservers('onConnectionStateUpdated', state);
       if (state === FcrConnectionState.CONNECTED) {
-        var _this$_annotationCont, _this$_boardInstance0;
+        var _this$_boardInstance0;
         this.logger.info(// @ts-ignore
         "[whiteboard-fragment]: connection state updated: ".concat(FcrConnectionState[state], ", background color: ").concat(window.parent.FcrUIMainWindowRenderer.backgroundColor));
-        this._boardInstance = this._sharingType === 'whiteboard' ? this._boardControl.getMainWindow() : (_this$_annotationCont = this._annotationControl) === null || _this$_annotationCont === void 0 ? void 0 : _this$_annotationCont.getMainWindow();
-        var backgroundColor = this._sharingType === 'whiteboard' ?
+        this._boardInstance = this._boardControl.getMainWindow();
+
         // @ts-ignore
-        window.parent.FcrUIMainWindowRenderer.backgroundColor : 'transparent';
+        var backgroundColor = window.parent.FcrUIMainWindowRenderer.backgroundColor;
         (_this$_boardInstance0 = this._boardInstance) === null || _this$_boardInstance0 === void 0 || _this$_boardInstance0.setBackgroundColor(backgroundColor);
         this._boardInstance && this._boardInstance.addObserver(this._boardMainWindowObserver);
         this._mount();
@@ -336,8 +317,11 @@ export var FragmentWhiteboardStore = /*#__PURE__*/function () {
                 onConnectionStateUpdated: function onConnectionStateUpdated(state) {
                   if (state === FcrConnectionState.CONNECTED) {
                     _this2._engine = engine;
-                    _this2._sharingType === 'whiteboard' ? _this2._initWhiteboardControl() : null;
-                    // : this._initAnnotationControl();
+
+                    // 只需要初始化一次, 网络断开重连时不需要重复初始化
+                    if (!_this2._whiteboardControl) {
+                      _this2._initWhiteboardControl();
+                    }
                     _this2.logger.info("[whiteboard-fragment][initEngine]: engine connection state updated => CONNECTED}");
                   }
                   if (state === FcrConnectionState.DISCONNECTED) {
@@ -415,55 +399,6 @@ export var FragmentWhiteboardStore = /*#__PURE__*/function () {
       }
       return _initWhiteboardControl;
     }()
-  }, {
-    key: "_initAnnotationControl",
-    value: function () {
-      var _initAnnotationControl2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee4() {
-        var nickName, annotationOptions, _JSON$parse3, boardAppId, boardId, region, boardToken, userId, config, hasPrivilege;
-        return _regeneratorRuntime.wrap(function (_context4) {
-          while (1) switch (_context4.prev = _context4.next) {
-            case 0:
-              nickName = storage.get(STORAGE_KEY_ANNOTATION_NICKNAME) || '';
-              annotationOptions = storage.get(STORAGE_KEY_ANNOTATION_BOARD_OPTIONS);
-              _JSON$parse3 = JSON.parse(annotationOptions || '{}'), boardAppId = _JSON$parse3.boardAppId, boardId = _JSON$parse3.boardId, region = _JSON$parse3.boardRegion, boardToken = _JSON$parse3.boardToken, userId = _JSON$parse3.boardUserUuid;
-              config = {
-                userId: userId,
-                userName: nickName,
-                boardRatio: 1,
-                roomId: boardId,
-                // extra: {
-                //   boardAppId,
-                //   boardId,
-                //   region,
-                //   boardToken,
-                // },
-                size: {
-                  width: 1920,
-                  height: 1220
-                }
-              };
-              this.logger.info("[whiteboard-fragment]: start create annotation sub process with config: ".concat(JSON.stringify(config)));
-              hasPrivilege = false;
-              this._annotationControl = new FcrAnnotationControlFactoryImpl().createForSubProcess(
-              // @ts-ignore
-              this._engine._rteEngine._rtmClient._client, hasPrivilege, config);
-              this.logger.info("[whiteboard-fragment]: annotation sub process created, the control is ".concat(this._annotationControl));
-              this._annotationControl.addObserver(this._boardObserver);
-              _context4.next = 1;
-              return this._annotationControl.open();
-            case 1:
-              this.logger.info("[whiteboard-fragment]: annotation opened, the instance is ".concat(this._boardInstance));
-            case 2:
-            case "end":
-              return _context4.stop();
-          }
-        }, _callee4, this);
-      }));
-      function _initAnnotationControl() {
-        return _initAnnotationControl2.apply(this, arguments);
-      }
-      return _initAnnotationControl;
-    }()
   }, {
     key: "_initEngine",
     value: function _initEngine(config) {
@@ -471,17 +406,18 @@ export var FragmentWhiteboardStore = /*#__PURE__*/function () {
         token = config.roomToken,
         appId = config.appId;
       this.logger.info("[whiteboard-fragment][initEngine]: init engine with config => ".concat(JSON.stringify(config)));
-      return new FcrCoreEngine(_objectSpread({
+      var engineConfig = new FcrCoreEngineConfig(_objectSpread({
         appId: appId,
         token: token,
         userId: userId,
         region: FcrRegion.CN
       }, engineRestConfig));
+      return new FcrCoreEngine(engineConfig);
     }
   }]);
 }();
 _FragmentWhiteboardStore = FragmentWhiteboardStore;
-var _applyDecs$e = _slicedToArray(_applyDecs(_FragmentWhiteboardStore, [[observable, 1, "currentTool"], [bound, 2, "handleBoardDomLoad"], [bound, 2, "_mount"], [bound, 2, "_unmount"], [bound, 2, "_handleConnectionStateUpdated"], [bound, 2, "_init"], [bound, 2, "_initWhiteboardControl"], [bound, 2, "_initAnnotationControl"], [bound, 2, "_initEngine"]], []).e, 2);
+var _applyDecs$e = _slicedToArray(_applyDecs(_FragmentWhiteboardStore, [[observable, 1, "currentTool"], [bound, 2, "handleBoardDomLoad"], [bound, 2, "_mount"], [bound, 2, "_unmount"], [bound, 2, "_handleConnectionStateUpdated"], [bound, 2, "_init"], [bound, 2, "_initWhiteboardControl"], [bound, 2, "_initEngine"]], []).e, 2);
 _init_currentTool = _applyDecs$e[0];
 _initProto = _applyDecs$e[1];
 export var FragmentWhiteboardStoreContext = /*#__PURE__*/createContext(null);

package/lib-es/modules/action-bar/components/apps/index.js

@@ -24,8 +24,8 @@ export var Apps = observer(function (_ref) {
       overlayInnerStyle: {
         boxShadow: 'var(--fcr_web_light_dropup_m)',
         border: 'none',
-        width: '374px',
-        height: 'auto'
+        height: 'auto',
+        width: 'max-content'
       },
       onVisibleChange: function onVisibleChange(visible) {
         toggleLayoutBarLock(visible);

package/lib-es/modules/action-bar/components/collapse/index.js

@@ -76,6 +76,10 @@ export var ActionBarCollapseItems = observer(function (_ref) {
   var appItemOptions = _ref.appItemOptions;
   var _useContext = useContext(ActionBarContext),
     isInterpreterEnabled = _useContext.isInterpreterEnabled,
+    isInterpreterSupported = _useContext.isInterpreterSupported,
+    isLiveSupported = _useContext.isLiveSupported,
+    isVirtualBackgroundSupported = _useContext.isVirtualBackgroundSupported,
+    isBeautyModeAbilitySupported = _useContext.isBeautyModeAbilitySupported,
     hasSecurityPermissions = _useContext.hasSecurityPermissions,
     isRecordingSupported = _useContext.isRecordingSupported;
   var _useState = useState(function () {
@@ -87,8 +91,8 @@ export var ActionBarCollapseItems = observer(function (_ref) {
   var filteredItems = useMemo(function () {
     var filter = function filter(item) {
       switch (item.name) {
-        // case 'Record':
-        //   return hasStartCloudRecordingPermission;
+        case 'Record':
+          return isRecordingSupported;
         // case 'ScreenShare':
         //   return hasStartScreenSharePermission;
         case 'Security':
@@ -98,7 +102,8 @@ export var ActionBarCollapseItems = observer(function (_ref) {
         case MidActionOrderMapKey.TriggerSubscribeLanguage:
           return isInterpreterEnabled;
         case MidActionOrderMapKey.Apps:
-          return appItemOptions.length > 0;
+          var isAppsLayerVisible = appItemOptions.length > 0 && (isInterpreterSupported || isLiveSupported || isVirtualBackgroundSupported || isBeautyModeAbilitySupported);
+          return isAppsLayerVisible;
         default:
           return true;
       }