fcr-ui-scene 3.1.1 → 3.3.0

package/lib/modules/waiting-room-layout/view.d.ts

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

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

@@ -0,0 +1,67 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _react = require("react");
+var _context = require("./context");
+var _localVideoPlayer = require("agora-ui-foundation/lib/components/local-video-player");
+require("./index.css");
+var _mobxReact = require("mobx-react");
+var _i18n = require("agora-ui-foundation/lib/i18n");
+var _jsxRuntime = require("react/jsx-runtime");
+var View = (0, _mobxReact.observer)(function () {
+  var t = (0, _i18n.useI18n)();
+  var _useContext = (0, _react.useContext)(_context.StoreContext),
+    stateBar = _useContext.stateBar,
+    actionBar = _useContext.actionBar,
+    chat = _useContext.chat,
+    cameraDeviceId = _useContext.cameraId,
+    startPlayLocalVideo = _useContext.startPlayLocalVideo,
+    stopPlayLocalVideo = _useContext.stopPlayLocalVideo,
+    cameraEnabled = _useContext.cameraEnabled,
+    localUser = _useContext.localUser;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: "waiting-room-layout",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "waiting-room-module",
+      children: stateBar
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "waiting-room-title",
+      children: t('fmt_waitingroom_attendie_overview_label_waitingroom')
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "waiting-room-desc",
+      children: t('fmt_waitingroom_attendie_overview_label_wait_moment')
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "waiting-room-content",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "waiting-room-video-content",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_localVideoPlayer.LocalVideoPlayer, {
+          isLocalMirrorEnabled: false,
+          userName: localUser.userName,
+          showSlider: false,
+          cameraDeviceId: cameraDeviceId,
+          showCameraPreview: cameraEnabled,
+          showTopTips: false,
+          startLocalVideo: startPlayLocalVideo,
+          stopLocalVideo: stopPlayLocalVideo
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: "waiting-room-attendee-name",
+          children: [localUser.userName, /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+            className: "attendee__me-badge",
+            children: ["(", t('fmt_participant_label_Me'), ")"]
+          })]
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "waiting-room-chat-content",
+        children: chat
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "waiting-room-module waiting-room-bottom",
+      children: actionBar
+    })]
+  });
+});
+var _default = exports["default"] = View;

package/lib/modules/whiteboard/app.js

@@ -12,10 +12,10 @@ 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 _agoraEduCore = require("agora-edu-core");
 var _jsxRuntime = require("react/jsx-runtime");
 var Whiteboard = exports.Whiteboard = (0, _mobxReact.observer)(function () {
   var _useContext = (0, _react.useContext)(_boardContext["default"]),
@@ -31,13 +31,7 @@ var Whiteboard = exports.Whiteboard = (0, _mobxReact.observer)(function () {
     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();
-    };
-  }, []);
+  var loading = connectionState === _agoraEduCore.FcrConnectionState.CONNECTING || connectionState === _agoraEduCore.FcrConnectionState.RECONNECTING;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: "board-widget-app",

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

@@ -25,6 +25,9 @@
   column-gap: 12px;
   height: 20px;
 }
+.whiteboard-controlbar-center .whiteboard-controlbar-item:hover svg path {
+  fill: var(--fcr_web_ui_scene_mainicon2);
+}
 .whiteboard-controlbar-center .divider-vertical {
   height: 50%;
 }

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { FcrUIEventStore } from '../../../../common/event-store';
 import { FcrUserInfo } from 'agora-edu-core/lib/type';
 import { FcrStreamControl, FcrUserControl } from 'agora-edu-core';

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

@@ -15,6 +15,22 @@ require("core-js/modules/es.number.constructor.js");
 require("core-js/modules/es.object.create.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/esnext.function.metadata.js");
+require("core-js/modules/esnext.map.delete-all.js");
+require("core-js/modules/esnext.map.emplace.js");
+require("core-js/modules/esnext.map.every.js");
+require("core-js/modules/esnext.map.filter.js");
+require("core-js/modules/esnext.map.find.js");
+require("core-js/modules/esnext.map.find-key.js");
+require("core-js/modules/esnext.map.includes.js");
+require("core-js/modules/esnext.map.key-of.js");
+require("core-js/modules/esnext.map.map-keys.js");
+require("core-js/modules/esnext.map.map-values.js");
+require("core-js/modules/esnext.map.merge.js");
+require("core-js/modules/esnext.map.reduce.js");
+require("core-js/modules/esnext.map.some.js");
+require("core-js/modules/esnext.map.update.js");
+require("core-js/modules/esnext.symbol.metadata.js");
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
@@ -27,6 +43,8 @@ require("core-js/modules/es.object.to-string.js");
 require("core-js/modules/es.string.includes.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 _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
@@ -39,8 +57,8 @@ var _mobx = require("mobx");
 var _type2 = require("agora-edu-core/lib/type");
 var _WhiteboardControlBarStore;
 var _initProto, _init_ownerUser, _init_currentUser, _init_lonelywindowOpened, _init_isMinimum, _init_isMaxmum, _init_isAdaptived, _init_isOriginal, _init_scaleValue, _init_controlEnabled, _init_isHost, _setOwnerUserDecs, _onEnableDecs, _ref;
-function _classPrivateFieldInitSpec(obj, privateMap, value) { _checkPrivateRedeclaration(obj, privateMap); privateMap.set(obj, value); }
-function _checkPrivateRedeclaration(obj, privateCollection) { if (privateCollection.has(obj)) { throw new TypeError("Cannot initialize the same private elements twice on an object"); } }
+function _classPrivateFieldInitSpec(e, t, a) { _checkPrivateRedeclaration(e, t), t.set(e, a); }
+function _checkPrivateRedeclaration(e, t) { if (t.has(e)) throw new TypeError("Cannot initialize the same private elements twice on an object"); }
 function _classPrivateFieldSet(s, a, r) { return s.set(_assertClassBrand(s, a), r), r; }
 function _classPrivateFieldGet(s, a) { return s.get(_assertClassBrand(s, a)); }
 function _assertClassBrand(e, t, n) { if ("function" == typeof e ? e === t : e.has(t)) return arguments.length < 3 ? t : n; throw new TypeError("Private element is not present on this object"); }
@@ -122,9 +140,7 @@ var WhiteboardControlBarStore = exports.WhiteboardControlBarStore = /*#__PURE__*
     key: "currentUser",
     get: function get() {
       return _classPrivateFieldGet(_B, this);
-    }
-  }, {
-    key: "currentUser",
+    },
     set: function set(v) {
       _classPrivateFieldSet(_B, this, v);
     }
@@ -132,9 +148,7 @@ var WhiteboardControlBarStore = exports.WhiteboardControlBarStore = /*#__PURE__*
     key: "lonelywindowOpened",
     get: function get() {
       return _classPrivateFieldGet(_C, this);
-    }
-  }, {
-    key: "lonelywindowOpened",
+    },
     set: function set(v) {
       _classPrivateFieldSet(_C, this, v);
     }
@@ -142,9 +156,7 @@ var WhiteboardControlBarStore = exports.WhiteboardControlBarStore = /*#__PURE__*
     key: "isMinimum",
     get: function get() {
       return _classPrivateFieldGet(_D, this);
-    }
-  }, {
-    key: "isMinimum",
+    },
     set: function set(v) {
       _classPrivateFieldSet(_D, this, v);
     }
@@ -152,9 +164,7 @@ var WhiteboardControlBarStore = exports.WhiteboardControlBarStore = /*#__PURE__*
     key: "isMaxmum",
     get: function get() {
       return _classPrivateFieldGet(_E, this);
-    }
-  }, {
-    key: "isMaxmum",
+    },
     set: function set(v) {
       _classPrivateFieldSet(_E, this, v);
     }
@@ -162,9 +172,7 @@ var WhiteboardControlBarStore = exports.WhiteboardControlBarStore = /*#__PURE__*
     key: "isAdaptived",
     get: function get() {
       return _classPrivateFieldGet(_F, this);
-    }
-  }, {
-    key: "isAdaptived",
+    },
     set: function set(v) {
       _classPrivateFieldSet(_F, this, v);
     }
@@ -172,9 +180,7 @@ var WhiteboardControlBarStore = exports.WhiteboardControlBarStore = /*#__PURE__*
     key: "isOriginal",
     get: function get() {
       return _classPrivateFieldGet(_G, this);
-    }
-  }, {
-    key: "isOriginal",
+    },
     set: function set(v) {
       _classPrivateFieldSet(_G, this, v);
     }
@@ -182,9 +188,7 @@ var WhiteboardControlBarStore = exports.WhiteboardControlBarStore = /*#__PURE__*
     key: "scaleValue",
     get: function get() {
       return _classPrivateFieldGet(_H, this);
-    }
-  }, {
-    key: "scaleValue",
+    },
     set: function set(v) {
       _classPrivateFieldSet(_H, this, v);
     }
@@ -192,9 +196,7 @@ var WhiteboardControlBarStore = exports.WhiteboardControlBarStore = /*#__PURE__*
     key: "controlEnabled",
     get: function get() {
       return _classPrivateFieldGet(_I, this);
-    }
-  }, {
-    key: "controlEnabled",
+    },
     set: function set(v) {
       _classPrivateFieldSet(_I, this, v);
     }
@@ -202,9 +204,7 @@ var WhiteboardControlBarStore = exports.WhiteboardControlBarStore = /*#__PURE__*
     key: "isHost",
     get: function get() {
       return _classPrivateFieldGet(_J, this);
-    }
-  }, {
-    key: "isHost",
+    },
     set: function set(v) {
       _classPrivateFieldSet(_J, this, v);
     }

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

@@ -15,7 +15,7 @@ var _mobxReact = require("mobx-react");
 var _context = require("../../context");
 var _i18n = require("agora-ui-foundation/lib/i18n");
 var _button = require("agora-ui-foundation/lib/components/button");
-var _enums = require("agora-edu-core/lib/room-control/whiteboard-control/enums");
+var _agoraEduCore = require("agora-edu-core");
 var _jsxRuntime = require("react/jsx-runtime");
 var Loading = exports.Loading = (0, _mobxReact.observer)(function () {
   var transI18n = (0, _i18n.useI18n)();
@@ -25,7 +25,7 @@ var Loading = exports.Loading = (0, _mobxReact.observer)(function () {
     joinSuccessed = _useContext$observabl.joinSuccessed,
     canOperate = _useContext$observabl.canOperate,
     handleClose = _useContext.handleClose;
-  var isReconnecting = connectionState === _enums.FcrBoardRoomConnectionState.RECONNECTING || connectionState === _enums.FcrBoardRoomConnectionState.CONNECTING && joinSuccessed;
+  var isReconnecting = connectionState === _agoraEduCore.FcrConnectionState.RECONNECTING || connectionState === _agoraEduCore.FcrConnectionState.CONNECTING && joinSuccessed;
   var _useState = (0, _react.useState)(!isReconnecting || !canOperate),
     _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
     minimize = _useState2[0],

package/lib/modules/whiteboard/components/multi-window/index.js

@@ -10,17 +10,21 @@ var _mobxReact = require("mobx-react");
 var _controlBar = require("../control-bar");
 var _react = require("react");
 var _context = require("../../context");
-var _enums = require("agora-edu-core/lib/room-control/whiteboard-control/enums");
 require("./index.css");
 var _boardContext = _interopRequireDefault(require("../../../../utilities/board-context"));
+var _agoraEduCore = require("agora-edu-core");
 var _jsxRuntime = require("react/jsx-runtime");
 var MultiWindowWidgetDialog = exports.MultiWindowWidgetDialog = (0, _mobxReact.observer)(function (_ref) {
   var children = _ref.children;
   var _useContext = (0, _react.useContext)(_context.BoardUIContext),
-    connectionState = _useContext.observables.connectionState;
+    connectionState = _useContext.observables.connectionState,
+    setWhiteboardVisible = _useContext.setWhiteboardVisible;
   var _useContext2 = (0, _react.useContext)(_boardContext["default"]),
     showToolbar = _useContext2.showToolbar;
-  var showControlbar = connectionState === _enums.FcrBoardRoomConnectionState.CONNECTED;
+  var showControlbar = connectionState === _agoraEduCore.FcrConnectionState.CONNECTED;
+  var handleCancel = function handleCancel() {
+    setWhiteboardVisible(false);
+  };
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     className: "fcr-widget-dialog-zindex-wrapper fcr-widget-dialog",
     children: [showControlbar && showToolbar && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
@@ -28,6 +32,7 @@ var MultiWindowWidgetDialog = exports.MultiWindowWidgetDialog = (0, _mobxReact.o
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_controlBar.WhiteboardControlbar, {})
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: "fcr-widget-dialog-content",
+      onClick: handleCancel,
       children: children
     })]
   });

package/lib/modules/whiteboard/components/pagination/store.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 declare const scenePaginationUIContextDefault: {
     observables: {
         currentPage: number;

package/lib/modules/whiteboard/components/progress/electron.js

@@ -12,7 +12,7 @@ var ProgressElectronDialog = (0, _mobxReact.observer)(function (_ref) {
     var node;
     window.runtime.openRendererWindow('progress-dialog', function (dom) {
       node = dom;
-      (0, _reactDom.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_context.StoreContext.Provider, {
+      (0, _reactDom.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_context.StoreContext.Provider, {
         value: store,
         children: children
       }), dom);
@@ -21,7 +21,8 @@ var ProgressElectronDialog = (0, _mobxReact.observer)(function (_ref) {
       fullscreen: false,
       maximizable: false,
       width: 290,
-      height: 60
+      height: 60,
+      transparent: true
     });
     return function () {
       (0, _reactDom.unmountComponentAtNode)(node);

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

@@ -1,14 +1,15 @@
 .progress-dialog-frame {
   width: 290px;
-  height: 58px;
+  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: sticky;
-  top: calc(100% - 68px);
+  position: absolute;
+  top: calc(100% - 98px);
   left: calc(100vw - 310px);
 }
 .progress-dialog-icon {

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

@@ -30,6 +30,10 @@
   background: var(--fcr_web_ui_scene_fill4_popup);
   color: var(--fcr_ui_scene_icontext1);
 }
+.whiteboard-switch-theme_item-active {
+  background-color: var(--fcr_ui_scene_ramp_brand6);
+}
+
 .whiteboard-switch-theme_item-close {
   width: 30px;
   height: 30px;

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

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

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

@@ -5,11 +5,15 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = WhiteboardSwitchTheme;
+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");
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+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");
 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");
@@ -18,14 +22,22 @@ var _item = _interopRequireDefault(require("./item"));
 var _libs = _interopRequireDefault(require("./libs"));
 var _react = require("react");
 var _store = require("../toolbar/store");
+var _i18n = require("agora-ui-foundation/lib/i18n");
+var _context = require("../../context");
+var _mobxReact = require("mobx-react");
 var _jsxRuntime = require("react/jsx-runtime");
-function WhiteboardSwitchTheme() {
+var WhiteboardSwitchTheme = (0, _mobxReact.observer)(function () {
   var _useContext = (0, _react.useContext)(_store.ToolbarContext),
-    setTheme = _useContext.setTheme;
-  var _useState = (0, _react.useState)(false),
-    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-    visible = _useState2[0],
-    setVisible = _useState2[1];
+    setTheme = _useContext.setTheme,
+    currentThemeType = _useContext.observables.currentThemeType;
+  // const [visible, setVisible] = useState(false);
+  var _useContext2 = (0, _react.useContext)(_context.BoardUIContext),
+    whiteboardVisible = _useContext2.observables.whiteboardVisible,
+    setWhiteboardVisible = _useContext2.setWhiteboardVisible;
+  var t = (0, _i18n.useI18n)();
+  var handleCancel = function handleCancel() {
+    setWhiteboardVisible(false);
+  };
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_popover.FcrPopover, {
     trigger: "click",
     overlayClassName: "whiteboard-switch-theme-popover",
@@ -33,27 +45,26 @@ function WhiteboardSwitchTheme() {
       width: '100%'
     },
     overlayOffset: 2,
-    visible: visible,
+    visible: whiteboardVisible,
     content: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: "whiteboard-switch-theme",
-      children: [_libs["default"].map(function (theme, idx) {
+      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 = _libs["default"].find(function (item) {
+            var result = (0, _libs["default"])(t).find(function (item) {
               return item.theme === theme.theme;
             });
             setTheme(result);
-            setVisible(false);
+            setWhiteboardVisible(false);
           }
         }, theme.theme);
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         className: "whiteboard-switch-theme_item-close",
-        onClick: function onClick() {
-          return setVisible(false);
-        },
+        onClick: handleCancel,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
           size: 20,
           type: _type.FcrIconType.FCR_CLOSE,
@@ -70,8 +81,9 @@ function WhiteboardSwitchTheme() {
         iconPrimary: 'var(--fcr_ui_scene_icontext1)'
       },
       onClick: function onClick() {
-        return setVisible(!visible);
+        return setWhiteboardVisible(!whiteboardVisible);
       }
     })
   });
-}
+});
+var _default = exports["default"] = WhiteboardSwitchTheme;

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

@@ -2,6 +2,7 @@ export type SwitchThemeItemProps = {
     colors: string[][];
     title: string;
     theme: string;
+    isActive?: boolean;
 };
 export default function WhiteboardSwitchThemeItem(props: SwitchThemeItemProps & {
     onClick: (theme: SwitchThemeItemProps) => void;

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

@@ -1,19 +1,28 @@
 "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/esnext.async-iterator.map.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;
+    theme = props.theme,
+    _props$isActive = props.isActive,
+    isActive = _props$isActive === void 0 ? false : _props$isActive;
+  var cls = (0, _classnames["default"])('whiteboard-switch-theme_item', {
+    'whiteboard-switch-theme_item-active': isActive
+  });
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-    className: "whiteboard-switch-theme_item",
+    className: cls,
     onClick: function onClick() {
       return props.onClick({
         colors: colors,

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

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

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

@@ -5,24 +5,25 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-var _i18n = require("agora-ui-foundation/lib/i18n");
-var whiteboardTheme = [{
-  showColors: [['#E2E2E2', '#968D86', '#0E0E0E'], ['#A1C473', '#FFC908', '#FF86C9', '#FC3141']],
-  colors: ['#E2E2E2', '#A1C473', '#FFC908', '#CC3100', '#968D86', '#4262FF', '#51BD69', '#EB47A2', '#0E0E0E', '#50E3C2', '#FC3141', '#7740EC'],
-  background: '#ffffff',
-  title: (0, _i18n.transI18n)('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: (0, _i18n.transI18n)('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: (0, _i18n.transI18n)('fmt_screenshare_whiteboard_lables_wallpoaster'),
-  theme: 'chalkboard'
-}];
+var whiteboardTheme = function whiteboardTheme(t) {
+  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;

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

@@ -10,6 +10,8 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 require("core-js/modules/es.array.includes.js");
 require("core-js/modules/es.array.map.js");
 require("core-js/modules/es.string.includes.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");
 var _store = require("../../../store");

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

@@ -8,6 +8,8 @@ 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/esnext.async-iterator.map.js");
+require("core-js/modules/esnext.iterator.map.js");
 var _mobxReact = require("mobx-react");
 var _react = require("react");
 var _store = require("../../store");
@@ -32,7 +34,7 @@ var ColorPickerItem = exports.ColorPickerItem = (0, _mobxReact.observer)(functio
       }, color);
     }).slice(0, Math.min(showColorCount - commonColors.length + 1, commonColors.length));
     if (showColorCount > 0) {
-      list.push( /*#__PURE__*/(0, _jsxRuntime.jsx)(_picker.Picker, {}, "picker"));
+      list.push(/*#__PURE__*/(0, _jsxRuntime.jsx)(_picker.Picker, {}, "picker"));
     }
   } else {
     list = [/*#__PURE__*/(0, _jsxRuntime.jsx)(_picker.Picker, {}, "picker")];