fcr-ui-scene 3.7.4 → 3.7.6

package/lib/modules/components/toolbar/components/graphic-tool/index.js

@@ -43,11 +43,9 @@ var AnnotationGraphicTool = exports.AnnotationGraphicTool = (0, _mobxReact.obser
   };
   var handleShapeClick = function handleShapeClick(shape) {
     setShape(shape);
-    setVisible(!visible);
   };
   var handleStrokeWidthClick = function handleStrokeWidthClick(width) {
     setStrokeWidth(width);
-    setVisible(!visible);
   };
   var handleVisibleChange = function handleVisibleChange(visible) {
     setVisible(visible);

package/lib/modules/components/toolbar/components/multiple-color-tool/index.d.ts

@@ -1,10 +1,11 @@
 import { ToolTipProps } from 'agora-ui-foundation/lib/components/tooltip';
+import { FcrColor } from 'fcr-core/lib/room-control/whiteboard-control/types';
 export declare const MultipleColorTool: (props: {
     coverCount?: number;
     commonColors: string[];
     currentColor: string;
     colors: string[];
-    setStrokeColor: (color: string) => void;
+    setStrokeColor: (color: FcrColor) => void;
     placement: ToolTipProps["placement"];
     themeColors: string[];
     size?: number;

package/lib/modules/components/toolbar/components/multiple-color-tool/index.js

@@ -51,7 +51,7 @@ var MultipleColorTool = exports.MultipleColorTool = function MultipleColorTool(p
         onClick: function onClick() {
           return setStrokeColor(color);
         }
-      });
+      }, color);
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_colorTool.AnnotationColorTool, {
       direction: "vertical",
       placement: placement,

package/lib/modules/components/toolbar/components/vertical-frame/index.js

@@ -93,21 +93,24 @@ function VerticalBar(props) {
       y: y + my
     });
   });
-  var handleMouseUp = function handleMouseUp() {
+  var handleMouseUp = (0, _react2.useCallback)(function () {
     if (toolbarDom.current) {
       var containerClientRect = (container || document.body).getBoundingClientRect();
       var toolbarClientRect = toolbarDom.current.getBoundingClientRect();
-      var toolbarCenterPos = toolbarClientRect.left - toolbarClientRect.width / 2;
+      var left = toolbarClientRect.left,
+        width = toolbarClientRect.width;
+      var containerWidth = containerClientRect.width;
+      var toolbarCenterPos = left - width / 2;
       var _position = {
         x: x,
         y: y
       };
-      if (toolbarCenterPos > containerClientRect.width / 2) {
+      if (toolbarCenterPos > containerWidth / 2) {
         // right
         setPlacement('left');
         onPlacementChanged('left');
         _position = {
-          x: containerClientRect.width - toolbarClientRect.width - x,
+          x: containerWidth - width - x,
           y: y
         };
       } else {
@@ -122,7 +125,7 @@ function VerticalBar(props) {
       setPosition(_position);
       api.start(_position);
     }
-  };
+  }, []);
   var handleRefMount = function handleRefMount(dom) {
     if (dom) {
       var top = dom.getBoundingClientRect().top;
@@ -172,6 +175,7 @@ function VerticalBar(props) {
           cursor: 'move'
         },
         onMouseUp: handleMouseUp,
+        onMouseOut: handleMouseUp,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_moveIcon["default"], {})
       }))]
     })]

package/lib/modules/components/toolbar/hooks/use-resize-visible.js

@@ -6,10 +6,11 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useResizeVisible = void 0;
+require("core-js/modules/web.timers.js");
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = require("react");
 var _item = require("../components/item");
-var _view = require("../../../action-bar/view");
+var _constants = require("../../../action-bar/constants");
 var useResizeVisible = exports.useResizeVisible = function useResizeVisible() {
   var toolbar = (0, _react.useRef)();
   var _useState = (0, _react.useState)(0),
@@ -24,19 +25,30 @@ var useResizeVisible = exports.useResizeVisible = function useResizeVisible() {
     _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
     itemHeight = _useState6[0],
     setItemHeight = _useState6[1];
-  var actionbar = document.querySelector(".".concat(_view.actionBarClassName));
+  var actionbar = document.querySelector(".".concat(_constants.actionBarClassName));
   var actionBarHeight = (actionbar === null || actionbar === void 0 ? void 0 : actionbar.getBoundingClientRect().height) || 0;
   var bottomHeight = 20;
+  var timer = (0, _react.useRef)(null);
   var handleResize = (0, _react.useCallback)(function () {
-    var offsetHeight = document.body.offsetHeight;
-    var coverSize = threshold - offsetHeight;
+    var _document$documentEle = document.documentElement.getBoundingClientRect(),
+      height = _document$documentEle.height;
+    var coverSize = threshold - height;
     var coverCount = Math.floor(coverSize / itemHeight);
     setCoverCount(coverCount);
   }, [threshold]);
   (0, _react.useEffect)(function () {
     window.addEventListener('resize', handleResize);
+    window.addEventListener('animationend', handleResize);
+    if (timer.current) {
+      window.clearTimeout(timer.current);
+    }
+    timer.current = window.setTimeout(handleResize);
     return function () {
       window.removeEventListener('resize', handleResize);
+      window.removeEventListener('animationend', handleResize);
+      if (timer.current) {
+        window.clearTimeout(timer.current);
+      }
     };
   }, [threshold]);
   var setToolbarDom = (0, _react.useCallback)(function (dom) {

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

@@ -1,4 +1,5 @@
 import { FcrBoardShape, FcrBoardToolType } from 'fcr-core/lib/room-control/whiteboard-control/enums';
+import { FcrColor } from 'fcr-core/lib/room-control/whiteboard-control/types';
 import './style.css';
 export declare const colors: string[];
 export declare const WhiteboardToolbar: (props: {
@@ -16,12 +17,13 @@ export declare const WhiteboardToolbar: (props: {
     setStrokeWidth: (width: number) => void;
     setTool: (tool: FcrBoardToolType) => void;
     setShape: (shape: FcrBoardShape) => void;
-    setStrokeColor: (color: string) => void;
+    setStrokeColor: (color: FcrColor) => void;
     undo: () => void;
     redo: () => void;
     clean: () => void;
     size?: number;
     setCommonColors?: (colors: string[]) => void;
+    onCaptureScreen?: (hideWindow: boolean) => void;
     onSave?: () => void;
     progress?: number;
     setProgress?: (progress: number) => void;

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

@@ -27,8 +27,8 @@ 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");
+require("./style.css");
 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) {
@@ -57,6 +57,7 @@ var WhiteboardToolbar = exports.WhiteboardToolbar = function WhiteboardToolbar(p
     setStrokeColor = props.setStrokeColor,
     setCommonColors = props.setCommonColors,
     onSave = props.onSave,
+    onCaptureScreen = props.onCaptureScreen,
     setProgress = props.setProgress;
   var t = (0, _i18n.useI18n)();
   var _useState = (0, _react.useState)(false),
@@ -132,13 +133,14 @@ var WhiteboardToolbar = exports.WhiteboardToolbar = function WhiteboardToolbar(p
       title: t('fmt_screenshare_whiteboard_button_eraser'),
       hideTitle: true,
       placement: placement
-    }), (0, _env.isElectron)() && commonColors && /*#__PURE__*/(0, _jsxRuntime.jsx)(_captureTool.AnnotationCaptureTool, {
+    }), (0, _env.isElectron)() && onCaptureScreen && commonColors && /*#__PURE__*/(0, _jsxRuntime.jsx)(_captureTool.AnnotationCaptureTool, {
       popoverVisible: popoverVisible,
       setPopoverVisible: setPopoverVisible,
       size: size,
       direction: direction,
       hideTitle: true,
-      placement: placement
+      placement: placement,
+      onClick: onCaptureScreen
     }), !commonColors && /*#__PURE__*/(0, _jsxRuntime.jsx)(_item.AnnotationToolItem, {
       size: size,
       onVisibleChange: function onVisibleChange() {

package/lib/modules/connection-gateway/index.d.ts

@@ -1,25 +1,10 @@
 import { UIModule } from '../../base';
+import ConnectionGatewayStore from './store';
 import './index.css';
-import { FcrUIEventProvider } from '../../providers/event-provider';
-import { FcrUICurrentRoomControlProvider } from '../../providers/room-provider';
-import { FcrUIDeviceProvider } from '../../providers/device-provider';
-import { FcrUIDevicePrivilegeProvider } from '../../providers/device-privilege-provider';
-import { FcrUISharedDevicePrivilegeDataSource } from '../../shared-data-source/device-privilege-data';
-import { FcrUIMemberSharedDataSource } from '../../shared-data-source/member-data';
-import { FcrUIDialogProvider } from '../../providers/dialog-provider';
-import { FcrUIMessageProvider } from '../../providers/message-provider';
 export declare class ConnectionGatewayUIModule extends UIModule {
-    private _store?;
-    currentRoomControlProvider?: FcrUICurrentRoomControlProvider;
-    eventProvider?: FcrUIEventProvider;
-    deviceProvider?: FcrUIDeviceProvider;
-    devicePrivilegeProvider?: FcrUIDevicePrivilegeProvider;
-    sharedDevicePrivilegeDataSource?: FcrUISharedDevicePrivilegeDataSource;
-    sharedMemberDataSource?: FcrUIMemberSharedDataSource;
-    dialogProvider?: FcrUIDialogProvider;
-    messageProvider?: FcrUIMessageProvider;
+    private _store;
+    get store(): ConnectionGatewayStore;
     onNodeWillActive(): void;
     onNodeWillInactive(): void;
     getComponent(): import("react/jsx-runtime").JSX.Element;
-    private _handleUIEvent;
 }

package/lib/modules/connection-gateway/index.js

@@ -16,66 +16,63 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ConnectionGatewayUIModule = void 0;
-require("core-js/modules/es.function.bind.js");
+require("core-js/modules/es.error.cause.js");
+require("core-js/modules/es.error.to-string.js");
+require("core-js/modules/es.array.concat.js");
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _base = require("../../base");
 var _store = _interopRequireWildcard(require("./store"));
 var _view = require("./view");
 require("./index.css");
-var _constant = require("../../utilities/constant");
 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)); }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 var ConnectionGatewayUIModule = exports.ConnectionGatewayUIModule = /*#__PURE__*/function (_UIModule) {
   function ConnectionGatewayUIModule() {
+    var _this;
     (0, _classCallCheck2["default"])(this, ConnectionGatewayUIModule);
-    return _callSuper(this, ConnectionGatewayUIModule, arguments);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _callSuper(this, ConnectionGatewayUIModule, [].concat(args));
+    (0, _defineProperty2["default"])(_this, "_store", null);
+    return _this;
   }
   (0, _inherits2["default"])(ConnectionGatewayUIModule, _UIModule);
   return (0, _createClass2["default"])(ConnectionGatewayUIModule, [{
+    key: "store",
+    get: function get() {
+      if (!this._store) {
+        throw new Error('ConnectionGatewayStore is not initialized');
+      }
+      return this._store;
+    }
+  }, {
     key: "onNodeWillActive",
     value: function onNodeWillActive() {
-      var _this$currentRoomCont;
-      this._store = new _store["default"]({
-        roomControl: (_this$currentRoomCont = this.currentRoomControlProvider) === null || _this$currentRoomCont === void 0 ? void 0 : _this$currentRoomCont.currentRoomControl,
-        eventProvider: this.eventProvider,
-        deviceProvider: this.deviceProvider,
-        devicePrivilegeProvider: this.devicePrivilegeProvider,
-        sharedDevicePrivilegeDataSource: this.sharedDevicePrivilegeDataSource,
-        sharedMemberDataSource: this.sharedMemberDataSource,
-        dialogProvider: this.dialogProvider,
-        messageProvider: this.messageProvider
-      });
-      this.eventProvider.addObserver({
-        onEvent: this._handleUIEvent.bind(this)
-      });
+      var args = {
+        objectManager: this.objectManager
+      };
+      this._store = new _store["default"](args);
     }
   }, {
     key: "onNodeWillInactive",
     value: function onNodeWillInactive() {
-      var _this$_store;
-      (_this$_store = this._store) === null || _this$_store === void 0 || _this$_store.release();
+      this.store.release();
     }
   }, {
     key: "getComponent",
     value: function getComponent() {
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(_store.StoreContext.Provider, {
-        value: this._store,
+        value: this.store,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_view.View, {})
       });
     }
-  }, {
-    key: "_handleUIEvent",
-    value: function _handleUIEvent(action, payload) {
-      if (action === _constant.FcrUIAction.OPEN_DIALOG && (payload === null || payload === void 0 ? void 0 : payload.dialogKey) === _constant.FcrUIDialogKey.CONNECTION_GATEWAY) {
-        var _payload$params;
-        this._store.onTabChange(((_payload$params = payload.params) === null || _payload$params === void 0 ? void 0 : _payload$params.type) || 'computer');
-      }
-    }
   }]);
 }(_base.UIModule);

package/lib/modules/connection-gateway/store.d.ts

@@ -1,16 +1,9 @@
 import { FcrPhoneConnectorSession, FcrRoomConnectorPhoneInfo, FcrRoomConnectorSessionReason, FcrRoomConnectorSessionState } from 'fcr-core/lib/room-control/room-connector-control/type';
 import { FcrUIConnectType } from '../../type';
-import { FcrUIEventProvider } from '../../providers/event-provider';
-import { FcrBaseRoomControl } from 'fcr-core/lib/room-control/type';
-import { FcrUIDeviceProvider } from '../../providers/device-provider';
 import { ConnectorRegion } from './enums';
-import { ConnectListType } from './types';
-import { FcrUIDevicePrivilegeProvider } from '../../providers/device-privilege-provider';
-import { FcrUISharedDevicePrivilegeDataSource } from '../../shared-data-source/device-privilege-data';
-import { FcrUIMemberSharedDataSource } from '../../shared-data-source/member-data';
-import { FcrUIDialogProvider } from '../../providers/dialog-provider';
-import { FcrUIMessageProvider } from '../../providers/message-provider';
-export default class ConnectionGatewayStore {
+import { ConnectionGatewayStoreArgs, ConnectListType } from './types';
+import { FcrUIManagedObject } from '../../object-manager';
+export default class ConnectionGatewayStore implements FcrUIManagedObject {
     private _roomControl;
     private _disposers;
     private _eventProvider;
@@ -43,16 +36,7 @@ export default class ConnectionGatewayStore {
     accessor hasPstnStream: boolean;
     accessor hasNeedMergedStream: boolean;
     get connectType(): FcrUIConnectType;
-    constructor({ roomControl, eventProvider, deviceProvider, devicePrivilegeProvider, sharedDevicePrivilegeDataSource, sharedMemberDataSource, dialogProvider, messageProvider, }: {
-        roomControl: FcrBaseRoomControl;
-        eventProvider: FcrUIEventProvider;
-        deviceProvider: FcrUIDeviceProvider;
-        devicePrivilegeProvider: FcrUIDevicePrivilegeProvider;
-        sharedDevicePrivilegeDataSource: FcrUISharedDevicePrivilegeDataSource;
-        sharedMemberDataSource: FcrUIMemberSharedDataSource;
-        dialogProvider: FcrUIDialogProvider;
-        messageProvider: FcrUIMessageProvider;
-    });
+    constructor({ objectManager }: ConnectionGatewayStoreArgs);
     get localUser(): import("fcr-core/lib/type").FcrUserInfo;
     get hasOwnPstnStream(): boolean;
     openAudioSettings(): void;

package/lib/modules/connection-gateway/store.js

@@ -78,7 +78,6 @@ var _fcrCore = require("fcr-core");
 var _mobx = require("mobx");
 var _react = require("react");
 var _decorator = require("agora-foundation/lib/decorator");
-var _store = require("../setting/store");
 var _type = require("fcr-core/lib/room-control/room-connector-control/type");
 var _isEqual = _interopRequireDefault(require("lodash/isEqual"));
 var _tools = require("../../utilities/tools");
@@ -86,6 +85,8 @@ var _i18n = require("agora-ui-foundation/lib/i18n");
 var _type2 = require("../../type");
 var _constant = require("../../utilities/constant");
 var _enums = require("./enums");
+var _objectManager = require("../../object-manager");
+var _type3 = require("../setting/type");
 var _ConnectionGatewayStore;
 var _initProto, _init_activeTabKey, _init_rememberMe, _init_rememberedNumberList, _init_connectionPhoneInfo, _init_currentRegion, _init_currentCallInfo, _init_connectInfo, _init_phoneCallState, _init_phoneCallReason, _init_connectSession, _init_calling, _init_outgoingCall, _init_isHangup, _init_hasPstnStream, _init_hasNeedMergedStream, _onTabChangeDecs, _onGetConnectInfoDecs, _regionChangeHandlerDecs, _startCallDecs, _stopCallDecs, _setRememberMeDecs, _initRememberedDataDecs, _rememberNumberDecs, _phoneCallUpdatedDecs, _phoneCallReasonDecs, _setStreamStateDecs, _handleStreamsAddedOrUpdatedDecs, _handleStreamsRemovedDecs, _ref;
 function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t["return"] || t["return"](); } finally { if (u) throw o; } } }; }
@@ -120,14 +121,7 @@ _ref = (_onTabChangeDecs = [_mobx.action, _mobx.action.bound], _onGetConnectInfo
 var ConnectionGatewayStore = exports["default"] = /*#__PURE__*/function () {
   function ConnectionGatewayStore(_ref2) {
     var _this = this;
-    var roomControl = _ref2.roomControl,
-      eventProvider = _ref2.eventProvider,
-      deviceProvider = _ref2.deviceProvider,
-      devicePrivilegeProvider = _ref2.devicePrivilegeProvider,
-      sharedDevicePrivilegeDataSource = _ref2.sharedDevicePrivilegeDataSource,
-      sharedMemberDataSource = _ref2.sharedMemberDataSource,
-      dialogProvider = _ref2.dialogProvider,
-      messageProvider = _ref2.messageProvider;
+    var objectManager = _ref2.objectManager;
     (0, _classCallCheck2["default"])(this, ConnectionGatewayStore);
     (0, _defineProperty2["default"])(this, _ref, void _initProto(this));
     (0, _defineProperty2["default"])(this, "_disposers", []);
@@ -160,15 +154,19 @@ var ConnectionGatewayStore = exports["default"] = /*#__PURE__*/function () {
     _classPrivateFieldInitSpec(this, _M, _init_isHangup(this, false));
     _classPrivateFieldInitSpec(this, _N, _init_hasPstnStream(this, false));
     _classPrivateFieldInitSpec(this, _O, _init_hasNeedMergedStream(this, false));
-    this._roomControl = roomControl;
-    this._dialogProvider = dialogProvider;
-    this._deviceProvider = deviceProvider;
-    this._streamControl = roomControl.getStreamControl();
-    this._devicePrivilegeProvider = devicePrivilegeProvider;
-    this._sharedDevicePrivilegeDataSource = sharedDevicePrivilegeDataSource;
-    this._sharedMemberDataSource = sharedMemberDataSource;
-    this._messageProvider = messageProvider;
-    this._eventProvider = eventProvider;
+    // Get all required objects from objectManager
+    this._eventProvider = objectManager.getObject(_objectManager.FcrUIObjectKeys.P_EVENT_PROVIDER);
+    this._messageProvider = objectManager.getObject(_objectManager.FcrUIObjectKeys.P_MESSAGE_PROVIDER);
+    this._dialogProvider = objectManager.getObject(_objectManager.FcrUIObjectKeys.P_DIALOG_PROVIDER);
+    this._deviceProvider = objectManager.getObject(_objectManager.FcrUIObjectKeys.P_DEVICE_PROVIDER);
+    this._sharedMemberDataSource = objectManager.getObject(_objectManager.FcrUIObjectKeys.S_SHARED_MEMBER_DATA_SOURCE);
+    var roomProvider = objectManager.getObject(_objectManager.FcrUIObjectKeys.P_ROOM_PROVIDER);
+    this._roomControl = roomProvider.currentRoomControl;
+    this._streamControl = this._roomControl.getStreamControl();
+
+    // Optional providers with try-catch
+    this._devicePrivilegeProvider = objectManager.getObject(_objectManager.FcrUIObjectKeys.P_DEVICE_PRIVILEGE_PROVIDER);
+    this._sharedDevicePrivilegeDataSource = objectManager.getObject(_objectManager.FcrUIObjectKeys.S_SHARED_DEVICE_PRIVILEGE_DATA_SOURCE);
     this._deviceObserver = {
       onAudioConnected: function onAudioConnected() {
         _this.closeConnectionDialog();
@@ -317,15 +315,15 @@ var ConnectionGatewayStore = exports["default"] = /*#__PURE__*/function () {
   }, {
     key: "openAudioSettings",
     value: function openAudioSettings() {
-      this._dialogProvider.openDeviceSettingDialog({
-        activeTab: _store.DeviceSettingTab.AUDIO,
+      this._dialogProvider.openDialog(_constant.FcrUIDialogKey.SETTINGS, {
+        activeTab: _type3.DeviceSettingTab.AUDIO,
         highlightSelector: _constant.FcrUIHighlightElement.AUDIO_MICROPHONE
       });
     }
   }, {
     key: "closeConnectionDialog",
     value: function closeConnectionDialog() {
-      this._eventProvider.sendEvent(_constant.FcrUIAction.CLOSE_CONNECTION_DIALOG);
+      this._dialogProvider.closeDialog(_constant.FcrUIDialogKey.CONNECTION_GATEWAY);
     }
   }, {
     key: "onTabChange",

package/lib/modules/connection-gateway/types.d.ts

@@ -1,4 +1,8 @@
+import { FcrUIObjectManager } from '../../object-manager';
 export type ConnectListType = {
     phone: string;
     zone: string;
 };
+export type ConnectionGatewayStoreArgs = {
+    objectManager: FcrUIObjectManager;
+};

package/lib/modules/control-bar/components/boundary-detector.d.ts

@@ -0,0 +1,8 @@
+export type DetectorRef = {
+    getBoundaries: () => FcrUI.FcrUIRectangle;
+};
+export declare const BoundaryDetector: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<{
+    onBoundariesChanged: (boundaries: FcrUI.FcrUIRectangle) => void;
+} & {
+    children?: import("react").ReactNode | undefined;
+} & import("react").RefAttributes<DetectorRef>>>;

package/lib/modules/control-bar/components/boundary-detector.js

@@ -0,0 +1,56 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.BoundaryDetector = void 0;
+var _react = require("react");
+var _context = require("../context");
+var _hooks = require("../hooks");
+var _jsxRuntime = require("react/jsx-runtime");
+var BoundaryDetector = exports.BoundaryDetector = /*#__PURE__*/(0, _react.memo)(/*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
+  var children = _ref.children,
+    onBoundariesChanged = _ref.onBoundariesChanged;
+  var _useContext = (0, _react.useContext)(_context.DragContext),
+    position = _useContext.position,
+    isDragging = _useContext.isDragging;
+  var containerRef = (0, _react.useRef)(null);
+  (0, _react.useImperativeHandle)(ref, function () {
+    return {
+      getBoundaries: function getBoundaries() {
+        if (!containerRef.current) return {
+          x: 0,
+          y: 0,
+          width: 0,
+          height: 0
+        };
+        var bounds = containerRef.current.getBoundingClientRect();
+        return {
+          x: bounds.x,
+          y: bounds.y,
+          width: bounds.width,
+          height: bounds.height
+        };
+      }
+    };
+  }, []);
+  var boundaryCallbacks = (0, _react.useMemo)(function () {
+    return {
+      onBoundariesChanged: onBoundariesChanged
+    };
+  }, [onBoundariesChanged]);
+  (0, _hooks.useBoundaryDetect)(containerRef, boundaryCallbacks);
+  (0, _react.useEffect)(function () {
+    if (!isDragging) {
+      if (!containerRef.current) return;
+      var bounds = containerRef.current.getBoundingClientRect();
+      boundaryCallbacks.onBoundariesChanged(bounds);
+    }
+  }, [position, isDragging]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    ref: containerRef,
+    className: "fcr-control-bar__sizer",
+    children: children
+  });
+}));

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

@@ -0,0 +1 @@
+export declare const CameraControl: () => import("react/jsx-runtime").JSX.Element;