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

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

@@ -0,0 +1,179 @@
+"use strict";
+
+require("core-js/modules/es.symbol.js");
+require("core-js/modules/es.array.filter.js");
+require("core-js/modules/es.array.for-each.js");
+require("core-js/modules/es.array.push.js");
+require("core-js/modules/es.object.define-properties.js");
+require("core-js/modules/es.object.define-property.js");
+require("core-js/modules/es.object.get-own-property-descriptor.js");
+require("core-js/modules/es.object.get-own-property-descriptors.js");
+require("core-js/modules/es.object.keys.js");
+require("core-js/modules/es.object.to-string.js");
+require("core-js/modules/esnext.iterator.constructor.js");
+require("core-js/modules/esnext.iterator.filter.js");
+require("core-js/modules/esnext.iterator.for-each.js");
+require("core-js/modules/web.dom-collections.for-each.js");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.VerticalBar = VerticalBar;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _web = require("@react-spring/web");
+var _react = require("@use-gesture/react");
+var _react2 = require("react");
+var _moveIcon = _interopRequireDefault(require("../icons/move-icon"));
+var _foldIcon = _interopRequireDefault(require("../icons/fold-icon"));
+var _i18n = require("agora-ui-foundation/lib/i18n");
+var _type = require("agora-ui-foundation/lib/components/icon/type");
+var _icon = require("agora-ui-foundation/lib/components/icon");
+var _useResizeVisible2 = require("../../hooks/use-resize-visible");
+var _jsxRuntime = require("react/jsx-runtime");
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function VerticalBar(props) {
+  var transI18n = (0, _i18n.useI18n)();
+  var container = props.container,
+    show = props.show,
+    children = props.children,
+    _props$offsetTop = props.offsetTop,
+    offsetTop = _props$offsetTop === void 0 ? 0 : _props$offsetTop,
+    onPlacementChanged = props.onPlacementChanged,
+    onResize = props.onResize;
+  var x = 20;
+  var y = (0, _react2.useMemo)(function () {
+    return 20 + offsetTop;
+  }, [offsetTop]);
+  var toolbarDom = (0, _react2.useRef)();
+  var _useState = (0, _react2.useState)('right'),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    placement = _useState2[0],
+    setPlacement = _useState2[1];
+  var _useState3 = (0, _react2.useState)({
+      x: x,
+      y: y
+    }),
+    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+    position = _useState4[0],
+    setPosition = _useState4[1];
+  var _useSpring = (0, _web.useSpring)({
+      x: x,
+      y: y
+    }, []),
+    _useSpring2 = (0, _slicedToArray2["default"])(_useSpring, 2),
+    _useSpring2$ = _useSpring2[0],
+    rx = _useSpring2$.x,
+    ry = _useSpring2$.y,
+    api = _useSpring2[1];
+  var _useState5 = (0, _react2.useState)(false),
+    _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
+    folded = _useState6[0],
+    setFold = _useState6[1];
+  var _useState7 = (0, _react2.useState)(0),
+    _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
+    topTemp = _useState8[0],
+    setTopTemp = _useState8[1];
+  var _useResizeVisible = (0, _useResizeVisible2.useResizeVisible)(),
+    coverCount = _useResizeVisible.coverCount,
+    setToolbarDom = _useResizeVisible.setToolbarDom;
+  (0, _react2.useEffect)(function () {
+    onResize(coverCount);
+  }, [coverCount]);
+  var bind = (0, _react.useDrag)(function (p) {
+    var _movement = (0, _slicedToArray2["default"])(p.movement, 2),
+      mx = _movement[0],
+      my = _movement[1];
+    api.start(placement === 'left' ? {
+      x: position.x + mx,
+      y: position.y + my
+    } : {
+      x: x + mx,
+      y: y + my
+    });
+  });
+  var handleMouseUp = function handleMouseUp() {
+    if (toolbarDom.current) {
+      var containerClientRect = (container || document.body).getBoundingClientRect();
+      var toolbarClientRect = toolbarDom.current.getBoundingClientRect();
+      var toolbarCenterPos = toolbarClientRect.left - toolbarClientRect.width / 2;
+      var _position = {
+        x: x,
+        y: y
+      };
+      if (toolbarCenterPos > containerClientRect.width / 2) {
+        // right
+        setPlacement('left');
+        onPlacementChanged('left');
+        _position = {
+          x: containerClientRect.width - toolbarClientRect.width - x,
+          y: y
+        };
+      } else {
+        // left
+        _position = {
+          x: x,
+          y: y
+        };
+        setPlacement('right');
+        onPlacementChanged('right');
+      }
+      setPosition(_position);
+      api.start(_position);
+    }
+  };
+  var handleRefMount = function handleRefMount(dom) {
+    if (dom) {
+      var top = dom.getBoundingClientRect().top;
+      if (topTemp !== top) {
+        setToolbarDom(dom);
+        setTopTemp(top);
+        toolbarDom.current = dom;
+      }
+    }
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      onClick: function onClick() {
+        return setFold(false);
+      },
+      className: "fcr-fragment-board-toobar-folded-button",
+      style: {
+        left: position.x,
+        top: position.y,
+        visibility: folded && show ? 'visible' : 'hidden'
+      },
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+        type: _type.FcrIconType.FCR_WHITEBOARD_EXPAND2,
+        colors: {
+          iconPrimary: '#000',
+          iconSecondary: '#000'
+        }
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        children: transI18n('fmt_screenshare_whiteboard_button_spread')
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_web.animated.div, {
+      ref: handleRefMount,
+      className: "fcr-fragment-whiteboard-toolbar",
+      style: {
+        left: rx,
+        top: ry || position.y,
+        visibility: show && !folded ? 'visible' : 'hidden'
+      },
+      children: [children, !folded && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "fcr-fragment-board-toolbar-fold fcr-fragment-board-toolbar-fold--".concat(placement),
+        onClick: function onClick() {
+          setFold(true);
+        },
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_foldIcon["default"], {})
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", _objectSpread(_objectSpread({}, bind()), {}, {
+        style: {
+          cursor: 'move'
+        },
+        onMouseUp: handleMouseUp,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_moveIcon["default"], {})
+      }))]
+    })]
+  });
+}

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

@@ -0,0 +1,4 @@
+export declare const useResizeVisible: () => {
+    coverCount: number;
+    setToolbarDom: (dom: HTMLDivElement | null) => void;
+};

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

@@ -0,0 +1,59 @@
+"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.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 useResizeVisible = exports.useResizeVisible = function useResizeVisible() {
+  var toolbar = (0, _react.useRef)();
+  var _useState = (0, _react.useState)(0),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    threshold = _useState2[0],
+    setThreshold = _useState2[1];
+  var _useState3 = (0, _react.useState)(-1),
+    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+    coverCount = _useState4[0],
+    setCoverCount = _useState4[1];
+  var _useState5 = (0, _react.useState)(0),
+    _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
+    itemHeight = _useState6[0],
+    setItemHeight = _useState6[1];
+  var actionbar = document.querySelector(".".concat(_view.actionBarClassName));
+  var actionBarHeight = (actionbar === null || actionbar === void 0 ? void 0 : actionbar.getBoundingClientRect().height) || 0;
+  var bottomHeight = 20;
+  var handleResize = (0, _react.useCallback)(function () {
+    var offsetHeight = document.body.offsetHeight;
+    var coverSize = threshold - offsetHeight;
+    var coverCount = Math.floor(coverSize / itemHeight);
+    setCoverCount(coverCount);
+  }, [threshold]);
+  (0, _react.useEffect)(function () {
+    window.addEventListener('resize', handleResize);
+    return function () {
+      window.removeEventListener('resize', handleResize);
+    };
+  }, [threshold]);
+  var setToolbarDom = (0, _react.useCallback)(function (dom) {
+    if (dom) {
+      var _items$;
+      toolbar.current = dom;
+      var _dom$getBoundingClien = dom.getBoundingClientRect(),
+        top = _dom$getBoundingClien.top,
+        height = _dom$getBoundingClien.height;
+      var items = dom.querySelectorAll(".".concat(_item.toolBarItemClassName));
+      setItemHeight((_items$ = items[0]) === null || _items$ === void 0 ? void 0 : _items$.getBoundingClientRect().height);
+      var _threshold = height + top + actionBarHeight + bottomHeight;
+      setThreshold(_threshold);
+    }
+  }, []);
+  return {
+    coverCount: coverCount,
+    setToolbarDom: setToolbarDom
+  };
+};

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

@@ -0,0 +1,29 @@
+import { FcrBoardShape, FcrBoardToolType } from 'fcr-core/lib/room-control/whiteboard-control/enums';
+import './style.css';
+export declare const colors: string[];
+export declare const WhiteboardToolbar: (props: {
+    direction?: "horizontal" | "vertical";
+    container?: HTMLDivElement;
+    show: boolean;
+    currentStrokeWidth: number;
+    currentColor: string;
+    currentTool: FcrBoardToolType;
+    currentShape: FcrBoardShape;
+    redoSteps: boolean;
+    undoSteps: boolean;
+    commonColors?: string[];
+    themeColors?: string[];
+    setStrokeWidth: (width: number) => void;
+    setTool: (tool: FcrBoardToolType) => void;
+    setShape: (shape: FcrBoardShape) => void;
+    setStrokeColor: (color: string) => void;
+    undo: () => void;
+    redo: () => void;
+    clean: () => void;
+    size?: number;
+    setCommonColors?: (colors: string[]) => void;
+    onSave?: () => void;
+    progress?: number;
+    setProgress?: (progress: number) => void;
+    offsetTop?: number;
+}) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,258 @@
+"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.colors = exports.WhiteboardToolbar = void 0;
+require("core-js/modules/es.array.concat.js");
+require("core-js/modules/es.array.filter.js");
+require("core-js/modules/es.object.to-string.js");
+require("core-js/modules/esnext.iterator.constructor.js");
+require("core-js/modules/esnext.iterator.filter.js");
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _enums = require("fcr-core/lib/room-control/whiteboard-control/enums");
+var _item = require("./components/item");
+var _type = require("agora-ui-foundation/lib/components/icon/type");
+var _penTool = require("./components/pen-tool");
+var _graphicTool = require("./components/graphic-tool");
+var _colorTool = require("./components/color-tool");
+var _i18n = require("agora-ui-foundation/lib/i18n");
+var _react = require("react");
+var _multipleColorTool = require("./components/multiple-color-tool");
+var _saveDraft = require("./components/save-draft");
+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");
+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) {
+  var show = props.show,
+    currentColor = props.currentColor,
+    currentTool = props.currentTool,
+    currentShape = props.currentShape,
+    currentStrokeWidth = props.currentStrokeWidth,
+    redoSteps = props.redoSteps,
+    undoSteps = props.undoSteps,
+    commonColors = props.commonColors,
+    _props$themeColors = props.themeColors,
+    themeColors = _props$themeColors === void 0 ? colors : _props$themeColors,
+    container = props.container,
+    direction = props.direction,
+    _props$size = props.size,
+    size = _props$size === void 0 ? 28 : _props$size,
+    progress = props.progress,
+    offsetTop = props.offsetTop,
+    undo = props.undo,
+    redo = props.redo,
+    clean = props.clean,
+    setTool = props.setTool,
+    setShape = props.setShape,
+    setStrokeWidth = props.setStrokeWidth,
+    setStrokeColor = props.setStrokeColor,
+    setCommonColors = props.setCommonColors,
+    onSave = props.onSave,
+    setProgress = props.setProgress;
+  var t = (0, _i18n.useI18n)();
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    popoverVisible = _useState2[0],
+    setPopoverVisible = _useState2[1];
+  var _useState3 = (0, _react.useState)('right'),
+    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+    placement = _useState4[0],
+    setPlacement = _useState4[1];
+  var _useState5 = (0, _react.useState)(-1),
+    _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
+    coverCount = _useState6[0],
+    setCoverCount = _useState6[1];
+  var effects = [coverCount, currentTool, currentColor, currentShape, currentStrokeWidth, commonColors, undoSteps, redoSteps, placement];
+  var needHiddenTools = (0, _react.useMemo)(function () {
+    return [/*#__PURE__*/(0, _jsxRuntime.jsx)(_graphicTool.AnnotationGraphicTool, {
+      size: size,
+      placement: placement,
+      currentColor: currentColor,
+      currentTool: currentTool,
+      currentShape: currentShape,
+      setShape: setShape,
+      setStrokeWidth: setStrokeWidth,
+      currentStrokeWidth: currentStrokeWidth,
+      setTool: setTool,
+      hideTitle: true,
+      direction: direction
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_item.AnnotationToolItem, {
+      size: size,
+      onVisibleChange: function onVisibleChange() {
+        return setPopoverVisible(false);
+      },
+      active: currentTool === _enums.FcrBoardToolType.TEXT,
+      onClick: function onClick() {
+        return setTool(_enums.FcrBoardToolType.TEXT);
+      },
+      iconType: _type.FcrIconType.FCR_WHITEBOARD_TEXT,
+      title: t('fmt_screenshare_whiteboard_button_text'),
+      hideTitle: true,
+      placement: placement
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_item.AnnotationToolItem, {
+      size: size,
+      onVisibleChange: function onVisibleChange() {
+        return setPopoverVisible(false);
+      },
+      active: currentTool === _enums.FcrBoardToolType.HAND,
+      onClick: function onClick() {
+        return setTool(_enums.FcrBoardToolType.HAND);
+      },
+      iconType: _type.FcrIconType.FCR_WHITEBOARD_MOVESUBJECTS2,
+      title: t('fmt_screenshare_whiteboard_button_dragdrop'),
+      hideTitle: true,
+      placement: placement
+    }), commonColors ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_cleanTool.AnnotationCleanTool, {
+      size: size,
+      hideTitle: true,
+      currentTool: currentTool,
+      placement: placement,
+      setTool: setTool,
+      clean: clean,
+      direction: direction
+    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_item.AnnotationToolItem, {
+      size: size,
+      onVisibleChange: function onVisibleChange() {
+        return setPopoverVisible(false);
+      },
+      active: currentTool === _enums.FcrBoardToolType.ERASER,
+      onClick: function onClick() {
+        return setTool(_enums.FcrBoardToolType.ERASER);
+      },
+      iconType: _type.FcrIconType.FCR_WHITEBOARD_ERASER2,
+      title: t('fmt_screenshare_whiteboard_button_eraser'),
+      hideTitle: true,
+      placement: placement
+    }), (0, _env.isElectron)() && commonColors && /*#__PURE__*/(0, _jsxRuntime.jsx)(_captureTool.AnnotationCaptureTool, {
+      popoverVisible: popoverVisible,
+      setPopoverVisible: setPopoverVisible,
+      size: size,
+      direction: direction,
+      hideTitle: true,
+      placement: placement
+    }), !commonColors && /*#__PURE__*/(0, _jsxRuntime.jsx)(_item.AnnotationToolItem, {
+      size: size,
+      onVisibleChange: function onVisibleChange() {
+        return setPopoverVisible(false);
+      },
+      onClick: clean,
+      iconType: _type.FcrIconType.FCR_DELETE5,
+      title: t('fmt_screenshare_whiteboard_button_empty'),
+      hideTitle: true,
+      placement: placement
+    })].filter(function (item) {
+      return !!item;
+    });
+  }, effects);
+  var tools = (0, _react.useCallback)(function () {
+    var hiddens = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+    var shows = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+    return [/*#__PURE__*/(0, _jsxRuntime.jsx)(_item.AnnotationToolItem, {
+      size: size,
+      active: currentTool === _enums.FcrBoardToolType.LASER_POINTER,
+      onClick: function onClick() {
+        return setTool(_enums.FcrBoardToolType.LASER_POINTER);
+      },
+      iconType: _type.FcrIconType.FCR_WHITEBOARD_LASERPEN1,
+      color: '#FF0005',
+      title: t('fmt_screenshare_whiteboard_button_laserpen'),
+      hideTitle: true,
+      placement: placement
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_item.AnnotationToolItem, {
+      size: size,
+      active: currentTool === _enums.FcrBoardToolType.SELECTOR,
+      onClick: function onClick() {
+        return setTool(_enums.FcrBoardToolType.SELECTOR);
+      },
+      iconType: _type.FcrIconType.FCR_WHITECHOOSE,
+      title: t('fmt_screenshare_whiteboard_button_boxselection'),
+      hideTitle: true,
+      placement: placement
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_penTool.AnnotationPenTool, {
+      size: size,
+      placement: placement,
+      currentColor: currentColor,
+      currentTool: currentTool,
+      setTool: setTool,
+      currentStrokeWidth: currentStrokeWidth,
+      setStrokeWidth: setStrokeWidth,
+      hideTitle: true,
+      direction: direction
+    })].concat((0, _toConsumableArray2["default"])(hiddens), [coverCount >= 2 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_groupTool.AnnotationGroupTool, {
+      size: size,
+      placement: placement,
+      children: shows
+    }), commonColors ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_multipleColorTool.MultipleColorTool, {
+      coverCount: coverCount,
+      commonColors: commonColors || [],
+      currentColor: currentColor,
+      colors: themeColors,
+      setStrokeColor: setStrokeColor,
+      placement: placement,
+      themeColors: themeColors,
+      size: 36,
+      onContextMenuClick: function onContextMenuClick(colors) {
+        return setCommonColors === null || setCommonColors === void 0 ? void 0 : setCommonColors(colors);
+      }
+    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_colorTool.AnnotationColorTool, {
+      direction: 'horizontal',
+      placement: placement,
+      size: 36,
+      currentColor: currentColor,
+      colors: themeColors,
+      setStrokeColor: setStrokeColor,
+      hideTitle: true
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_item.AnnotationToolItem, {
+      size: size,
+      onClick: undo,
+      iconType: _type.FcrIconType.FCR_MOBILE_WHITEBOARD_UNDO,
+      title: t('fmt_screenshare_whiteboard_button_withdrwa'),
+      disabled: !redoSteps,
+      hideTitle: true,
+      placement: placement
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_item.AnnotationToolItem, {
+      size: size,
+      onClick: redo,
+      iconType: _type.FcrIconType.FCR_MOBILE_WHITEBOARD_REDO,
+      title: t('fmt_screenshare_whiteboard_button_forward'),
+      disabled: !undoSteps,
+      hideTitle: true,
+      placement: placement
+    }), onSave && /*#__PURE__*/(0, _jsxRuntime.jsx)(_saveDraft.AnnotationToolSaveDraft, {
+      progress: progress || 0,
+      setProgress: setProgress || function () {},
+      onClick: onSave,
+      placement: placement
+    })]).filter(function (item) {
+      return !!item;
+    });
+  }, effects);
+  var length = commonColors ? needHiddenTools.length + 1 : needHiddenTools.length - 1;
+  var hiddens = (0, _react.useMemo)(function () {
+    return needHiddenTools.filter(function (_, index) {
+      return length - index > coverCount;
+    });
+  }, effects);
+  var shows = (0, _react.useMemo)(function () {
+    return needHiddenTools.filter(function (_, index) {
+      return length - index <= coverCount;
+    });
+  }, effects);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_verticalFrame.VerticalBar, {
+    offsetTop: offsetTop,
+    container: container,
+    show: show,
+    onPlacementChanged: setPlacement,
+    onResize: setCoverCount,
+    children: tools(hiddens, shows)
+  });
+};

package/lib/modules/components/toolbar/style.css

@@ -0,0 +1,85 @@
+.fcr-fragment-whiteboard-toolbar {
+  width: 48px;
+  position: absolute;
+  left: 20px;
+  top: 20px;
+  z-index: 1000;
+  background-color: #fff;
+  border-radius: 8px;
+  box-shadow: var(--fcr_web_light_dropup);
+  padding: 6px 0;
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.fcr-fragment-board-toolbar-fold {
+  position: absolute;
+  top: 50%;
+  cursor: pointer;
+  transition: all 0.2s;
+  filter: drop-shadow(2px 0px 1px rgba(0, 0, 0, 0.05));
+  opacity: 0;
+}
+
+.fcr-fragment-whiteboard-toolbar:hover .fcr-fragment-board-toolbar-fold {
+  opacity: 1;
+}
+
+.fcr-fragment-board-toolbar-fold--right {
+  left: calc(100% - 1px);
+  transform: translateY(-50%);
+}
+
+.fcr-fragment-board-toolbar-fold--left {
+  right: calc(100% - 1px);
+  transform: translateY(-50%) rotate(180deg);
+}
+
+.fcr-fragment-board-toolbar-fold path:nth-child(1) {
+  --fill-color: var(--fcr_ui_scene_white10);
+  fill: var(--fill-color);
+}
+
+.fcr-fragment-board-toolbar-fold path:nth-child(2) {
+  --fill-color: var(--fcr_ui_scene_black8);
+  fill: var(--fill-color);
+  transition: all 0.2s;
+}
+
+.fcr-fragment-board-toolbar-fold:hover path:nth-child(2) {
+  fill: var(--fcr_ui_scene_ramp_brand6);
+}
+
+.fcr-fragment-board-toobar-folded-button {
+  width: 60px;
+  height: 60px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  background: var(--fcr_ui_scene_white10);
+  border-radius: 4px;
+  font-size: 12px;
+  position: absolute;
+  box-shadow: var(--fcr_web_light_dropup);
+  cursor: pointer;
+  z-index: 100;
+}
+
+.fcr-fragment-board-toobar-folded-button svg {
+  width: 28px;
+}
+
+.fcr-fragment-board-toobar-folded-button path {
+  fill: var(--fcr_ui_scene_black8) !important;
+}
+
+.fcr-fragment-board-toobar-folded-button:hover {
+  color: var(--fcr_ui_scene_ramp_brand6);
+}
+
+.fcr-fragment-board-toobar-folded-button:hover path {
+  fill: var(--fcr_ui_scene_ramp_brand6) !important;
+}

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

@@ -0,0 +1,13 @@
+import { FcrBoardShape, FcrBoardToolType } from 'fcr-core/lib/room-control/whiteboard-control/enums';
+export type FcrToolbarState = {
+    controlEnable: boolean;
+    currentTool: FcrBoardToolType;
+    currentStrokeWidth: number;
+    currentColor: string;
+    currentShape: FcrBoardShape;
+    redoSteps: boolean;
+    undoSteps: boolean;
+    commonColors: string[];
+    themeColors: string[];
+    progress: number;
+};

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

@@ -0,0 +1,6 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

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

@@ -41,12 +41,6 @@ var MorePopoverContent = exports.MorePopoverContent = (0, _mobxReact.observer)(f
     handleLeaveRoom = _useContext.handleLeaveRoom,
     showToast = _useContext.showToast,
     newMessageCount = _useContext.newMessageCount,
-    _useContext$roomInfo = _useContext.roomInfo,
-    inviteLink = _useContext$roomInfo.inviteLink,
-    password = _useContext$roomInfo.password,
-    roomId = _useContext$roomInfo.roomId,
-    roomName = _useContext$roomInfo.roomName,
-    userName = _useContext.localUser.userName,
     isRoomDetailSupported = _useContext.isRoomDetailSupported,
     roomDetailCopyText = _useContext.roomDetailCopyText;
   var transI18n = (0, _i18n.useI18n)();

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

@@ -46,7 +46,8 @@ var ShareStateNav = exports.ShareStateNav = (0, _mobxReact.observer)(function (p
     isMuteAudio = _useContext.isMuteAudio,
     cloudRecordingState = _useContext.cloudRecordingState,
     meetingTime = _useContext.meetingTime,
-    isCurrentScreenShareInSmoothType = _useContext.isCurrentScreenShareInSmoothType;
+    isCurrentScreenShareInSmoothType = _useContext.isCurrentScreenShareInSmoothType,
+    isEngineConnected = _useContext.isEngineConnected;
   var transI18n = (0, _i18n.useI18n)();
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     className: "share-state-nav fcr-flex fcr-items-center \n                 fcr-justify-center share-action-nav__can-draggable \n                ".concat(currentPosition === _enums.TransferPosition.TOP ? 'share-state-nav-top' : 'share-state-nav-bottom'),
@@ -55,7 +56,7 @@ var ShareStateNav = exports.ShareStateNav = (0, _mobxReact.observer)(function (p
       currentPosition: currentPosition
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: "share-state-nav__state-text",
-      children: transI18n('fmt_settings_tips_sharing')
+      children: isEngineConnected ? transI18n('fmt_settings_tips_sharing') : transI18n('fmt_screenshare_toolbar_label_reconnecting')
     }), isCurrentScreenShareInSmoothType ? /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: "share-state-nav__meeting-scenario-type",
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {