fcr-ui-scene 3.7.4-rc.1 → 3.7.5

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

@@ -9,7 +9,7 @@ exports.useResizeVisible = void 0;
 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,7 +24,7 @@ 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 handleResize = (0, _react.useCallback)(function () {

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,6 @@
+import { PropsWithChildren, FC } from 'react';
+type BoundaryDetectorProps = PropsWithChildren<{
+    onBoundariesChanged: (boundaries: FcrUI.FcrUIRectangle) => void;
+}>;
+export declare const BoundaryDetector: FC<BoundaryDetectorProps>;
+export {};

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

@@ -0,0 +1,36 @@
+"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)(function (_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);
+  var boundaryCallbacks = (0, _react.useMemo)(function () {
+    return {
+      onBoundariesChanged: onBoundariesChanged
+    };
+  }, [onBoundariesChanged]);
+  (0, _hooks.useBoundaryDetect)(containerRef, boundaryCallbacks);
+  (0, _react.useEffect)(function () {
+    if (!isDragging) {
+      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;

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

@@ -0,0 +1,147 @@
+"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.CameraControl = void 0;
+var _i18n = require("agora-ui-foundation/lib/i18n");
+var _mobxReact = require("mobx-react");
+var _react = require("react");
+var _type = require("agora-ui-foundation/lib/components/icon/type");
+var _icon = require("agora-ui-foundation/lib/components/icon");
+var _popover = require("agora-ui-foundation/lib/components/popover");
+var _videoMenu = _interopRequireDefault(require("../../../components/device-control/components/video-menu"));
+var _hooks = _interopRequireDefault(require("../../../components/device-control/hooks"));
+var _store = require("../../../components/device-control/store.base");
+var _boundaryDetector = require("../boundary-detector");
+var _store2 = require("../../store");
+var _context = require("../../context");
+var _tooltip = require("agora-ui-foundation/lib/components/tooltip");
+var _jsxRuntime = require("react/jsx-runtime");
+var CameraControl = exports.CameraControl = (0, _mobxReact.observer)(function () {
+  var transI18n = (0, _i18n.useI18n)();
+  var _useContext = (0, _react.useContext)(_store.DeviceControlStoreContext),
+    cameraEnabled = _useContext.cameraEnabled,
+    enableCamera = _useContext.enableCamera,
+    cameraList = _useContext.cameraList,
+    checkMediaPermission = _useContext.checkMediaPermission;
+  var _useContext2 = (0, _react.useContext)(_store2.StoreContext),
+    setPopoverArea = _useContext2.setPopoverArea;
+  var _useContext3 = (0, _react.useContext)(_context.ControlBarCalculationContext),
+    isShareActionNavHidden = _useContext3.isShareActionNavHidden;
+  var _useDeviceTooltipVisi = (0, _hooks["default"])(),
+    popoverOpened = _useDeviceTooltipVisi.popoverOpened,
+    handlePopoverVisibleChanged = _useDeviceTooltipVisi.handlePopoverVisibleChanged,
+    _setPopoverOpened = _useDeviceTooltipVisi.setPopoverOpened;
+  var muteColor = {
+    iconPrimary: cameraEnabled ? "var(--fcr_web_ui_scene_mainicon1)" : 'var(--fcr_ui_scene_ramp_red6)',
+    iconSecondary: 'var(--fcr_ui_scene_ramp_red6)'
+  };
+  var icon = cameraEnabled ? _type.FcrIconType.FCR_CAMERA : _type.FcrIconType.FCR_CAMERAOFF;
+  var title = cameraEnabled ? transI18n('fmt_device_label_video_start') : transI18n('fmt_device_label_video_stop');
+  var noCam = cameraList.length === 0;
+  var noCamColor = {
+    iconPrimary: "var(--fcr_web_ui_scene_mainicon1)",
+    iconSecondary: 'var(--fcr_ui_scene_ramp_red6)'
+  };
+  var handleBoundariesChanged = (0, _react.useCallback)(function (boundaries) {
+    setPopoverArea(boundaries);
+  }, []);
+  (0, _react.useEffect)(function () {
+    if (isShareActionNavHidden) {
+      _setPopoverOpened(false);
+      setPopoverArea({
+        x: 0,
+        y: 0,
+        width: 0,
+        height: 0
+      });
+    }
+  }, [isShareActionNavHidden]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: "device-control-item-wrapper",
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "device-control ".concat(popoverOpened ? 'active' : ''),
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "device-control-inner",
+        children: !noCam ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          onClick: function onClick() {
+            enableCamera(!cameraEnabled);
+          },
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.FcrToolTip, {
+            content: title,
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+                type: icon,
+                colors: muteColor,
+                size: 32
+              })
+            })
+          })
+        }) : /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          onClick: function onClick() {
+            return checkMediaPermission('camera');
+          },
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.FcrToolTip, {
+            content: transI18n('fmt_internalsetting_status_nodevice'),
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+                type: _type.FcrIconType.FCR_CAMERACRASH,
+                colors: noCamColor,
+                size: 32
+              })
+            })
+          })
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_popover.FcrPopover, {
+        showArrow: false,
+        visible: popoverOpened,
+        onVisibleChange: function onVisibleChange(visible) {
+          handlePopoverVisibleChanged(visible);
+          if (!visible) {
+            setPopoverArea({
+              x: 0,
+              y: 0,
+              width: 0,
+              height: 0
+            });
+          }
+        },
+        overlayClassName: "device-control--device-popover",
+        content: /*#__PURE__*/(0, _jsxRuntime.jsx)(_boundaryDetector.BoundaryDetector, {
+          onBoundariesChanged: handleBoundariesChanged,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_videoMenu["default"], {
+            setPopoverOpened: function setPopoverOpened(opened) {
+              _setPopoverOpened(opened);
+              if (!opened) {
+                setPopoverArea({
+                  x: 0,
+                  y: 0,
+                  width: 0,
+                  height: 0
+                });
+              }
+            },
+            onMoreClick: function onMoreClick() {}
+          })
+        }),
+        trigger: "click",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          onClick: function onClick(e) {
+            e.stopPropagation();
+          },
+          className: "device-control-extra ".concat(popoverOpened ? 'active' : ''),
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+            type: _type.FcrIconType.FCR_DROPUP4,
+            colors: {
+              iconPrimary: 'var(--fcr_web_ui_scene_mainicon1)'
+            },
+            size: 24
+          })
+        })
+      })]
+    })
+  });
+});