fcr-ui-scene 3.7.9-alpha → 3.8.0

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

@@ -35,6 +35,7 @@ var MorePopoverContent = exports.MorePopoverContent = (0, _mobxReact.observer)(f
     hasStartLiveStreamingPermission = _useContext.hasStartLiveStreamingPermission,
     hasGetLiveStreamingUrlPermission = _useContext.hasGetLiveStreamingUrlPermission,
     hasEndRoomPermission = _useContext.hasEndRoomPermission,
+    isRecordingSupported = _useContext.isRecordingSupported,
     newMessageCount = _useContext.newMessageCount,
     isRoomDetailSupported = _useContext.isRoomDetailSupported;
   var transI18n = (0, _i18n.useI18n)();
@@ -65,7 +66,14 @@ var MorePopoverContent = exports.MorePopoverContent = (0, _mobxReact.observer)(f
     text: transI18n('fmt_screenshare_controlbar_button_more_cloudRecord'),
     displayWhenNoPermission: 'hidden',
     key: cloudRecordingState === _type2.FcrRecordingState.Stopped ? _enums.MoreAction.CLOUD_RECORDING_START : _enums.MoreAction.CLOUD_RECORDING_STOP,
-    hasPermission: hasStartCloudRecordingPermission && cloudRecordingState === _type2.FcrRecordingState.Stopped
+    hasPermission: isRecordingSupported && hasStartCloudRecordingPermission && cloudRecordingState === _type2.FcrRecordingState.Stopped
+  }, {
+    icon: _type.FcrIconType.FCR_MOREAPP,
+    text: 'Apps',
+    displayWhenNoPermission: 'hidden',
+    key: _enums.MoreAction.OPEN_APPS,
+    hasPermission: true,
+    classNames: 'share-action-nav__media-list-item-with-divider'
   },
   // {
   //   icon: null,

package/lib/modules/control-bar/components/share-audio/index.d.ts

@@ -8,6 +8,8 @@ export interface ShareAudioProps {
     currentAudioChannel?: AudioProcessingChannel;
     onSwitchAudioChannel?: (target: AudioProcessingChannel) => void;
     toggleShareWithAudio?: (target: boolean) => void;
+    popoverVisible: boolean;
+    setPopoverVisible: (visible: boolean) => void;
     showInfoTip?: boolean;
 }
 export declare const ShareAudio: (props: ShareAudioProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -20,7 +20,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.ShareAudio = exports.AudioProcessingChannel = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = require("react");
 require("./index.css");
 var _i18n = require("agora-ui-foundation/lib/i18n");
@@ -45,14 +44,9 @@ var ShareAudio = exports.ShareAudio = function ShareAudio(props) {
     currentAudioChannel = _props$currentAudioCh === void 0 ? AudioProcessingChannel.MONO : _props$currentAudioCh,
     toggleShareWithAudio = props.toggleShareWithAudio,
     _props$showInfoTip = props.showInfoTip,
-    showInfoTip = _props$showInfoTip === void 0 ? false : _props$showInfoTip;
-  var _useState = (0, _react.useState)(false),
-    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-    popoverVisible = _useState2[0],
-    setVisible = _useState2[1];
-  var handlerVisibleChange = function handlerVisibleChange(visible) {
-    setVisible(visible);
-  };
+    showInfoTip = _props$showInfoTip === void 0 ? false : _props$showInfoTip,
+    popoverVisible = props.popoverVisible,
+    setPopoverVisible = props.setPopoverVisible;
   var shareAudioTips = (0, _react.useMemo)(function () {
     if (!shareWithAudio) {
       return t('fmt_screenshare_window_checkbox_shareAudio');
@@ -89,7 +83,7 @@ var ShareAudio = exports.ShareAudio = function ShareAudio(props) {
       content: /*#__PURE__*/(0, _jsxRuntime.jsx)(ShareAudioOptions, _objectSpread({}, props)),
       trigger: "click",
       visible: popoverVisible,
-      onVisibleChange: handlerVisibleChange,
+      onVisibleChange: setPopoverVisible,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         className: "share-audio-action-button share-selectrion",
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {

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

@@ -19,5 +19,6 @@ export declare enum MoreAction {
     CLOUD_RECORDING_STOP = 7,
     LEAVE_ROOM = 8,
     COPY_INVITE_LINK = 9,
-    COPY_MEETING_INFO = 10
+    COPY_MEETING_INFO = 10,
+    OPEN_APPS = 11
 }

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

@@ -29,5 +29,6 @@ var MoreAction = exports.MoreAction = /*#__PURE__*/function (MoreAction) {
   MoreAction[MoreAction["LEAVE_ROOM"] = 8] = "LEAVE_ROOM";
   MoreAction[MoreAction["COPY_INVITE_LINK"] = 9] = "COPY_INVITE_LINK";
   MoreAction[MoreAction["COPY_MEETING_INFO"] = 10] = "COPY_MEETING_INFO";
+  MoreAction[MoreAction["OPEN_APPS"] = 11] = "OPEN_APPS";
   return MoreAction;
 }({});

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

@@ -1,3 +1,4 @@
 export declare const useBoundaryDetect: (ref: React.RefObject<HTMLDivElement>, callbacks: {
     onBoundariesChanged: (rect: FcrUI.FcrUIRectangle) => void;
 }) => void;
+export declare const usePopoverWatcher: (containerRef: React.RefObject<HTMLDivElement>, setArea: (id: string, area: FcrUI.FcrUIRectangle) => void, removeArea: (id: string) => void) => void;

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

@@ -4,8 +4,36 @@ require("core-js/modules/es.object.define-property.js");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useBoundaryDetect = void 0;
+exports.usePopoverWatcher = exports.useBoundaryDetect = void 0;
+require("core-js/modules/es.array.concat.js");
+require("core-js/modules/es.array.for-each.js");
+require("core-js/modules/es.array.iterator.js");
+require("core-js/modules/es.array.some.js");
+require("core-js/modules/es.date.now.js");
+require("core-js/modules/es.map.js");
+require("core-js/modules/es.object.to-string.js");
+require("core-js/modules/es.string.iterator.js");
+require("core-js/modules/esnext.iterator.constructor.js");
+require("core-js/modules/esnext.iterator.for-each.js");
+require("core-js/modules/esnext.iterator.some.js");
+require("core-js/modules/esnext.map.delete-all.js");
+require("core-js/modules/esnext.map.emplace.js");
+require("core-js/modules/esnext.map.every.js");
+require("core-js/modules/esnext.map.filter.js");
+require("core-js/modules/esnext.map.find.js");
+require("core-js/modules/esnext.map.find-key.js");
+require("core-js/modules/esnext.map.includes.js");
+require("core-js/modules/esnext.map.key-of.js");
+require("core-js/modules/esnext.map.map-keys.js");
+require("core-js/modules/esnext.map.map-values.js");
+require("core-js/modules/esnext.map.merge.js");
+require("core-js/modules/esnext.map.reduce.js");
+require("core-js/modules/esnext.map.some.js");
+require("core-js/modules/esnext.map.update.js");
+require("core-js/modules/web.dom-collections.for-each.js");
+require("core-js/modules/web.dom-collections.iterator.js");
 var _schedule = require("agora-foundation/lib/schedule");
+var _lodash = require("lodash");
 var _react = require("react");
 var useBoundaryDetect = exports.useBoundaryDetect = function useBoundaryDetect(ref, callbacks) {
   (0, _react.useEffect)(function () {
@@ -33,4 +61,115 @@ var useBoundaryDetect = exports.useBoundaryDetect = function useBoundaryDetect(r
       }
     };
   }, [callbacks]);
+};
+var handlePositionChange = function handlePositionChange(popover, _onChange) {
+  var lastRect = null;
+  var onChange = (0, _lodash.debounce)(_onChange, 300);
+  var readRect = function readRect() {
+    var domRect = popover.getBoundingClientRect();
+    return {
+      x: domRect.left,
+      y: domRect.top,
+      width: domRect.width,
+      height: domRect.height
+    };
+  };
+  var notifyIfChanged = function notifyIfChanged() {
+    var nextRect = readRect();
+    if (!lastRect || lastRect.x !== nextRect.x || lastRect.y !== nextRect.y || lastRect.width !== nextRect.width || lastRect.height !== nextRect.height) {
+      lastRect = nextRect;
+      onChange(nextRect);
+    }
+  };
+  notifyIfChanged();
+  var observer = new MutationObserver(function (mutationsList) {
+    var shouldUpdate = mutationsList.some(function (mutation) {
+      return mutation.type === 'attributes' && mutation.attributeName === 'style';
+    });
+    if (shouldUpdate) {
+      notifyIfChanged();
+    }
+  });
+  observer.observe(popover, {
+    attributes: true,
+    attributeFilter: ['style']
+  });
+  return function () {
+    onChange.cancel();
+    observer.disconnect();
+  };
+};
+var usePopoverWatcher = exports.usePopoverWatcher = function usePopoverWatcher(containerRef, setArea, removeArea) {
+  (0, _react.useEffect)(function () {
+    if (containerRef.current === null) return;
+    var countNum = 0;
+    var body = containerRef.current.ownerDocument.body;
+    var popoverClassName = 'fcr-popover';
+    var popoverObservers = new Map();
+    var getPopoverElement = function getPopoverElement(node) {
+      if (node.classList.contains(popoverClassName)) {
+        return node;
+      } else {
+        return node.querySelector(".".concat(popoverClassName));
+      }
+    };
+    var observer = new MutationObserver(function (mutationsList) {
+      mutationsList.forEach(function (mutation) {
+        if (mutation.type !== 'childList') {
+          return;
+        }
+        mutation.addedNodes.forEach(function (node) {
+          if (node.nodeType !== Node.ELEMENT_NODE) {
+            return;
+          }
+          var popover = getPopoverElement(node);
+          if (!popover) {
+            return;
+          }
+          var popoverElementId = popover.getAttribute('data-popover-id');
+          if (popoverElementId) {
+            if (popoverObservers.has(popoverElementId)) {
+              return;
+            }
+          } else {
+            popoverElementId = "".concat(popoverClassName, "-").concat(Date.now(), "-").concat(countNum++, "}");
+            popover.setAttribute('data-popover-id', popoverElementId);
+          }
+          popoverObservers.set(popoverElementId, handlePositionChange(popover, function (rect) {
+            setArea(popoverElementId, rect);
+          }));
+        });
+        mutation.removedNodes.forEach(function (node) {
+          if (node.nodeType !== Node.ELEMENT_NODE) {
+            return;
+          }
+          var popover = getPopoverElement(node);
+          if (!popover) {
+            return;
+          }
+          var popoverElementId = popover.getAttribute('data-popover-id');
+          if (popoverElementId) {
+            var disconnect = popoverObservers.get(popoverElementId);
+            if (disconnect) {
+              disconnect();
+              popoverObservers["delete"](popoverElementId);
+            }
+            removeArea(popoverElementId);
+          }
+        });
+      });
+    });
+    observer.observe(body, {
+      childList: true,
+      subtree: true
+    });
+    return function () {
+      observer.disconnect();
+      popoverObservers.forEach(function (disconnect, key) {
+        disconnect();
+        removeArea(key);
+      });
+      popoverObservers.clear();
+    };
+  }, [containerRef.current]);
 };

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

@@ -22,15 +22,13 @@ export default class ControlBarStore implements FcrUIManagedObject {
     private _messageProvider;
     private _dialogProvider;
     private _facilityProvider;
+    private _applistProvider;
     private _sharedMeetingTimeDataSource;
     private _sharedChatDataSource;
     private _sharedLayoutDataSource;
     private _controlBarWindow;
     private _screenShareObserver;
     private _mouseDetectObserver;
-    private _stateNavArea;
-    private _contentArea;
-    private _popoverArea;
     accessor roomDuration: number;
     accessor startTime: number;
     accessor cloudRecordingState: FcrRecordingState;
@@ -43,11 +41,13 @@ export default class ControlBarStore implements FcrUIManagedObject {
         x: number;
         y: number;
     };
+    accessor appActionbarPopoverVisible: boolean;
     accessor roomInfo: FcrRoomInfo;
     accessor roomSchedule: FcrRoomSchedule;
     accessor meetingId: string;
     accessor localUserName: string;
     accessor titleHeight: number;
+    private _detectAreas;
     get isSharingWithAudio(): boolean;
     get isInSmoothMode(): boolean;
     get hasSecurityPermission(): boolean;
@@ -62,6 +62,7 @@ export default class ControlBarStore implements FcrUIManagedObject {
     get meetingTime(): string;
     get isMuteAudio(): boolean;
     get isRoomDetailSupported(): boolean;
+    get isRecordingSupported(): boolean;
     get meetingTimeKey(): string;
     get roomId(): string;
     get checkedStateMap(): FcrSecurityCheckedStateType;
@@ -73,6 +74,7 @@ export default class ControlBarStore implements FcrUIManagedObject {
     get roomDetailCopyText(): string;
     get audioShareMode(): AudioProcessingChannel;
     get newMessageCount(): number;
+    get appItemOptions(): import("../components/apps/types").AppItemProps[];
     constructor({ objectManager }: ControlBarStoreArgs);
     setCheckedStateMap(val: FcrSecurityCheckedStateType): void;
     setShareWithAudioState(withAudio: boolean): void;
@@ -96,12 +98,14 @@ export default class ControlBarStore implements FcrUIManagedObject {
     setEnableWaitingRoom(enable: boolean): void;
     getLocalMeetingTime(): string | null;
     release(): void;
+    setArea(id: string, area: FcrUI.FcrUIRectangle): void;
+    removeArea(id: string): void;
     setStateNavArea(area: FcrUI.FcrUIRectangle): void;
     setControlBarContentArea(area: FcrUI.FcrUIRectangle): void;
-    setPopoverArea(area: FcrUI.FcrUIRectangle): void;
     handleLeaveRoom(): void;
     closeLeaveMeetingDialog(): void;
     handleMoreClick(actionKey: MoreAction): void;
-    updateWindowBounds(): void;
+    updateWindowBounds(bounds: FcrUI.FcrUIRectangle): void;
+    setAppActionbarPopoverVisible(visible: boolean): void;
 }
 export declare const StoreContext: import("react").Context<ControlBarStore>;

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

@@ -6,15 +6,17 @@ 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.is-array.js");
-require("core-js/modules/es.array.push.js");
 require("core-js/modules/es.date.to-primitive.js");
 require("core-js/modules/es.function.bind.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/esnext.function.metadata.js");
 require("core-js/modules/esnext.map.delete-all.js");
 require("core-js/modules/esnext.map.emplace.js");
@@ -37,14 +39,17 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = exports.StoreContext = void 0;
+require("core-js/modules/es.array.filter.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.date.to-string.js");
 require("core-js/modules/es.object.to-string.js");
 require("core-js/modules/es.string.iterator.js");
 require("core-js/modules/es.weak-map.js");
 require("core-js/modules/esnext.iterator.constructor.js");
+require("core-js/modules/esnext.iterator.filter.js");
 require("core-js/modules/esnext.iterator.for-each.js");
 require("core-js/modules/esnext.weak-map.delete-all.js");
 require("core-js/modules/esnext.weak-map.emplace.js");
@@ -72,7 +77,9 @@ var _controlBar = require("../dialog/dialogs/control-bar");
 var _platform = require("../../utilities/platform");
 var _struct = require("../../providers/mouse-detect/struct");
 var _ControlBarStore;
-var _initProto, _init_roomDuration, _init_startTime, _init_cloudRecordingState, _init_playUrl, _init_liveStreamingState, _init_allApplicationWindows, _init_boardOwnerUser, _init_currentShareDisplayId, _init_position, _setCheckedStateMapDecs, _showLockedRoomToastDecs, _handleNewShareDecs, _handlerStopShareDecs, _pauseCloudRecordingDecs, _resumeCloudRecordingDecs, _stopCloudRecordingDecs, _showToastDecs, _handleLeaveRoomDecs, _closeLeaveMeetingDialogDecs, _handleMoreClickDecs, _ref;
+var _initProto, _init_roomDuration, _init_startTime, _init_cloudRecordingState, _init_playUrl, _init_liveStreamingState, _init_allApplicationWindows, _init_boardOwnerUser, _init_currentShareDisplayId, _init_position, _init_appActionbarPopoverVisible, _setCheckedStateMapDecs, _showLockedRoomToastDecs, _handleNewShareDecs, _handlerStopShareDecs, _pauseCloudRecordingDecs, _resumeCloudRecordingDecs, _stopCloudRecordingDecs, _showToastDecs, _handleLeaveRoomDecs, _closeLeaveMeetingDialogDecs, _handleMoreClickDecs, _setAppActionbarPopoverVisibleDecs, _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 _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; }
@@ -92,6 +99,7 @@ var _K = /*#__PURE__*/new WeakMap();
 var _L = /*#__PURE__*/new WeakMap();
 var _M = /*#__PURE__*/new WeakMap();
 var _N = /*#__PURE__*/new WeakMap();
+var _O = /*#__PURE__*/new WeakMap();
 var _A = /*#__PURE__*/new WeakMap();
 var _B = /*#__PURE__*/new WeakMap();
 var _C = /*#__PURE__*/new WeakMap();
@@ -103,7 +111,7 @@ _ref = (_setCheckedStateMapDecs = [_mobx.action, _mobx.action.bound], _showLocke
   leading: true
 })], _stopCloudRecordingDecs = [_decorator.bound, (0, _decorator.debounced)(500, {
   leading: true
-})], _showToastDecs = [_mobx.action, _mobx.action.bound], _handleLeaveRoomDecs = [_mobx.action, _mobx.action.bound], _closeLeaveMeetingDialogDecs = [_mobx.action, _mobx.action.bound], _handleMoreClickDecs = [_mobx.action, _mobx.action.bound], "logger");
+})], _showToastDecs = [_mobx.action, _mobx.action.bound], _handleLeaveRoomDecs = [_mobx.action, _mobx.action.bound], _closeLeaveMeetingDialogDecs = [_mobx.action, _mobx.action.bound], _handleMoreClickDecs = [_mobx.action, _mobx.action.bound], _setAppActionbarPopoverVisibleDecs = [_mobx.action, _mobx.action.bound], "logger");
 var ControlBarStore = exports["default"] = /*#__PURE__*/function () {
   function ControlBarStore(_ref2) {
     var _this = this,
@@ -120,17 +128,18 @@ var ControlBarStore = exports["default"] = /*#__PURE__*/function () {
     (0, _defineProperty2["default"])(this, "_disposers", []);
     (0, _defineProperty2["default"])(this, "_screenShareObserver", {
       onPrepreScreenCapture: function onPrepreScreenCapture() {
-        var display = _this._renderer.getDisplayNearestPoint(_this.draggableArea);
+        var display = _this._renderer.getDisplayNearestPoint(_this._screenShareProvider.sharingDisplayBounds);
         var y = display.bounds.y,
           workAreaY = display.workArea.y;
         var topOffset = workAreaY - y;
         _this.titleHeight = (0, _platform.isWindows)() ? 0 : topOffset !== null && topOffset !== void 0 ? topOffset : 0;
         (0, _mobx.runInAction)(function () {
-          _this.currentShareDisplayId = _this._renderer.getDisplayNearestPoint(_this.draggableArea).id;
-          _this._mouseDetectProvider.setDisplayId(_this.currentShareDisplayId);
+          _this.currentShareDisplayId = display.id;
         });
+        _this._mouseDetectProvider.setDisplayId(_this.currentShareDisplayId);
         _this._mouseDetectProvider.setDetectionPositionOffset(display.bounds);
-        _this.updateWindowBounds();
+        var sharingDisplayBounds = _this._screenShareProvider.sharingDisplayBounds;
+        _this.updateWindowBounds(sharingDisplayBounds);
       },
       onShareSourceReplaced: function onShareSourceReplaced() {
         var display = _this._renderer.getDisplayNearestPoint(_this.draggableArea);
@@ -146,6 +155,20 @@ var ControlBarStore = exports["default"] = /*#__PURE__*/function () {
       },
       onScreenShareStopped: function onScreenShareStopped() {
         _this._mouseDetectProvider.deleteDetectArea(_struct.FcrUIDetectAreaID.ControlBar);
+      },
+      onSelectionBoundsChanged: function onSelectionBoundsChanged() {
+        var display = _this._renderer.getDisplayNearestPoint(_this._screenShareProvider.sharingDisplayBounds);
+        var y = display.bounds.y,
+          workAreaY = display.workArea.y;
+        var topOffset = workAreaY - y;
+        _this.titleHeight = (0, _platform.isWindows)() ? 0 : topOffset !== null && topOffset !== void 0 ? topOffset : 0;
+        (0, _mobx.runInAction)(function () {
+          _this.currentShareDisplayId = display.id;
+        });
+        _this._mouseDetectProvider.setDisplayId(_this.currentShareDisplayId);
+        _this._mouseDetectProvider.setDetectionPositionOffset(display.bounds);
+        var sharingDisplayBounds = _this._screenShareProvider.sharingDisplayBounds;
+        _this.updateWindowBounds(sharingDisplayBounds);
       }
     });
     (0, _defineProperty2["default"])(this, "_mouseDetectObserver", {
@@ -162,24 +185,6 @@ var ControlBarStore = exports["default"] = /*#__PURE__*/function () {
         }
       }
     });
-    (0, _defineProperty2["default"])(this, "_stateNavArea", {
-      x: 0,
-      y: 0,
-      width: 0,
-      height: 0
-    });
-    (0, _defineProperty2["default"])(this, "_contentArea", {
-      x: 0,
-      y: 0,
-      width: 0,
-      height: 0
-    });
-    (0, _defineProperty2["default"])(this, "_popoverArea", {
-      x: 0,
-      y: 0,
-      width: 0,
-      height: 0
-    });
     _classPrivateFieldInitSpec(this, _F, _init_roomDuration(this));
     _classPrivateFieldInitSpec(this, _G, _init_startTime(this));
     _classPrivateFieldInitSpec(this, _H, _init_cloudRecordingState(this, _type.FcrRecordingState.Stopped));
@@ -192,12 +197,14 @@ var ControlBarStore = exports["default"] = /*#__PURE__*/function () {
       x: 0,
       y: 0
     }));
+    _classPrivateFieldInitSpec(this, _O, _init_appActionbarPopoverVisible(this, false));
     _classPrivateFieldInitSpec(this, _A, void 0);
     _classPrivateFieldInitSpec(this, _B, void 0);
     _classPrivateFieldInitSpec(this, _C, '');
     _classPrivateFieldInitSpec(this, _D, '');
     _classPrivateFieldInitSpec(this, _E, 0);
     this._privilegeProvider = objectManager.getObject(_objectManager.FcrUIObjectKeys.P_PRIVILEGE_PROVIDER);
+    this._applistProvider = objectManager.getObject(_objectManager.FcrUIObjectKeys.P_APPLIST_PROVIDER);
     this._facilityProvider = objectManager.getObject(_objectManager.FcrUIObjectKeys.P_FACILITY_PROVIDER);
     this._sharedChatDataSource = objectManager.getObject(_objectManager.FcrUIObjectKeys.S_SHARED_CHAT_DATA_SOURCE);
     this._mainRoomControl = objectManager.getObject(_objectManager.FcrUIObjectKeys.P_MAIN_ROOM_CONTROL_PROVIDER).mainRoomControl;
@@ -322,6 +329,14 @@ var ControlBarStore = exports["default"] = /*#__PURE__*/function () {
     set: function set(v) {
       _classPrivateFieldSet(_N, this, v);
     }
+  }, {
+    key: "appActionbarPopoverVisible",
+    get: function get() {
+      return _classPrivateFieldGet(_O, this);
+    },
+    set: function set(v) {
+      _classPrivateFieldSet(_O, this, v);
+    }
   }, {
     key: "roomInfo",
     get: function get() {
@@ -362,6 +377,11 @@ var ControlBarStore = exports["default"] = /*#__PURE__*/function () {
     set: function set(v) {
       _classPrivateFieldSet(_E, this, v);
     }
+  }, {
+    key: "_detectAreas",
+    value: function _detectAreas() {
+      return this._mouseDetectProvider.getDetectAreas(_struct.FcrUIDetectAreaID.ControlBar);
+    }
   }, {
     key: "isSharingWithAudio",
     get: function get() {
@@ -375,7 +395,7 @@ var ControlBarStore = exports["default"] = /*#__PURE__*/function () {
   }, {
     key: "hasSecurityPermission",
     get: function get() {
-      return this._privilegeProvider.hasSecurityPermission;
+      return this._privilegeProvider.hasSecurityPermission();
     }
   }, {
     key: "hasEndRoomPermission",
@@ -432,6 +452,11 @@ var ControlBarStore = exports["default"] = /*#__PURE__*/function () {
     get: function get() {
       return this._abilityProvider.isRoomDetailSupported();
     }
+  }, {
+    key: "isRecordingSupported",
+    get: function get() {
+      return this._abilityProvider.isRecordingSupported();
+    }
   }, {
     key: "meetingTimeKey",
     get: function get() {
@@ -488,6 +513,11 @@ var ControlBarStore = exports["default"] = /*#__PURE__*/function () {
       var _this$_sharedChatData;
       return (_this$_sharedChatData = this._sharedChatDataSource.newMessageCount[_type2.FcrUIRoomType.MAIN_ROOM]) !== null && _this$_sharedChatData !== void 0 ? _this$_sharedChatData : 0;
     }
+  }, {
+    key: "appItemOptions",
+    get: function get() {
+      return this._applistProvider.appItemOptions;
+    }
   }, {
     key: "setCheckedStateMap",
     value: function setCheckedStateMap(val) {
@@ -628,23 +658,36 @@ var ControlBarStore = exports["default"] = /*#__PURE__*/function () {
       this._mouseDetectProvider.removeObserver(this._mouseDetectObserver);
       this._mouseDetectProvider.deleteDetectArea(_struct.FcrUIDetectAreaID.ControlBar);
     }
+  }, {
+    key: "setArea",
+    value: function setArea(id, area) {
+      var currentOtherAreas = this._detectAreas().filter(function (item) {
+        return item.id !== id;
+      });
+      currentOtherAreas.push(_objectSpread({
+        id: id
+      }, area));
+      this._mouseDetectProvider.setDetectArea(_struct.FcrUIDetectAreaID.ControlBar, currentOtherAreas);
+    }
+  }, {
+    key: "removeArea",
+    value: function removeArea(id) {
+      var currentOtherAreas = this._detectAreas().filter(function (item) {
+        return item.id !== id;
+      });
+      this._mouseDetectProvider.setDetectArea(_struct.FcrUIDetectAreaID.ControlBar, currentOtherAreas);
+    }
   }, {
     key: "setStateNavArea",
     value: function setStateNavArea(area) {
-      this._stateNavArea = area;
-      this._mouseDetectProvider.setDetectArea(_struct.FcrUIDetectAreaID.ControlBar, [this._stateNavArea, this._contentArea, this._popoverArea]);
+      var id = 'state-nav-area';
+      this.setArea(id, area);
     }
   }, {
     key: "setControlBarContentArea",
     value: function setControlBarContentArea(area) {
-      this._contentArea = area;
-      this._mouseDetectProvider.setDetectArea(_struct.FcrUIDetectAreaID.ControlBar, [this._stateNavArea, this._contentArea, this._popoverArea]);
-    }
-  }, {
-    key: "setPopoverArea",
-    value: function setPopoverArea(area) {
-      this._popoverArea = area;
-      this._mouseDetectProvider.setDetectArea(_struct.FcrUIDetectAreaID.ControlBar, [this._stateNavArea, this._contentArea, this._popoverArea]);
+      var id = 'control-bar-content-area';
+      this.setArea(id, area);
     }
   }, {
     key: "handleLeaveRoom",
@@ -708,20 +751,27 @@ var ControlBarStore = exports["default"] = /*#__PURE__*/function () {
             });
           });
           break;
+        case _enums.MoreAction.OPEN_APPS:
+          this.setAppActionbarPopoverVisible(true);
+          break;
         default:
           break;
       }
     }
   }, {
     key: "updateWindowBounds",
-    value: function updateWindowBounds() {
-      var sharingDisplayBounds = this._screenShareProvider.sharingDisplayBounds;
-      this._controlBarWindow.setBounds(sharingDisplayBounds);
+    value: function updateWindowBounds(bounds) {
+      this._controlBarWindow.setBounds(bounds);
+    }
+  }, {
+    key: "setAppActionbarPopoverVisible",
+    value: function setAppActionbarPopoverVisible(visible) {
+      this.appActionbarPopoverVisible = visible;
     }
   }]);
 }();
 _ControlBarStore = ControlBarStore;
-var _applyDecs$e = (0, _slicedToArray2["default"])(_applyDecs(_ControlBarStore, [[_mobx.observable, 1, "roomDuration"], [_mobx.observable, 1, "startTime"], [_mobx.observable, 1, "cloudRecordingState"], [_mobx.observable, 1, "playUrl"], [_mobx.observable, 1, "liveStreamingState"], [_mobx.observable, 1, "allApplicationWindows"], [_mobx.observable, 1, "boardOwnerUser"], [_mobx.observable, 1, "currentShareDisplayId"], [_mobx.observable, 1, "position"], [_mobx.computed, 3, "hasEndRoomPermission"], [_mobx.computed, 3, "hasGetLiveStreamingUrlPermission"], [_mobx.computed, 3, "hasStartCloudRecordingPermission"], [_mobx.computed, 3, "hasStartLiveStreamingPermission"], [_mobx.computed, 3, "hasChatPermission"], [_mobx.computed, 3, "liveStreamingButtonVisible"], [_mobx.computed, 3, "recordingButtonVisible"], [_mobx.computed, 3, "isConnecting"], [_setCheckedStateMapDecs, 18, "setCheckedStateMap"], [_decorator.bound, 2, "setShareWithAudioState"], [_decorator.bound, 2, "setShareInSmoothMode"], [_showLockedRoomToastDecs, 18, "showLockedRoomToast"], [_handleNewShareDecs, 18, "handleNewShare"], [_handlerStopShareDecs, 18, "handlerStopShare"], [_decorator.bound, 2, "handleMouseEnter"], [_decorator.bound, 2, "handleMouseLeave"], [_decorator.bound, 2, "openLiveStreamingDialog"], [_decorator.bound, 2, "setShareAudioMode"], [_pauseCloudRecordingDecs, 2, "pauseCloudRecording"], [_resumeCloudRecordingDecs, 2, "resumeCloudRecording"], [_stopCloudRecordingDecs, 2, "stopCloudRecording"], [_decorator.bound, 2, "startCloudRecording"], [_decorator.bound, 2, "startLiveStreaming"], [_decorator.bound, 2, "stopLiveStreaming"], [_showToastDecs, 18, "showToast"], [_decorator.bound, 2, "handleOpenParticipant"], [_decorator.bound, 2, "handleOpenLiveStreaming"], [_decorator.bound, 2, "setEnableWaitingRoom"], [_decorator.bound, 2, "getLocalMeetingTime"], [[_decorator.bound, _decorator.trace], 2, "setStateNavArea"], [[_decorator.bound, _decorator.trace], 2, "setControlBarContentArea"], [[_decorator.bound, _decorator.trace], 2, "setPopoverArea"], [_handleLeaveRoomDecs, 18, "handleLeaveRoom"], [_closeLeaveMeetingDialogDecs, 18, "closeLeaveMeetingDialog"], [_handleMoreClickDecs, 18, "handleMoreClick"], [[_decorator.trace, _decorator.bound], 2, "updateWindowBounds"]], []).e, 10);
+var _applyDecs$e = (0, _slicedToArray2["default"])(_applyDecs(_ControlBarStore, [[_mobx.observable, 1, "roomDuration"], [_mobx.observable, 1, "startTime"], [_mobx.observable, 1, "cloudRecordingState"], [_mobx.observable, 1, "playUrl"], [_mobx.observable, 1, "liveStreamingState"], [_mobx.observable, 1, "allApplicationWindows"], [_mobx.observable, 1, "boardOwnerUser"], [_mobx.observable, 1, "currentShareDisplayId"], [_mobx.observable, 1, "position"], [_mobx.observable, 1, "appActionbarPopoverVisible"], [_mobx.computed, 3, "hasEndRoomPermission"], [_mobx.computed, 3, "hasGetLiveStreamingUrlPermission"], [_mobx.computed, 3, "hasStartCloudRecordingPermission"], [_mobx.computed, 3, "hasStartLiveStreamingPermission"], [_mobx.computed, 3, "hasChatPermission"], [_mobx.computed, 3, "liveStreamingButtonVisible"], [_mobx.computed, 3, "recordingButtonVisible"], [_mobx.computed, 3, "isConnecting"], [_setCheckedStateMapDecs, 18, "setCheckedStateMap"], [_decorator.bound, 2, "setShareWithAudioState"], [_decorator.bound, 2, "setShareInSmoothMode"], [_showLockedRoomToastDecs, 18, "showLockedRoomToast"], [_handleNewShareDecs, 18, "handleNewShare"], [_handlerStopShareDecs, 18, "handlerStopShare"], [_decorator.bound, 2, "handleMouseEnter"], [_decorator.bound, 2, "handleMouseLeave"], [_decorator.bound, 2, "openLiveStreamingDialog"], [_decorator.bound, 2, "setShareAudioMode"], [_pauseCloudRecordingDecs, 2, "pauseCloudRecording"], [_resumeCloudRecordingDecs, 2, "resumeCloudRecording"], [_stopCloudRecordingDecs, 2, "stopCloudRecording"], [_decorator.bound, 2, "startCloudRecording"], [_decorator.bound, 2, "startLiveStreaming"], [_decorator.bound, 2, "stopLiveStreaming"], [_showToastDecs, 18, "showToast"], [_decorator.bound, 2, "handleOpenParticipant"], [_decorator.bound, 2, "handleOpenLiveStreaming"], [_decorator.bound, 2, "setEnableWaitingRoom"], [_decorator.bound, 2, "getLocalMeetingTime"], [[_decorator.bound, _decorator.trace], 2, "setArea"], [[_decorator.bound, _decorator.trace], 2, "removeArea"], [_decorator.bound, 2, "setStateNavArea"], [_decorator.bound, 2, "setControlBarContentArea"], [_handleLeaveRoomDecs, 18, "handleLeaveRoom"], [_closeLeaveMeetingDialogDecs, 18, "closeLeaveMeetingDialog"], [_handleMoreClickDecs, 18, "handleMoreClick"], [[_decorator.trace, _decorator.bound], 2, "updateWindowBounds"], [_setAppActionbarPopoverVisibleDecs, 18, "setAppActionbarPopoverVisible"]], []).e, 11);
 _init_roomDuration = _applyDecs$e[0];
 _init_startTime = _applyDecs$e[1];
 _init_cloudRecordingState = _applyDecs$e[2];
@@ -731,5 +781,6 @@ _init_allApplicationWindows = _applyDecs$e[5];
 _init_boardOwnerUser = _applyDecs$e[6];
 _init_currentShareDisplayId = _applyDecs$e[7];
 _init_position = _applyDecs$e[8];
-_initProto = _applyDecs$e[9];
+_init_appActionbarPopoverVisible = _applyDecs$e[9];
+_initProto = _applyDecs$e[10];
 var StoreContext = exports.StoreContext = /*#__PURE__*/(0, _react.createContext)(null);

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

@@ -41,3 +41,6 @@ export type ControlBarCalculationUpdaterType = {
     restartActiveTask: () => void;
     cancelActiveTask: () => void;
 };
+export type FcrUIControlArea = FcrUI.FcrUIRectangle & {
+    id?: string;
+};