fcr-ui-scene 1.0.20 → 3.1.0

package/lib/modules/video-window/topControl/index.js

@@ -0,0 +1,85 @@
+"use strict";
+
+require("core-js/modules/es.array.iterator.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.string.iterator.js");
+require("core-js/modules/es.weak-map.js");
+require("core-js/modules/web.dom-collections.iterator.js");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+require("core-js/modules/es.array.filter.js");
+require("core-js/modules/es.array.map.js");
+require("core-js/modules/es.object.to-string.js");
+var _react = _interopRequireWildcard(require("react"));
+var _mobxReact = require("mobx-react");
+require("./index.css");
+var _context = require("../context");
+var _icon = require("agora-ui-foundation/lib/components/icon");
+var _type = require("agora-ui-foundation/lib/components/icon/type");
+var _type2 = require("./../type");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _tooltip = require("agora-ui-foundation/lib/components/tooltip");
+var _jsxRuntime = require("react/jsx-runtime");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+var TopControl = (0, _mobxReact.observer)(function () {
+  var _filterFoldList;
+  var _useContext = (0, _react.useContext)(_context.StoreContext),
+    setVideoWindowPreviewType = _useContext.setVideoWindowPreviewType,
+    videoWindowPreviewType = _useContext.videoWindowPreviewType,
+    speakHover = _useContext.speakHover,
+    foldList = _useContext.foldList,
+    shouldHideNonVideoParticipants = _useContext.shouldHideNonVideoParticipants,
+    filterFoldList = _useContext.filterFoldList;
+  var itemData = [{
+    type: _type2.FcrVideoWindowPreviewType.MIX,
+    iconType: _type.FcrIconType.FCR_WEB_SHARINGVIEW_MIDDLE,
+    tips: _type2.FcrVideoWindowPreviewTip.MIX,
+    show: true
+  }, {
+    type: _type2.FcrVideoWindowPreviewType.SMALL,
+    iconType: _type.FcrIconType.FCR_WEB_SHARINGVIEW_SMALL,
+    tips: _type2.FcrVideoWindowPreviewTip.SMALL,
+    show: true
+  }, {
+    type: _type2.FcrVideoWindowPreviewType.MIDDLE,
+    iconType: _type.FcrIconType.FCR_WEB_SHARINGVIEW_MIX,
+    tips: _type2.FcrVideoWindowPreviewTip.MIDDLE,
+    show: ((_filterFoldList = filterFoldList(foldList, shouldHideNonVideoParticipants)) === null || _filterFoldList === void 0 ? void 0 : _filterFoldList.length) > 1
+  }];
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: (0, _classnames["default"])('fcr-video-window-topcontrol', {
+      'fcr-video-window-topcontrol_hover': speakHover
+    }),
+    children: (0, _react.useMemo)(function () {
+      return itemData.filter(function (data) {
+        return data.show;
+      }).map(function (item) {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "fcr-video-window-topcontrol-item",
+          onClick: function onClick() {
+            setVideoWindowPreviewType(item.type);
+          },
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.FcrToolTip, {
+            content: item.tips,
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+                type: item.iconType,
+                colors: {
+                  iconPrimary: videoWindowPreviewType === item.type ? 'var(--fcr_ui_scene_ramp_brand6)' : 'var(--fcr_web_ui_scene_mainicon1)'
+                },
+                size: 30
+              })
+            })
+          })
+        }, item.type);
+      });
+    }, [videoWindowPreviewType, itemData])
+  });
+});
+var _default = exports["default"] = TopControl;

package/lib/modules/video-window/type.d.ts

@@ -0,0 +1,23 @@
+export declare enum FcrVideoWindowPreviewType {
+    MIX = "mix",
+    SMALL = "small",
+    MIDDLE = "middle"
+}
+export declare enum FcrVideoWindowPreviewTip {
+    MIX = "\u9690\u85CF\u89C6\u9891\u7F29\u7565\u56FE",
+    SMALL = "\u6F14\u8BB2\u8005\u89C6\u56FE",
+    MIDDLE = "\u663E\u793A\u6210\u5458\u5217\u8868"
+}
+export declare enum ConnectType {
+    NONE = 0,
+    COMPUTER = 1,
+    PHONE = 2
+}
+export type ConnectionTabType = 'computer' | 'phone';
+export declare const DefaultVideoWindowWidth = 246;
+export declare const DefaultVideoWindowHeight = 90;
+export declare const DefaultVideoWindowSmallTypeHeight = 233;
+export declare const VideoWindowRadio: number;
+export declare const VideoWindowZoomMaxWidth = 644;
+export declare const VideoWindowZoomMaxHeight = 666;
+export declare const VideoWindowItemHeight = 144;

package/lib/modules/video-window/type.js

@@ -0,0 +1,32 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.VideoWindowZoomMaxWidth = exports.VideoWindowZoomMaxHeight = exports.VideoWindowRadio = exports.VideoWindowItemHeight = exports.FcrVideoWindowPreviewType = exports.FcrVideoWindowPreviewTip = exports.DefaultVideoWindowWidth = exports.DefaultVideoWindowSmallTypeHeight = exports.DefaultVideoWindowHeight = exports.ConnectType = void 0;
+var FcrVideoWindowPreviewType = exports.FcrVideoWindowPreviewType = /*#__PURE__*/function (FcrVideoWindowPreviewType) {
+  FcrVideoWindowPreviewType["MIX"] = "mix";
+  FcrVideoWindowPreviewType["SMALL"] = "small";
+  FcrVideoWindowPreviewType["MIDDLE"] = "middle";
+  return FcrVideoWindowPreviewType;
+}({});
+var FcrVideoWindowPreviewTip = exports.FcrVideoWindowPreviewTip = /*#__PURE__*/function (FcrVideoWindowPreviewTip) {
+  FcrVideoWindowPreviewTip["MIX"] = "\u9690\u85CF\u89C6\u9891\u7F29\u7565\u56FE";
+  FcrVideoWindowPreviewTip["SMALL"] = "\u6F14\u8BB2\u8005\u89C6\u56FE";
+  FcrVideoWindowPreviewTip["MIDDLE"] = "\u663E\u793A\u6210\u5458\u5217\u8868";
+  return FcrVideoWindowPreviewTip;
+}({});
+var ConnectType = exports.ConnectType = /*#__PURE__*/function (ConnectType) {
+  ConnectType[ConnectType["NONE"] = 0] = "NONE";
+  ConnectType[ConnectType["COMPUTER"] = 1] = "COMPUTER";
+  ConnectType[ConnectType["PHONE"] = 2] = "PHONE";
+  return ConnectType;
+}({});
+var DefaultVideoWindowWidth = exports.DefaultVideoWindowWidth = 246;
+var DefaultVideoWindowHeight = exports.DefaultVideoWindowHeight = 90;
+var DefaultVideoWindowSmallTypeHeight = exports.DefaultVideoWindowSmallTypeHeight = 233;
+var VideoWindowRadio = exports.VideoWindowRadio = 246 / 233;
+var VideoWindowZoomMaxWidth = exports.VideoWindowZoomMaxWidth = 644;
+var VideoWindowZoomMaxHeight = exports.VideoWindowZoomMaxHeight = 666;
+var VideoWindowItemHeight = exports.VideoWindowItemHeight = 144;

package/lib/modules/video-window/view.d.ts

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

package/lib/modules/video-window/view.js

@@ -0,0 +1,63 @@
+"use strict";
+
+require("core-js/modules/es.array.iterator.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.to-string.js");
+require("core-js/modules/es.string.iterator.js");
+require("core-js/modules/es.weak-map.js");
+require("core-js/modules/web.dom-collections.iterator.js");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.View = void 0;
+require("core-js/modules/web.timers.js");
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _mobxReact = require("mobx-react");
+var _react = _interopRequireWildcard(require("react"));
+var _topControl = _interopRequireDefault(require("./topControl"));
+var _speaking = _interopRequireDefault(require("./speaking"));
+var _members = require("./members");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _context = require("./context");
+require("./index.css");
+var _jsxRuntime = require("react/jsx-runtime");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+var View = exports.View = (0, _mobxReact.observer)(function () {
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    isHover = _useState2[0],
+    setIsHover = _useState2[1];
+  var _useContext = (0, _react.useContext)(_context.StoreContext),
+    setSpeakHover = _useContext.setSpeakHover,
+    bounds = _useContext.bounds;
+  (0, _react.useEffect)(function () {
+    if (!isHover) {
+      var timer = setTimeout(function () {
+        setSpeakHover(false);
+      }, 2500);
+      return function () {
+        return clearTimeout(timer);
+      };
+    } else {
+      setSpeakHover(true);
+    }
+  }, [isHover]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    style: {
+      width: bounds.width || undefined,
+      height: bounds.height || undefined
+    },
+    onMouseEnter: function onMouseEnter() {
+      setIsHover(true);
+    },
+    onMouseLeave: function onMouseLeave() {
+      setIsHover(false);
+    },
+    className: (0, _classnames["default"])('fcr-video-window-dialog-wrapper'),
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_topControl["default"], {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_speaking["default"], {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_members.Members, {})]
+  });
+});

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,55 @@
+"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 _toolbar = require("./components/toolbar");
+var _context = require("./context");
+var _mobxReact = require("mobx-react");
+var _loading = require("./components/loading");
+var _progress = _interopRequireDefault(require("./components/progress"));
+var _enums = require("agora-edu-core/lib/room-control/whiteboard-control/enums");
+require("./style.css");
+var _boardContext = _interopRequireDefault(require("../../utilities/board-context"));
+var _i18n = require("agora-ui-foundation/lib/i18n");
+var _jsxRuntime = require("react/jsx-runtime");
+var Whiteboard = exports.Whiteboard = (0, _mobxReact.observer)(function () {
+  var _useContext = (0, _react.useContext)(_boardContext["default"]),
+    showToolbar = _useContext.showToolbar;
+  var transI18n = (0, _i18n.useI18n)();
+  var _useContext2 = (0, _react.useContext)(_context.BoardUIContext),
+    _useContext2$observab = _useContext2.observables,
+    canOperate = _useContext2$observab.canOperate,
+    connectionState = _useContext2$observab.connectionState,
+    progress = _useContext2$observab.progress,
+    writeEnabled = _useContext2$observab.writeEnabled,
+    handleBoardDomLoad = _useContext2.handleBoardDomLoad,
+    handleCollectorDomLoad = _useContext2.handleCollectorDomLoad,
+    handleClose = _useContext2.handleClose,
+    handleOpen = _useContext2.handleOpen;
+  var loading = connectionState === _enums.FcrBoardRoomConnectionState.CONNECTING || connectionState === _enums.FcrBoardRoomConnectionState.RECONNECTING;
+  (0, _react.useEffect)(function () {
+    handleOpen();
+    return function () {
+      handleClose();
+    };
+  }, []);
+  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);
+      }
+    }), canOperate && showToolbar && writeEnabled && /*#__PURE__*/(0, _jsxRuntime.jsx)(_toolbar.Toolbar, {}), 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,49 @@
+.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 .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,163 @@
+"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),
+    onLonelyWindow = _useContext.onLonelyWindow,
+    onZoomin = _useContext.onZoomin,
+    onZoomout = _useContext.onZoomout,
+    onOrigin = _useContext.onOrigin,
+    onAdaptive = _useContext.onAdaptive,
+    onClose = _useContext.onClose,
+    onEnable = _useContext.onEnable,
+    ownerUser = _useContext.ownerUser,
+    currentUser = _useContext.currentUser,
+    lonelywindowOpened = _useContext.lonelywindowOpened,
+    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.jsx)("div", {
+      className: "whiteboard-controlbar-left",
+      children: transI18n('fmt_screenshare_whiteboard_tips_someonesharing', {
+        reason1: isSponsor ? transI18n('fmt_settings_labels_you') : (ownerUser === null || ownerUser === void 0 ? void 0 : ownerUser.userName) || ''
+      })
+    }), /*#__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,36 @@
+/// <reference types="react" />
+import { FcrUIEventStore } from '../../../../common/event-store';
+import { FcrUserInfo } from 'agora-edu-core/lib/type';
+import { FcrStreamControl, FcrUserControl } from 'agora-edu-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>;