fcr-ui-scene-mobile 3.4.0

package/lib/modules/state-bar/view.js

@@ -0,0 +1,215 @@
+"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.NetworkQuality = exports.MeetingTimeText = exports.FcrMobileStateBar = void 0;
+require("core-js/modules/web.timers.js");
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _mobxReact = require("mobx-react");
+var _i18n = require("agora-ui-foundation/lib/i18n");
+require("./index.css");
+var _button = require("agora-ui-foundation/lib/components/button");
+var _icon = require("agora-ui-foundation/lib/components/icon");
+var _type = require("agora-ui-foundation/lib/components/icon/type");
+var _meetingDetail = require("./meeting-detail");
+var _react = require("react");
+var _context = require("./context");
+var _meetingTime = require("../../hooks/meeting-time");
+var _dialog = require("agora-ui-foundation/lib/components/dialog");
+var _leavingRoom = require("./leaving-room");
+var _globalContext = require("../../common/global-context");
+var _useIsNodePresent2 = require("../../hooks/useIsNodePresent");
+var _jsxRuntime = require("react/jsx-runtime");
+var RotationVideoBtn = function RotationVideoBtn(_ref) {
+  var onClick = _ref.onClick;
+  var colors = {
+    iconPrimary: 'var(--fcr_ui_scene_icontext5)',
+    iconSecondary: 'var(--fcr_ui_scene_icontext5)'
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: "fcr-mobile-video-rotation2-btn",
+    onClick: onClick,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+      type: _type.FcrIconType.FCR_VIDEOROTATION2,
+      size: 30,
+      colors: colors
+    })
+  });
+};
+var qualityImgMap = {
+  poor: _type.FcrIconType.FCR_V2_SIGNAL_BAD,
+  average: _type.FcrIconType.FCR_V2_SIGNAL_NORMAL,
+  excellent: _type.FcrIconType.FCR_V2_SIGNAL_GOOD,
+  unknown: _type.FcrIconType.FCR_V2_SIGNAL_GOOD
+};
+var NetworkQuality = exports.NetworkQuality = (0, _mobxReact.observer)(function (_ref2) {
+  var status = _ref2.status;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: "fcr-top-action-network-quality",
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+      type: qualityImgMap[status],
+      size: 20
+    })
+  });
+});
+var MeetingTimeText = exports.MeetingTimeText = (0, _mobxReact.observer)(function () {
+  var _useContext = (0, _react.useContext)(_context.StoreContext),
+    scheduleInfo = _useContext.scheduleInfo;
+  var _useMeetingTime = (0, _meetingTime.useMeetingTime)(scheduleInfo),
+    totalHourText = _useMeetingTime.totalHourText,
+    totalMinuteText = _useMeetingTime.totalMinuteText,
+    meetingTime = _useMeetingTime.meetingTime;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: "fcr-top-action-center-lasttime",
+    children: [meetingTime, "(", totalHourText, totalMinuteText, ")"]
+  });
+});
+var FullScreenLockConfirmDialogContent = function FullScreenLockConfirmDialogContent(_ref3) {
+  var leave = _ref3.leave;
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    bgLoaded = _useState2[0],
+    setBgLoaded = _useState2[1];
+  (0, _react.useEffect)(function () {
+    var waitTimber = setTimeout(function () {
+      setBgLoaded(true);
+    }, 400);
+    return function () {
+      clearTimeout(waitTimber);
+    };
+  }, []);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: "fcr-mobile-full-screen-cover",
+    children: bgLoaded && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "fcr-mobile-lock-room-dialog-infos",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "fcr-mobile-lock-room-dialog-infos-title",
+          children: (0, _i18n.transI18n)('fmt_actionbar_tips_locked')
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "fcr-mobile-lock-room-dialog-infos-tip",
+          children: (0, _i18n.transI18n)('fmt_actionbar_tips_recheckleave')
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          onClick: function onClick() {
+            leave();
+            _dialog.FcrDialogApi.closeAll();
+          },
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.FcrButton, {
+            styleType: "danger",
+            shape: "circle",
+            className: "fcr-mobile-lock-room-dialog-leave-btn",
+            children: (0, _i18n.transI18n)('fmt_popup_button_leavemeeting')
+          })
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "fcr-mobile-cancel-circle-btn",
+        onClick: function onClick() {
+          _dialog.FcrDialogApi.closeAll();
+        },
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+          type: _type.FcrIconType.FCR_WRONG,
+          size: 40,
+          colors: {
+            iconPrimary: 'var(--fcr_ui_scene_white10)'
+          }
+        })
+      })]
+    })
+  });
+};
+var FcrMobileStateBar = exports.FcrMobileStateBar = (0, _mobxReact.observer)(function () {
+  var _useContext2 = (0, _react.useContext)(_context.StoreContext),
+    setMeetingDetailPopoverOpened = _useContext2.setMeetingDetailPopoverOpened,
+    networkStatus = _useContext2.networkStatus,
+    leave = _useContext2.leave,
+    end = _useContext2.end;
+  var _useContext3 = (0, _react.useContext)(_globalContext.FcrMobileGlobalContext),
+    participantStore = _useContext3.participantStore,
+    securityStore = _useContext3.securityStore,
+    deviceStore = _useContext3.deviceStore;
+  var _useIsNodePresent = (0, _useIsNodePresent2.useIsNodePresent)('.fcr-member-layout'),
+    isNodePresent = _useIsNodePresent.isNodePresent;
+  var localUser = participantStore.localUser;
+  var isLockRoomEnabled = securityStore.isLockRoomEnabled;
+  var switchCamera = deviceStore.switchCamera;
+  var handleEnd = function handleEnd() {
+    if (isLockRoomEnabled()) {
+      _dialog.FcrDialogApi.injectOpen({
+        id: 'fcr-lock-end-meeting-dialog',
+        dialogProps: {
+          content: /*#__PURE__*/(0, _jsxRuntime.jsx)(FullScreenLockConfirmDialogContent, {
+            leave: leave
+          }),
+          width: window.innerWidth,
+          closable: false
+        }
+      });
+    } else {
+      _dialog.FcrDialogApi.open({
+        id: 'fcr-end-meeting-dialog',
+        dialogProps: {
+          content: /*#__PURE__*/(0, _jsxRuntime.jsx)(_leavingRoom.FcrMobileLeavingRoom, {
+            end: end,
+            leave: leave
+          }),
+          width: 322,
+          closable: false
+        }
+      });
+    }
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: "fcr-top-action-main-wrap",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "fcr-top-action-left-wrap",
+      children: localUser.hasVideo && /*#__PURE__*/(0, _jsxRuntime.jsx)(RotationVideoBtn, {
+        onClick: switchCamera
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "fcr-top-action-center-wrap",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "fcr-top-action-center-infos",
+        onClick: function onClick() {
+          return setMeetingDetailPopoverOpened(true);
+        },
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: "fcr-top-action-center-title",
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(NetworkQuality, {
+            status: networkStatus
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+            children: (0, _i18n.transI18n)('fmt_meetinginfo_dialog_title_meeting_info')
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+            className: "fcr-top-action-center-extra-icon",
+            type: _type.FcrIconType.FCR_DROPDOWN,
+            colors: {
+              iconPrimary: 'var(--fcr_web_ui_scene_mainicon1)'
+            },
+            size: 24
+          })]
+        })
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "fcr-top-action-right-wrap",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.FcrButton, {
+        shape: "rounded",
+        styleType: "danger",
+        size: 'XS',
+        onClick: function onClick() {
+          return handleEnd();
+        },
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+          type: _type.FcrIconType.FCR_ENDMEETING,
+          className: "fcr-top-end-meeting-btn",
+          size: 32,
+          colors: {
+            iconPrimary: 'var(--fcr_ui_scene_white10)',
+            iconSecondary: 'var(--fcr_ui_scene_white10)'
+          }
+        })
+      })
+    }), isNodePresent ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_meetingDetail.FcrMobileMeetingDetailPopup, {}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {})]
+  });
+});

package/lib/modules/whiteboard/app.d.ts

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

package/lib/modules/whiteboard/app.js

@@ -0,0 +1,41 @@
+"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.Whiteboard = void 0;
+var _react = require("react");
+var _context = require("./context");
+var _mobxReact = require("mobx-react");
+var _loading = require("./components/loading");
+var _progress = _interopRequireDefault(require("./components/progress"));
+require("./style.css");
+var _i18n = require("agora-ui-foundation/lib/i18n");
+var _fcrCore = require("fcr-core");
+var _jsxRuntime = require("react/jsx-runtime");
+var Whiteboard = exports.Whiteboard = (0, _mobxReact.observer)(function () {
+  var transI18n = (0, _i18n.useI18n)();
+  var _useContext = (0, _react.useContext)(_context.BoardUIContext),
+    _useContext$observabl = _useContext.observables,
+    connectionState = _useContext$observabl.connectionState,
+    progress = _useContext$observabl.progress,
+    handleBoardDomLoad = _useContext.handleBoardDomLoad,
+    handleCollectorDomLoad = _useContext.handleCollectorDomLoad;
+  var loading = connectionState === _fcrCore.FcrConnectionState.CONNECTING || connectionState === _fcrCore.FcrConnectionState.RECONNECTING;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "board-widget-app",
+      ref: handleBoardDomLoad
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "window-manager-collector",
+      ref: function ref(_ref) {
+        handleCollectorDomLoad(_ref);
+      }
+    }), loading && /*#__PURE__*/(0, _jsxRuntime.jsx)(_loading.Loading, {}), progress > 0 && progress < 100 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_progress["default"], {
+      title: "".concat(transI18n('fmt_screenshare_whiteboard_tips_downloading'), "..."),
+      progress: progress
+    })]
+  });
+});

package/lib/modules/whiteboard/components/control-bar/index.css

@@ -0,0 +1,53 @@
+.whiteboard-controlbar {
+    width: 100%;
+    height: 28px;
+    border-bottom: 1px solid var(--fcr_ui_scene_line1);
+    border-top: 1px solid var(--fcr_ui_scene_line1);
+    background: var(--fcr_mobile_ui_scene_color_popup_block3);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    column-gap: 12px;
+  }
+  .whiteboard-controlbar-left {
+    flex: 1;
+    justify-content: flex-end;
+    align-items: center;
+    display: flex;
+    font-weight: 400;
+    color: var(-fcr_ui_scene_icontext1);
+    font-size: 12px;
+  }
+  .whiteboard-controlbar-center {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    column-gap: 12px;
+    height: 20px;
+  }
+  .whiteboard-controlbar-center .whiteboard-controlbar-item:hover svg path {
+    fill: var(--fcr_web_ui_scene_mainicon2);
+  }
+  .whiteboard-controlbar-center .divider-vertical {
+    height: 50%;
+  }
+  .whiteboard-controlbar-right {
+    flex: 1;
+  }
+  .whiteboard-controlbar-right .fcr-button-XXS {
+    height: 20px;
+    padding: 0 5px;
+  }
+  .whiteboard-controlbar-item {
+    width: 20px;
+    height: 20px;
+    border-radius: 6px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+  }
+  .whiteboard-controlbar-item:hover {
+    background: var(--fcr_ui_scene_ramp_brand0);
+  }
+  

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

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

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

@@ -0,0 +1,156 @@
+"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.WhiteboardControlbar = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _icon = require("agora-ui-foundation/lib/components/icon");
+var _type = require("agora-ui-foundation/lib/components/icon/type");
+var _switchTheme = _interopRequireDefault(require("../switch-theme"));
+var _mobxReact = require("mobx-react");
+var _react = require("react");
+var _store = require("./store");
+var _tooltip = require("agora-ui-foundation/lib/components/tooltip");
+var _button = require("agora-ui-foundation/lib/components/button");
+var _divider = _interopRequireDefault(require("agora-ui-foundation/lib/components/divider"));
+require("./index.css");
+var _i18n = require("agora-ui-foundation/lib/i18n");
+var _jsxRuntime = require("react/jsx-runtime");
+var WhiteboardControlbar = exports.WhiteboardControlbar = (0, _mobxReact.observer)(function () {
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    loading = _useState2[0],
+    setLoading = _useState2[1];
+  var transI18n = (0, _i18n.useI18n)();
+  var _useContext = (0, _react.useContext)(_store.WhiteboardControlBarUIContext),
+    onZoomin = _useContext.onZoomin,
+    onZoomout = _useContext.onZoomout,
+    onOrigin = _useContext.onOrigin,
+    onAdaptive = _useContext.onAdaptive,
+    onClose = _useContext.onClose,
+    onEnable = _useContext.onEnable,
+    ownerUser = _useContext.ownerUser,
+    currentUser = _useContext.currentUser,
+    canWriteBoard = _useContext.canWriteBoard,
+    isAdaptived = _useContext.isAdaptived,
+    isMaxmum = _useContext.isMaxmum,
+    isMinimum = _useContext.isMinimum,
+    isOriginal = _useContext.isOriginal,
+    controlEnabled = _useContext.controlEnabled,
+    isHost = _useContext.isHost;
+  (0, _react.useEffect)(function () {
+    return function () {
+      return setLoading(false);
+    };
+  }, []);
+  var isSponsor = (ownerUser === null || ownerUser === void 0 ? void 0 : ownerUser.userId) === (currentUser === null || currentUser === void 0 ? void 0 : currentUser.userId);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: "whiteboard-controlbar",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "whiteboard-controlbar-center",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.FcrToolTip, {
+        content: isMinimum ? transI18n('fmt_screenshare_whiteboard_tips_alreadyminumumsize') : transI18n('fmt_screenshare_whiteboard_button_narrow'),
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "whiteboard-controlbar-item",
+          onClick: onZoomout,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+            type: _type.FcrIconType.FCR_ZOOMOUT,
+            size: 22,
+            colors: {
+              iconPrimary: isMinimum ? 'gray' : 'var(--fcr_ui_scene_icontext1)'
+            }
+          })
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.FcrToolTip, {
+        content: isMaxmum ? transI18n('fmt_screenshare_whiteboard_tips_alreadymaximumsize') : transI18n('fmt_screenshare_whiteboard_button_enlarge'),
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "whiteboard-controlbar-item",
+          onClick: onZoomin,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+            type: _type.FcrIconType.FCR_ZOOMIN,
+            size: 22,
+            colors: {
+              iconPrimary: isMaxmum ? 'gray' : 'var(--fcr_ui_scene_icontext1)'
+            }
+          })
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.FcrToolTip, {
+        content: isAdaptived ? transI18n('fmt_screenshare_whiteboard_tips_alreadyadaptionsize') : transI18n('fmt_screenshare_lables_adaptionlsize'),
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "whiteboard-controlbar-item",
+          onClick: onAdaptive,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+            type: _type.FcrIconType.FCR_FULLCOVERAGE,
+            size: 22,
+            colors: {
+              iconPrimary: isAdaptived ? 'gray' : 'var(--fcr_ui_scene_icontext1)'
+            }
+          })
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.FcrToolTip, {
+        content: isOriginal ? transI18n('fmt_screenshare_tips_alreadyoriginalsize') : transI18n('fmt_screenshare_lables_originalsize'),
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "whiteboard-controlbar-item",
+          onClick: onOrigin,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+            type: _type.FcrIconType.FCR_EQUALRATIO,
+            size: 22,
+            colors: {
+              iconPrimary: isOriginal ? 'gray' : 'var(--fcr_ui_scene_icontext1)'
+            }
+          })
+        })
+      }), (canWriteBoard || isSponsor || isHost) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_divider["default"], {
+          type: "vertical"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.FcrToolTip, {
+          content: transI18n('fmt_screenshare_whiteboard_options_changetheme'),
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: "whiteboard-controlbar-item",
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_switchTheme["default"], {})
+          })
+        })]
+      })]
+    }), !controlEnabled && !isSponsor && !isHost && /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.FcrToolTip, {
+      content: canWriteBoard ? transI18n('fmt_screenshare_options_enableedit') : transI18n('fmt_screenshare_tips_unenabled'),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "whiteboard-controlbar-item",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+          type: _type.FcrIconType.FCR_WHITEBOARD2,
+          size: 22,
+          colors: {
+            iconPrimary: canWriteBoard ? 'var(--fcr_ui_scene_icontext1)' : 'gray'
+          },
+          onClick: function onClick() {
+            return canWriteBoard ? onEnable(true) : null;
+          }
+        })
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "whiteboard-controlbar-right",
+      children: [isSponsor && /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.FcrButton, {
+        loading: loading,
+        size: "XXS",
+        styleType: "danger",
+        shape: "rounded",
+        onClick: function onClick() {
+          onClose();
+          setLoading(true);
+        },
+        children: transI18n('fmt_screenshare_controlbar_button_stop')
+      }), controlEnabled && !isSponsor && canWriteBoard && /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.FcrButton, {
+        loading: loading,
+        size: "XXS",
+        styleType: "normal",
+        shape: "rounded",
+        onClick: function onClick() {
+          return onEnable(false);
+        },
+        children: transI18n('fmt_screenshare_whiteboard_button_exitdrawing')
+      })]
+    })]
+  });
+});

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

@@ -0,0 +1,35 @@
+import { FcrUIEventStore } from '../../../../common/event-store';
+import { FcrUserInfo } from 'fcr-core/lib/type';
+import { FcrStreamControl, FcrUserControl } from 'fcr-core';
+import { FcrSecurityStore } from '../../../../common/security-store';
+export declare class WhiteboardControlBarStore {
+    accessor ownerUser: FcrUserInfo | undefined;
+    accessor currentUser: FcrUserInfo | undefined;
+    accessor lonelywindowOpened: boolean;
+    accessor isMinimum: boolean;
+    accessor isMaxmum: boolean;
+    accessor isAdaptived: boolean;
+    accessor isOriginal: boolean;
+    accessor scaleValue: number;
+    accessor controlEnabled: boolean;
+    accessor isHost: boolean;
+    private _uiEventStore;
+    private _userControl;
+    private _securityStore;
+    constructor({ uiEventStore, userControl, securityStore, }: {
+        uiEventStore: FcrUIEventStore;
+        streamControl: FcrStreamControl;
+        userControl: FcrUserControl;
+        securityStore: FcrSecurityStore;
+    });
+    get canWriteBoard(): boolean;
+    onZoomin(): void;
+    onZoomout(): void;
+    onAdaptive(): void;
+    onOrigin(): void;
+    onLonelyWindow(): void;
+    onClose(): void;
+    setOwnerUser(user: FcrUserInfo): void;
+    onEnable(controlEnabled: boolean): void;
+}
+export declare const WhiteboardControlBarUIContext: import("react").Context<WhiteboardControlBarStore>;