fcr-ui-scene 3.5.0 → 3.6.0

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

@@ -21,7 +21,7 @@ var _react = require("react");
 var _store = require("./store");
 require("./meeting-detail.css");
 var _classnames = _interopRequireDefault(require("classnames"));
-var _meetingDetail2 = require("../../utilities/meeting-detail");
+var _tooltip = require("agora-ui-foundation/lib/components/tooltip");
 var _jsxRuntime = require("react/jsx-runtime");
 var CopyState = /*#__PURE__*/function (CopyState) {
   CopyState[CopyState["COPYINIT"] = 1] = "COPYINIT";
@@ -49,14 +49,15 @@ var MeetingDetails = exports.MeetingDetails = (0, _mobxReact.observer)(function
     password = _useContext.password,
     meetingId = _useContext.meetingId,
     showToast = _useContext.showToast,
-    meetingTime = _useContext.meetingTime;
+    meetingTime = _useContext.meetingTime,
+    roomDetailCopyText = _useContext.roomDetailCopyText;
   var shareLink = (0, _react.useMemo)(function () {
     return getShareLink();
   }, []);
   if (!roomInfo || !localUser) return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {});
   var displayMeetingId = (0, _tools.renderMeetingId)(meetingId, roomInfo.roomId);
-  var duration = (scheduleInfo === null || scheduleInfo === void 0 ? void 0 : scheduleInfo.duration) || 0;
-  var detailText = (0, _meetingDetail2.generateMeetingDetail)(localUser.userName, roomInfo.roomName, (0, _meetingDetail2.generateMeetingDuration)((scheduleInfo === null || scheduleInfo === void 0 ? void 0 : scheduleInfo.startTime) || 0, duration), shareLink, displayMeetingId, password !== null && password !== void 0 ? password : '');
+  // const renderMeetingRoom = renderMeetingName(roomInfo.roomName);
+  var renderMeetingRoomName = roomInfo.roomName;
   function handleCopyMeetingId(copyContent) {
     if (!copyContent) return;
     var content = meetingId ? copyContent : copyContent.replace(/\s+/g, '');
@@ -110,7 +111,7 @@ var MeetingDetails = exports.MeetingDetails = (0, _mobxReact.observer)(function
       copyIcon: _type.FcrIconType.FCR_RESET,
       copyText: t('fmt_meeting_call_voice_call_button_copy_info')
     });
-    (0, _copyText.copyText)(detailText).then(function () {
+    (0, _copyText.copyText)(roomDetailCopyText).then(function () {
       copyTimer = setTimeout(function () {
         setCopyInfoState({
           copyState: CopyState.COPIED,
@@ -150,9 +151,13 @@ var MeetingDetails = exports.MeetingDetails = (0, _mobxReact.observer)(function
     className: "meeting-details",
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: "meeting-details__content",
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        className: "meeting-details__content-meeting-subject",
-        children: roomInfo.roomName
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.FcrToolTip, {
+        content: roomInfo.roomName,
+        placement: "bottom",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "meeting-details__content-meeting-subject",
+          children: renderMeetingRoomName
+        })
       }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
         className: "meeting-details__content-meeting-id",
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
@@ -161,11 +166,14 @@ var MeetingDetails = exports.MeetingDetails = (0, _mobxReact.observer)(function
           children: displayMeetingId
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
           onClick: function onClick() {
-            return handleCopyMeetingId(displayMeetingId);
+            return handleCopyMeetingId(meetingId || roomInfo.roomId);
           },
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
             type: _type.FcrIconType.FCR_COPY_ICON,
-            size: 20
+            size: 20,
+            colors: {
+              iconPrimary: 'var(--fcr_ui_scene_icontext1)'
+            }
           })
         })]
       }), !!password && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
@@ -182,7 +190,10 @@ var MeetingDetails = exports.MeetingDetails = (0, _mobxReact.observer)(function
           },
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
             type: _type.FcrIconType.FCR_COPY_ICON,
-            size: 20
+            size: 20,
+            colors: {
+              iconPrimary: 'var(--fcr_ui_scene_icontext1)'
+            }
           })
         })]
       }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
@@ -197,35 +208,41 @@ var MeetingDetails = exports.MeetingDetails = (0, _mobxReact.observer)(function
           },
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
             type: _type.FcrIconType.FCR_COPY_ICON,
-            size: 20
+            size: 20,
+            colors: {
+              iconPrimary: 'var(--fcr_ui_scene_icontext1)'
+            }
           })
         })]
       }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
         className: "meeting-details__content-share-link meeting-details__content-meeting-duration",
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
-          children: t('fmt_premeeting_joinroom_mobile_label_meeting_duration')
+          children: t('fmt_premeeting_joinroom_mobile_label_duration')
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
           children: meetingTime
         })]
       })]
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: "meeting-details__footer",
-      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_button.FcrButton, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.FcrButton, {
         size: "XS",
         shape: "rounded",
         onClick: handlerCopyMeetingDetail,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
-          className: (0, _classnames["default"])({
-            'meeting-details__reset-icon': copyInfoState.copyState === CopyState.COPYING
-          }),
-          type: copyInfoState.copyIcon,
-          size: 20,
-          colors: {
-            iconPrimary: 'var(--fcr_ui_scene_white10)'
-          }
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-          children: copyInfoState.copyText
-        })]
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: "meeting-details__footer_copy_btn",
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+            className: (0, _classnames["default"])('meeting-details__icon', {
+              'meeting-details__reset-icon': copyInfoState.copyState === CopyState.COPYING
+            }),
+            type: copyInfoState.copyIcon,
+            size: 20,
+            colors: {
+              iconPrimary: 'var(--fcr_ui_scene_white10)'
+            }
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+            children: copyInfoState.copyText
+          })]
+        })
       })
     })]
   });

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;
@@ -47,7 +49,7 @@ export default class StateBarStore {
     accessor cloudRecordingState: FcrRecordingState;
     get localUser(): FcrUserInfo;
     get isUserHost(): boolean;
-    get shouldShowMeetingTime(): number | undefined;
+    get shouldShowMeetingTime(): boolean;
     get isMainRoom(): boolean;
     get hasStartCloudRecordingPermission(): boolean;
     get hasStopLiveStreamingPermission(): 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

@@ -45,6 +45,7 @@ require("core-js/modules/es.object.to-string.js");
 require("core-js/modules/es.set.js");
 require("core-js/modules/es.string.iterator.js");
 require("core-js/modules/es.weak-map.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.for-each.js");
 require("core-js/modules/esnext.set.add-all.js");
@@ -128,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'
@@ -161,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) {
@@ -303,7 +306,7 @@ var StateBarStore = exports["default"] = /*#__PURE__*/function () {
   }, {
     key: "shouldShowMeetingTime",
     get: function get() {
-      return this.scheduleInfo && this.scheduleInfo.duration;
+      return Boolean(this.scheduleInfo && this.scheduleInfo.duration > 0);
     }
   }, {
     key: "isMainRoom",
@@ -375,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() {
@@ -439,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
       });
@@ -618,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

@@ -7,8 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.Members = 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 _react = require("react");
 var _mobxReact = require("mobx-react");
@@ -103,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/video-window/components/topControl/index.js

@@ -9,6 +9,8 @@ exports["default"] = void 0;
 require("core-js/modules/es.array.filter.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.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");

package/lib/modules/video-window/store.js

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

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);