fcr-ui-scene 3.2.0 → 3.3.0

package/lib/fragments/control-bar/more-actions/index.js

@@ -1,6 +1,7 @@
 "use strict";
 
 require("core-js/modules/es.object.define-property.js");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -26,6 +27,8 @@ var _type2 = require("agora-edu-core/lib/type");
 var _copyText = require("../../../utilities/copyText");
 var _toast = require("agora-ui-foundation/lib/components/toast");
 var _i18n = require("agora-ui-foundation/lib/i18n");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _leaveMeeting = require("../../../modules/action-bar/leave/leave-meeting");
 var _jsxRuntime = require("react/jsx-runtime");
 var MorePopoverContent = exports.MorePopoverContent = (0, _mobxReact.observer)(function (props) {
   var ref = (0, _react.useRef)(null);
@@ -41,7 +44,18 @@ var MorePopoverContent = exports.MorePopoverContent = (0, _mobxReact.observer)(f
     hasStartCloudRecordingPermission = _useContext.hasStartCloudRecordingPermission,
     hasStartLiveStreamingPermission = _useContext.hasStartLiveStreamingPermission,
     hasGetLiveStreamingUrlPermission = _useContext.hasGetLiveStreamingUrlPermission,
-    hasStopLiveStreamingPermission = _useContext.hasStopLiveStreamingPermission;
+    hasStopLiveStreamingPermission = _useContext.hasStopLiveStreamingPermission,
+    setShowMeetingDetailPortal = _useContext.setShowMeetingDetailPortal,
+    setMeetingDetailPortalPosition = _useContext.setMeetingDetailPortalPosition,
+    localUserRole = _useContext.localUserRole,
+    hasAssignHostBeforeLeavingPermission = _useContext.hasAssignHostBeforeLeavingPermission,
+    isPstnUser = _useContext.isPstnUser,
+    remoteUsers = _useContext.remoteUsers,
+    hasEndRoomPermission = _useContext.hasEndRoomPermission,
+    sendLeave = _useContext.sendLeave,
+    sendEnd = _useContext.sendEnd,
+    keepPhoneAudioConnection = _useContext.keepPhoneAudioConnection,
+    sendAssign = _useContext.sendAssign;
   var transI18n = (0, _i18n.useI18n)();
   var onItemClick = function onItemClick(item) {
     if (item.onClick) {
@@ -75,6 +89,7 @@ var MorePopoverContent = exports.MorePopoverContent = (0, _mobxReact.observer)(f
           children: transI18n('fmt_popup_button_endmeeting')
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.FcrButton, {
           size: "S",
+          type: "secondary-bordered",
           onClick: function onClick() {
             _dialog.FcrDialogApi.close('leave-room');
             window.runtime.browserWindow.setIgnoreMouseEvents(true, {
@@ -85,6 +100,7 @@ var MorePopoverContent = exports.MorePopoverContent = (0, _mobxReact.observer)(f
           children: transI18n('fmt_popup_button_leavemeeting')
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.FcrButton, {
           size: "S",
+          type: "secondary-bordered",
           onClick: function onClick() {
             window.runtime.browserWindow.setIgnoreMouseEvents(true, {
               forward: true
@@ -121,11 +137,15 @@ var MorePopoverContent = exports.MorePopoverContent = (0, _mobxReact.observer)(f
       })]
     });
   };
+
+  // 分割线
   var moreOptions = [{
+    icon: _type.FcrIconType.FCR_WEB_CHAT,
     text: transI18n('fmt_chat_label_chat'),
     displayWhenNoPermission: 'hidden',
     key: _constant.RendererEventAction.OPEN_CHAT,
-    hasPermission: hasChatPermission
+    hasPermission: hasChatPermission,
+    classNames: 'share-action-nav__media-list-item-with-divider'
   }, {
     icon: _type.FcrIconType.FCR_EMO,
     text: transI18n('fmt_popup_label_expression'),
@@ -133,6 +153,8 @@ var MorePopoverContent = exports.MorePopoverContent = (0, _mobxReact.observer)(f
     key: 'emoji',
     hasPermission: false
   }, {
+    icon: _type.FcrIconType.FCR_CLOUDRECORD,
+    classNames: 'share-action-nav__media-list-item-with-divider',
     text: transI18n('fmt_screenshare_controlbar_button_more_cloudRecord'),
     displayWhenNoPermission: 'hidden',
     key: cloudRecordingState === _type2.FcrRecordingState.Stopped ? _constant.RendererEventAction.CLOUD_RECORDING_START : _constant.RendererEventAction.CLOUD_RECORDING_STOP,
@@ -147,6 +169,7 @@ var MorePopoverContent = exports.MorePopoverContent = (0, _mobxReact.observer)(f
   //     hasStartCloudRecordingPermission && cloudRecordingState === FcrRecordingState.Stopped,
   // },
   {
+    classNames: 'share-action-nav__media-list-item-with-divider',
     icon: _type.FcrIconType.FCR_LIVE,
     text: transI18n('fmt_screenshare_controlbar_button_more_live'),
     displayWhenNoPermission: 'hidden',
@@ -158,14 +181,29 @@ var MorePopoverContent = exports.MorePopoverContent = (0, _mobxReact.observer)(f
       });
       handleMoreClick(_constant.RendererEventAction.OPEN_LIVE_STEAMING_DIALOG);
     }
+  }, {
+    icon: _type.FcrIconType.FCR_EXCLAMATIONMASK,
+    text: transI18n('fmt_popup_button_meetinginfor'),
+    classNames: 'share-action-nav__media-list-item-with-divider',
+    displayWhenNoPermission: 'hidden',
+    key: 'copyMeetingInfo',
+    hasPermission: true,
+    onClick: function onClick() {
+      closePopover();
+      var currentPopoverPosition = document.getElementsByClassName('share-action-nav__popover')[0].getBoundingClientRect();
+      setMeetingDetailPortalPosition(currentPopoverPosition.x || 0, currentPopoverPosition.y || 0);
+      setShowMeetingDetailPortal(true);
+    }
   }, {
     icon: _type.FcrIconType.FCR_SETTING,
+    classNames: 'share-action-nav__media-list-item-with-divider',
     text: transI18n('fmt_screenshare_controlbar_button_more_setting'),
     displayWhenNoPermission: 'hidden',
     key: _constant.RendererEventAction.OPEN_SETTING,
     hasPermission: true
   }, {
     icon: _type.FcrIconType.FCR_ATTACH,
+    classNames: 'share-action-nav__media-list-item-with-divider',
     text: transI18n('fmt_live_label_copylink'),
     displayWhenNoPermission: 'hidden',
     key: 'copyLiveLink',
@@ -182,43 +220,40 @@ var MorePopoverContent = exports.MorePopoverContent = (0, _mobxReact.observer)(f
       });
     }
   }, {
-    icon: _type.FcrIconType.FCR_ATTACH,
-    text: transI18n('fmt_popup_button_meetinginfor'),
-    displayWhenNoPermission: 'hidden',
-    key: 'copyMeetingInfo',
-    hasPermission: false,
+    icon: _type.FcrIconType.FCR_ENDMEETING,
+    key: _constant.RendererEventAction.LEAVE_ROOM,
+    classNames: 'share-action-nav__popover-inner-content-leave-option',
+    text: isHost ? transI18n('fmt_popup_button_endmeeting') : transI18n('fmt_popup_button_leavemeeting'),
+    hasPermission: true,
     onClick: function onClick() {
-      closePopover();
-      (0, _copyText.copyText)('TODO 会议信息').then(function () {
-        _toast.FcrToastApi.open({
-          id: 'copy-live-link',
-          toastProps: {
-            type: 'info',
-            content: transI18n('fmt_statusbar_status_coppied')
-          }
-        });
+      window.runtime.browserWindow.setIgnoreMouseEvents(false);
+      _dialog.FcrDialogApi.info({
+        id: 'leave-room',
+        dialogProps: {
+          content: /*#__PURE__*/(0, _jsxRuntime.jsx)(_leaveMeeting.LeaveMeeting, {
+            setPopoverOpened: function setPopoverOpened(value) {
+              if (!value) {
+                _dialog.FcrDialogApi.close('leave-room');
+              }
+            },
+            localUserRole: localUserRole,
+            leave: sendLeave,
+            isLocked: false,
+            hasAssignHostBeforeLeavingPermission: hasAssignHostBeforeLeavingPermission,
+            hasEndRoomPermission: hasEndRoomPermission,
+            keepPhoneAudioConnection: keepPhoneAudioConnection,
+            isPstnUser: isPstnUser,
+            remoteUsers: remoteUsers,
+            end: sendEnd,
+            assignHost: sendAssign
+          }),
+          width: 255,
+          closable: false,
+          rootClassName: 'leave-room-dialog'
+        }
       });
     }
-  }
-  // {
-  //   icon: FcrIconType.FCR_ENDMEETING,
-  //   key: RendererEventAction.LEAVE_ROOM,
-  //   text: isHost ? '结束会议' : '离开会议',
-  //   hasPermission: true,
-  //   onClick: () => {
-  //     window.runtime.browserWindow.setIgnoreMouseEvents(false);
-  //     FcrDialogApi.info({
-  //       id: 'leave-room',
-  //       dialogProps: {
-  //         content: <LeaveRoomContent />,
-  //         width: 256,
-  //         closable: false,
-  //         rootClassName: 'leave-room-dialog',
-  //       },
-  //     });
-  //   },
-  // },
-  ];
+  }];
   (0, _react.useEffect)(function () {
     function handleClickOutside(event) {
       if (ref.current && !ref.current.contains(event.target)) {
@@ -239,7 +274,7 @@ var MorePopoverContent = exports.MorePopoverContent = (0, _mobxReact.observer)(f
     className: "share-action-nav__popover-inner-content share-action-nav__not-draggable",
     children: moreOptionsFilter.map(function (item, index) {
       return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        className: "share-action-nav__media-list-group",
+        className: (0, _classnames["default"])('share-action-nav__media-list-group', item.classNames),
         onClick: function onClick(e) {
           e.stopPropagation();
           onItemClick(item);

package/lib/fragments/control-bar/security-content/index.css

@@ -8,6 +8,7 @@
 }
 .security-content .fcr-drop-menu-title {
   text-align: left;
+  font-size: 500;
 }
 .security-content .fcr-checkbox-inner {
   background-color: transparent;
@@ -21,4 +22,13 @@
 .security-content .fcr-checkbox-label {
   display: inline-block;
   flex: 1;
+  font-weight: 500;
+}
+
+.security-content .fcr-checkbox path {
+  fill: var(--fcr_ui_scene_mainicon1);
+}
+
+.fcr-drop-menu-option-primary:hover path {
+  fill: var(--fcr_ui_scene_ramp_brand6);
 }

package/lib/fragments/control-bar/security-content/index.js

@@ -24,6 +24,8 @@ var SecurityContent = exports.SecurityContent = (0, _mobxReact.observer)(functio
     isLockRoomEnabled = _useContext.isLockRoomEnabled,
     allowShareScreen = _useContext.allowShareScreen,
     updateAllowShareScreen = _useContext.updateAllowShareScreen,
+    allowBoardWrite = _useContext.allowBoardWrite,
+    updateBoardWriteEnabled = _useContext.updateBoardWriteEnabled,
     allowChat = _useContext.allowChat,
     updateAllowChat = _useContext.updateAllowChat,
     allowUnmuteSelfAudio = _useContext.allowUnmuteSelfAudio,
@@ -35,7 +37,11 @@ var SecurityContent = exports.SecurityContent = (0, _mobxReact.observer)(functio
     hasEnableStartAudioPermission = _useContext.hasEnableStartAudioPermission,
     hasEnableChangeNamePermission = _useContext.hasEnableChangeNamePermission,
     hasEnableStartVideoPermission = _useContext.hasEnableStartVideoPermission,
-    hasLockRoomPermission = _useContext.hasLockRoomPermission;
+    hasLockRoomPermission = _useContext.hasLockRoomPermission,
+    hasAllowWriteBoardPermission = _useContext.hasAllowWriteBoardPermission,
+    hasWaitingRoomPermission = _useContext.hasWaitingRoomPermission,
+    updateWaitingRoomEnabled = _useContext.updateWaitingRoomEnabled,
+    isWaitingRoomEnabled = _useContext.isWaitingRoomEnabled;
   var transI18n = (0, _i18n.useI18n)();
   var allActions = [{
     title: /*#__PURE__*/(0, _jsxRuntime.jsx)(_checkbox.FcrCheckbox, {
@@ -51,14 +57,15 @@ var SecurityContent = exports.SecurityContent = (0, _mobxReact.observer)(functio
     }
   }, {
     title: /*#__PURE__*/(0, _jsxRuntime.jsx)(_checkbox.FcrCheckbox, {
-      checked: false,
+      checked: isWaitingRoomEnabled,
       label: transI18n('fmt_security_options_activatewaitingroom'),
       styleType: "white"
     }),
     key: 'enable_waiting_room',
-    type: 'disabled',
-    hasPermission: true,
-    onButtonClick: function onButtonClick() {},
+    hasPermission: hasWaitingRoomPermission,
+    onButtonClick: function onButtonClick() {
+      return updateWaitingRoomEnabled(!isWaitingRoomEnabled);
+    },
     classNames: 'room-control-drop-with-under-line'
   }, {
     title: transI18n('fmt_screenshare_options_allow'),
@@ -68,7 +75,7 @@ var SecurityContent = exports.SecurityContent = (0, _mobxReact.observer)(functio
   }, {
     title: /*#__PURE__*/(0, _jsxRuntime.jsx)(_checkbox.FcrCheckbox, {
       checked: allowShareScreen,
-      label: transI18n('fmt_screenshare_controlbar_security_list_participant_screenshare'),
+      label: transI18n('fmt_screenshare_screen_and_board'),
       styleType: "white"
     }),
     key: 'share_screen',
@@ -77,6 +84,16 @@ var SecurityContent = exports.SecurityContent = (0, _mobxReact.observer)(functio
     onButtonClick: function onButtonClick() {
       updateAllowShareScreen(!allowShareScreen);
     }
+  }, {
+    title: /*#__PURE__*/(0, _jsxRuntime.jsx)(_checkbox.FcrCheckbox, {
+      checked: allowBoardWrite,
+      label: transI18n('fmt_screenshare_options_editable'),
+      styleType: "white"
+    }),
+    key: 'enable_whiteboard',
+    type: 'primary',
+    hasPermission: hasAllowWriteBoardPermission,
+    onButtonClick: updateBoardWriteEnabled
   }, {
     title: /*#__PURE__*/(0, _jsxRuntime.jsx)(_checkbox.FcrCheckbox, {
       checked: allowChat,
@@ -124,18 +141,23 @@ var SecurityContent = exports.SecurityContent = (0, _mobxReact.observer)(functio
       updateAllowUnmuteSelfVideo(!allowUnmuteSelfVideo);
     },
     classNames: 'room-control-drop-with-under-line'
-  }, {
-    title: /*#__PURE__*/(0, _jsxRuntime.jsx)(_checkbox.FcrCheckbox, {
-      checked: false,
-      label: transI18n('fmt_security_options_removemultiple'),
-      styleType: "white"
-    }),
-    key: 'remove_fcr-participants',
-    type: 'danger',
-    hasPermission: true,
-    onButtonClick: function onButtonClick() {},
-    classNames: 'room-control-drop-disable'
-  }];
+  }
+  // 功能没实现，暂时注释
+  // {
+  //   title: (
+  //     <FcrCheckbox
+  //       checked={false}
+  //       label={transI18n('fmt_security_options_removemultiple')}
+  //       styleType="white"
+  //     />
+  //   ),
+  //   key: 'remove_fcr-participants',
+  //   type: 'danger',
+  //   hasPermission: true,
+  //   onButtonClick: () => {},
+  //   classNames: 'room-control-drop-disable',
+  // },
+  ];
   var securityHasPermissionActions = allActions.filter(function (item) {
     return item.hasPermission;
   });

package/lib/fragments/control-bar/view.js

@@ -32,6 +32,7 @@ var _type = require("agora-edu-core/lib/type");
 var _toast = require("agora-ui-foundation/lib/components/toast");
 var _platform = require("../../utilities/platform");
 var _type2 = require("../../modules/action-bar/type");
+var _meetingDetailsPortal = _interopRequireDefault(require("./meeting-details/meeting-details-portal"));
 var _jsxRuntime = require("react/jsx-runtime");
 var ControlBarView = exports.ControlBarView = (0, _mobxReact.observer)(function () {
   var _screenBounds$availTo;
@@ -71,7 +72,9 @@ var ControlBarView = exports.ControlBarView = (0, _mobxReact.observer)(function
     screenBounds = _useContext.screenBounds,
     connectType = _useContext.connectType,
     phoneMicEnabled = _useContext.phoneMicEnabled,
-    hasSecurityPermission = _useContext.hasSecurityPermission;
+    hasSecurityPermission = _useContext.hasSecurityPermission,
+    setShowMeetingDetailPortal = _useContext.setShowMeetingDetailPortal,
+    fetchLeavingRoomPropsAfterInit = _useContext.fetchLeavingRoomPropsAfterInit;
   // 控制栏本身的高度
   var NAV_HEIGHT = 84;
   // 鼠标移开后自动隐藏的时间
@@ -184,6 +187,7 @@ var ControlBarView = exports.ControlBarView = (0, _mobxReact.observer)(function
   (0, _react.useEffect)(function () {
     function handleBlur(event) {
       setMoreVisible(false);
+      setShowMeetingDetailPortal(false);
       setShowSecurityPopover(false);
     }
     window.addEventListener('blur', handleBlur);
@@ -193,6 +197,8 @@ var ControlBarView = exports.ControlBarView = (0, _mobxReact.observer)(function
   }, []);
   (0, _react.useEffect)(function () {
     window.runtime.browserWindow.setAlwaysOnTop(false);
+    /** control-bar初始化后补偿发起一次store数据同步 */
+    fetchLeavingRoomPropsAfterInit();
     setTimeout(function () {
       window.runtime.browserWindow.setAlwaysOnTop(true, 'screen-saver');
     }, 500);
@@ -315,7 +321,7 @@ var ControlBarView = exports.ControlBarView = (0, _mobxReact.observer)(function
         onShareStateNavTransferPosition: handlerShareNavTransferPosition,
         currentPosition: navCurrentPosition,
         onStopShare: handlerStopShare
-      })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_meetingDetailsPortal["default"], {})]
     })
   }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {});
 });

package/lib/login-confirm-dialog.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+type LoginConfirmDialogProps = {
+    title?: string;
+    desc: string;
+    id: string;
+    btnTxt: string;
+    isShowCoutDown?: boolean;
+    onConfirm?: () => void;
+    showImg?: boolean;
+};
+export declare const LoginConfirmDialog: React.FC<LoginConfirmDialogProps>;
+export {};

package/lib/login-confirm-dialog.js

@@ -0,0 +1,80 @@
+"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.LoginConfirmDialog = void 0;
+require("core-js/modules/web.timers.js");
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _i18n = require("agora-ui-foundation/lib/i18n");
+var _button = require("agora-ui-foundation/lib/components/button");
+var _dialog = require("agora-ui-foundation/lib/components/dialog");
+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 LoginConfirmDialog = exports.LoginConfirmDialog = function LoginConfirmDialog(_ref) {
+  var title = _ref.title,
+    desc = _ref.desc,
+    id = _ref.id,
+    btnTxt = _ref.btnTxt,
+    isShowCoutDown = _ref.isShowCoutDown,
+    onConfirm = _ref.onConfirm,
+    _ref$showImg = _ref.showImg,
+    showImg = _ref$showImg === void 0 ? true : _ref$showImg;
+  var t = (0, _i18n.useI18n)();
+  var _useState = (0, _react.useState)(6),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    countDown = _useState2[0],
+    setCountDown = _useState2[1];
+  (0, _react.useEffect)(function () {
+    var timer;
+    if (isShowCoutDown) {
+      timer = setInterval(function () {
+        if (countDown === 0) {
+          clearInterval(timer);
+          onConfirm && onConfirm();
+          _dialog.FcrDialogApi.close(id);
+        }
+        setCountDown(countDown - 1);
+      }, 1000);
+    }
+    return function () {
+      clearInterval(timer);
+    };
+  }, [countDown, isShowCoutDown]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: "login-confirm-dialog-content",
+    children: [showImg && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "login-confirm-dialog-img"
+    }), title && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "login-confirm-dialog-title",
+      children: title
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "login-confirm-dialog-desc",
+      children: desc
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "login-confirm-dialog-btn",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_button.FcrButton, {
+        size: "S",
+        shape: "rounded",
+        onClick: function onClick() {
+          onConfirm && onConfirm();
+          _dialog.FcrDialogApi.close(id);
+        },
+        children: [btnTxt, isShowCoutDown && "(".concat(countDown, "s)")]
+      })
+    })]
+  });
+};

package/lib/modules/action-bar/action-bar-collapes-items.js

@@ -69,13 +69,13 @@ var midActionOrderMap = exports.midActionOrderMap = [/*#__PURE__*/(0, _jsxRuntim
 // <Board id="Whiteboard" key="Whiteboard" order={6} />,
 // <BreakoutRoom id="BreakoutRoom" key="BreakoutRoom" order={7} />,
 // <Respond id="Respond" key="Respond" order={8} />,
-(0, _jsxRuntime.jsx)(_settings.Settings, {
-  id: "Settings",
-  order: 9
-}, "Settings"), /*#__PURE__*/(0, _jsxRuntime.jsx)(_liveStreaming.LiveStreaming, {
+(0, _jsxRuntime.jsx)(_liveStreaming.LiveStreaming, {
   id: "LiveStreaming",
+  order: 9
+}, "LiveStreaming"), /*#__PURE__*/(0, _jsxRuntime.jsx)(_settings.Settings, {
+  id: "Settings",
   order: 10
-}, "LiveStreaming"), /*#__PURE__*/(0, _jsxRuntime.jsx)(_more.More, {
+}, "Settings"), /*#__PURE__*/(0, _jsxRuntime.jsx)(_more.More, {
   id: "More",
   order: 11
 }, "More")];

package/lib/modules/action-bar/chat/index.js

@@ -28,10 +28,10 @@ var Chat = exports.Chat = (0, _mobxReact.observer)(function (_ref) {
   var tooltip = transI18n('fmt_screenshare_controlbar_button_more_chat');
   var _useContext = (0, _react.useContext)(_context.ActionBarContext),
     toggleChat = _useContext.toggleChat,
-    newMessageCount = _useContext.newMessageCount,
     latestMessage = _useContext.latestMessage,
     newMessageTooltipVisible = _useContext.newMessageTooltipVisible,
-    hideNewMessageTooltip = _useContext.hideNewMessageTooltip;
+    hideNewMessageTooltip = _useContext.hideNewMessageTooltip,
+    allNewMessage = _useContext.allNewMessage;
   var _useState = (0, _react.useState)(false),
     _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
     tooltipVisible = _useState2[0],
@@ -50,11 +50,11 @@ var Chat = exports.Chat = (0, _mobxReact.observer)(function (_ref) {
   }, [newMessageTooltipVisible]);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     className: "fcr-action-bar-chat-wrapper",
-    children: [newMessageCount > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    children: [allNewMessage > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: "fcr-action-bar-chat-unread-count",
-      children: newMessageCount > 99 ? /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+      children: allNewMessage > 99 ? /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
         src: _fcr_chat_reddot["default"]
-      }) : newMessageCount
+      }) : allNewMessage
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.FcrToolTip, {
       overlayClassName: "fcr-chatroom-tooltip",
       overlayInnerStyle: {

package/lib/modules/action-bar/device/index.css

@@ -1,7 +1,7 @@
 .fcr-action-bar-device {
   border-radius: var(--fcr_cornerradius_s);
   position: relative;
-  width: 71px;
+  min-width: 71px;
   cursor: pointer;
 }
 .fcr-action-bar-device:hover {
@@ -25,7 +25,7 @@
   stop-color: var(--fcr_web_ui_scene_mainicon1);
 }
 .fcr-action-bar-device-text {
-  color: var(--fcr_ui_scene_icontext1);
+  color: var(--fcr_ui_scene_icontext2);
   line-height: 12px;
   font-size: 12px;
   text-align: center;
@@ -155,3 +155,8 @@
   white-space: nowrap;
   text-overflow: ellipsis;
 }
+
+.fcr-device-popover-content-more-item--danger:hover {
+  color: var(--fcr_ui_scene_ramp_red6);
+  background: var(--fcr_ui_scene_ramp_red1);
+}

package/lib/modules/action-bar/device/index.js

@@ -52,11 +52,9 @@ var MicrophoneDevice = exports.MicrophoneDevice = (0, _mobxReact.observer)(funct
     microphoneEnabled = _useContext2.microphoneEnabled,
     enableMicrophone = _useContext2.enableMicrophone,
     toggleLayoutBarLock = _useContext2.toggleLayoutBarLock,
-    toggleConnection = _useContext2.toggleConnection,
     openConnection = _useContext2.openConnection,
     connectType = _useContext2.connectType,
     microphoneList = _useContext2.microphoneList,
-    microphoneVolumeLevel = _useContext2.microphoneVolumeLevel,
     phoneMicEnabled = _useContext2.phoneMicEnabled;
   var _useDeviceTooltipVisi = useDeviceTooltipVisible(toggleLayoutBarLock),
     tooltipVisible = _useDeviceTooltipVisi.tooltipVisible,
@@ -393,7 +391,8 @@ var AudioDeviceListPopoverContent = (0, _mobxReact.observer)(function (_ref3) {
     speakerList = _useContext5.speakerList,
     openConnection = _useContext5.openConnection,
     connectType = _useContext5.connectType,
-    closeConnection = _useContext5.closeConnection;
+    closeConnection = _useContext5.closeConnection,
+    closeSpeaker = _useContext5.closeSpeaker;
   var microphoneOptions = microphoneList.map(function (device) {
     return {
       text: device.deviceName,
@@ -480,10 +479,11 @@ var AudioDeviceListPopoverContent = (0, _mobxReact.observer)(function (_ref3) {
     }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: "fcr-device-popover-content-more",
       children: [connectType === _type2.ConnectType.COMPUTER && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        className: "fcr-device-popover-content-more-item",
+        className: "fcr-device-popover-content-more-item fcr-device-popover-content-more-item--danger",
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
           onClick: function onClick() {
             setMicrophoneId('');
+            closeSpeaker();
             closeConnection();
           },
           children: transI18n('fmt_device_label_audio_list_leaveComputerAudio')