fcr-ui-scene 3.5.1 → 3.6.0

package/lib/modules/action-bar/components/trigger-subscribe-language/index.js

@@ -211,7 +211,8 @@ var TriggerSubscribeLanguage = exports.TriggerSubscribeLanguage = (0, _mobxReact
             boxShadow: 'var(--fcr_web_light_dropup_m)',
             border: 'none',
             width: '256px'
-          }
+          },
+          showArrow: false
         },
         id: id,
         order: order,

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

@@ -77,7 +77,8 @@ html {
 }
 
 .fcr-action-bar-device-extra:hover,
-.fcr-action-bar-extra:hover {
+.fcr-action-bar-extra:hover,
+.fcr-action-bar-extra.active {
   background: var(--fcr_web_ui_scene_hover2);
 }
 
@@ -220,7 +221,7 @@ html {
   border-top-right-radius: 8px;
   border: 1px solid var(--fcr_ui_scene_line1);
   border-bottom: none;
-  background-color: #fff;
+  background-color: var(--fcr_web_ui_scene_fill2);
   cursor: pointer;
 }
 

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

@@ -67,7 +67,8 @@ var FcrActionBarUIModule = exports.FcrActionBarUIModule = /*#__PURE__*/function
         sharedDevicePrivilegeDataSource: this.sharedDevicePrivilegeDataSource,
         sharedMemberDataSource: this.sharedMemberDataSource,
         widgetProvider: this.widgetProvider,
-        sharedSecuritySharedDataSource: this.sharedSecuritySharedDataSource
+        sharedSecuritySharedDataSource: this.sharedSecuritySharedDataSource,
+        abilityProvider: this.abilityProvider
       });
       this._deviceControlStore = new _store2.DeviceControlStore((_this$currentRoomCont3 = this.currentRoomControlProvider) === null || _this$currentRoomCont3 === void 0 ? void 0 : _this$currentRoomCont3.currentRoomControl, this.deviceProvider, this.dialogProvider, this.deviceStreamProvider, this.sharedDevicePrivilegeDataSource);
       this._leaveMeetingStore = new _store3.LeaveMeetingStore(privilegeProvider, this.roomProvider, (_this$currentRoomCont4 = this.currentRoomControlProvider) === null || _this$currentRoomCont4 === void 0 ? void 0 : _this$currentRoomCont4.currentRoomControl, this.sharedMemberDataSource, this.abilityProvider, this.dialogProvider);

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

@@ -1,3 +1,4 @@
+import { FcrConnectionState } from 'fcr-core';
 import { FcrLiveStreamingState, FcrRecordingState, FcrUserInfo, FcrUserRole, FcrLineType } from 'fcr-core/lib/type';
 import { DeviceSettingDialogConfig } from '../setting/store';
 import { FcrUIRoomType, FcrUIWebWidgetConfig } from '../../type';
@@ -24,6 +25,7 @@ import { FcrUISharedDevicePrivilegeDataSource } from '../../shared-data-source/d
 import { FcrUIMemberSharedDataSource } from '../../shared-data-source/member-data';
 import { FcrUIWidgetProvider } from '../../providers/widget-provider';
 import { FcrSecurityCheckedStateType, FcrUISecuritySharedDataSource } from '../../shared-data-source/security-data';
+import { FcrUIAbilityProviderImpl } from '../../providers/ability-provider';
 export declare enum AudioConnectType {
     NONE = 0,
     COMPUTER = 1,
@@ -55,6 +57,7 @@ export default class ActionBarStore {
     private _roomType;
     private _widgetProvider;
     private _sharedSecuritySharedDataSource;
+    private _abilityProvider;
     private _userObserver;
     private _roomObserver;
     private _mainRoomObserver;
@@ -82,6 +85,7 @@ export default class ActionBarStore {
     accessor popoverOpened: boolean;
     accessor stateBarLeaveMeeting: boolean;
     accessor hasOfflineUserExistence: boolean;
+    accessor connectionState: FcrConnectionState;
     constructor(args: {
         roomProvider: FcrUIRoomProvider;
         roomControl: FcrBaseRoomControl;
@@ -102,6 +106,7 @@ export default class ActionBarStore {
         sharedMemberDataSource: FcrUIMemberSharedDataSource;
         widgetProvider: FcrUIWidgetProvider;
         sharedSecuritySharedDataSource: FcrUISecuritySharedDataSource;
+        abilityProvider: FcrUIAbilityProviderImpl;
     });
     get checkedStateMap(): FcrSecurityCheckedStateType;
     setCheckedStateMap(val: FcrSecurityCheckedStateType): void;

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

@@ -85,7 +85,7 @@ var _constant = require("../../utilities/constant");
 var _enums = require("./enums");
 var _logger = require("../../utilities/logger");
 var _ActionBarStore;
-var _initProto, _init_newMessageTooltipVisible, _init_totalWaitingRoomUser, _init_liveStreamingState, _init_currentMenuIs, _init_cloudRecordingState, _init_connectionSettingVisible, _init_folded, _init_boardOwnerUser, _init_hasScreenShare, _init_showArrow, _init_phoneMicEnabled, _init_chatTabIndex, _init_popoverOpened, _init_stateBarLeaveMeeting, _init_hasOfflineUserExistence, _setCheckedStateMapDecs, _pauseCloudRecordingDecs, _resumeCloudRecordingDecs, _stopCloudRecordingDecs, _showLockedRoomToastDecs, _toggleLayoutBarLockDecs, _showNewMessageTooltipDecs, _hideNewMessageTooltipDecs, _switchMenuDecs, _setPopoverOpenedDecs, _setStateBarLeaveMeetingDecs, _handleJoinWaitingRoomDecs, _toggleFoldDecs, _setShowArrowDecs, _setEnableWaitingRoomDecs, _kickOutWaitingRoomAllMemberDecs, _moveToMainRoomAllMemberDecs, _handleRemoteUsersJoinedDecs, _handleRemoteUsersLeftDecs, _handleLiveStreamingStateUpdatedDecs, _handleChatVisibleDecs, _handlerTraceScreenCaptureStateUpdateDecs, _operateWaitingRoomDecs, _handleCloudRecordingStateUpdatedDecs, _handleStreamsAddedOrUpdatedDecs, _setOutputLanguageDecs, _subscribeLanguageDecs, _subscribeExtraOriginLanguageDecs, _getOfflineUserExistenceStateDecs, _openWidgetDecs, _closeWidgetDecs, _ref;
+var _initProto, _init_newMessageTooltipVisible, _init_totalWaitingRoomUser, _init_liveStreamingState, _init_currentMenuIs, _init_cloudRecordingState, _init_connectionSettingVisible, _init_folded, _init_boardOwnerUser, _init_hasScreenShare, _init_showArrow, _init_phoneMicEnabled, _init_chatTabIndex, _init_popoverOpened, _init_stateBarLeaveMeeting, _init_hasOfflineUserExistence, _init_connectionState, _setCheckedStateMapDecs, _pauseCloudRecordingDecs, _resumeCloudRecordingDecs, _stopCloudRecordingDecs, _showLockedRoomToastDecs, _toggleLayoutBarLockDecs, _showNewMessageTooltipDecs, _hideNewMessageTooltipDecs, _switchMenuDecs, _setPopoverOpenedDecs, _setStateBarLeaveMeetingDecs, _handleJoinWaitingRoomDecs, _toggleFoldDecs, _setShowArrowDecs, _setEnableWaitingRoomDecs, _kickOutWaitingRoomAllMemberDecs, _moveToMainRoomAllMemberDecs, _handleRemoteUsersJoinedDecs, _handleRemoteUsersLeftDecs, _handleLiveStreamingStateUpdatedDecs, _handleChatVisibleDecs, _handlerTraceScreenCaptureStateUpdateDecs, _operateWaitingRoomDecs, _handleCloudRecordingStateUpdatedDecs, _handleStreamsAddedOrUpdatedDecs, _setOutputLanguageDecs, _subscribeLanguageDecs, _subscribeExtraOriginLanguageDecs, _getOfflineUserExistenceStateDecs, _openWidgetDecs, _closeWidgetDecs, _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; }
@@ -117,6 +117,7 @@ var _L = /*#__PURE__*/new WeakMap();
 var _M = /*#__PURE__*/new WeakMap();
 var _N = /*#__PURE__*/new WeakMap();
 var _O = /*#__PURE__*/new WeakMap();
+var _P = /*#__PURE__*/new WeakMap();
 _ref = (_setCheckedStateMapDecs = [_mobx.action, _mobx.action.bound], _pauseCloudRecordingDecs = [_decorator.bound, (0, _decorator.debounced)(500, {
   leading: true
 })], _resumeCloudRecordingDecs = [_decorator.bound, (0, _decorator.debounced)(500, {
@@ -182,6 +183,7 @@ var ActionBarStore = exports["default"] = /*#__PURE__*/function () {
     _classPrivateFieldInitSpec(this, _M, _init_popoverOpened(this, false));
     _classPrivateFieldInitSpec(this, _N, _init_stateBarLeaveMeeting(this, false));
     _classPrivateFieldInitSpec(this, _O, _init_hasOfflineUserExistence(this, true));
+    _classPrivateFieldInitSpec(this, _P, _init_connectionState(this, _fcrCore.FcrConnectionState.CONNECTED));
     this._roomProvider = args.roomProvider;
     this._roomControl = args.roomControl;
     this._deviceProvider = args.deviceProvider;
@@ -199,6 +201,7 @@ var ActionBarStore = exports["default"] = /*#__PURE__*/function () {
     this._sharedMemberDataSource = args.sharedMemberDataSource;
     this._widgetProvider = args.widgetProvider;
     this._sharedSecuritySharedDataSource = args.sharedSecuritySharedDataSource;
+    this._abilityProvider = args.abilityProvider;
     this._streamControl = args.roomControl.getStreamControl();
     this._userControl = this._roomControl.getUserControl();
     this._streamControl = this._roomControl.getStreamControl();
@@ -385,6 +388,14 @@ var ActionBarStore = exports["default"] = /*#__PURE__*/function () {
     set: function set(v) {
       _classPrivateFieldSet(_O, this, v);
     }
+  }, {
+    key: "connectionState",
+    get: function get() {
+      return _classPrivateFieldGet(_P, this);
+    },
+    set: function set(v) {
+      _classPrivateFieldSet(_P, this, v);
+    }
   }, {
     key: "checkedStateMap",
     get: function get() {
@@ -521,24 +532,24 @@ var ActionBarStore = exports["default"] = /*#__PURE__*/function () {
   }, {
     key: "hasStopScreenSharePermission",
     get: function get() {
-      var _this$_sharingOwnerUs;
-      return this.hasScreenShare && this.hasEnableStartScreenSharePermission && this._sharingOwnerUser && this.localUserId !== ((_this$_sharingOwnerUs = this._sharingOwnerUser) === null || _this$_sharingOwnerUs === void 0 ? void 0 : _this$_sharingOwnerUs.userId);
+      var _this$sharingOwnerUse;
+      return this.hasScreenShare && this.hasEnableStartScreenSharePermission && this.sharingOwnerUser && this.localUserId !== ((_this$sharingOwnerUse = this.sharingOwnerUser) === null || _this$sharingOwnerUse === void 0 ? void 0 : _this$sharingOwnerUse.userId);
     }
   }, {
     key: "sharingOwnerUser",
     get: function get() {
-      return this._sharingOwnerUser;
+      return this._screenShareProvider.screenSharingOwner;
     }
   }, {
     key: "hasEnableStartScreenSharePermission",
     get: function get() {
-      var _this$sharingOwnerUse;
-      return this._privilegeProvider.hasStopScreenSharePermission((_this$sharingOwnerUse = this.sharingOwnerUser) === null || _this$sharingOwnerUse === void 0 ? void 0 : _this$sharingOwnerUse.userRole);
+      var _this$sharingOwnerUse2;
+      return this._privilegeProvider.hasStopScreenSharePermission((_this$sharingOwnerUse2 = this.sharingOwnerUser) === null || _this$sharingOwnerUse2 === void 0 ? void 0 : _this$sharingOwnerUse2.userRole);
     }
   }, {
     key: "hasStartLiveStreamingPermission",
     get: function get() {
-      return this._privilegeProvider.hasStartLiveStreamingPermission();
+      return this._abilityProvider.isLiveSupported() && this._privilegeProvider.hasStartLiveStreamingPermission();
     }
   }, {
     key: "hasEnableStartAudioPermission",
@@ -644,7 +655,7 @@ var ActionBarStore = exports["default"] = /*#__PURE__*/function () {
   }, {
     key: "hasEnableInterpreterPermission",
     get: function get() {
-      return this._privilegeProvider.hasEnableInterpreterPermission();
+      return this._abilityProvider.isInterpreterSupported() && this._privilegeProvider.hasEnableInterpreterPermission();
     }
   }, {
     key: "hasDisableInterpreterPermission",
@@ -1096,6 +1107,12 @@ var ActionBarStore = exports["default"] = /*#__PURE__*/function () {
                 },
                 okText: (0, _i18n.transI18n)('fmt_waitingroom_mobile_setting_popup_button_admit_all'),
                 cancelText: (0, _i18n.transI18n)('fmt_waitingroom_mobile_setting_popup_button_cancel'),
+                cancelButtonProps: {
+                  block: true
+                },
+                okButtonProps: {
+                  block: true
+                },
                 alignCenter: true
               });
               _context.next = 8;
@@ -1177,11 +1194,11 @@ var ActionBarStore = exports["default"] = /*#__PURE__*/function () {
     value: function _interceptShareScreen() {
       var _this5 = this;
       if (this.hasScreenShare || this.boardOwnerUser && this.boardOwnerUser.userId !== this.localUserId) {
-        var _this$_sharingOwnerUs2;
+        var _this$sharingOwnerUse3;
         var confirmKey = this._dialogProvider.openConfirmDialog({
           title: (0, _i18n.transI18n)('fmt_share_tips_otherssharing'),
           content: (0, _i18n.transI18n)("fmt_share_tips_stopothersharing", {
-            reason1: ((_this$_sharingOwnerUs2 = this._sharingOwnerUser) === null || _this$_sharingOwnerUs2 === void 0 ? void 0 : _this$_sharingOwnerUs2.userName) || (0, _i18n.transI18n)('fmt_actionbar_screenshare_labels_others')
+            reason1: ((_this$sharingOwnerUse3 = this.sharingOwnerUser) === null || _this$sharingOwnerUse3 === void 0 ? void 0 : _this$sharingOwnerUse3.userName) || (0, _i18n.transI18n)('fmt_actionbar_screenshare_labels_others')
           }),
           okText: (0, _i18n.transI18n)('fmt_screenshare_continue_share'),
           closable: false,
@@ -1541,7 +1558,7 @@ var ActionBarStore = exports["default"] = /*#__PURE__*/function () {
   }]);
 }();
 _ActionBarStore = ActionBarStore;
-var _applyDecs$e = (0, _slicedToArray2["default"])(_applyDecs(_ActionBarStore, [[_mobx.observable, 1, "newMessageTooltipVisible"], [_mobx.observable, 1, "totalWaitingRoomUser"], [_mobx.observable, 1, "liveStreamingState"], [_mobx.observable, 1, "currentMenuIs"], [_mobx.observable, 1, "cloudRecordingState"], [_mobx.observable, 1, "connectionSettingVisible"], [_mobx.observable, 1, "folded"], [_mobx.observable, 1, "boardOwnerUser"], [_mobx.observable, 1, "hasScreenShare"], [_mobx.observable, 1, "showArrow"], [_mobx.observable, 1, "phoneMicEnabled"], [_mobx.observable, 1, "chatTabIndex"], [_mobx.observable, 1, "popoverOpened"], [_mobx.observable, 1, "stateBarLeaveMeeting"], [_mobx.observable, 1, "hasOfflineUserExistence"], [_mobx.computed, 3, "checkedStateMap"], [_setCheckedStateMapDecs, 18, "setCheckedStateMap"], [_mobx.computed, 3, "registeredWidgetConfigs"], [_mobx.computed, 3, "users"], [_mobx.computed, 3, "localUserRole"], [_mobx.computed, 3, "localUserId"], [_mobx.computed, 3, "totalUser"], [_mobx.computed, 3, "isPstnUser"], [_mobx.computed, 3, "asideLayout"], [_mobx.computed, 3, "chatRenderAt"], [_mobx.computed, 3, "participantsRenderAt"], [_mobx.computed, 3, "participantVisible"], [_mobx.computed, 3, "chatVisible"], [_mobx.computed, 3, "remoteUsers"], [_mobx.computed, 3, "hasStartScreenSharePermission"], [_mobx.computed, 3, "hasStopScreenSharePermission"], [_mobx.computed, 3, "sharingOwnerUser"], [_mobx.computed, 3, "hasEnableStartScreenSharePermission"], [_mobx.computed, 3, "hasStartLiveStreamingPermission"], [_mobx.computed, 3, "hasEnableStartAudioPermission"], [_mobx.computed, 3, "hasEnableChangeNamePermission"], [_mobx.computed, 3, "hasEnableStartVideoPermission"], [_mobx.computed, 3, "hasLockRoomPermission"], [_mobx.computed, 3, "hasEnableJoinWithAudioPermission"], [_mobx.computed, 3, "hasWaitingRoomPermission"], [_mobx.computed, 3, "hasWatermarkDisablePermission"], [_mobx.computed, 3, "hasEnableStartSharePermission"], [_mobx.computed, 3, "hasAllowWriteBoardPermission"], [_mobx.computed, 3, "hasCloseWriteBoardPermission"], [_mobx.computed, 3, "hasAllowScreenShareAndBoardPermission"], [_mobx.computed, 3, "hasAllowChatPermission"], [_mobx.computed, 3, "hasStartCloudRecordingPermission"], [_mobx.computed, 3, "hasAssignHostBeforeLeavingPermission"], [_mobx.computed, 3, "hasEndRoomPermission"], [_mobx.computed, 3, "isScreenShareAndBoardEnabled"], [_mobx.computed, 3, "isBoardWriteEnabled"], [_mobx.computed, 3, "isWaterMarkEnabled"], [_mobx.computed, 3, "isMulti"], [_mobx.computed, 3, "hasEnableInterpreterPermission"], [_mobx.computed, 3, "hasDisableInterpreterPermission"], [_mobx.computed, 3, "microphoneEnabled"], [_mobx.computed, 3, "allNewMessage"], [_mobx.computed, 3, "isMainRoom"], [_mobx.computed, 3, "hasAllowChangeNamePromission"], [_mobx.computed, 3, "hasDisallowChangeNamePromission"], [_mobx.computed, 3, "newMessageCount"], [_pauseCloudRecordingDecs, 2, "pauseCloudRecording"], [_resumeCloudRecordingDecs, 2, "resumeCloudRecording"], [_stopCloudRecordingDecs, 2, "stopCloudRecording"], [_decorator.bound, 2, "startCloudRecording"], [_showLockedRoomToastDecs, 18, "showLockedRoomToast"], [_toggleLayoutBarLockDecs, 18, "toggleLayoutBarLock"], [_showNewMessageTooltipDecs, 18, "showNewMessageTooltip"], [_hideNewMessageTooltipDecs, 18, "hideNewMessageTooltip"], [_switchMenuDecs, 18, "switchMenu"], [_mobx.computed, 3, "isLocked"], [_decorator.bound, 2, "isWaitingRoomEnabled"], [_decorator.bound, 2, "isAllowJoinWithAudioEnabled"], [_decorator.bound, 2, "enableMicrophone"], [_decorator.bound, 2, "setAllowWriteBoard"], [_decorator.bound, 2, "setAllowScreenShare"], [_setPopoverOpenedDecs, 18, "setPopoverOpened"], [_setStateBarLeaveMeetingDecs, 18, "setStateBarLeaveMeeting"], [_decorator.bound, 2, "getRoomType"], [_decorator.bound, 2, "allowJoinWithMuteAudio"], [_decorator.bound, 2, "setAllowJoinWithMuteAudio"], [_decorator.bound, 2, "isLockRoomEnabled"], [_decorator.bound, 2, "setLockRoomEnabled"], [_decorator.bound, 2, "setAllowShareScreen"], [_decorator.bound, 2, "allowShareScreen"], [_decorator.bound, 2, "allowWriteBoard"], [_decorator.bound, 2, "allowChat"], [_decorator.bound, 2, "setAllowChat"], [_decorator.bound, 2, "allowUnmuteSelfAudio"], [_decorator.bound, 2, "setAllowUnmuteSelfAudio"], [_decorator.bound, 2, "allowUnmuteSelfVideo"], [_decorator.bound, 2, "setAllowUnmuteSelfVideo"], [_decorator.bound, 2, "allowChangeName"], [_decorator.bound, 2, "toggleChat"], [_decorator.bound, 2, "openChat"], [_decorator.bound, 2, "closeChat"], [_decorator.bound, 2, "toggleParticipants"], [_decorator.bound, 2, "openParticipants"], [_decorator.bound, 2, "closeParticipants"], [_decorator.bound, 2, "openDeviceSettingDialog"], [_decorator.bound, 2, "startScreenShare"], [_decorator.bound, 2, "openInterpreterDialog"], [_decorator.bound, 2, "openWhiteboard"], [_decorator.bound, 2, "closeWhiteboard"], [_decorator.bound, 2, "closeShareScreen"], [_decorator.bound, 2, "openLiveStreamingDialog"], [_decorator.bound, 2, "toggleConnection"], [_decorator.bound, 2, "openConnection"], [_decorator.bound, 2, "closeConnection"], [_handleJoinWaitingRoomDecs, 18, "_handleJoinWaitingRoom"], [_toggleFoldDecs, 18, "toggleFold"], [_setShowArrowDecs, 18, "setShowArrow"], [_setEnableWaitingRoomDecs, 18, "setEnableWaitingRoom"], [_kickOutWaitingRoomAllMemberDecs, 18, "kickOutWaitingRoomAllMember"], [_moveToMainRoomAllMemberDecs, 18, "moveToMainRoomAllMember"], [_decorator.bound, 2, "_interceptShareScreen"], [_decorator.bound, 2, "_interceptShareBoard"], [_handleRemoteUsersJoinedDecs, 18, "_handleRemoteUsersJoined"], [_handleRemoteUsersLeftDecs, 18, "_handleRemoteUsersLeft"], [_handleLiveStreamingStateUpdatedDecs, 18, "_handleLiveStreamingStateUpdated"], [_handleChatVisibleDecs, 18, "_handleChatVisible"], [_handlerTraceScreenCaptureStateUpdateDecs, 18, "_handlerTraceScreenCaptureStateUpdate"], [_decorator.bound, 2, "setAllowWaterMark"], [_decorator.bound, 2, "setWaterMarkLineType"], [_decorator.bound, 2, "setAlllowChangeName"], [_decorator.bound, 2, "_onEvent"], [_operateWaitingRoomDecs, 18, "_operateWaitingRoom"], [_handleCloudRecordingStateUpdatedDecs, 18, "_handleCloudRecordingStateUpdated"], [_handleStreamsAddedOrUpdatedDecs, 18, "_handleStreamsAddedOrUpdated"], [_setOutputLanguageDecs, 18, "setOutputLanguage"], [_subscribeLanguageDecs, 18, "subscribeLanguage"], [_subscribeExtraOriginLanguageDecs, 18, "subscribeExtraOriginLanguage"], [_getOfflineUserExistenceStateDecs, 18, "getOfflineUserExistenceState"], [_openWidgetDecs, 18, "openWidget"], [_closeWidgetDecs, 18, "closeWidget"]], []).e, 16);
+var _applyDecs$e = (0, _slicedToArray2["default"])(_applyDecs(_ActionBarStore, [[_mobx.observable, 1, "newMessageTooltipVisible"], [_mobx.observable, 1, "totalWaitingRoomUser"], [_mobx.observable, 1, "liveStreamingState"], [_mobx.observable, 1, "currentMenuIs"], [_mobx.observable, 1, "cloudRecordingState"], [_mobx.observable, 1, "connectionSettingVisible"], [_mobx.observable, 1, "folded"], [_mobx.observable, 1, "boardOwnerUser"], [_mobx.observable, 1, "hasScreenShare"], [_mobx.observable, 1, "showArrow"], [_mobx.observable, 1, "phoneMicEnabled"], [_mobx.observable, 1, "chatTabIndex"], [_mobx.observable, 1, "popoverOpened"], [_mobx.observable, 1, "stateBarLeaveMeeting"], [_mobx.observable, 1, "hasOfflineUserExistence"], [_mobx.observable, 1, "connectionState"], [_mobx.computed, 3, "checkedStateMap"], [_setCheckedStateMapDecs, 18, "setCheckedStateMap"], [_mobx.computed, 3, "registeredWidgetConfigs"], [_mobx.computed, 3, "asideLayout"], [_mobx.computed, 3, "chatRenderAt"], [_mobx.computed, 3, "participantsRenderAt"], [_mobx.computed, 3, "participantVisible"], [_mobx.computed, 3, "chatVisible"], [_mobx.computed, 3, "hasStartScreenSharePermission"], [_mobx.computed, 3, "hasStopScreenSharePermission"], [_mobx.computed, 3, "sharingOwnerUser"], [_mobx.computed, 3, "hasEnableStartScreenSharePermission"], [_mobx.computed, 3, "hasStartLiveStreamingPermission"], [_mobx.computed, 3, "hasEnableStartAudioPermission"], [_mobx.computed, 3, "hasEnableChangeNamePermission"], [_mobx.computed, 3, "hasEnableStartVideoPermission"], [_mobx.computed, 3, "hasLockRoomPermission"], [_mobx.computed, 3, "hasEnableJoinWithAudioPermission"], [_mobx.computed, 3, "hasWaitingRoomPermission"], [_mobx.computed, 3, "hasWatermarkDisablePermission"], [_mobx.computed, 3, "hasEnableStartSharePermission"], [_mobx.computed, 3, "hasAllowWriteBoardPermission"], [_mobx.computed, 3, "hasCloseWriteBoardPermission"], [_mobx.computed, 3, "hasAllowScreenShareAndBoardPermission"], [_mobx.computed, 3, "hasAllowChatPermission"], [_mobx.computed, 3, "hasStartCloudRecordingPermission"], [_mobx.computed, 3, "hasAssignHostBeforeLeavingPermission"], [_mobx.computed, 3, "hasEndRoomPermission"], [_mobx.computed, 3, "isScreenShareAndBoardEnabled"], [_mobx.computed, 3, "isBoardWriteEnabled"], [_mobx.computed, 3, "isWaterMarkEnabled"], [_mobx.computed, 3, "isMulti"], [_mobx.computed, 3, "hasEnableInterpreterPermission"], [_mobx.computed, 3, "hasDisableInterpreterPermission"], [_mobx.computed, 3, "microphoneEnabled"], [_mobx.computed, 3, "allNewMessage"], [_mobx.computed, 3, "isMainRoom"], [_mobx.computed, 3, "hasAllowChangeNamePromission"], [_mobx.computed, 3, "hasDisallowChangeNamePromission"], [_mobx.computed, 3, "newMessageCount"], [_pauseCloudRecordingDecs, 2, "pauseCloudRecording"], [_resumeCloudRecordingDecs, 2, "resumeCloudRecording"], [_stopCloudRecordingDecs, 2, "stopCloudRecording"], [_decorator.bound, 2, "startCloudRecording"], [_showLockedRoomToastDecs, 18, "showLockedRoomToast"], [_toggleLayoutBarLockDecs, 18, "toggleLayoutBarLock"], [_showNewMessageTooltipDecs, 18, "showNewMessageTooltip"], [_hideNewMessageTooltipDecs, 18, "hideNewMessageTooltip"], [_switchMenuDecs, 18, "switchMenu"], [_mobx.computed, 3, "isLocked"], [_decorator.bound, 2, "isWaitingRoomEnabled"], [_decorator.bound, 2, "isAllowJoinWithAudioEnabled"], [_decorator.bound, 2, "enableMicrophone"], [_decorator.bound, 2, "setAllowWriteBoard"], [_decorator.bound, 2, "setAllowScreenShare"], [_setPopoverOpenedDecs, 18, "setPopoverOpened"], [_setStateBarLeaveMeetingDecs, 18, "setStateBarLeaveMeeting"], [_decorator.bound, 2, "getRoomType"], [_decorator.bound, 2, "allowJoinWithMuteAudio"], [_decorator.bound, 2, "setAllowJoinWithMuteAudio"], [_decorator.bound, 2, "isLockRoomEnabled"], [_decorator.bound, 2, "setLockRoomEnabled"], [_decorator.bound, 2, "setAllowShareScreen"], [_decorator.bound, 2, "allowShareScreen"], [_decorator.bound, 2, "allowWriteBoard"], [_decorator.bound, 2, "allowChat"], [_decorator.bound, 2, "setAllowChat"], [_decorator.bound, 2, "allowUnmuteSelfAudio"], [_decorator.bound, 2, "setAllowUnmuteSelfAudio"], [_decorator.bound, 2, "allowUnmuteSelfVideo"], [_decorator.bound, 2, "setAllowUnmuteSelfVideo"], [_decorator.bound, 2, "allowChangeName"], [_decorator.bound, 2, "toggleChat"], [_decorator.bound, 2, "openChat"], [_decorator.bound, 2, "closeChat"], [_decorator.bound, 2, "toggleParticipants"], [_decorator.bound, 2, "openParticipants"], [_decorator.bound, 2, "closeParticipants"], [_decorator.bound, 2, "openDeviceSettingDialog"], [_decorator.bound, 2, "startScreenShare"], [_decorator.bound, 2, "openInterpreterDialog"], [_decorator.bound, 2, "openWhiteboard"], [_decorator.bound, 2, "closeWhiteboard"], [_decorator.bound, 2, "closeShareScreen"], [_decorator.bound, 2, "openLiveStreamingDialog"], [_decorator.bound, 2, "toggleConnection"], [_decorator.bound, 2, "openConnection"], [_decorator.bound, 2, "closeConnection"], [_handleJoinWaitingRoomDecs, 18, "_handleJoinWaitingRoom"], [_toggleFoldDecs, 18, "toggleFold"], [_setShowArrowDecs, 18, "setShowArrow"], [_setEnableWaitingRoomDecs, 18, "setEnableWaitingRoom"], [_kickOutWaitingRoomAllMemberDecs, 18, "kickOutWaitingRoomAllMember"], [_moveToMainRoomAllMemberDecs, 18, "moveToMainRoomAllMember"], [_decorator.bound, 2, "_interceptShareScreen"], [_decorator.bound, 2, "_interceptShareBoard"], [_handleRemoteUsersJoinedDecs, 18, "_handleRemoteUsersJoined"], [_handleRemoteUsersLeftDecs, 18, "_handleRemoteUsersLeft"], [_handleLiveStreamingStateUpdatedDecs, 18, "_handleLiveStreamingStateUpdated"], [_handleChatVisibleDecs, 18, "_handleChatVisible"], [_handlerTraceScreenCaptureStateUpdateDecs, 18, "_handlerTraceScreenCaptureStateUpdate"], [_decorator.bound, 2, "setAllowWaterMark"], [_decorator.bound, 2, "setWaterMarkLineType"], [_decorator.bound, 2, "setAlllowChangeName"], [_decorator.bound, 2, "_onEvent"], [_operateWaitingRoomDecs, 18, "_operateWaitingRoom"], [_handleCloudRecordingStateUpdatedDecs, 18, "_handleCloudRecordingStateUpdated"], [_handleStreamsAddedOrUpdatedDecs, 18, "_handleStreamsAddedOrUpdated"], [_setOutputLanguageDecs, 18, "setOutputLanguage"], [_subscribeLanguageDecs, 18, "subscribeLanguage"], [_subscribeExtraOriginLanguageDecs, 18, "subscribeExtraOriginLanguage"], [_getOfflineUserExistenceStateDecs, 18, "getOfflineUserExistenceState"], [_openWidgetDecs, 18, "openWidget"], [_closeWidgetDecs, 18, "closeWidget"]], []).e, 17);
 _init_newMessageTooltipVisible = _applyDecs$e[0];
 _init_totalWaitingRoomUser = _applyDecs$e[1];
 _init_liveStreamingState = _applyDecs$e[2];
@@ -1557,5 +1574,6 @@ _init_chatTabIndex = _applyDecs$e[11];
 _init_popoverOpened = _applyDecs$e[12];
 _init_stateBarLeaveMeeting = _applyDecs$e[13];
 _init_hasOfflineUserExistence = _applyDecs$e[14];
-_initProto = _applyDecs$e[15];
+_init_connectionState = _applyDecs$e[15];
+_initProto = _applyDecs$e[16];
 var ActionBarContext = exports.ActionBarContext = /*#__PURE__*/(0, _react.createContext)(null);

package/lib/modules/action-bar/types.d.ts

@@ -48,6 +48,7 @@ export interface AssignHostProps {
     remoteUsers: FcrUserInfo[];
     assignHost: (user: FcrUserInfo) => void;
     setPopoverOpened: React.Dispatch<React.SetStateAction<boolean>>;
+    setCanAssign: (value: boolean) => void;
     handleKeepConnect?: () => void;
     loading?: boolean;
 }

package/lib/modules/chat/chat-room-store.js

@@ -464,7 +464,7 @@ var ChatRoomStore = exports.ChatRoomStore = /*#__PURE__*/function () {
         nickName: userName,
         uid: userId,
         isPrivate: isPrivate,
-        target: target || (isPrivate ? 'Me' : 'All')
+        target: target || (isPrivate ? (0, _i18n.transI18n)('fmt_participant_label_Me') : 'All')
       }, type === _type.FcrChatRoomMessageType.Text ? {
         msg: message.content
       } : {

package/lib/modules/chat/components/chat-bar/index.d.ts

@@ -1,3 +1,3 @@
-import './index.css';
 import { MessageBarProps } from '../../types';
+import './index.css';
 export declare const MessageBar: ({ styles, users }: React.PropsWithChildren<MessageBarProps>) => import("react/jsx-runtime").JSX.Element;

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

@@ -29,17 +29,17 @@ var _textBubble = require("agora-ui-foundation/lib/components/text-bubble");
 var _iconText = require("agora-ui-foundation/lib/components/icon-text");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _react = require("react");
-require("./index.css");
 var _chatSelect = require("../chat-select");
 var _store = require("../../store");
 var _mobxReact = require("mobx-react");
 var _i18n = require("agora-ui-foundation/lib/i18n");
 var _types = require("../../types");
+require("./index.css");
 var _jsxRuntime = require("react/jsx-runtime");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var MessageBar = exports.MessageBar = (0, _mobxReact.observer)(function (_ref) {
-  var _users$filter, _privateTargetUser$us, _privateTargetUser$us2;
+  var _users$filter, _privateTargetUser$us;
   var styles = _ref.styles,
     _ref$users = _ref.users,
     users = _ref$users === void 0 ? [] : _ref$users;
@@ -77,6 +77,7 @@ var MessageBar = exports.MessageBar = (0, _mobxReact.observer)(function (_ref) {
     chatLevel = _ref2.chatLevel;
   var selectedUserId = (_privateTargetUser$us = privateTargetUser === null || privateTargetUser === void 0 ? void 0 : privateTargetUser.userId) !== null && _privateTargetUser$us !== void 0 ? _privateTargetUser$us : _types.USER_ALL;
   var chatSelectNoTitle = localIsManager || chatLevel === 'everyone' || chatLevel === 'no_one';
+  var privateTargetUserName = (privateTargetUser === null || privateTargetUser === void 0 ? void 0 : privateTargetUser.userName) === 'All' ? t('fmt_chat_option_all') : privateTargetUser === null || privateTargetUser === void 0 ? void 0 : privateTargetUser.userName;
   var title = chatSelectNoTitle ? undefined : /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
     className: "assign-host-title",
     children: chatLevel === 'public' ? t('fmt_chat_option_onlypublic') : t('fmt_chat_option_onlyprivate')
@@ -91,6 +92,7 @@ var MessageBar = exports.MessageBar = (0, _mobxReact.observer)(function (_ref) {
       className: "fcr-tip-".concat(selectedUserId === _types.USER_ALL ? t('fmt_chat_option_all') : t('fmt_chats_label_privatechat')),
       children: tips
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_popover.FcrPopover, {
+      showArrow: false,
       overlayInnerStyle: {
         boxShadow: 'none',
         border: 'none',
@@ -122,7 +124,7 @@ var MessageBar = exports.MessageBar = (0, _mobxReact.observer)(function (_ref) {
             }
             // TODO: 当选中的 uid 为 None 时，需要提示选择管理员
             ,
-            txt: privateTargetUser.userId === _types.USER_NONE && !localIsManager ? t('fmt_chat_tips_selecthost') : (_privateTargetUser$us2 = privateTargetUser === null || privateTargetUser === void 0 ? void 0 : privateTargetUser.userName) !== null && _privateTargetUser$us2 !== void 0 ? _privateTargetUser$us2 : _types.USER_ALL,
+            txt: privateTargetUser.userId === _types.USER_NONE && !localIsManager ? t('fmt_chat_tips_selecthost') : privateTargetUserName !== null && privateTargetUserName !== void 0 ? privateTargetUserName : t('fmt_chat_option_all'),
             icon: _type.FcrIconType.FCR_DROPDOWN,
             colors: {
               iconPrimary: 'var(--fcr_web_ui_scene_mainicon1)',

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

@@ -76,7 +76,7 @@ var _default = exports["default"] = (0, _mobxReact.observer)(function (props) {
       (0, _jsxRuntime.jsx)(_avatar.FcrAvatar, {
         isShowFirstLetter: true,
         size: 32,
-        nickName: currentUser.userName,
+        nickName: currentUser.userName === _types.USER_ALL ? t('fmt_chat_option_all') : currentUser.userName,
         textSize: 14
       })
     }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {

package/lib/modules/chat/components/message-list/index.js

@@ -186,7 +186,6 @@ var MessageList = exports.MessageList = (0, _mobxReact.observer)(function (_ref)
   var rowRenderer = function rowRenderer(messageList) {
     return function (_ref3) {
       var index = _ref3.index,
-        key = _ref3.key,
         parent = _ref3.parent,
         style = _ref3.style;
       var datum = messageList[index % messageList.length];
@@ -199,7 +198,7 @@ var MessageList = exports.MessageList = (0, _mobxReact.observer)(function (_ref)
         localUserId: localUserId,
         parent: parent,
         scrollToIdx: scrollToIdx
-      }, key);
+      }, datum.id);
     };
   };
   var scrollToIdx = (0, _react.useCallback)(function (idx) {

package/lib/modules/chat/components/message-list/message-item/index.d.ts

@@ -4,7 +4,6 @@ type IMessageItem = {
     messageItem: MsgListType;
     index: number;
     localUserId: string | undefined;
-    key: string;
     parent: MeasuredCellParent;
     style: React.CSSProperties | undefined;
     multiSelectActive: boolean | undefined;

package/lib/modules/chat/components/message-list/message-item/index.js

@@ -22,7 +22,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
-require("core-js/modules/es.array.concat.js");
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _messageLabel = require("agora-ui-foundation/lib/components/message-label");
@@ -64,7 +63,6 @@ var _default = exports["default"] = (0, _mobxReact.observer)(function (props) {
   var datum = props.messageItem,
     index = props.index,
     localUserId = props.localUserId,
-    key = props.key,
     parent = props.parent,
     style = props.style,
     multiSelectActive = props.multiSelectActive,
@@ -124,14 +122,12 @@ var _default = exports["default"] = (0, _mobxReact.observer)(function (props) {
   }, []);
   var handleCopyMsg = /*#__PURE__*/function () {
     var _ref2 = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee(msg, time, publisherNickName, targetNickname) {
-      var msgHandled;
       return _regenerator["default"].wrap(function _callee$(_context) {
         while (1) switch (_context.prev = _context.next) {
           case 0:
-            msgHandled = (0, _i18n.getLanguage)() === 'zh' ? "".concat(publisherNickName, "\u5BF9").concat(targetNickname, "\u8BF4(").concat(time, ")\n").concat(msg) : "".concat(publisherNickName, " said to ").concat(targetNickname, "(").concat(time, ")\n").concat(msg);
-            _context.next = 3;
-            return (0, _copyText.copyText)(msgHandled);
-          case 3:
+            _context.next = 2;
+            return (0, _copyText.copyText)(msg);
+          case 2:
             handleToast({
               id: 'copy-multi-msg',
               toastProps: {
@@ -140,7 +136,7 @@ var _default = exports["default"] = (0, _mobxReact.observer)(function (props) {
                 size: 'small'
               }
             });
-          case 4:
+          case 3:
           case "end":
             return _context.stop();
         }
@@ -194,7 +190,10 @@ var _default = exports["default"] = (0, _mobxReact.observer)(function (props) {
           classnames: "fcr-line-system-message",
           txt: "".concat((0, _util.handleChatLevelChangedSystemMsg)(t, chatLevel, publisherRole, publisherNickName, publisherIsSelf)),
           marginBottom: 15
-        }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+        }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: (0, _classnames["default"])('fcr-message-publisher', {
+            'fcr-message-publisher-content': !publisherIsSelf
+          }),
           children: [needLabel && /*#__PURE__*/(0, _jsxRuntime.jsx)(_messageLabel.MessageLabel, {
             handleClickPrivateChat: function handleClickPrivateChat() {
               permitPrivateChat(publisherUid);
@@ -305,5 +304,5 @@ var _default = exports["default"] = (0, _mobxReact.observer)(function (props) {
         })
       });
     }
-  }, key);
+  });
 });

package/lib/modules/chat/index.css

@@ -12,10 +12,34 @@
   flex-direction: row-reverse;
 }
 
+.fcr-message-publisher {
+  width: 100%;
+}
+
+.fcr-message-publisher-content .fcr-message-label__content {
+  justify-content: flex-start;
+}
+
+.fcr-message-publisher .fcr-message-label {
+  width: 100%;
+}
+
 .fcr-message-label .fcr-avatar {
   cursor: pointer;
 }
 
+.fcr-message-label .fcr-message-label__content {
+  width: 100%;
+}
+
+.fcr-message-label span.fcr-message-label__marginR {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  flex: 1;
+  text-align: right;
+}
+
 .chat-tabs-container {
   width: 100%;
   display: flex;

package/lib/modules/chat/view.js

@@ -125,12 +125,22 @@ var Chat = exports.Chat = (0, _mobxReact.observer)(function (_ref) {
   }, [chatLevel, remoteUsers, activeTabIndex, hasChatSendPublicPermission, hasChatSendPrivatePermission]);
   var handleMultiCopyMsg = /*#__PURE__*/function () {
     var _ref3 = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee() {
-      var msgHandled, msgIndex;
+      var msgHandled, msgIndex, msg;
       return _regenerator["default"].wrap(function _callee$(_context) {
         while (1) switch (_context.prev = _context.next) {
           case 0:
             msgHandled = '';
             msgIndex = Array.from(copyMap.keys()).sort();
+            if (!(msgIndex.length === 1)) {
+              _context.next = 7;
+              break;
+            }
+            msg = messageList[msgIndex[0]].msg;
+            _context.next = 6;
+            return (0, _copyText.copyText)(msg);
+          case 6:
+            return _context.abrupt("return");
+          case 7:
             msgIndex.forEach(function (msgIdx, arrIdx) {
               var _messageList$msgIndex, _messageList$msgIndex2, _messageList$msgIndex3;
               var _messageList$msgIdx = messageList[msgIdx],
@@ -150,9 +160,9 @@ var Chat = exports.Chat = (0, _mobxReact.observer)(function (_ref) {
                 msgHandled += "".concat(msg, "\n");
               }
             });
-            _context.next = 5;
+            _context.next = 10;
             return (0, _copyText.copyText)(msgHandled);
-          case 5:
+          case 10:
           case "end":
             return _context.stop();
         }

package/lib/modules/components/device-control/components/carmera/index.js

@@ -37,9 +37,7 @@ var CameraControl = exports.CameraControl = (0, _mobxReact.observer)(function (p
     iconSecondary: 'var(--fcr_ui_scene_ramp_red6)'
   };
   var icon = cameraEnabled ? _type.FcrIconType.FCR_CAMERA : _type.FcrIconType.FCR_CAMERAOFF;
-  var title = (0, _react.useMemo)(function () {
-    return cameraEnabled ? transI18n('fmt_toolbar_label_camera') : transI18n('fmt_toolbar_options_enablecamera');
-  }, [cameraEnabled]);
+  var title = cameraEnabled ? transI18n('fmt_toolbar_label_camera') : transI18n('fmt_toolbar_options_enablecamera');
   var tooltip = title;
   var noCam = cameraList.length === 0;
   var noCamColor = {
@@ -54,7 +52,7 @@ var CameraControl = exports.CameraControl = (0, _mobxReact.observer)(function (p
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: "device-control-item-wrapper",
       children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-        className: "device-control",
+        className: "device-control ".concat(popoverOpened ? 'active' : ''),
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
           className: "device-control-inner",
           children: !noCam ? /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
@@ -83,6 +81,7 @@ var CameraControl = exports.CameraControl = (0, _mobxReact.observer)(function (p
             })]
           })
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_popover.FcrPopover, {
+          showArrow: false,
           visible: popoverOpened,
           onVisibleChange: handlePopoverVisibleChanged,
           overlayClassName: "device-control--device-popover",
@@ -95,7 +94,7 @@ var CameraControl = exports.CameraControl = (0, _mobxReact.observer)(function (p
             onClick: function onClick(e) {
               e.stopPropagation();
             },
-            className: "device-control-extra",
+            className: "device-control-extra ".concat(popoverOpened ? 'active' : ''),
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
               type: _type.FcrIconType.FCR_DROPUP4,
               colors: {

package/lib/modules/components/device-control/components/microphone/index.js

@@ -62,9 +62,7 @@ var MicrophoneControl = exports.MicrophoneControl = (0, _mobxReact.observer)(fun
     handlePopoverVisibleChanged = _useDeviceTooltipVisi.handlePopoverVisibleChanged,
     handleTooltipVisibleChanged = _useDeviceTooltipVisi.handleTooltipVisibleChanged;
   var transI18n = (0, _i18n.useI18n)();
-  var title = (0, _react.useMemo)(function () {
-    return microphoneEnabled ? transI18n('fmt_device_label_audio_mute') : transI18n('fmt_device_label_audio_unmute');
-  }, [microphoneEnabled]);
+  var title = microphoneEnabled ? transI18n('fmt_device_label_audio_mute') : transI18n('fmt_device_label_audio_unmute');
   var tooltip = title;
   var noMic = microphoneList.length === 0;
   var noMicColor = {
@@ -79,7 +77,7 @@ var MicrophoneControl = exports.MicrophoneControl = (0, _mobxReact.observer)(fun
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: "device-control-item-wrapper",
       children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-        className: "device-control",
+        className: "device-control ".concat(popoverOpened ? 'active' : ''),
         children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
           className: "device-control-inner",
           children: [connectType === _type2.FcrUIConnectType.NONE && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
@@ -128,6 +126,7 @@ var MicrophoneControl = exports.MicrophoneControl = (0, _mobxReact.observer)(fun
             })]
           })]
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_popover.FcrPopover, {
+          showArrow: false,
           overlayClassName: "device-control--device-popover",
           visible: popoverOpened,
           onVisibleChange: handlePopoverVisibleChanged,
@@ -154,7 +153,7 @@ var MicrophoneControl = exports.MicrophoneControl = (0, _mobxReact.observer)(fun
             onClick: function onClick(e) {
               e.stopPropagation();
             },
-            className: "device-control-extra",
+            className: "device-control-extra ".concat(popoverOpened ? 'active' : ''),
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
               type: _type.FcrIconType.FCR_DROPUP4,
               colors: {

package/lib/modules/components/device-control/index.css

@@ -4,7 +4,8 @@
   min-width: 71px;
   cursor: pointer;
 }
-.device-control:hover {
+.device-control:hover,
+.device-control.active {
   background: var(--fcr_web_ui_scene_hover2);
 }
 .device-control-inner {
@@ -45,11 +46,13 @@
   justify-content: center;
 }
 
-.device-control-extra:hover {
+.device-control-extra:hover,
+.device-control-extra.active {
   background: var(--fcr_web_ui_scene_hover2);
 }
 
-.device-control-extra:hover svg {
+.device-control-extra:hover svg,
+.device-control-extra.active svg {
   transform: translateY(-3px);
   transition: all 0.2s;
 }