fcr-ui-scene 3.5.0 → 3.6.0

package/lib/modules/waiting-room-layout/view.js

@@ -1,10 +1,12 @@
 "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["default"] = void 0;
+require("core-js/modules/es.array.concat.js");
 var _react = require("react");
 var _store = require("./store");
 var _localVideoPlayer = require("agora-ui-foundation/lib/components/local-video-player");
@@ -12,6 +14,9 @@ require("./index.css");
 var _mobxReact = require("mobx-react");
 var _i18n = require("agora-ui-foundation/lib/i18n");
 var _env = require("agora-foundation/lib/utilities/env");
+var _icon = require("agora-ui-foundation/lib/components/icon");
+var _type = require("agora-ui-foundation/lib/components/icon/type");
+var _classnames = _interopRequireDefault(require("classnames"));
 var _jsxRuntime = require("react/jsx-runtime");
 var View = (0, _mobxReact.observer)(function () {
   var t = (0, _i18n.useI18n)();
@@ -25,7 +30,10 @@ var View = (0, _mobxReact.observer)(function () {
     stopPlayLocalVideo = _useContext.stopPlayLocalVideo,
     cameraEnabled = _useContext.cameraEnabled,
     localUser = _useContext.localUser,
-    setVideoOrientation = _useContext.setVideoOrientation;
+    setVideoOrientation = _useContext.setVideoOrientation,
+    isWaitingRoom = _useContext.isWaitingRoom,
+    roomName = _useContext.roomName,
+    isJbhToMainRoom = _useContext.isJbhToMainRoom;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: "waiting-room-module",
@@ -34,10 +42,19 @@ var View = (0, _mobxReact.observer)(function () {
       className: "waiting-room-layout",
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         className: "waiting-room-title",
-        children: t('fmt_waitingroom_attendie_overview_label_waitingroom')
+        children: isWaitingRoom ? t('fmt_waitingroom_attendie_overview_label_waitingroom') : /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: (0, _classnames["default"])('waiting-room-title-jbh', {
+            'waiting-room-title-jbh-joining': isJbhToMainRoom
+          }),
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+            className: "waiting-room-title-jbh-icon",
+            type: isJbhToMainRoom ? _type.FcrIconType.FCR_JBH_INVITE : _type.FcrIconType.FCR_JBH,
+            size: isJbhToMainRoom ? 32 : 20
+          }), isJbhToMainRoom ? t('fmt_jbh_title_host_in_meeting') : t('fmt_jbh_title_host_not_in_meeting')]
+        })
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         className: "waiting-room-desc",
-        children: t('fmt_waitingroom_attendie_overview_label_wait_moment')
+        children: isWaitingRoom ? t('fmt_waitingroom_attendie_overview_label_wait_moment') : "".concat(t('fmt_jbh_title_meeting_topic'), " ").concat(roomName)
       }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
         className: "waiting-room-content",
         children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
@@ -60,10 +77,10 @@ var View = (0, _mobxReact.observer)(function () {
               children: ["(", t('fmt_participant_label_Me'), ")"]
             })]
           })]
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        }), isWaitingRoom ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
           className: "waiting-room-chat-content",
           children: chat
-        })]
+        }) : null]
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         className: "waiting-room-module waiting-room-bottom",
         children: actionBar

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

@@ -15,7 +15,7 @@
   align-items: center;
   display: flex;
   font-weight: 400;
-  color: var(-fcr_ui_scene_icontext1);
+  color: var(--fcr_ui_scene_icontext1);
   font-size: 12px;
 }
 .whiteboard-controlbar-center {

package/lib/modules/whiteboard/components/switch-theme/index.js

@@ -9,6 +9,8 @@ exports["default"] = void 0;
 require("core-js/modules/es.array.find.js");
 require("core-js/modules/es.array.map.js");
 require("core-js/modules/es.object.to-string.js");
+require("core-js/modules/esnext.async-iterator.find.js");
+require("core-js/modules/esnext.async-iterator.map.js");
 require("core-js/modules/esnext.iterator.constructor.js");
 require("core-js/modules/esnext.iterator.find.js");
 require("core-js/modules/esnext.iterator.map.js");

package/lib/modules/whiteboard/components/switch-theme/item.js

@@ -8,8 +8,7 @@ Object.defineProperty(exports, "__esModule", {
 exports["default"] = WhiteboardSwitchThemeItem;
 require("core-js/modules/es.array.concat.js");
 require("core-js/modules/es.array.map.js");
-require("core-js/modules/es.object.to-string.js");
-require("core-js/modules/esnext.iterator.constructor.js");
+require("core-js/modules/esnext.async-iterator.map.js");
 require("core-js/modules/esnext.iterator.map.js");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _jsxRuntime = require("react/jsx-runtime");

package/lib/modules/whiteboard/components/switch-theme/libs.d.ts

@@ -1,4 +1,4 @@
 import { GenerateI18nKey } from 'agora-ui-foundation/lib/i18n';
 import { WhiteboardThemeType } from '../../type';
-declare const whiteboardTheme: (t: (t: GenerateI18nKey<I18nResouceTypes>) => string) => Required<WhiteboardThemeType>[];
+declare const whiteboardTheme: (useI18n?: (text: GenerateI18nKey<I18nResouceTypes>) => string) => Required<WhiteboardThemeType>[];
 export default whiteboardTheme;

package/lib/modules/whiteboard/components/switch-theme/libs.js

@@ -5,7 +5,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-var whiteboardTheme = function whiteboardTheme(t) {
+var _i18n = require("agora-ui-foundation/lib/i18n");
+var whiteboardTheme = function whiteboardTheme(useI18n) {
+  var t = useI18n || _i18n.transI18n;
   return [{
     showColors: [['#E2E2E2', '#968D86', '#0E0E0E'], ['#A1C473', '#FFC908', '#FF86C9', '#FC3141']],
     colors: ['#E2E2E2', '#A1C473', '#FFC908', '#CC3100', '#968D86', '#4262FF', '#51BD69', '#EB47A2', '#0E0E0E', '#50E3C2', '#FC3141', '#7740EC'],

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

@@ -1,6 +1,7 @@
 .fcr-board-toolbar {
   position: absolute;
   width: 50px;
+  min-height: 70px;
   z-index: 10;
   border-radius: 8px;
   /* box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); */

package/lib/modules/whiteboard/components/toolbar/components/color-picker/components/panel.js

@@ -9,9 +9,8 @@ exports.ColorPickerPanel = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 require("core-js/modules/es.array.includes.js");
 require("core-js/modules/es.array.map.js");
-require("core-js/modules/es.object.to-string.js");
 require("core-js/modules/es.string.includes.js");
-require("core-js/modules/esnext.iterator.constructor.js");
+require("core-js/modules/esnext.async-iterator.map.js");
 require("core-js/modules/esnext.iterator.map.js");
 var _mobxReact = require("mobx-react");
 var _react = require("react");
@@ -59,6 +58,7 @@ var CommonColorMenu = (0, _mobxReact.observer)(function (_ref) {
   });
   var transI18n = (0, _i18n.useI18n)();
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_popover.FcrPopover, {
+    showArrow: false,
     visible: visibleMenu,
     overlayInnerStyle: {
       borderRadius: '4px',

package/lib/modules/whiteboard/components/toolbar/components/color-picker/components/picker.js

@@ -35,6 +35,7 @@ var Picker = exports.Picker = (0, _mobxReact.observer)(function () {
   return isDisabled ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
     className: cls
   }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_popover.FcrPopover, {
+    showArrow: false,
     content: /*#__PURE__*/(0, _jsxRuntime.jsx)(_panel.ColorPickerPanel, {}),
     trigger: "click",
     placement: toolbarDockPosition.placement === 'left' ? 'right' : 'left',

package/lib/modules/whiteboard/components/toolbar/components/color-picker/index.js

@@ -8,8 +8,7 @@ exports.ColorPickerItem = void 0;
 require("core-js/modules/es.array.map.js");
 require("core-js/modules/es.array.push.js");
 require("core-js/modules/es.array.slice.js");
-require("core-js/modules/es.object.to-string.js");
-require("core-js/modules/esnext.iterator.constructor.js");
+require("core-js/modules/esnext.async-iterator.map.js");
 require("core-js/modules/esnext.iterator.map.js");
 var _mobxReact = require("mobx-react");
 var _react = require("react");

package/lib/modules/whiteboard/components/toolbar/components/eraser-picker.js

@@ -1,23 +1,13 @@
 "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/esnext.weak-map.delete-all.js");
-require("core-js/modules/esnext.weak-map.emplace.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.EraserPickerItem = void 0;
 var _mobxReact = require("mobx-react");
-var _react = _interopRequireWildcard(require("react"));
-var _ = require("..");
+var _react = require("react");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _i18n = require("agora-ui-foundation/lib/i18n");
 var _type = require("agora-ui-foundation/lib/components/icon/type");
@@ -25,9 +15,8 @@ var _icon = require("agora-ui-foundation/lib/components/icon");
 var _store = require("../store");
 var _tooltip = require("agora-ui-foundation/lib/components/tooltip");
 var _enums = require("fcr-core/lib/room-control/whiteboard-control/enums");
+var _expansion = require("./expansion");
 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 EraserPickerItem = exports.EraserPickerItem = (0, _mobxReact.observer)(function (_ref) {
   var offset = _ref.offset;
   var _useContext = (0, _react.useContext)(_store.ToolbarContext),
@@ -36,7 +25,7 @@ var EraserPickerItem = exports.EraserPickerItem = (0, _mobxReact.observer)(funct
     toolbarDockPosition = _useContext$observabl.toolbarDockPosition;
   var transI18n = (0, _i18n.useI18n)();
   var isActive = currentTool === _enums.FcrBoardToolType.ERASER;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_.ExpansionToolbarItem, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_expansion.ExpansionToolbarItem, {
     isActive: isActive,
     tooltip: transI18n('fmt_screenshare_whiteboard_button_eraser'),
     tooltipPlacement: toolbarDockPosition.placement === 'left' ? 'right' : 'left',

package/lib/modules/whiteboard/components/toolbar/components/extra-tool-picker.js

@@ -18,15 +18,15 @@ require("core-js/modules/es.array.map.js");
 require("core-js/modules/es.date.to-string.js");
 require("core-js/modules/es.object.to-string.js");
 require("core-js/modules/es.regexp.to-string.js");
-require("core-js/modules/esnext.iterator.constructor.js");
+require("core-js/modules/esnext.async-iterator.map.js");
 require("core-js/modules/esnext.iterator.map.js");
 var _mobxReact = require("mobx-react");
-var _ = require("..");
 var _hooks = require("../hooks");
 var _react = _interopRequireWildcard(require("react"));
 var _i18n = require("agora-ui-foundation/lib/i18n");
 var _type = require("agora-ui-foundation/lib/components/icon/type");
 var _store = require("../store");
+var _expansion = require("./expansion");
 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; }
@@ -35,7 +35,7 @@ var AdditionToolPickerItem = exports.AdditionToolPickerItem = (0, _mobxReact.obs
     toolbarDockPosition = _useContext.observables.toolbarDockPosition;
   var transI18n = (0, _i18n.useI18n)();
   var isActive = false;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_.ExpansionToolbarItem, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_expansion.ExpansionToolbarItem, {
     isActive: isActive,
     tooltip: transI18n('fmt_screenshare_whiteboard_button_additionaltools'),
     icon: _type.FcrIconType.FCR_SUBTRACT,

package/lib/modules/whiteboard/components/toolbar/components/history.js

@@ -6,11 +6,11 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.UndoItem = exports.RedoItem = void 0;
 var _mobxReact = require("mobx-react");
-var _ = require("..");
 var _react = require("react");
 var _type = require("agora-ui-foundation/lib/components/icon/type");
 var _i18n = require("agora-ui-foundation/lib/i18n");
 var _store = require("../store");
+var _item = require("./item");
 var _jsxRuntime = require("react/jsx-runtime");
 var UndoItem = exports.UndoItem = (0, _mobxReact.observer)(function () {
   var _useContext = (0, _react.useContext)(_store.ToolbarContext),
@@ -19,7 +19,7 @@ var UndoItem = exports.UndoItem = (0, _mobxReact.observer)(function () {
     toolbarDockPosition = _useContext$observabl.toolbarDockPosition,
     undo = _useContext.undo;
   var transI18n = (0, _i18n.useI18n)();
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_.ToolbarItem, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_item.ToolbarItem, {
     tooltipPlacement: toolbarDockPosition.placement === 'left' ? 'right' : 'left',
     tooltip: transI18n('fmt_screenshare_whiteboard_button_withdrwa'),
     icon: _type.FcrIconType.FCR_MOBILE_WHITEBOARD_UNDO,
@@ -35,7 +35,7 @@ var RedoItem = exports.RedoItem = (0, _mobxReact.observer)(function () {
     toolbarDockPosition = _useContext2$observab.toolbarDockPosition,
     redo = _useContext2.redo;
   var transI18n = (0, _i18n.useI18n)();
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_.ToolbarItem, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_item.ToolbarItem, {
     tooltipPlacement: toolbarDockPosition.placement === 'left' ? 'right' : 'left',
     tooltip: transI18n('fmt_screenshare_whiteboard_button_forward'),
     icon: _type.FcrIconType.FCR_MOBILE_WHITEBOARD_REDO,

package/lib/modules/whiteboard/components/toolbar/components/move-handle.js

@@ -10,6 +10,8 @@ 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.async-iterator.filter.js");
+require("core-js/modules/esnext.async-iterator.for-each.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");

package/lib/modules/whiteboard/components/toolbar/components/pen-picker.js

@@ -7,19 +7,18 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.PenPickerItem = void 0;
 require("core-js/modules/es.array.map.js");
-require("core-js/modules/es.object.to-string.js");
-require("core-js/modules/esnext.iterator.constructor.js");
+require("core-js/modules/esnext.async-iterator.map.js");
 require("core-js/modules/esnext.iterator.map.js");
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("react");
 var _mobxReact = require("mobx-react");
-var _ = require("..");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _type = require("../../../type");
 var _type2 = require("agora-ui-foundation/lib/components/icon/type");
 var _i18n = require("agora-ui-foundation/lib/i18n");
 var _icon = require("agora-ui-foundation/lib/components/icon");
 var _store = require("../store");
+var _expansion = require("./expansion");
 var _jsxRuntime = require("react/jsx-runtime");
 var penIconMap = (0, _defineProperty2["default"])((0, _defineProperty2["default"])({}, _type.FcrBoardShape.Curve, _type2.FcrIconType.FCR_WHITEBOARD_PED3), _type.FcrBoardShape.Straight, _type2.FcrIconType.FCR_WHITEBOARD_PED2);
 var PenPickerItem = exports.PenPickerItem = (0, _mobxReact.observer)(function (_ref) {
@@ -40,7 +39,7 @@ var PenPickerItem = exports.PenPickerItem = (0, _mobxReact.observer)(function (_
   var isActive = currentShape === _type.FcrBoardShape.Curve;
   var icon = lastPen ? penIconMap[lastPen] : _type2.FcrIconType.FCR_WHITEBOARD_PED3;
   var clickShape = lastPen ? lastPen : _type.FcrBoardShape.Curve;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_.ExpansionToolbarItem, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_expansion.ExpansionToolbarItem, {
     isActive: isActive,
     tooltip: transI18n('fmt_screenshare_whiteboard_button_paintbrush'),
     icon: icon,

package/lib/modules/whiteboard/components/toolbar/components/screen-capture-picker.js

@@ -12,15 +12,15 @@ var _env = require("agora-foundation/lib/utilities/env");
 var _type = require("agora-ui-foundation/lib/components/icon/type");
 var _icon = require("agora-ui-foundation/lib/components/icon");
 var _store = require("../store");
-var _ = require("..");
 var _tooltip = require("agora-ui-foundation/lib/components/tooltip");
+var _expansion = require("./expansion");
 var _jsxRuntime = require("react/jsx-runtime");
 var ScreenCapturePickerItem = exports.ScreenCapturePickerItem = (0, _mobxReact.observer)(function (_ref) {
   var offset = _ref.offset;
   var _useContext = (0, _react.useContext)(_store.ToolbarContext),
     toolbarDockPosition = _useContext.observables.toolbarDockPosition;
   var transI18n = (0, _i18n.useI18n)();
-  return (0, _env.isElectron)() ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_.ExpansionToolbarItem, {
+  return (0, _env.isElectron)() ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_expansion.ExpansionToolbarItem, {
     isActive: false,
     tooltip: transI18n('fmt_screenshare_whiteboard_button_cutting'),
     tooltipPlacement: toolbarDockPosition.placement === 'left' ? 'right' : 'left',

package/lib/modules/whiteboard/components/toolbar/components/shape-picker.js

@@ -8,14 +8,12 @@ Object.defineProperty(exports, "__esModule", {
 exports.ShapePickerItem = void 0;
 require("core-js/modules/es.array.includes.js");
 require("core-js/modules/es.array.map.js");
-require("core-js/modules/es.object.to-string.js");
 require("core-js/modules/es.string.includes.js");
-require("core-js/modules/esnext.iterator.constructor.js");
+require("core-js/modules/esnext.async-iterator.map.js");
 require("core-js/modules/esnext.iterator.map.js");
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("react");
 var _mobxReact = require("mobx-react");
-var _ = require("..");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _type = require("../../../type");
 var _type2 = require("agora-ui-foundation/lib/components/icon/type");
@@ -23,6 +21,7 @@ var _i18n = require("agora-ui-foundation/lib/i18n");
 var _icon = require("agora-ui-foundation/lib/components/icon");
 var _store = require("../store");
 var _tooltip = require("agora-ui-foundation/lib/components/tooltip");
+var _expansion = require("./expansion");
 var _jsxRuntime = require("react/jsx-runtime");
 var shapeIconMap = (0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])({}, _type.FcrBoardShape.Arrow, _type2.FcrIconType.FCR_WHITEBOARD_SHAP_ARROW), _type.FcrBoardShape.Ellipse, _type2.FcrIconType.FCR_WHITEBOARD_SHAP_CIRCLE), _type.FcrBoardShape.Pentagram, _type2.FcrIconType.FCR_WHITEBOARD_SHAP_STAR), _type.FcrBoardShape.Rectangle, _type2.FcrIconType.FCR_WHITEBOARD_SHAP_SQUARE), _type.FcrBoardShape.Rhombus, _type2.FcrIconType.FCR_WHITEBOARD_SHAP_REHUMBUS), _type.FcrBoardShape.Triangle, _type2.FcrIconType.FCR_WHITEBOARD_SHAP_TRIANGLE), _type.FcrBoardShape.Straight, _type2.FcrIconType.FCR_WHITEBOARD_SHAP_LINE);
 var ShapePickerItem = exports.ShapePickerItem = (0, _mobxReact.observer)(function (_ref) {
@@ -43,7 +42,7 @@ var ShapePickerItem = exports.ShapePickerItem = (0, _mobxReact.observer)(functio
   var isActive = !!currentShape && [_type.FcrBoardShape.Arrow, _type.FcrBoardShape.Ellipse, _type.FcrBoardShape.Pentagram, _type.FcrBoardShape.Rectangle, _type.FcrBoardShape.Rhombus, _type.FcrBoardShape.Triangle, _type.FcrBoardShape.Straight].includes(currentShape);
   var icon = lastShape ? shapeIconMap[lastShape] : _type2.FcrIconType.FCR_WHITEBOARD_SHAP_CIRCLE;
   var clickShape = lastShape ? lastShape : _type.FcrBoardShape.Ellipse;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_.ExpansionToolbarItem, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_expansion.ExpansionToolbarItem, {
     isActive: isActive,
     tooltip: transI18n('fmt_screenshare_whiteboard_button_shape'),
     icon: icon,
@@ -55,7 +54,7 @@ var ShapePickerItem = exports.ShapePickerItem = (0, _mobxReact.observer)(functio
     popoverOffset: offset,
     iconProps: {
       colors: {
-        iconPrimary: currentColor
+        iconPrimary: currentColor || '#000'
       }
     }
   });

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

@@ -11,12 +11,13 @@ require("core-js/modules/es.array.filter.js");
 require("core-js/modules/es.array.map.js");
 require("core-js/modules/es.array.reverse.js");
 require("core-js/modules/es.object.to-string.js");
+require("core-js/modules/esnext.async-iterator.filter.js");
+require("core-js/modules/esnext.async-iterator.map.js");
 require("core-js/modules/esnext.iterator.constructor.js");
 require("core-js/modules/esnext.iterator.filter.js");
 require("core-js/modules/esnext.iterator.map.js");
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _react = require("react");
-var _ = require("..");
 var _index = require("../components/color-picker/index");
 var _eraserPicker = require("../components/eraser-picker");
 var _history = require("../components/history");
@@ -33,6 +34,7 @@ var _store = require("../store");
 var _screenCapturePicker = require("../components/screen-capture-picker");
 var _env = require("agora-foundation/lib/utilities/env");
 var _enums = require("fcr-core/lib/room-control/whiteboard-control/enums");
+var _item = require("../components/item");
 var _jsxRuntime = require("react/jsx-runtime");
 var useVisibleTools = exports.useVisibleTools = function useVisibleTools(diraction) {
   var _useContext = (0, _react.useContext)(_store.ToolbarContext),
@@ -50,7 +52,7 @@ var useVisibleTools = exports.useVisibleTools = function useVisibleTools(diracti
   };
   var baseMainTools = [{
     renderItem: function renderItem() {
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_.ToolbarItem, {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_item.ToolbarItem, {
         tooltipPlacement: toolbarDockPosition.placement === 'left' ? 'right' : 'left',
         tooltip: transI18n('fmt_screenshare_whiteboard_button_laserpen'),
         icon: _type.FcrIconType.FCR_WHITEBOARD_LASERPEN2,
@@ -73,7 +75,7 @@ var useVisibleTools = exports.useVisibleTools = function useVisibleTools(diracti
   // },
   {
     renderItem: function renderItem() {
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_.ToolbarItem, {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_item.ToolbarItem, {
         tooltipPlacement: toolbarDockPosition.placement === 'left' ? 'right' : 'left',
         tooltip: transI18n('fmt_screenshare_whiteboard_button_boxselection'),
         icon: _type.FcrIconType.FCR_WHITECHOOSE,
@@ -100,7 +102,7 @@ var useVisibleTools = exports.useVisibleTools = function useVisibleTools(diracti
     }
   }, {
     renderItem: function renderItem() {
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_.ToolbarItem, {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_item.ToolbarItem, {
         tooltipPlacement: toolbarDockPosition.placement === 'left' ? 'right' : 'left',
         tooltip: transI18n('fmt_screenshare_whiteboard_button_text'),
         icon: _type.FcrIconType.FCR_WHITEBOARD_TEXT,
@@ -111,7 +113,7 @@ var useVisibleTools = exports.useVisibleTools = function useVisibleTools(diracti
     }
   }, {
     renderItem: function renderItem() {
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_.ToolbarItem, {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_item.ToolbarItem, {
         tooltipPlacement: toolbarDockPosition.placement === 'left' ? 'right' : 'left',
         tooltip: transI18n('fmt_screenshare_whiteboard_button_dragdrop'),
         icon: _type.FcrIconType.FCR_WHITEBOARD_MOVESUBJECTS2,
@@ -151,7 +153,7 @@ var useVisibleTools = exports.useVisibleTools = function useVisibleTools(diracti
   };
   var fixedTools = [divider, colorTool, divider, {
     renderItem: function renderItem() {
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_.ToolbarItem, {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_item.ToolbarItem, {
         tooltipPlacement: toolbarDockPosition.placement === 'left' ? 'right' : 'left',
         tooltip: transI18n('fmt_screenshare_whiteboard_button_savescript'),
         icon: _type.FcrIconType.FCR_DOWNLOAD,

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

@@ -1,58 +1,36 @@
 "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.iterator.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.string.iterator.js");
-require("core-js/modules/es.weak-map.js");
-require("core-js/modules/esnext.iterator.filter.js");
-require("core-js/modules/esnext.iterator.for-each.js");
-require("core-js/modules/esnext.weak-map.delete-all.js");
-require("core-js/modules/esnext.weak-map.emplace.js");
-require("core-js/modules/web.dom-collections.for-each.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.ToolbarItem = exports.Toolbar = exports.ExpansionToolbarItem = void 0;
+exports.Toolbar = void 0;
 require("core-js/modules/es.error.to-string.js");
 require("core-js/modules/es.array.map.js");
 require("core-js/modules/es.date.to-string.js");
 require("core-js/modules/es.object.to-string.js");
 require("core-js/modules/es.regexp.to-string.js");
-require("core-js/modules/esnext.iterator.constructor.js");
+require("core-js/modules/esnext.async-iterator.map.js");
 require("core-js/modules/esnext.iterator.map.js");
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _mobxReact = require("mobx-react");
-var _react = _interopRequireWildcard(require("react"));
+var _react = require("react");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _hooks = require("./hooks");
 var _moveHandle = require("./components/move-handle");
 var _icon = require("agora-ui-foundation/lib/components/icon");
 var _type = require("agora-ui-foundation/lib/components/icon/type");
-var _tooltip = require("agora-ui-foundation/lib/components/tooltip");
-var _popover = require("agora-ui-foundation/lib/components/popover");
 var _foldIcon = _interopRequireDefault(require("./components/icons/fold-icon"));
 require("./ style.css");
 var _i18n = require("agora-ui-foundation/lib/i18n");
+var _store = require("./store");
 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; }
-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; }
 var Toolbar = exports.Toolbar = (0, _mobxReact.observer)(function () {
   var _useVisibleTools = (0, _hooks.useVisibleTools)(),
     mainTools = _useVisibleTools.mainTools;
+  var _useContext = (0, _react.useContext)(_store.ToolbarContext),
+    repositionToolbar = _useContext.repositionToolbar;
   var transI18n = (0, _i18n.useI18n)();
   var _useState = (0, _react.useState)(false),
     _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
@@ -61,6 +39,9 @@ var Toolbar = exports.Toolbar = (0, _mobxReact.observer)(function () {
   var handleFoldClick = function handleFoldClick() {
     setFolded(!folded);
   };
+  (0, _react.useEffect)(function () {
+    repositionToolbar();
+  }, []);
   var clsn = (0, _classnames["default"])({
     'fcr-board-toolbar--folded': folded,
     // prevent first animation play
@@ -96,86 +77,4 @@ var Toolbar = exports.Toolbar = (0, _mobxReact.observer)(function () {
       })
     })]
   });
-});
-/** @internal */
-var ToolbarItem = exports.ToolbarItem = function ToolbarItem(_ref2) {
-  var tooltipPlacement = _ref2.tooltipPlacement,
-    tooltip = _ref2.tooltip,
-    icon = _ref2.icon,
-    onClick = _ref2.onClick,
-    className = _ref2.className,
-    isActive = _ref2.isActive,
-    isDisabled = _ref2.isDisabled,
-    diraction = _ref2.diraction;
-  var cls = (0, _classnames["default"])('fcr-board-toolbar-item-surrounding', className, {
-    'fcr-board-toolbar-item-surrounding--active': isActive,
-    'fcr-board-toolbar-item-surrounding--disabled': isDisabled
-  });
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.FcrToolTip, {
-    placement: tooltipPlacement,
-    content: tooltip,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      className: cls,
-      onClick: isDisabled ? undefined : onClick,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
-        type: icon,
-        size: diraction === 'horizontal' ? 32 : 28,
-        colors: {
-          iconPrimary: isActive ? 'var(--fcr_ui_scene_ramp_brand6)' : 'var(--fcr_ui_scene_black8)'
-        }
-      })
-    })
-  });
-};
-/** @internal */
-var ExpansionToolbarItem = exports.ExpansionToolbarItem = function ExpansionToolbarItem(_ref3) {
-  var tooltip = _ref3.tooltip,
-    tooltipPlacement = _ref3.tooltipPlacement,
-    popoverContent = _ref3.popoverContent,
-    popoverPlacement = _ref3.popoverPlacement,
-    icon = _ref3.icon,
-    onClick = _ref3.onClick,
-    popoverOverlayClassName = _ref3.popoverOverlayClassName,
-    isActive = _ref3.isActive,
-    _ref3$extensionMark = _ref3.extensionMark,
-    extensionMark = _ref3$extensionMark === void 0 ? true : _ref3$extensionMark,
-    extensionMarkProps = _ref3.extensionMarkProps,
-    _ref3$popoverOffset = _ref3.popoverOffset,
-    popoverOffset = _ref3$popoverOffset === void 0 ? 6 : _ref3$popoverOffset,
-    iconProps = _ref3.iconProps;
-  var cls = (0, _classnames["default"])('fcr-board-toolbar-item-surrounding', {
-    'fcr-board-toolbar-item-surrounding--active': isActive
-  });
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_popover.PopoverWithTooltip, {
-    toolTipProps: {
-      placement: tooltipPlacement,
-      content: tooltip
-    },
-    popoverProps: {
-      overlayOffset: popoverOffset,
-      placement: popoverPlacement,
-      content: popoverContent,
-      overlayClassName: popoverOverlayClassName,
-      visible: true,
-      overlayInnerStyle: {
-        boxShadow: 'none'
-      }
-    },
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-      className: cls,
-      onClick: onClick,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, _objectSpread({
-        type: icon,
-        size: 28,
-        colors: {
-          iconPrimary: '#000',
-          iconSecondary: '#000'
-        }
-      }, iconProps)), extensionMark && /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, _objectSpread({
-        type: _type.FcrIconType.FCR_WHITEBOARD_LOWERRIGHTARROW,
-        size: 4,
-        className: "fcr-board-toolbar-expansion-icon"
-      }, extensionMarkProps))]
-    })
-  });
-};
+});