fcr-ui-scene 3.5.1 → 3.6.0

package/lib/modules/state-bar/meeting-network-state.css

@@ -125,6 +125,14 @@
   background: var(--fcr_web_ui_scene_hover);
 }
 
+.meeting-network-state__state-info:hover svg path {
+  fill: var(--fcr_web_ui_scene_mainicon2);
+}
+
+.meeting-network-state__state-info:hover .meeting-network-state__state-info-text {
+  color: var(--fcr_web_ui_scene_mainicon2);
+}
+
 .meeting-network-state__state-info-icon {
   flex-shrink: 0;
 }

package/lib/modules/state-bar/meeting-time.js

@@ -6,39 +6,28 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.MeetingTime = void 0;
-var _i18n = require("agora-ui-foundation/lib/i18n");
 var _mobxReact = require("mobx-react");
 var _icon = require("agora-ui-foundation/lib/components/icon");
 var _type = require("agora-ui-foundation/lib/components/icon/type");
 var _useNamespace = require("../../utilities/useNamespace");
 require("./index.css");
-var _view = require("./view");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _react = require("react");
 var _store = require("./store");
 var _jsxRuntime = require("react/jsx-runtime");
 var MeetingTime = exports.MeetingTime = (0, _mobxReact.observer)(function () {
-  var t = (0, _i18n.useI18n)();
   var ns = (0, _useNamespace.useNamespace)('meeting-time');
   var _useContext = (0, _react.useContext)(_store.StoreContext),
-    totalHourText = _useContext.totalHourText,
-    totalMinuteText = _useContext.totalMinuteText,
     meetingTime = _useContext.meetingTime,
     meetingTimeStatus = _useContext.meetingTimeStatus;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_view.MyFcrToolTip, {
-    content: t('fmt_statusbar_label_durationtime', {
-      reason1: totalHourText,
-      reason2: totalMinuteText
-    }),
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-      className: (0, _classnames["default"])(ns.b(), ns.m(meetingTimeStatus)),
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
-        type: _type.FcrIconType.FCR_CLOCK,
-        className: ns.e('icon'),
-        size: 22
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-        children: [meetingTime, "(", totalHourText, totalMinuteText, ")"]
-      })]
-    })
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: (0, _classnames["default"])(ns.b(), ns.m(meetingTimeStatus)),
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+      type: _type.FcrIconType.FCR_CLOCK,
+      className: ns.e('icon'),
+      size: 22
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      children: meetingTime
+    })]
   });
 });

package/lib/modules/state-bar/store.d.ts

@@ -13,6 +13,7 @@ import { FcrUIMemberSharedDataSource } from '../../shared-data-source/member-dat
 import { FcrUILocalStorageProvider } from '../../providers/local-storage-provider';
 import { FcrUIAbilityProviderImpl } from 'fcr-ui-scene/src/providers/ability-provider';
 import { FcrUIMeetingTimeSharedDataSource } from '../../shared-data-source/meeting-time';
+import { FcrUIDialogProvider } from '../../providers/dialog-provider';
 export type NetworkStatus = 'excellent' | 'average' | 'poor' | 'unknown';
 export declare const GALLERY_MIN_SIZE = 825;
 export default class StateBarStore {
@@ -31,6 +32,7 @@ export default class StateBarStore {
     private _localStorageProvider;
     private _roomObserver;
     private _abilityProvider;
+    private _dialogProvider;
     accessor networkStatus: NetworkStatus;
     accessor roomInfo: FcrRoomInfo | undefined;
     accessor isLiveStreaming: boolean;
@@ -61,7 +63,8 @@ export default class StateBarStore {
     get layoutView(): import("../../type").FcrUIVideoWindowLayoutType;
     get asideLayout(): import("../../type").FcrUIUpdateAsideParams;
     get isRoomDetailSupported(): boolean;
-    constructor({ roomControl, uiEventStore, securityStore, config, parameters, sharedLayoutDataSource, roomProvider, sharedVideoWindowDataSource, messageProvider, sharedMemberDataSource, localStorageProvider, abilityProvider, sharedMeetingTimeDataSource, }: {
+    get roomDetailCopyText(): string;
+    constructor({ roomControl, uiEventStore, securityStore, config, parameters, sharedLayoutDataSource, roomProvider, sharedVideoWindowDataSource, messageProvider, sharedMemberDataSource, localStorageProvider, abilityProvider, sharedMeetingTimeDataSource, dialogProvider, }: {
         roomControl: FcrMainRoomControl | FcrWaitingRoomControl;
         uiEventStore: FcrUIEventProvider;
         securityStore: FcrUIPrivilegeProvider;
@@ -75,6 +78,7 @@ export default class StateBarStore {
         localStorageProvider: FcrUILocalStorageProvider;
         abilityProvider: FcrUIAbilityProviderImpl;
         sharedMeetingTimeDataSource: FcrUIMeetingTimeSharedDataSource;
+        dialogProvider: FcrUIDialogProvider;
     });
     get roomId(): string | undefined;
     get meetingId(): string | undefined;

package/lib/modules/state-bar/store.js

@@ -129,7 +129,8 @@ var StateBarStore = exports["default"] = /*#__PURE__*/function () {
       sharedMemberDataSource = _ref2.sharedMemberDataSource,
       localStorageProvider = _ref2.localStorageProvider,
       abilityProvider = _ref2.abilityProvider,
-      sharedMeetingTimeDataSource = _ref2.sharedMeetingTimeDataSource;
+      sharedMeetingTimeDataSource = _ref2.sharedMeetingTimeDataSource,
+      dialogProvider = _ref2.dialogProvider;
     (0, _classCallCheck2["default"])(this, StateBarStore);
     (0, _defineProperty2["default"])(this, _ref, (_initProto(this), (0, _logger.createLogger)({
       prefix: 'StateBarStore'
@@ -162,6 +163,7 @@ var StateBarStore = exports["default"] = /*#__PURE__*/function () {
     this._uiEventStore = uiEventStore;
     this._securityStore = securityStore;
     this._roomProvider = roomProvider;
+    this._dialogProvider = dialogProvider;
     this.attendeeCount = 0;
     this.isLiveStreaming = this._roomControl.getLiveStreamingState() === _type.FcrLiveStreamingState.STARTED;
     if (this.isLiveStreaming) {
@@ -376,6 +378,11 @@ var StateBarStore = exports["default"] = /*#__PURE__*/function () {
     get: function get() {
       return this._abilityProvider.isRoomDetailSupported();
     }
+  }, {
+    key: "roomDetailCopyText",
+    get: function get() {
+      return this._roomProvider.getRoomDetailCopyText();
+    }
   }, {
     key: "roomId",
     get: function get() {
@@ -440,7 +447,7 @@ var StateBarStore = exports["default"] = /*#__PURE__*/function () {
     value: function openDeviceSettingDialog(arg) {
       var activeTab = (arg === null || arg === void 0 ? void 0 : arg.activeTab) || _store.DeviceSettingTab.VIDEO;
       var highlightSelector = (arg === null || arg === void 0 ? void 0 : arg.highlightSelector) || _constant.FcrUIHighlightElement.VIDEO_MAX_PERSON;
-      this._uiEventStore.openDeviceSettingDialog({
+      this._dialogProvider.openDeviceSettingDialog({
         activeTab: activeTab,
         highlightSelector: highlightSelector
       });
@@ -619,7 +626,7 @@ var StateBarStore = exports["default"] = /*#__PURE__*/function () {
   }]);
 }();
 _StateBarStore = StateBarStore;
-var _applyDecs$e = (0, _slicedToArray2["default"])(_applyDecs(_StateBarStore, [[_mobx.observable, 1, "networkStatus"], [_mobx.observable, 1, "roomInfo"], [_mobx.observable, 1, "isLiveStreaming"], [_mobx.observable, 1, "liveStreamingPlayUrl"], [_mobx.observable, 1, "galleryWidth"], [_mobx.observable, 1, "browserWidth"], [_mobx.observable, 1, "networkStats"], [_mobx.observable, 1, "attendeeCount"], [_mobx.observable, 1, "asideOpenedItem"], [_mobx.observable, 1, "cloudRecordingState"], [_mobx.computed, 3, "localUser"], [_mobx.computed, 3, "isUserHost"], [_mobx.computed, 3, "shouldShowMeetingTime"], [_mobx.computed, 3, "isMainRoom"], [_mobx.computed, 3, "hasStartCloudRecordingPermission"], [_mobx.computed, 3, "hasStopLiveStreamingPermission"], [_mobx.computed, 3, "hasGetLiveStreamingLinkPermission"], [_mobx.computed, 3, "totalHourText"], [_mobx.computed, 3, "totalMinuteText"], [_mobx.computed, 3, "meetingTimeStatus"], [_mobx.computed, 3, "meetingTime"], [_mobx.computed, 3, "password"], [_mobx.computed, 3, "roomId"], [_mobx.computed, 3, "meetingId"], [_mobx.computed, 3, "scheduleInfo"], [_decorator.bound, 2, "isLockRoomEnabled"], [_setNetworkStatusDecs, 18, "setNetworkStatus"], [_setRoomInfoDecs, 18, "setRoomInfo"], [_decorator.bound, 2, "openDeviceSettingDialog"], [_stopLiveStreamingDialogDecs, 18, "stopLiveStreamingDialog"], [_decorator.bound, 2, "startCloudRecording"], [_decorator.bound, 2, "pauseCloudRecording"], [_decorator.bound, 2, "resumeCloudRecording"], [_decorator.bound, 2, "stopCloudRecording"], [_decorator.bound, 2, "getShareLink"], [_decorator.bound, 2, "showToast"], [_decorator.bound, 2, "showNotification"], [_decorator.bound, 2, "closeNotification"], [_uiEventsDecs, 18, "_uiEvents"], [_setBrowserWidthDecs, 18, "_setBrowserWidth"], [_onNetworkStatsUpdatedDecs, 18, "_onNetworkStatsUpdated"], [_onLiveStreamingStateUpdatedDecs, 18, "_onLiveStreamingStateUpdated"], [_decorator.bound, 2, "getLocalMeetingTime"]], []).e, 11);
+var _applyDecs$e = (0, _slicedToArray2["default"])(_applyDecs(_StateBarStore, [[_mobx.observable, 1, "networkStatus"], [_mobx.observable, 1, "roomInfo"], [_mobx.observable, 1, "isLiveStreaming"], [_mobx.observable, 1, "liveStreamingPlayUrl"], [_mobx.observable, 1, "galleryWidth"], [_mobx.observable, 1, "browserWidth"], [_mobx.observable, 1, "networkStats"], [_mobx.observable, 1, "attendeeCount"], [_mobx.observable, 1, "asideOpenedItem"], [_mobx.observable, 1, "cloudRecordingState"], [_mobx.computed, 3, "shouldShowMeetingTime"], [_mobx.computed, 3, "isMainRoom"], [_mobx.computed, 3, "hasStartCloudRecordingPermission"], [_mobx.computed, 3, "hasStopLiveStreamingPermission"], [_mobx.computed, 3, "hasGetLiveStreamingLinkPermission"], [_mobx.computed, 3, "totalHourText"], [_mobx.computed, 3, "totalMinuteText"], [_mobx.computed, 3, "meetingTimeStatus"], [_mobx.computed, 3, "meetingTime"], [_mobx.computed, 3, "password"], [_mobx.computed, 3, "roomId"], [_mobx.computed, 3, "meetingId"], [_mobx.computed, 3, "scheduleInfo"], [_decorator.bound, 2, "isLockRoomEnabled"], [_setNetworkStatusDecs, 18, "setNetworkStatus"], [_setRoomInfoDecs, 18, "setRoomInfo"], [_decorator.bound, 2, "openDeviceSettingDialog"], [_stopLiveStreamingDialogDecs, 18, "stopLiveStreamingDialog"], [_decorator.bound, 2, "startCloudRecording"], [_decorator.bound, 2, "pauseCloudRecording"], [_decorator.bound, 2, "resumeCloudRecording"], [_decorator.bound, 2, "stopCloudRecording"], [_decorator.bound, 2, "getShareLink"], [_decorator.bound, 2, "showToast"], [_decorator.bound, 2, "showNotification"], [_decorator.bound, 2, "closeNotification"], [_uiEventsDecs, 18, "_uiEvents"], [_setBrowserWidthDecs, 18, "_setBrowserWidth"], [_onNetworkStatsUpdatedDecs, 18, "_onNetworkStatsUpdated"], [_onLiveStreamingStateUpdatedDecs, 18, "_onLiveStreamingStateUpdated"], [_decorator.bound, 2, "getLocalMeetingTime"]], []).e, 11);
 _init_networkStatus = _applyDecs$e[0];
 _init_roomInfo = _applyDecs$e[1];
 _init_isLiveStreaming = _applyDecs$e[2];

package/lib/modules/state-bar/view.js

@@ -71,6 +71,14 @@ var View = exports.View = (0, _mobxReact.observer)(function () {
     _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
     isFullScreen = _useState2[0],
     setIsFullScreen = _useState2[1];
+  var _useState3 = (0, _react.useState)(false),
+    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+    isNetworkDetailVisible = _useState4[0],
+    setIsNetworkDetailVisible = _useState4[1];
+  var _useState5 = (0, _react.useState)(false),
+    _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
+    isMeetingDetailVisible = _useState6[0],
+    setIsMeetingDetailVisible = _useState6[1];
   var displayMeetingId = meetingId ? (0, _tools.renderMeetingId)(meetingId, (roomInfo === null || roomInfo === void 0 ? void 0 : roomInfo.roomId) || '') : (0, _tools.renderMeetingId)(meetingId, (roomInfo === null || roomInfo === void 0 ? void 0 : roomInfo.roomId) || '').replace(/\s+/g, '');
   (0, _react.useEffect)(function () {
     isFullScreen ? (0, _screen.enterFullScreen)() : (0, _screen.exitFullScreen)();
@@ -111,8 +119,9 @@ var View = exports.View = (0, _mobxReact.observer)(function () {
     };
   }, [isFullScreen]);
   var onMeetingIdCopy = function onMeetingIdCopy() {
-    if (!displayMeetingId) return;
-    (0, _copyText.copyText)(displayMeetingId).then(function () {
+    var copyMeetingId = meetingId || (roomInfo === null || roomInfo === void 0 ? void 0 : roomInfo.roomId);
+    if (!copyMeetingId) return;
+    (0, _copyText.copyText)(copyMeetingId).then(function () {
       showToast({
         type: 'normal',
         message: t('fmt_information_tips_beencopied')
@@ -148,13 +157,14 @@ var View = exports.View = (0, _mobxReact.observer)(function () {
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(MyFcrToolTip, {
           content: 'Show Network Details',
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_popover.FcrPopover, {
+            showArrow: false,
             trigger: "click",
             content: /*#__PURE__*/(0, _jsxRuntime.jsx)(_meetingNetworkState.MeetingNetworkState, {}),
             placement: "bottom",
-            onVisibleChange: toggleLayoutBarLock,
+            onVisibleChange: setIsNetworkDetailVisible,
             overlayClassName: ns.e('popover'),
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-              className: ns.e('info-network'),
+              className: "".concat(ns.e('info-network'), " ").concat(isNetworkDetailVisible ? 'active' : ''),
               children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_networkQuality.NetworkQuality, {})
             })
           })
@@ -166,13 +176,14 @@ var View = exports.View = (0, _mobxReact.observer)(function () {
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)(MyFcrToolTip, {
             content: t('fmt_information_options_sharedetail'),
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_popover.FcrPopover, {
+              showArrow: false,
               trigger: "click",
               content: /*#__PURE__*/(0, _jsxRuntime.jsx)(_meetingDetails.MeetingDetails, {}),
               placement: "bottomLeft",
-              onVisibleChange: toggleLayoutBarLock,
+              onVisibleChange: setIsMeetingDetailVisible,
               overlayClassName: ns.e('popover'),
               children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-                className: (0, _classnames["default"])(ns.e('info-detail'), (0, _defineProperty2["default"])({}, ns.e('inwaitingroom-disable-action'), (roomInfo === null || roomInfo === void 0 ? void 0 : roomInfo.roomType) === _type3.FcrRoomType.Waitingroom)),
+                className: (0, _classnames["default"])(ns.e('info-detail'), (0, _defineProperty2["default"])((0, _defineProperty2["default"])({}, ns.e('inwaitingroom-disable-action'), (roomInfo === null || roomInfo === void 0 ? void 0 : roomInfo.roomType) === _type3.FcrRoomType.Waitingroom), 'active', isMeetingDetailVisible)),
                 children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
                   type: _type.FcrIconType.FCR_V2_TANHAO_ALART,
                   className: ns.e('info-detail-icon'),

package/lib/modules/video-window/components/members/index.js

@@ -102,9 +102,6 @@ var Members = exports.Members = (0, _mobxReact.observer)(function () {
           videoRenderMode: _type3.AgoraRtcRenderMode.FIT,
           videoStreamType: _type3.AgoraRtcVideoStreamType.LOW_STREAM,
           windowData: windowData,
-          onDoubleClick: function onDoubleClick() {
-            !windowData.isPin && addPin(windowData.windowId);
-          },
           showAvatar: true,
           isVideoSuspended: false
         })

package/lib/modules/waiting-room-layout/index.css

@@ -81,3 +81,16 @@
   padding: 5px 10px;
   z-index: 100;
 }
+
+.waiting-room-title-jbh {
+  display: flex;
+  align-items: center;
+}
+
+.waiting-room-title-jbh-icon {
+  margin-right: 5px;
+}
+
+.waiting-room-title-jbh-joining {
+  color: var(--fcr_ui_scene_icontext7);
+}

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

@@ -2,12 +2,13 @@ import { UIModule } from '../../base';
 import { FcrUIDeviceProvider } from '../../providers/device-provider';
 import { FcrUILocalVideoRenderProvider } from '../../providers/renderer-provider';
 import { FcrLayoutSlots } from './store';
-import { FcrUICurrentRoomControlProvider } from '../../providers/room-provider';
+import { FcrUICurrentRoomControlProvider, FcrUIRoomProvider } from '../../providers/room-provider';
 export declare class WaitingRoomLayout extends UIModule {
     private _store?;
     deviceProvider?: FcrUIDeviceProvider;
     localVideoRenderProvider?: FcrUILocalVideoRenderProvider;
     currentRoomControlProvider?: FcrUICurrentRoomControlProvider;
+    roomProvider?: FcrUIRoomProvider;
     onNodeWillActive(): void;
     onNodeWillInactive(): void;
     getComponent(slots?: Partial<FcrLayoutSlots & {

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

@@ -46,7 +46,8 @@ var WaitingRoomLayout = exports.WaitingRoomLayout = /*#__PURE__*/function (_UIMo
       this._store = new _store["default"]({
         deviceProvider: this.deviceProvider,
         localVideoRenderProvider: this.localVideoRenderProvider,
-        userControl: (_this$currentRoomCont = this.currentRoomControlProvider) === null || _this$currentRoomCont === void 0 ? void 0 : _this$currentRoomCont.currentRoomControl.getUserControl()
+        userControl: (_this$currentRoomCont = this.currentRoomControlProvider) === null || _this$currentRoomCont === void 0 ? void 0 : _this$currentRoomCont.currentRoomControl.getUserControl(),
+        roomProvider: this.roomProvider
       });
     }
   }, {

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

@@ -1,6 +1,8 @@
 import { FcrUserControl } from 'fcr-core';
 import { FcrUIDeviceProvider } from '../../providers/device-provider';
 import { FcrUILocalVideoRenderProvider } from '../../providers/renderer-provider';
+import { FcrUIRoomProvider } from '../../providers/room-provider';
+import { FcrUserInfo } from 'fcr-core/lib/type';
 export interface FcrLayoutSlots {
     chat: React.ReactNode;
     stateBar: React.ReactNode;
@@ -11,21 +13,30 @@ export interface LayoutStoreParams {
     deviceProvider: FcrUIDeviceProvider;
     localVideoRenderProvider: FcrUILocalVideoRenderProvider;
     userControl: FcrUserControl;
+    roomProvider: FcrUIRoomProvider;
 }
 export default class LayoutStore implements FcrLayoutSlots {
     private _deviceProvider;
     private _localVideoRenderProvider;
     private _userControl;
+    private _roomControl;
+    private _roomProvider;
+    private _localUser;
+    private _roomInfo;
+    private _roomProviderObserver;
     accessor participant: React.ReactNode;
     accessor chat: React.ReactNode;
     accessor stateBar: React.ReactNode;
     accessor actionBar: React.ReactNode;
     accessor layers: React.ReactNode;
     accessor whiteboard: React.ReactNode;
+    accessor isJbhToMainRoom: boolean;
     constructor(params: LayoutStoreParams);
-    get localUser(): import("fcr-core/lib/type").FcrUserInfo;
+    get localUser(): FcrUserInfo;
     get cameraId(): string;
     get cameraEnabled(): boolean;
+    get isWaitingRoom(): boolean;
+    get roomName(): string;
     startPlayLocalVideo(view: HTMLElement, isMirror?: boolean): void;
     stopPlayLocalVideo(view: HTMLElement): void;
     setCameraEnabled(enable: boolean): void;

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

@@ -51,8 +51,9 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _mobx = require("mobx");
 var _react = require("react");
 var _decorator = require("agora-foundation/lib/decorator");
+var _type = require("fcr-core/lib/room-control/type");
 var _LayoutStore;
-var _initProto, _participantDecs, _init_participant, _chatDecs, _init_chat, _stateBarDecs, _init_stateBar, _actionBarDecs, _init_actionBar, _layersDecs, _init_layers, _whiteboardDecs, _init_whiteboard, _updateSlotsDecs, _ref;
+var _initProto, _participantDecs, _init_participant, _chatDecs, _init_chat, _stateBarDecs, _init_stateBar, _actionBarDecs, _init_actionBar, _layersDecs, _init_layers, _whiteboardDecs, _init_whiteboard, _isJbhToMainRoomDecs, _init_isJbhToMainRoom, _updateSlotsDecs, _ref;
 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; }
@@ -69,11 +70,18 @@ var _C = /*#__PURE__*/new WeakMap();
 var _D = /*#__PURE__*/new WeakMap();
 var _E = /*#__PURE__*/new WeakMap();
 var _F = /*#__PURE__*/new WeakMap();
-_ref = (_participantDecs = [_mobx.observable, _mobx.observable.ref], _chatDecs = [_mobx.observable, _mobx.observable.ref], _stateBarDecs = [_mobx.observable, _mobx.observable.ref], _actionBarDecs = [_mobx.observable, _mobx.observable.ref], _layersDecs = [_mobx.observable, _mobx.observable.ref], _whiteboardDecs = [_mobx.observable, _mobx.observable.ref], _updateSlotsDecs = [_mobx.action, _mobx.action.bound], "_deviceProvider");
+var _G = /*#__PURE__*/new WeakMap();
+_ref = (_participantDecs = [_mobx.observable, _mobx.observable.ref], _chatDecs = [_mobx.observable, _mobx.observable.ref], _stateBarDecs = [_mobx.observable, _mobx.observable.ref], _actionBarDecs = [_mobx.observable, _mobx.observable.ref], _layersDecs = [_mobx.observable, _mobx.observable.ref], _whiteboardDecs = [_mobx.observable, _mobx.observable.ref], _isJbhToMainRoomDecs = [_mobx.observable, _mobx.observable.ref], _updateSlotsDecs = [_mobx.action, _mobx.action.bound], "_deviceProvider");
 var LayoutStore = exports["default"] = /*#__PURE__*/function () {
   function LayoutStore(params) {
+    var _this = this;
     (0, _classCallCheck2["default"])(this, LayoutStore);
     (0, _defineProperty2["default"])(this, _ref, void _initProto(this));
+    (0, _defineProperty2["default"])(this, "_roomProviderObserver", {
+      onLeaveJBH: function onLeaveJBH() {
+        _this.isJbhToMainRoom = true;
+      }
+    });
     // Slots
     _classPrivateFieldInitSpec(this, _A, _init_participant(this, null));
     _classPrivateFieldInitSpec(this, _B, _init_chat(this, null));
@@ -81,9 +89,15 @@ var LayoutStore = exports["default"] = /*#__PURE__*/function () {
     _classPrivateFieldInitSpec(this, _D, _init_actionBar(this, null));
     _classPrivateFieldInitSpec(this, _E, _init_layers(this, null));
     _classPrivateFieldInitSpec(this, _F, _init_whiteboard(this, null));
+    _classPrivateFieldInitSpec(this, _G, _init_isJbhToMainRoom(this, false));
     this._deviceProvider = params.deviceProvider;
     this._localVideoRenderProvider = params.localVideoRenderProvider;
     this._userControl = params.userControl;
+    this._roomControl = params.roomProvider.currentRoomControl;
+    this._roomProvider = params.roomProvider;
+    this._roomProvider.addObserver(this._roomProviderObserver);
+    this._localUser = this._userControl.getLocalUser();
+    this._roomInfo = this._roomControl.getRoomInfo();
   }
   return (0, _createClass2["default"])(LayoutStore, [{
     key: "participant",
@@ -133,10 +147,18 @@ var LayoutStore = exports["default"] = /*#__PURE__*/function () {
     set: function set(v) {
       _classPrivateFieldSet(_F, this, v);
     }
+  }, {
+    key: "isJbhToMainRoom",
+    get: function get() {
+      return _classPrivateFieldGet(_G, this);
+    },
+    set: function set(v) {
+      _classPrivateFieldSet(_G, this, v);
+    }
   }, {
     key: "localUser",
     get: function get() {
-      return this._userControl.getLocalUser();
+      return this._localUser;
     }
   }, {
     key: "cameraId",
@@ -148,6 +170,16 @@ var LayoutStore = exports["default"] = /*#__PURE__*/function () {
     get: function get() {
       return this._deviceProvider.cameraEnabled;
     }
+  }, {
+    key: "isWaitingRoom",
+    get: function get() {
+      return this._roomInfo.roomType === _type.FcrRoomType.Waitingroom;
+    }
+  }, {
+    key: "roomName",
+    get: function get() {
+      return this._roomInfo.roomName;
+    }
   }, {
     key: "startPlayLocalVideo",
     value: function startPlayLocalVideo(view) {
@@ -183,16 +215,20 @@ var LayoutStore = exports["default"] = /*#__PURE__*/function () {
     }
   }, {
     key: "release",
-    value: function release() {}
+    value: function release() {
+      this.isJbhToMainRoom = false;
+      this._roomProvider.removeObserver(this._roomProviderObserver);
+    }
   }]);
 }();
 _LayoutStore = LayoutStore;
-var _applyDecs$e = (0, _slicedToArray2["default"])(_applyDecs(_LayoutStore, [[_participantDecs, 17, "participant"], [_chatDecs, 17, "chat"], [_stateBarDecs, 17, "stateBar"], [_actionBarDecs, 17, "actionBar"], [_layersDecs, 17, "layers"], [_whiteboardDecs, 17, "whiteboard"], [_decorator.bound, 2, "startPlayLocalVideo"], [_decorator.bound, 2, "stopPlayLocalVideo"], [_decorator.bound, 2, "setCameraEnabled"], [_decorator.bound, 2, "setVideoOrientation"], [_updateSlotsDecs, 18, "updateSlots"], [_decorator.bound, 2, "release"]], []).e, 7);
+var _applyDecs$e = (0, _slicedToArray2["default"])(_applyDecs(_LayoutStore, [[_participantDecs, 17, "participant"], [_chatDecs, 17, "chat"], [_stateBarDecs, 17, "stateBar"], [_actionBarDecs, 17, "actionBar"], [_layersDecs, 17, "layers"], [_whiteboardDecs, 17, "whiteboard"], [_isJbhToMainRoomDecs, 17, "isJbhToMainRoom"], [_decorator.bound, 2, "startPlayLocalVideo"], [_decorator.bound, 2, "stopPlayLocalVideo"], [_decorator.bound, 2, "setCameraEnabled"], [_decorator.bound, 2, "setVideoOrientation"], [_updateSlotsDecs, 18, "updateSlots"], [_decorator.bound, 2, "release"]], []).e, 8);
 _init_participant = _applyDecs$e[0];
 _init_chat = _applyDecs$e[1];
 _init_stateBar = _applyDecs$e[2];
 _init_actionBar = _applyDecs$e[3];
 _init_layers = _applyDecs$e[4];
 _init_whiteboard = _applyDecs$e[5];
-_initProto = _applyDecs$e[6];
+_init_isJbhToMainRoom = _applyDecs$e[6];
+_initProto = _applyDecs$e[7];
 var StoreContext = exports.StoreContext = /*#__PURE__*/(0, _react.createContext)(null);

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/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

@@ -58,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/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/expansion/index.d.ts

@@ -0,0 +1 @@
+export {};