fcr-ui-scene 3.7.2 → 3.7.3

package/lib/modules/components/toolbar/index.js

@@ -0,0 +1,258 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.colors = exports.WhiteboardToolbar = void 0;
+require("core-js/modules/es.array.concat.js");
+require("core-js/modules/es.array.filter.js");
+require("core-js/modules/es.object.to-string.js");
+require("core-js/modules/esnext.iterator.constructor.js");
+require("core-js/modules/esnext.iterator.filter.js");
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _enums = require("fcr-core/lib/room-control/whiteboard-control/enums");
+var _item = require("./components/item");
+var _type = require("agora-ui-foundation/lib/components/icon/type");
+var _penTool = require("./components/pen-tool");
+var _graphicTool = require("./components/graphic-tool");
+var _colorTool = require("./components/color-tool");
+var _i18n = require("agora-ui-foundation/lib/i18n");
+var _react = require("react");
+var _multipleColorTool = require("./components/multiple-color-tool");
+var _saveDraft = require("./components/save-draft");
+var _env = require("agora-foundation/lib/utilities/env");
+var _verticalFrame = require("./components/vertical-frame");
+var _cleanTool = require("./components/clean-tool");
+var _captureTool = require("./components/capture-tool");
+require("./style.css");
+var _groupTool = require("./components/group-tool");
+var _jsxRuntime = require("react/jsx-runtime");
+var colors = exports.colors = ['#E2E2E2', '#968D86', '#5A7D75', '#A1C473', '#51BD69', '#50E3C2', '#0E0E0E', '#FFC908', '#CC3100', '#FC3141', '#4262FF', '#7740EC'];
+var WhiteboardToolbar = exports.WhiteboardToolbar = function WhiteboardToolbar(props) {
+  var show = props.show,
+    currentColor = props.currentColor,
+    currentTool = props.currentTool,
+    currentShape = props.currentShape,
+    currentStrokeWidth = props.currentStrokeWidth,
+    redoSteps = props.redoSteps,
+    undoSteps = props.undoSteps,
+    commonColors = props.commonColors,
+    _props$themeColors = props.themeColors,
+    themeColors = _props$themeColors === void 0 ? colors : _props$themeColors,
+    container = props.container,
+    direction = props.direction,
+    _props$size = props.size,
+    size = _props$size === void 0 ? 28 : _props$size,
+    progress = props.progress,
+    offsetTop = props.offsetTop,
+    undo = props.undo,
+    redo = props.redo,
+    clean = props.clean,
+    setTool = props.setTool,
+    setShape = props.setShape,
+    setStrokeWidth = props.setStrokeWidth,
+    setStrokeColor = props.setStrokeColor,
+    setCommonColors = props.setCommonColors,
+    onSave = props.onSave,
+    setProgress = props.setProgress;
+  var t = (0, _i18n.useI18n)();
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    popoverVisible = _useState2[0],
+    setPopoverVisible = _useState2[1];
+  var _useState3 = (0, _react.useState)('right'),
+    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+    placement = _useState4[0],
+    setPlacement = _useState4[1];
+  var _useState5 = (0, _react.useState)(-1),
+    _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
+    coverCount = _useState6[0],
+    setCoverCount = _useState6[1];
+  var effects = [coverCount, currentTool, currentColor, currentShape, currentStrokeWidth, commonColors, undoSteps, redoSteps, placement];
+  var needHiddenTools = (0, _react.useMemo)(function () {
+    return [/*#__PURE__*/(0, _jsxRuntime.jsx)(_graphicTool.AnnotationGraphicTool, {
+      size: size,
+      placement: placement,
+      currentColor: currentColor,
+      currentTool: currentTool,
+      currentShape: currentShape,
+      setShape: setShape,
+      setStrokeWidth: setStrokeWidth,
+      currentStrokeWidth: currentStrokeWidth,
+      setTool: setTool,
+      hideTitle: true,
+      direction: direction
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_item.AnnotationToolItem, {
+      size: size,
+      onVisibleChange: function onVisibleChange() {
+        return setPopoverVisible(false);
+      },
+      active: currentTool === _enums.FcrBoardToolType.TEXT,
+      onClick: function onClick() {
+        return setTool(_enums.FcrBoardToolType.TEXT);
+      },
+      iconType: _type.FcrIconType.FCR_WHITEBOARD_TEXT,
+      title: t('fmt_screenshare_whiteboard_button_text'),
+      hideTitle: true,
+      placement: placement
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_item.AnnotationToolItem, {
+      size: size,
+      onVisibleChange: function onVisibleChange() {
+        return setPopoverVisible(false);
+      },
+      active: currentTool === _enums.FcrBoardToolType.HAND,
+      onClick: function onClick() {
+        return setTool(_enums.FcrBoardToolType.HAND);
+      },
+      iconType: _type.FcrIconType.FCR_WHITEBOARD_MOVESUBJECTS2,
+      title: t('fmt_screenshare_whiteboard_button_dragdrop'),
+      hideTitle: true,
+      placement: placement
+    }), commonColors ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_cleanTool.AnnotationCleanTool, {
+      size: size,
+      hideTitle: true,
+      currentTool: currentTool,
+      placement: placement,
+      setTool: setTool,
+      clean: clean,
+      direction: direction
+    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_item.AnnotationToolItem, {
+      size: size,
+      onVisibleChange: function onVisibleChange() {
+        return setPopoverVisible(false);
+      },
+      active: currentTool === _enums.FcrBoardToolType.ERASER,
+      onClick: function onClick() {
+        return setTool(_enums.FcrBoardToolType.ERASER);
+      },
+      iconType: _type.FcrIconType.FCR_WHITEBOARD_ERASER2,
+      title: t('fmt_screenshare_whiteboard_button_eraser'),
+      hideTitle: true,
+      placement: placement
+    }), (0, _env.isElectron)() && commonColors && /*#__PURE__*/(0, _jsxRuntime.jsx)(_captureTool.AnnotationCaptureTool, {
+      popoverVisible: popoverVisible,
+      setPopoverVisible: setPopoverVisible,
+      size: size,
+      direction: direction,
+      hideTitle: true,
+      placement: placement
+    }), !commonColors && /*#__PURE__*/(0, _jsxRuntime.jsx)(_item.AnnotationToolItem, {
+      size: size,
+      onVisibleChange: function onVisibleChange() {
+        return setPopoverVisible(false);
+      },
+      onClick: clean,
+      iconType: _type.FcrIconType.FCR_DELETE5,
+      title: t('fmt_screenshare_whiteboard_button_empty'),
+      hideTitle: true,
+      placement: placement
+    })].filter(function (item) {
+      return !!item;
+    });
+  }, effects);
+  var tools = (0, _react.useCallback)(function () {
+    var hiddens = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+    var shows = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+    return [/*#__PURE__*/(0, _jsxRuntime.jsx)(_item.AnnotationToolItem, {
+      size: size,
+      active: currentTool === _enums.FcrBoardToolType.LASER_POINTER,
+      onClick: function onClick() {
+        return setTool(_enums.FcrBoardToolType.LASER_POINTER);
+      },
+      iconType: _type.FcrIconType.FCR_WHITEBOARD_LASERPEN1,
+      color: '#FF0005',
+      title: t('fmt_screenshare_whiteboard_button_laserpen'),
+      hideTitle: true,
+      placement: placement
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_item.AnnotationToolItem, {
+      size: size,
+      active: currentTool === _enums.FcrBoardToolType.SELECTOR,
+      onClick: function onClick() {
+        return setTool(_enums.FcrBoardToolType.SELECTOR);
+      },
+      iconType: _type.FcrIconType.FCR_WHITECHOOSE,
+      title: t('fmt_screenshare_whiteboard_button_boxselection'),
+      hideTitle: true,
+      placement: placement
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_penTool.AnnotationPenTool, {
+      size: size,
+      placement: placement,
+      currentColor: currentColor,
+      currentTool: currentTool,
+      setTool: setTool,
+      currentStrokeWidth: currentStrokeWidth,
+      setStrokeWidth: setStrokeWidth,
+      hideTitle: true,
+      direction: direction
+    })].concat((0, _toConsumableArray2["default"])(hiddens), [coverCount >= 2 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_groupTool.AnnotationGroupTool, {
+      size: size,
+      placement: placement,
+      children: shows
+    }), commonColors ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_multipleColorTool.MultipleColorTool, {
+      coverCount: coverCount,
+      commonColors: commonColors || [],
+      currentColor: currentColor,
+      colors: themeColors,
+      setStrokeColor: setStrokeColor,
+      placement: placement,
+      themeColors: themeColors,
+      size: 36,
+      onContextMenuClick: function onContextMenuClick(colors) {
+        return setCommonColors === null || setCommonColors === void 0 ? void 0 : setCommonColors(colors);
+      }
+    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_colorTool.AnnotationColorTool, {
+      direction: 'horizontal',
+      placement: placement,
+      size: 36,
+      currentColor: currentColor,
+      colors: themeColors,
+      setStrokeColor: setStrokeColor,
+      hideTitle: true
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_item.AnnotationToolItem, {
+      size: size,
+      onClick: undo,
+      iconType: _type.FcrIconType.FCR_MOBILE_WHITEBOARD_UNDO,
+      title: t('fmt_screenshare_whiteboard_button_withdrwa'),
+      disabled: !redoSteps,
+      hideTitle: true,
+      placement: placement
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_item.AnnotationToolItem, {
+      size: size,
+      onClick: redo,
+      iconType: _type.FcrIconType.FCR_MOBILE_WHITEBOARD_REDO,
+      title: t('fmt_screenshare_whiteboard_button_forward'),
+      disabled: !undoSteps,
+      hideTitle: true,
+      placement: placement
+    }), onSave && /*#__PURE__*/(0, _jsxRuntime.jsx)(_saveDraft.AnnotationToolSaveDraft, {
+      progress: progress || 0,
+      setProgress: setProgress || function () {},
+      onClick: onSave,
+      placement: placement
+    })]).filter(function (item) {
+      return !!item;
+    });
+  }, effects);
+  var length = commonColors ? needHiddenTools.length + 1 : needHiddenTools.length - 1;
+  var hiddens = (0, _react.useMemo)(function () {
+    return needHiddenTools.filter(function (_, index) {
+      return length - index > coverCount;
+    });
+  }, effects);
+  var shows = (0, _react.useMemo)(function () {
+    return needHiddenTools.filter(function (_, index) {
+      return length - index <= coverCount;
+    });
+  }, effects);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_verticalFrame.VerticalBar, {
+    offsetTop: offsetTop,
+    container: container,
+    show: show,
+    onPlacementChanged: setPlacement,
+    onResize: setCoverCount,
+    children: tools(hiddens, shows)
+  });
+};

package/lib/modules/components/toolbar/style.css

@@ -0,0 +1,85 @@
+.fcr-fragment-whiteboard-toolbar {
+  width: 48px;
+  position: absolute;
+  left: 20px;
+  top: 20px;
+  z-index: 1000;
+  background-color: #fff;
+  border-radius: 8px;
+  box-shadow: var(--fcr_web_light_dropup);
+  padding: 6px 0;
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.fcr-fragment-board-toolbar-fold {
+  position: absolute;
+  top: 50%;
+  cursor: pointer;
+  transition: all 0.2s;
+  filter: drop-shadow(2px 0px 1px rgba(0, 0, 0, 0.05));
+  opacity: 0;
+}
+
+.fcr-fragment-whiteboard-toolbar:hover .fcr-fragment-board-toolbar-fold {
+  opacity: 1;
+}
+
+.fcr-fragment-board-toolbar-fold--right {
+  left: calc(100% - 1px);
+  transform: translateY(-50%);
+}
+
+.fcr-fragment-board-toolbar-fold--left {
+  right: calc(100% - 1px);
+  transform: translateY(-50%) rotate(180deg);
+}
+
+.fcr-fragment-board-toolbar-fold path:nth-child(1) {
+  --fill-color: var(--fcr_ui_scene_white10);
+  fill: var(--fill-color);
+}
+
+.fcr-fragment-board-toolbar-fold path:nth-child(2) {
+  --fill-color: var(--fcr_ui_scene_black8);
+  fill: var(--fill-color);
+  transition: all 0.2s;
+}
+
+.fcr-fragment-board-toolbar-fold:hover path:nth-child(2) {
+  fill: var(--fcr_ui_scene_ramp_brand6);
+}
+
+.fcr-fragment-board-toobar-folded-button {
+  width: 60px;
+  height: 60px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  background: var(--fcr_ui_scene_white10);
+  border-radius: 4px;
+  font-size: 12px;
+  position: absolute;
+  box-shadow: var(--fcr_web_light_dropup);
+  cursor: pointer;
+  z-index: 100;
+}
+
+.fcr-fragment-board-toobar-folded-button svg {
+  width: 28px;
+}
+
+.fcr-fragment-board-toobar-folded-button path {
+  fill: var(--fcr_ui_scene_black8) !important;
+}
+
+.fcr-fragment-board-toobar-folded-button:hover {
+  color: var(--fcr_ui_scene_ramp_brand6);
+}
+
+.fcr-fragment-board-toobar-folded-button:hover path {
+  fill: var(--fcr_ui_scene_ramp_brand6) !important;
+}

package/lib/modules/components/toolbar/types.d.ts

@@ -0,0 +1,13 @@
+import { FcrBoardShape, FcrBoardToolType } from 'fcr-core/lib/room-control/whiteboard-control/enums';
+export type FcrToolbarState = {
+    controlEnable: boolean;
+    currentTool: FcrBoardToolType;
+    currentStrokeWidth: number;
+    currentColor: string;
+    currentShape: FcrBoardShape;
+    redoSteps: boolean;
+    undoSteps: boolean;
+    commonColors: string[];
+    themeColors: string[];
+    progress: number;
+};

package/lib/modules/components/toolbar/types.js

@@ -0,0 +1,6 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/lib/modules/control-bar/components/more-actions/index.js

@@ -41,12 +41,6 @@ var MorePopoverContent = exports.MorePopoverContent = (0, _mobxReact.observer)(f
     handleLeaveRoom = _useContext.handleLeaveRoom,
     showToast = _useContext.showToast,
     newMessageCount = _useContext.newMessageCount,
-    _useContext$roomInfo = _useContext.roomInfo,
-    inviteLink = _useContext$roomInfo.inviteLink,
-    password = _useContext$roomInfo.password,
-    roomId = _useContext$roomInfo.roomId,
-    roomName = _useContext$roomInfo.roomName,
-    userName = _useContext.localUser.userName,
     isRoomDetailSupported = _useContext.isRoomDetailSupported,
     roomDetailCopyText = _useContext.roomDetailCopyText;
   var transI18n = (0, _i18n.useI18n)();

package/lib/modules/control-bar/components/share-state-nav/index.js

@@ -46,7 +46,8 @@ var ShareStateNav = exports.ShareStateNav = (0, _mobxReact.observer)(function (p
     isMuteAudio = _useContext.isMuteAudio,
     cloudRecordingState = _useContext.cloudRecordingState,
     meetingTime = _useContext.meetingTime,
-    isCurrentScreenShareInSmoothType = _useContext.isCurrentScreenShareInSmoothType;
+    isCurrentScreenShareInSmoothType = _useContext.isCurrentScreenShareInSmoothType,
+    isEngineConnected = _useContext.isEngineConnected;
   var transI18n = (0, _i18n.useI18n)();
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     className: "share-state-nav fcr-flex fcr-items-center \n                 fcr-justify-center share-action-nav__can-draggable \n                ".concat(currentPosition === _enums.TransferPosition.TOP ? 'share-state-nav-top' : 'share-state-nav-bottom'),
@@ -55,7 +56,7 @@ var ShareStateNav = exports.ShareStateNav = (0, _mobxReact.observer)(function (p
       currentPosition: currentPosition
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: "share-state-nav__state-text",
-      children: transI18n('fmt_settings_tips_sharing')
+      children: isEngineConnected ? transI18n('fmt_settings_tips_sharing') : transI18n('fmt_screenshare_toolbar_label_reconnecting')
     }), isCurrentScreenShareInSmoothType ? /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: "share-state-nav__meeting-scenario-type",
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {

package/lib/modules/control-bar/index.js

@@ -28,6 +28,7 @@ var _view = require("./view");
 var _store2 = require("../components/device-control/store");
 var _constant = require("../../utilities/constant");
 var _store3 = require("../components/leave-meeting/store");
+var _fcrCore = require("fcr-core");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 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)); }
@@ -98,7 +99,7 @@ var ControlBarUIModule = exports.ControlBarUIModule = /*#__PURE__*/function (_UI
           this._store.handlerStopShare();
           break;
         case _constant.FcrUIRendererEventAction.FRAGMENT_ANNOTATION_ENGINE_STATE:
-          this.logger.info("[control-bar] fragment-annotation-engine-state, ".concat(event.payload));
+          this.logger.info("[control-bar] fragment-annotation-engine-state, ".concat(_fcrCore.FcrConnectionState[event.payload]));
           this._store.setFragmentEngineState(event.payload);
           break;
       }

package/lib/modules/control-bar/store.d.ts

@@ -1,4 +1,4 @@
-import { AgoraRtcScreenCaptureType, AgoraRtcWindowInfo } from 'agora-rte-sdk/lib/core/rtc/type';
+import { AgoraRtcWindowInfo } from 'agora-rte-sdk/lib/core/rtc/type';
 import { AudioProcessingChannel } from 'agora-ui-foundation/lib/components/room-screen-share-state-bar/share-audio';
 import { FcrMainRoomControl } from 'fcr-core/lib/room-control/type';
 import { FcrConnectionState, FcrLiveStreamingState, FcrRecordingState, FcrRoomInfo } from 'fcr-core/lib/type';
@@ -66,10 +66,9 @@ export default class ControlBarStore {
     accessor boardOwnerUser: string;
     accessor currentShareDisplayId: number;
     accessor fragmentEngineState: FcrConnectionState;
-    isAnnotationSupported(): boolean;
     get shareWithAudio(): boolean;
     get currentShareId(): string;
-    get currentShareType(): AgoraRtcScreenCaptureType;
+    get currentShareType(): import("agora-rte-sdk/lib/core/rtc/type").AgoraRtcScreenCaptureType;
     get currentShareBounds(): CurrentShareBounds;
     get privilegeProvider(): FcrUIPrivilegeProvider;
     get localUser(): import("fcr-core/lib/type").FcrUserInfo;
@@ -82,14 +81,13 @@ export default class ControlBarStore {
         y: number;
     };
     get hasSecurityPermission(): boolean;
-    get hasStartCloudRecordingPermission(): boolean;
-    get hasStopLiveStreamingPermission(): boolean;
     get hasGetLiveStreamingUrlPermission(): boolean;
+    get hasStartCloudRecordingPermission(): boolean;
     get hasStartLiveStreamingPermission(): boolean;
     get hasAssignHostBeforeLeavingPermission(): boolean;
+    get isEngineConnected(): boolean;
     get hasEndRoomPermission(): boolean;
     get hasAnnotationAllowWritePermission(): boolean;
-    get hasAnnotationWritePermission(): boolean;
     get allowAnnotationWriteState(): boolean;
     get totalHourText(): string;
     get totalMinuteText(): string;
@@ -114,6 +112,9 @@ export default class ControlBarStore {
         x: number;
         y: number;
     };
+    get annotationButtonVisible(): boolean;
+    get liveStreamingButtonVisible(): boolean;
+    get recordingButtonVisible(): boolean;
     constructor({ uiEventStore, securityStore, roomControl, deviceProvider, sharedLayoutDataSource, roomProvider, sharedChatDataSource, sharedMemberDataSource, localStorageProvider, abilityProvider, sharedMeetingTimeDataSource, messageProvider, sharedSecuritySharedDataSource, annotationProvider, sharingProvider, screenShareProvider, sharedScreenShareSharedDataSource, dialogProvider, sharedConfirmDataSource, }: {
         uiEventStore: FcrUIEventProvider;
         securityStore: FcrUIPrivilegeProvider;

package/lib/modules/control-bar/store.js

@@ -67,6 +67,7 @@ var _leaveMeeting = require("../components/leave-meeting");
 var _type3 = require("../../type");
 var _i18n = require("agora-ui-foundation/lib/i18n");
 var _logger = require("../../utilities/logger");
+var _sharedStorage = require("../../utilities/shared-storage");
 var _jsxRuntime = require("react/jsx-runtime");
 var _ControlBarStore;
 var _initProto, _leaveConfirmRefDecs, _init_leaveConfirmRef, _init_recordShareBounds, _init_cloudRecordingState, _init_isHost, _init_roomDuration, _init_startTime, _init_playUrl, _init_liveStreamingState, _init_allApplicationWindows, _init_roomInfo, _init_isShowMeetingDetailPortal, _init_hiddenShareActionNav, _init_boardOwnerUser, _init_currentShareDisplayId, _init_fragmentEngineState, _setCheckedStateMapDecs, _setShareWithAudioStateDecs, _showLockedRoomToastDecs, _createNewShareDecs, _handlerStopShareDecs, _setShareAudioProcessingChannelDecs, _setFragmentEngineStateDecs, _handleMoreClickDecs, _pauseCloudRecordingDecs, _resumeCloudRecordingDecs, _stopCloudRecordingDecs, _showToastDecs, _setShowMeetingDetailPortalDecs, _setEnableWaitingRoomDecs, _handleLeaveRoomDecs, _resetMessageCountDecs, _ref;
@@ -174,7 +175,7 @@ var ControlBarStore = exports["default"] = /*#__PURE__*/function () {
     _classPrivateFieldInitSpec(this, _L, _init_hiddenShareActionNav(this, false));
     _classPrivateFieldInitSpec(this, _M, _init_boardOwnerUser(this, ''));
     _classPrivateFieldInitSpec(this, _N, _init_currentShareDisplayId(this, 0));
-    _classPrivateFieldInitSpec(this, _O, _init_fragmentEngineState(this, _type2.FcrConnectionState.DISCONNECTED));
+    _classPrivateFieldInitSpec(this, _O, _init_fragmentEngineState(this));
     this._uiEventStore = uiEventStore;
     this._roomControl = roomControl;
     this._securityStore = securityStore;
@@ -218,6 +219,7 @@ var ControlBarStore = exports["default"] = /*#__PURE__*/function () {
     };
     roomControl.addObserver(this._roomObserver);
     roomControl.getSharingControl().getBoardControl().addObserver(this._boardObserver);
+    this.fragmentEngineState = (0, _sharedStorage.getAnnotationEngineState)();
   }
   return (0, _createClass2["default"])(ControlBarStore, [{
     key: "leaveConfirmRef",
@@ -339,11 +341,6 @@ var ControlBarStore = exports["default"] = /*#__PURE__*/function () {
     set: function set(v) {
       _classPrivateFieldSet(_O, this, v);
     }
-  }, {
-    key: "isAnnotationSupported",
-    value: function isAnnotationSupported() {
-      return this._abilityProvider.isAnnotationSupported();
-    }
   }, {
     key: "shareWithAudio",
     get: function get() {
@@ -390,19 +387,14 @@ var ControlBarStore = exports["default"] = /*#__PURE__*/function () {
       return this._securityStore.hasSecurityPermission;
     }
   }, {
-    key: "hasStartCloudRecordingPermission",
-    get: function get() {
-      return this._securityStore.hasStartCloudRecordingPermission();
-    }
-  }, {
-    key: "hasStopLiveStreamingPermission",
+    key: "hasGetLiveStreamingUrlPermission",
     get: function get() {
-      return this._securityStore.hasStopLiveStreamingPermission();
+      return this._securityStore.hasGetLiveStreamingLinkPermission();
     }
   }, {
-    key: "hasGetLiveStreamingUrlPermission",
+    key: "hasStartCloudRecordingPermission",
     get: function get() {
-      return this._securityStore.hasGetLiveStreamingLinkPermission();
+      return this._securityStore.hasStartCloudRecordingPermission();
     }
   }, {
     key: "hasStartLiveStreamingPermission",
@@ -414,6 +406,11 @@ var ControlBarStore = exports["default"] = /*#__PURE__*/function () {
     get: function get() {
       return this._securityStore.hasAssignHostBeforeLeavingPermission(_fcrCore.FcrPrivilegeUserRole.HOST);
     }
+  }, {
+    key: "isEngineConnected",
+    get: function get() {
+      return this._sharedScreenShareSharedDataSource.isEngineConnected;
+    }
   }, {
     key: "hasEndRoomPermission",
     get: function get() {
@@ -424,11 +421,6 @@ var ControlBarStore = exports["default"] = /*#__PURE__*/function () {
     get: function get() {
       return this._securityStore.hasAnnotationAllowWritePermission();
     }
-  }, {
-    key: "hasAnnotationWritePermission",
-    get: function get() {
-      return this._securityStore.hasAnnotationWritePermission();
-    }
   }, {
     key: "allowAnnotationWriteState",
     get: function get() {
@@ -535,6 +527,21 @@ var ControlBarStore = exports["default"] = /*#__PURE__*/function () {
     get: function get() {
       return this._sharedConfirmDataSource.position;
     }
+  }, {
+    key: "annotationButtonVisible",
+    get: function get() {
+      return this._securityStore.hasAnnotationWritePermission() && this._abilityProvider.isAnnotationSupported() && this.fragmentEngineState === _type2.FcrConnectionState.CONNECTED;
+    }
+  }, {
+    key: "liveStreamingButtonVisible",
+    get: function get() {
+      return this._securityStore.hasStopLiveStreamingPermission() && this.liveStreamingState === _type2.FcrLiveStreamingState.STARTED;
+    }
+  }, {
+    key: "recordingButtonVisible",
+    get: function get() {
+      return this._securityStore.hasStartCloudRecordingPermission() && this.cloudRecordingState !== _type2.FcrRecordingState.Stopped;
+    }
   }, {
     key: "setCheckedStateMap",
     value: function setCheckedStateMap(val) {
@@ -767,7 +774,7 @@ var ControlBarStore = exports["default"] = /*#__PURE__*/function () {
   }]);
 }();
 _ControlBarStore = ControlBarStore;
-var _applyDecs$e = (0, _slicedToArray2["default"])(_applyDecs(_ControlBarStore, [[_leaveConfirmRefDecs, 17, "leaveConfirmRef"], [_mobx.observable, 1, "recordShareBounds"], [_mobx.observable, 1, "cloudRecordingState"], [_mobx.observable, 1, "isHost"], [_mobx.observable, 1, "roomDuration"], [_mobx.observable, 1, "startTime"], [_mobx.observable, 1, "playUrl"], [_mobx.observable, 1, "liveStreamingState"], [_mobx.observable, 1, "allApplicationWindows"], [_mobx.observable, 1, "roomInfo"], [_mobx.observable, 1, "isShowMeetingDetailPortal"], [_mobx.observable, 1, "hiddenShareActionNav"], [_mobx.observable, 1, "boardOwnerUser"], [_mobx.observable, 1, "currentShareDisplayId"], [_mobx.observable, 1, "fragmentEngineState"], [_decorator.bound, 2, "isAnnotationSupported"], [_mobx.computed, 3, "hasSecurityPermission"], [_mobx.computed, 3, "hasStartCloudRecordingPermission"], [_mobx.computed, 3, "hasStopLiveStreamingPermission"], [_mobx.computed, 3, "hasGetLiveStreamingUrlPermission"], [_mobx.computed, 3, "hasStartLiveStreamingPermission"], [_mobx.computed, 3, "hasAssignHostBeforeLeavingPermission"], [_mobx.computed, 3, "hasEndRoomPermission"], [_mobx.computed, 3, "hasAnnotationAllowWritePermission"], [_mobx.computed, 3, "allowAnnotationWriteState"], [_mobx.computed, 3, "totalHourText"], [_mobx.computed, 3, "totalMinuteText"], [_mobx.computed, 3, "meetingTimeStatus"], [_mobx.computed, 3, "meetingTime"], [_mobx.computed, 3, "meetingTimeKey"], [_mobx.computed, 3, "roomId"], [_mobx.computed, 3, "meetingId"], [_mobx.computed, 3, "checkedStateMap"], [_setCheckedStateMapDecs, 18, "setCheckedStateMap"], [_setShareWithAudioStateDecs, 18, "setShareWithAudioState"], [_showLockedRoomToastDecs, 18, "showLockedRoomToast"], [_createNewShareDecs, 18, "createNewShare"], [_handlerStopShareDecs, 18, "handlerStopShare"], [_setShareAudioProcessingChannelDecs, 18, "setShareAudioProcessingChannel"], [_setFragmentEngineStateDecs, 18, "setFragmentEngineState"], [_handleMoreClickDecs, 18, "handleMoreClick"], [_decorator.bound, 2, "openLiveStreamingDialog"], [_pauseCloudRecordingDecs, 2, "pauseCloudRecording"], [_resumeCloudRecordingDecs, 2, "resumeCloudRecording"], [_stopCloudRecordingDecs, 2, "stopCloudRecording"], [_decorator.bound, 2, "startCloudRecording"], [_showToastDecs, 18, "showToast"], [_setShowMeetingDetailPortalDecs, 18, "setShowMeetingDetailPortal"], [_setEnableWaitingRoomDecs, 18, "setEnableWaitingRoom"], [_handleLeaveRoomDecs, 18, "handleLeaveRoom"], [_decorator.bound, 2, "getLocalMeetingTime"], [_decorator.bound, 2, "toggleAnnotation"], [_decorator.bound, 2, "setAllAnnotationWrite"], [_decorator.bound, 2, "log"], [_resetMessageCountDecs, 18, "_resetMessageCount"]], []).e, 16);
+var _applyDecs$e = (0, _slicedToArray2["default"])(_applyDecs(_ControlBarStore, [[_leaveConfirmRefDecs, 17, "leaveConfirmRef"], [_mobx.observable, 1, "recordShareBounds"], [_mobx.observable, 1, "cloudRecordingState"], [_mobx.observable, 1, "isHost"], [_mobx.observable, 1, "roomDuration"], [_mobx.observable, 1, "startTime"], [_mobx.observable, 1, "playUrl"], [_mobx.observable, 1, "liveStreamingState"], [_mobx.observable, 1, "allApplicationWindows"], [_mobx.observable, 1, "roomInfo"], [_mobx.observable, 1, "isShowMeetingDetailPortal"], [_mobx.observable, 1, "hiddenShareActionNav"], [_mobx.observable, 1, "boardOwnerUser"], [_mobx.observable, 1, "currentShareDisplayId"], [_mobx.observable, 1, "fragmentEngineState"], [_mobx.computed, 3, "hasSecurityPermission"], [_mobx.computed, 3, "hasGetLiveStreamingUrlPermission"], [_mobx.computed, 3, "hasStartCloudRecordingPermission"], [_mobx.computed, 3, "hasStartLiveStreamingPermission"], [_mobx.computed, 3, "hasAssignHostBeforeLeavingPermission"], [_mobx.computed, 3, "isEngineConnected"], [_mobx.computed, 3, "hasEndRoomPermission"], [_mobx.computed, 3, "hasAnnotationAllowWritePermission"], [_mobx.computed, 3, "allowAnnotationWriteState"], [_mobx.computed, 3, "totalHourText"], [_mobx.computed, 3, "totalMinuteText"], [_mobx.computed, 3, "meetingTimeStatus"], [_mobx.computed, 3, "meetingTime"], [_mobx.computed, 3, "meetingTimeKey"], [_mobx.computed, 3, "roomId"], [_mobx.computed, 3, "meetingId"], [_mobx.computed, 3, "checkedStateMap"], [_mobx.computed, 3, "annotationButtonVisible"], [_mobx.computed, 3, "liveStreamingButtonVisible"], [_mobx.computed, 3, "recordingButtonVisible"], [_setCheckedStateMapDecs, 18, "setCheckedStateMap"], [_setShareWithAudioStateDecs, 18, "setShareWithAudioState"], [_showLockedRoomToastDecs, 18, "showLockedRoomToast"], [_createNewShareDecs, 18, "createNewShare"], [_handlerStopShareDecs, 18, "handlerStopShare"], [_setShareAudioProcessingChannelDecs, 18, "setShareAudioProcessingChannel"], [_setFragmentEngineStateDecs, 18, "setFragmentEngineState"], [_handleMoreClickDecs, 18, "handleMoreClick"], [_decorator.bound, 2, "openLiveStreamingDialog"], [_pauseCloudRecordingDecs, 2, "pauseCloudRecording"], [_resumeCloudRecordingDecs, 2, "resumeCloudRecording"], [_stopCloudRecordingDecs, 2, "stopCloudRecording"], [_decorator.bound, 2, "startCloudRecording"], [_showToastDecs, 18, "showToast"], [_setShowMeetingDetailPortalDecs, 18, "setShowMeetingDetailPortal"], [_setEnableWaitingRoomDecs, 18, "setEnableWaitingRoom"], [_handleLeaveRoomDecs, 18, "handleLeaveRoom"], [_decorator.bound, 2, "getLocalMeetingTime"], [_decorator.bound, 2, "toggleAnnotation"], [_decorator.bound, 2, "setAllAnnotationWrite"], [_decorator.bound, 2, "log"], [_resetMessageCountDecs, 18, "_resetMessageCount"]], []).e, 16);
 _init_leaveConfirmRef = _applyDecs$e[0];
 _init_recordShareBounds = _applyDecs$e[1];
 _init_cloudRecordingState = _applyDecs$e[2];