fcr-ui-scene 3.7.2 → 3.7.4

package/lib/modules/annotation/view.js

@@ -19,12 +19,10 @@ var _jsxRuntime = require("react/jsx-runtime");
 var Annotation = exports.Annotation = (0, _mobxReact.observer)(function () {
   var _useContext = (0, _react.useContext)(_store.AnnotationStoreContext),
     handleBoardDomLoad = _useContext.handleBoardDomLoad,
-    handleBoardContainerDomLoad = _useContext.handleBoardContainerDomLoad,
     isShowToolbar = _useContext.isShowToolbar,
     getToolbarStore = _useContext.getToolbarStore,
-    receiverAllOpenStateReady = _useContext.receiverAllOpenStateReady,
     currentTool = _useContext.currentTool;
-  var cursorClassname = receiverAllOpenStateReady && isShowToolbar ? "board-widget-cursor-".concat([_enums.FcrBoardToolType[currentTool || _enums.FcrBoardToolType.NONE]]) : 'board-widget-cursor-normal';
+  var cursorClassname = isShowToolbar ? "board-widget-cursor-".concat([_enums.FcrBoardToolType[currentTool || _enums.FcrBoardToolType.NONE]]) : 'board-widget-cursor-normal';
   var boardWidgetAppCls = (0, _classnames["default"])('fcr-annotation-receiver-wrapper', 'netless-whiteboard-wrapper', {
     'fcr-annotation-receiver-wrapper--editing': isShowToolbar
   }, cursorClassname.toLowerCase());
@@ -32,8 +30,7 @@ var Annotation = exports.Annotation = (0, _mobxReact.observer)(function () {
     className: boardWidgetAppCls,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: "annotation-container",
-      ref: handleBoardContainerDomLoad,
-      children: receiverAllOpenStateReady ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_annotationToolbarStore.AnnotationReceiverToolbarContext.Provider, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_annotationToolbarStore.AnnotationReceiverToolbarContext.Provider, {
         value: getToolbarStore(),
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
           className: "annotation-main",
@@ -41,7 +38,7 @@ var Annotation = exports.Annotation = (0, _mobxReact.observer)(function () {
         }), isShowToolbar ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_annotationIndex.Toolbar, {}) : /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
           className: "annotation-action-prevent"
         })]
-      }) : null
+      })
     })
   });
 });

package/lib/modules/audio-stream/index.js

@@ -46,7 +46,6 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _base = require("../../base");
 var _fcrCore = require("fcr-core");
 var _constant = require("../../utilities/constant");
-var _imports = require("fcr-core/lib/imports");
 function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2["default"])(o), (0, _possibleConstructorReturn2["default"])(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2["default"])(t).constructor) : o.apply(t, e)); }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 var EventType = /*#__PURE__*/function (EventType) {
@@ -260,7 +259,7 @@ var AudioStreamUIModule = exports.AudioStreamUIModule = /*#__PURE__*/function (_
     (0, _defineProperty2["default"])(_this, "_setMainRoomVolume", function (volume) {
       var mainStreamControl = _this._streamControl;
       mainStreamControl.getStreamList().forEach(function (stream) {
-        var needSetVolume = [_imports.AgoraRteMediaStreamType.AUDIO, _imports.AgoraRteMediaStreamType.BOTH].includes(stream.streamType);
+        var needSetVolume = [_fcrCore.FcrStreamType.AUDIO, _fcrCore.FcrStreamType.BOTH].includes(stream.streamType);
         if (needSetVolume) mainStreamControl.adjustRemoteAudioStreamVolume(stream.streamId, volume);
       });
       _this._clearTimer();

package/lib/modules/chat/components/chat-select/index.js

@@ -88,6 +88,9 @@ var ChatSelect = exports.ChatSelect = (0, _mobxReact.observer)(function (_ref) {
         })]
       }) : /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         className: "assign-host-body-list",
+        onClick: function onClick(e) {
+          return e.stopPropagation();
+        },
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactVirtualized.List, {
           ref: ref
           // autoHeight={true}

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

@@ -0,0 +1,76 @@
+.fcr-board-loading {
+  border-radius: 10px;
+  position: absolute;
+  z-index: 999;
+  display: flex;
+  top: 38px;
+  right: 13px;
+  width: 447px;
+  height: fit-content;
+  transition: all 0.2s;
+  padding: 16px 12px 0 19px;
+  gap: 14px;
+  background: #748bff;
+}
+.fcr-board-loading-minimize {
+  width: fit-content;
+  height: 38px;
+  padding: 0 14px 0;
+  gap: 6px;
+  display: flex;
+  align-items: center;
+}
+
+.fcr-board-loading-img-wrap img {
+  width: 100%;
+  height: 100%;
+  animation: rotate 1s linear infinite;
+  width: 43px;
+  height: 43px;
+}
+.fcr-board-loading-minimize .fcr-board-loading-img-wrap img {
+  width: 22px;
+  height: 22px;
+}
+.fcr-board-loading-text {
+  color: #fff;
+  font-size: 14px;
+  line-height: 18px;
+  font-weight: 600;
+  text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.4);
+  white-space: pre-wrap;
+}
+.fcr-board-loading-minimize .fcr-board-loading-text {
+  color: #fff;
+  font-size: 14px;
+  line-height: 14px;
+  font-weight: 600;
+}
+.fcr-board-loading-btns {
+  color: #fff;
+  display: flex;
+  gap: 7px;
+  justify-content: flex-end;
+  padding-top: 10px;
+}
+.fcr-board-loading-btns .fcr-button-secondary {
+  color: #fff;
+}
+.fcr-board-loading-content {
+  flex: 1;
+  justify-content: space-between;
+  padding-bottom: 10px;
+  display: flex;
+  flex-direction: column;
+}
+.fcr-board-loading-minimize .fcr-board-loading-content {
+  padding-bottom: 0;
+}
+@keyframes rotate {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(359deg);
+  }
+}

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

@@ -0,0 +1,8 @@
+import './index.css';
+import { FcrConnectionState } from 'fcr-core';
+export declare const Loading: (props: {
+    joined: boolean;
+    connectionState: FcrConnectionState;
+    canOperate: boolean;
+    handleClose: () => void;
+}) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,64 @@
+"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.Loading = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+require("./index.css");
+var _react = require("react");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _loading = _interopRequireDefault(require("./loading.png"));
+var _i18n = require("agora-ui-foundation/lib/i18n");
+var _button = require("agora-ui-foundation/lib/components/button");
+var _fcrCore = require("fcr-core");
+var _jsxRuntime = require("react/jsx-runtime");
+var Loading = exports.Loading = function Loading(props) {
+  var connectionState = props.connectionState,
+    handleClose = props.handleClose,
+    canOperate = props.canOperate,
+    joined = props.joined;
+  var transI18n = (0, _i18n.useI18n)();
+  var isReconnecting = connectionState === _fcrCore.FcrConnectionState.RECONNECTING || connectionState === _fcrCore.FcrConnectionState.CONNECTING && joined;
+  var _useState = (0, _react.useState)(!isReconnecting || !canOperate),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    minimize = _useState2[0],
+    setMinimize = _useState2[1];
+  var text = isReconnecting ? minimize ? transI18n('fmt_screenshare_whiteboard_tips_reconnectinghold') : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [transI18n('fmt_screenshare_whiteboard_tips_reconnectinghold'), /*#__PURE__*/(0, _jsxRuntime.jsx)("br", {}), transI18n('fmt_screenshare_whiteboard_tips_couldreopen')]
+  }) : transI18n('fmt_screenshare_whiteboard_tips_reopening');
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: (0, _classnames["default"])('fcr-board-loading', {
+      'fcr-board-loading-minimize': minimize
+    }),
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "fcr-board-loading-img-wrap",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+        src: _loading["default"]
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "fcr-board-loading-content",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "fcr-board-loading-text",
+        children: text
+      }), !minimize && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "fcr-board-loading-btns",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_button.FcrButton, {
+          onClick: function onClick() {
+            setMinimize(true);
+          },
+          type: "secondary",
+          size: "XXS",
+          children: transI18n('fmt_screenshare_whiteboard_tips_continuewaiting')
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.FcrButton, {
+          onClick: handleClose,
+          styleType: "danger",
+          size: "XXS",
+          children: transI18n('fmt_screenshare_whiteboard_button_dontwait')
+        })]
+      })]
+    })]
+  });
+};

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

@@ -0,0 +1,5 @@
+import './style.css';
+export default function ProgressDialog(props: {
+    title: string;
+    progress: number;
+}): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,43 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = ProgressDialog;
+var _icon = require("agora-ui-foundation/lib/components/icon");
+var _type = require("agora-ui-foundation/lib/components/icon/type");
+require("./style.css");
+var _jsxRuntime = require("react/jsx-runtime");
+function ProgressDialog(props) {
+  var title = props.title,
+    progress = props.progress;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: "fcr-progress-dialog-frame",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "fcr-progress-dialog-icon",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+        type: _type.FcrIconType.FCR_DOWNLOAD,
+        size: 24
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "fcr-progress-dialog-content",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "fcr-progress-dialog-title",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          children: title
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+          children: [progress, "%"]
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "fcr-progress-dialog-progress",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "fcr-pfcr-rogress-dialog-progress-bar",
+          style: {
+            width: "".concat(progress, "%")
+          }
+        })
+      })]
+    })]
+  });
+}

package/lib/modules/components/control-bar/components/progress/style.css

@@ -0,0 +1,51 @@
+.fcr-progress-dialog-frame {
+  width: 290px;
+  min-height: 58px;
+  padding: 10px 0;
+  border-radius: var(--fcr_cornerradius_s);
+  background: var(--fcr_ui_scene_white6);
+  box-shadow: var(--fcr_web_light_dropup);
+  display: flex;
+  align-items: center;
+  z-index: 1000;
+  position: absolute;
+  top: calc(100% - 98px);
+  left: calc(100vw - 310px);
+}
+.fcr-progress-dialog-icon {
+  width: 32px;
+  height: 32px;
+  margin: 0 18px;
+}
+.fcr-progress-dialog-icon svg {
+  width: 32px;
+  height: 32px;
+}
+.fcr-progress-dialog-content {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  flex: 1;
+  padding-right: 18px;
+}
+.fcr-progress-dialog-title {
+  font-size: 13px;
+  color: var(--fcr_ui_scene_icontext1);
+  margin-bottom: 10px;
+  justify-content: space-between;
+  display: flex;
+  flex: 1;
+}
+.fcr-progress-dialog-progress {
+  font-size: 12px;
+  height: 9px;
+  background: var(--fcr_ui_scene_ramp_brand1);
+  border-radius: var(--fcr_cornerradius_round);
+  flex: 1;
+}
+.fcr-progress-dialog-progress-bar {
+  width: 100%;
+  height: 9px;
+  background: var(--fcr_ui_scene_ramp_brand6);
+  border-radius: var(--fcr_cornerradius_round);
+}

package/lib/modules/components/control-bar/components/switch-theme/index.css

@@ -0,0 +1,99 @@
+.fcr-whiteboard-switch-theme {
+  height: 175px;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  column-gap: 22px;
+  border-bottom: 1px solid var(--fcr_ui_scene_line1);
+  position: relative;
+}
+.fcr-whiteboard-switch-theme-popover {
+  max-width: 100%;
+  width: 100%;
+}
+.fcr-whiteboard-switch-theme-popover .fcr-tooltip-inner {
+  border-radius: 0 !important;
+  box-shadow: none !important;
+  border: none !important;
+}
+.fcr-whiteboard-switch-theme_item {
+  width: 184px;
+  height: 136px;
+  border: 1px solid var(--fcr_ui_scene_line1);
+  border-radius: 16px;
+  box-sizing: border-box;
+  display: flex;
+  justify-content: top;
+  align-items: top;
+  flex-direction: column;
+  background: var(--fcr_web_ui_scene_fill4_popup);
+  color: var(--fcr_ui_scene_icontext1);
+}
+.fcr-whiteboard-switch-theme_item-active {
+  color: var(--fcr_ui_scene_white10);
+  background-color: var(--fcr_ui_scene_ramp_brand6);
+}
+
+.fcr-whiteboard-switch-theme_item-close {
+  width: 30px;
+  height: 30px;
+  position: absolute;
+  top: 50%;
+  margin-top: -15px;
+  border-radius: 50%;
+  left: calc(50% + 220px * 1.5);
+  background: var(--fcr_web_ui_scene_fill4_popup);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+}
+.fcr-whiteboard-switch-theme_item-close:hover {
+  background: var(--fcr_web_ui_scene_hover);
+}
+.fcr-whiteboard-switch-theme_item-close:hover path {
+  fill: var(--fcr_ui_scene_ramp_brand6);
+}
+.fcr-whiteboard-switch-theme_item:hover {
+  border: 2px solid var(--fcr_ui_scene_ramp_brand6);
+}
+.fcr-whiteboard-switch-theme_item:hover .fcr-whiteboard-switch-theme_item-inner {
+  width: 172px;
+  margin-top: 3px;
+}
+
+.fcr-whiteboard-switch-theme_item-inner {
+  width: 174px;
+  height: 100px;
+  border-radius: 12px;
+  background: var(--fcr_ui_scene_white10);
+  margin: 4px 4px 9px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  row-gap: 12px;
+}
+.fcr-whiteboard-switch-theme_item-inner.whiteboard {
+  background: #fff;
+}
+.fcr-whiteboard-switch-theme_item-inner.blackboard {
+  background: #000;
+}
+.fcr-whiteboard-switch-theme_item-inner.chalkboard {
+  background: #5a7d75;
+}
+.fcr-whiteboard-switch-theme_color-group {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  column-gap: 18px;
+}
+.fcr-whiteboard-switch-theme_color-group span {
+  display: block;
+  width: 18px;
+  height: 18px;
+  border-radius: 18px;
+  background: var(--fcr_web_ui_scene_fill4_popup);
+}

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

@@ -0,0 +1,9 @@
+import './index.css';
+import { WhiteboardThemeType } from '../../../../whiteboard/type';
+declare const WhiteboardSwitchTheme: (props: {
+    whiteboardVisible: boolean;
+    setWhiteboardVisible: (visible: boolean) => void;
+    currentThemeType: WhiteboardThemeType;
+    setTheme: (theme: WhiteboardThemeType) => void;
+}) => import("react/jsx-runtime").JSX.Element;
+export default WhiteboardSwitchTheme;

package/lib/modules/components/control-bar/components/switch-theme/index.js

@@ -0,0 +1,94 @@
+"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.find.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.iterator.find.js");
+require("core-js/modules/esnext.iterator.map.js");
+var _icon = require("agora-ui-foundation/lib/components/icon");
+var _type = require("agora-ui-foundation/lib/components/icon/type");
+var _popover = require("agora-ui-foundation/lib/components/popover");
+require("./index.css");
+var _item = _interopRequireDefault(require("./item"));
+var _libs = _interopRequireDefault(require("./libs"));
+var _i18n = require("agora-ui-foundation/lib/i18n");
+var _tooltip = require("agora-ui-foundation/lib/components/tooltip");
+var _jsxRuntime = require("react/jsx-runtime");
+var WhiteboardSwitchTheme = function WhiteboardSwitchTheme(props) {
+  var whiteboardVisible = props.whiteboardVisible,
+    setWhiteboardVisible = props.setWhiteboardVisible,
+    currentThemeType = props.currentThemeType,
+    setTheme = props.setTheme;
+  // const [visible, setVisible] = useState(false);
+  var t = (0, _i18n.useI18n)();
+  var handleCancel = function handleCancel() {
+    setWhiteboardVisible(false);
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_popover.FcrPopover, {
+    trigger: "click",
+    overlayClassName: "fcr-whiteboard-switch-theme-popover",
+    overlayInnerStyle: {
+      width: '100%'
+    },
+    overlayOffset: 2,
+    showArrow: false
+    // getTooltipContainer={() => {
+    //   const target = document.getElementById('fcr-whiteboard-controlbar') as HTMLElement;
+    //   console.log({ target });
+    //   return target;
+    // }}
+    ,
+    visible: whiteboardVisible,
+    content: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "whiteboard-switch-theme",
+      children: [(0, _libs["default"])(t).map(function (theme, idx) {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_item["default"], {
+          colors: theme.showColors,
+          title: theme.title,
+          theme: theme.theme,
+          isActive: currentThemeType.theme === theme.theme,
+          onClick: function onClick(theme) {
+            var result = (0, _libs["default"])(t).find(function (item) {
+              return item.theme === theme.theme;
+            });
+            setTheme(result);
+            setWhiteboardVisible(false);
+          }
+        }, theme.theme);
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "fcr-whiteboard-switch-theme_item-close",
+        onClick: handleCancel,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+          size: 20,
+          type: _type.FcrIconType.FCR_CLOSE,
+          colors: {
+            iconPrimary: 'var(--fcr_ui_scene_icontext1)'
+          }
+        })
+      })]
+    }),
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.FcrToolTip, {
+      content: (0, _i18n.transI18n)('fmt_screenshare_whiteboard_options_changetheme'),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+          type: _type.FcrIconType.FCR_WHITEBOARD_BG,
+          size: 22,
+          colors: {
+            iconPrimary: 'var(--fcr_ui_scene_icontext1)'
+          },
+          onClick: function onClick() {
+            setWhiteboardVisible(!whiteboardVisible);
+          }
+        })
+      })
+    })
+  });
+};
+var _default = exports["default"] = WhiteboardSwitchTheme;

package/lib/modules/components/control-bar/components/switch-theme/item.d.ts

@@ -0,0 +1,9 @@
+export type SwitchThemeItemProps = {
+    colors: string[][];
+    title: string;
+    theme: string;
+    isActive?: boolean;
+};
+export default function WhiteboardSwitchThemeItem(props: SwitchThemeItemProps & {
+    onClick: (theme: SwitchThemeItemProps) => void;
+}): import("react/jsx-runtime").JSX.Element;

package/lib/modules/components/control-bar/components/switch-theme/item.js

@@ -0,0 +1,54 @@
+"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"] = 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.iterator.map.js");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _jsxRuntime = require("react/jsx-runtime");
+function WhiteboardSwitchThemeItem(props) {
+  var title = props.title,
+    colors = props.colors,
+    theme = props.theme,
+    _props$isActive = props.isActive,
+    isActive = _props$isActive === void 0 ? false : _props$isActive;
+  var cls = (0, _classnames["default"])('fcr-whiteboard-switch-theme_item', {
+    'fcr-whiteboard-switch-theme_item-active': isActive
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: cls,
+    onClick: function onClick() {
+      return props.onClick({
+        colors: colors,
+        title: title,
+        theme: theme
+      });
+    },
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "fcr-whiteboard-switch-theme_item-inner ".concat(theme),
+      children: colors.map(function (color, idx) {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "fcr-whiteboard-switch-theme_color-group",
+          children: color.map(function (background, idx) {
+            return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+              className: "fcr-whiteboard-switch-theme_color-group-item",
+              style: {
+                background: background
+              }
+            }, "".concat(color, "-").concat(idx));
+          })
+        }, color + '-' + idx);
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "fcr-whiteboard-switch-theme-item_title",
+      children: title
+    })]
+  });
+}

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

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

package/lib/modules/components/control-bar/components/switch-theme/libs.js

@@ -0,0 +1,31 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+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'],
+    background: '#ffffff',
+    title: t('fmt_screenshare_whiteboard_tips_defaultwhiteboard'),
+    theme: 'whiteboard'
+  }, {
+    showColors: [['#FFFFFF', '#968D86', '#717171'], ['#A1C473', '#FFC908', '#FF86C9', '#FC3141']],
+    colors: ['#FFFFFF', '#A1C473', '#FFC908', '#CC3100', '#968D86', '#4262FF', '#51BD69', '#EB47A2', '#0E0E0E', '#50E3C2', '#FC3141', '#7740EC'],
+    background: '#000000',
+    title: t('fmt_screenshare_whiteboard_tips_blackboard'),
+    theme: 'blackboard'
+  }, {
+    showColors: [['#E2E2E2', '#E8B288', '#0E0E0E'], ['#A1C473', '#FFC908', '#FFAFDC', '#FF616D']],
+    colors: ['#E2E2E2', '#A1C473', '#FFC908', '#CC3100', '#968D86', '#4262FF', '#51BD69', '#EB47A2', '#0E0E0E', '#50E3C2', '#FC3141', '#7740EC'],
+    background: '#5A7D75',
+    title: t('fmt_screenshare_whiteboard_lables_wallpoaster'),
+    theme: 'chalkboard'
+  }];
+};
+var _default = exports["default"] = whiteboardTheme;