fcr-ui-scene 3.5.1 → 3.6.0

package/lib/modules/components/leave-meeting/components/assign-host.js

@@ -16,9 +16,11 @@ require("./index.css");
 var _chatSelect = require("../../../chat/components/chat-select");
 var _i18n = require("agora-ui-foundation/lib/i18n");
 var _button = require("agora-ui-foundation/lib/components/button");
+var _icon = require("agora-ui-foundation/lib/components/icon");
+var _type = require("agora-ui-foundation/lib/components/icon/type");
 var _jsxRuntime = require("react/jsx-runtime");
 var AssignHost = exports.AssignHost = (0, _mobxReact.observer)(function (props) {
-  var _remoteUsers$selected;
+  var _remoteUsers$selected2;
   var remoteUsers = props.remoteUsers,
     assignHost = props.assignHost,
     loading = props.loading;
@@ -26,12 +28,18 @@ var AssignHost = exports.AssignHost = (0, _mobxReact.observer)(function (props)
     _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
     selected = _useState2[0],
     setSelected = _useState2[1];
+  var selectedUidRef = (0, _react.useRef)(remoteUsers[selected].userId);
   var t = (0, _i18n.useI18n)();
   (0, _react.useEffect)(function () {
+    var _remoteUsers$selected;
+    var isSelectedUserLeft = selectedUidRef.current !== ((_remoteUsers$selected = remoteUsers[selected]) === null || _remoteUsers$selected === void 0 ? void 0 : _remoteUsers$selected.userId);
     if (remoteUsers.length === 0) {
       setSelected(0);
     } else if (selected >= remoteUsers.length) {
       setSelected(remoteUsers.length - 1);
+    } else if (isSelectedUserLeft) {
+      // 勾选的用户离开之后勾选第一个用户
+      setSelected(0);
     }
   }, [remoteUsers, selected]);
   var handleLeave = /*#__PURE__*/function () {
@@ -60,11 +68,24 @@ var AssignHost = exports.AssignHost = (0, _mobxReact.observer)(function (props)
       return _ref.apply(this, arguments);
     };
   }();
+  var onClose = function onClose() {
+    props.setCanAssign(false);
+  };
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_chatSelect.ChatSelect, {
     type: "assign-host",
-    title: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    title: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: "assign-host-title",
-      children: t('fmt_toolbar_button_assignnewhost')
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        onClick: onClose,
+        className: 'fcr-assign-host-close',
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+          type: _type.FcrIconType.FCR_CLOSE,
+          colors: {
+            iconPrimary: 'var(--fcr_ui_scene_icontext1)'
+          },
+          size: 14
+        })
+      }), t('fmt_toolbar_button_assignnewhost')]
     }),
     bottomBar: /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.FcrButton, {
       styleType: "danger",
@@ -77,8 +98,9 @@ var AssignHost = exports.AssignHost = (0, _mobxReact.observer)(function (props)
       children: t('fmt_toolbar_button_assignleave')
     }),
     candidateUsers: remoteUsers,
-    selectedUid: (_remoteUsers$selected = remoteUsers[selected]) === null || _remoteUsers$selected === void 0 ? void 0 : _remoteUsers$selected.userId,
+    selectedUid: (_remoteUsers$selected2 = remoteUsers[selected]) === null || _remoteUsers$selected2 === void 0 ? void 0 : _remoteUsers$selected2.userId,
     onSelect: function onSelect(user) {
+      selectedUidRef.current = user.userId;
       setSelected(remoteUsers.indexOf(user));
     }
   });

package/lib/modules/components/leave-meeting/components/index.css

@@ -123,3 +123,38 @@
   border-radius: var(--fcr_cornerradius_l);
   box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
 }
+
+.fcr-assign-host-close {
+  border-radius: var(--fcr_cornerradius_round);
+  width: 22px;
+  height: 22px;
+  cursor: pointer;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: absolute;
+  right: 10px;
+  top: 10px;
+  background-color: var(--fcr_web_ui_scene_fill1);
+}
+
+.fcr-assign-host-close:hover {
+  background-color: var(--fcr_web_ui_scene_hover);
+}
+
+.leave-meeting-dialog {
+  padding: 0 !important;
+}
+
+.leave-meeting-dialog .leave-container {
+  padding: 30px 20px 24px !important;
+}
+
+.leave-meeting-dialog .fcr-assign-host-close {
+  top: -2px !important;
+  z-index: 10;
+}
+
+.leave-meeting-dialog .fcr-confirm-content-dialog-close {
+  z-index: 9;
+}

package/lib/modules/components/leave-meeting/index.js

@@ -70,6 +70,7 @@ var LeaveMeeting = exports.LeaveMeeting = (0, _mobxReact.observer)(function (pro
       },
       children: canAssign ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_assignHost2.AssignHost, {
         setPopoverOpened: setPopoverOpened,
+        setCanAssign: setCanAssign,
         remoteUsers: hostAvailibleRemoteUsers,
         assignHost: function assignHost(user) {
           _assignHost(user);

package/lib/modules/components/leave-meeting/store.js

@@ -60,7 +60,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _type = require("fcr-core/lib/type");
 var _mobx = require("mobx");
 var _react = require("react");
-var _i18n = require("agora-ui-foundation/lib/i18n");
+var _constant = require("../../../utilities/constant");
 var _LeaveMeetingStore;
 var _initProto, _init_keepConnect, _init_canAssign, _init_loading, _showEndConfirmDialogDecs, _isHostSupportedByPlatformDecs, _assignHostDecs, _leaveDecs, _keepPhoneAudioConnectionDecs, _setCanAssignDecs, _setKeepConnectDecs, _endDecs, _ref;
 function _classPrivateFieldInitSpec(e, t, a) { _checkPrivateRedeclaration(e, t), t.set(e, a); }
@@ -166,49 +166,7 @@ var LeaveMeetingStore = exports.LeaveMeetingStore = /*#__PURE__*/function () {
   }, {
     key: "showEndConfirmDialog",
     value: function showEndConfirmDialog() {
-      var _this3 = this;
-      var dialogKey = this._dialogProvder.openConfirmDialog({
-        title: '',
-        content: (0, _i18n.transI18n)('fmt_actionbar_labels_endmeeting'),
-        cancelText: (0, _i18n.transI18n)('fmt_toolbar_leave_room_end_submit'),
-        okText: (0, _i18n.transI18n)('fmt_toolbar_tips_leave_room_end_cancel'),
-        alignCenter: true,
-        showCancel: true,
-        width: 255,
-        cancelButtonProps: {
-          block: true,
-          type: 'primary',
-          shape: 'rounded',
-          styleType: 'danger'
-        },
-        okButtonProps: {
-          block: true,
-          type: 'secondary',
-          shape: 'rounded'
-        },
-        closable: false,
-        onCancel: function onCancel() {
-          _this3.end();
-          _this3._dialogProvder.closeConfirm(dialogKey);
-        },
-        onOk: function () {
-          var _onOk = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee() {
-            return _regenerator["default"].wrap(function _callee$(_context) {
-              while (1) switch (_context.prev = _context.next) {
-                case 0:
-                  _this3._dialogProvder.closeConfirm(dialogKey);
-                case 1:
-                case "end":
-                  return _context.stop();
-              }
-            }, _callee);
-          }));
-          function onOk() {
-            return _onOk.apply(this, arguments);
-          }
-          return onOk;
-        }()
-      });
+      this._dialogProvder.openDialog(_constant.FcrUIDialogKey.LEAVE_MEETING);
     }
   }, {
     key: "isHostSupportedByPlatform",
@@ -224,26 +182,26 @@ var LeaveMeetingStore = exports.LeaveMeetingStore = /*#__PURE__*/function () {
   }, {
     key: "leave",
     value: function () {
-      var _leave = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee2() {
-        return _regenerator["default"].wrap(function _callee2$(_context2) {
-          while (1) switch (_context2.prev = _context2.next) {
+      var _leave = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee() {
+        return _regenerator["default"].wrap(function _callee$(_context) {
+          while (1) switch (_context.prev = _context.next) {
             case 0:
               this.loading = true;
-              _context2.t0 = this.keepConnect && this.isPstnUser;
-              if (!_context2.t0) {
-                _context2.next = 5;
+              _context.t0 = this.keepConnect && this.isPstnUser;
+              if (!_context.t0) {
+                _context.next = 5;
                 break;
               }
-              _context2.next = 5;
+              _context.next = 5;
               return this.keepPhoneAudioConnection();
             case 5:
               this.loading = false;
               this._roomProvider.exitRoom();
             case 7:
             case "end":
-              return _context2.stop();
+              return _context.stop();
           }
-        }, _callee2, this);
+        }, _callee, this);
       }));
       function leave() {
         return _leave.apply(this, arguments);
@@ -253,16 +211,16 @@ var LeaveMeetingStore = exports.LeaveMeetingStore = /*#__PURE__*/function () {
   }, {
     key: "keepPhoneAudioConnection",
     value: function () {
-      var _keepPhoneAudioConnection = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee3() {
-        return _regenerator["default"].wrap(function _callee3$(_context3) {
-          while (1) switch (_context3.prev = _context3.next) {
+      var _keepPhoneAudioConnection = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee2() {
+        return _regenerator["default"].wrap(function _callee2$(_context2) {
+          while (1) switch (_context2.prev = _context2.next) {
             case 0:
-              return _context3.abrupt("return", this._streamControl.splitAudioStream(this.localUserId));
+              return _context2.abrupt("return", this._streamControl.splitAudioStream(this.localUserId));
             case 1:
             case "end":
-              return _context3.stop();
+              return _context2.stop();
           }
-        }, _callee3, this);
+        }, _callee2, this);
       }));
       function keepPhoneAudioConnection() {
         return _keepPhoneAudioConnection.apply(this, arguments);
@@ -282,17 +240,17 @@ var LeaveMeetingStore = exports.LeaveMeetingStore = /*#__PURE__*/function () {
   }, {
     key: "end",
     value: function () {
-      var _end = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee4() {
-        return _regenerator["default"].wrap(function _callee4$(_context4) {
-          while (1) switch (_context4.prev = _context4.next) {
+      var _end = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee3() {
+        return _regenerator["default"].wrap(function _callee3$(_context3) {
+          while (1) switch (_context3.prev = _context3.next) {
             case 0:
-              _context4.next = 2;
-              return this._roomControl.close();
+              this._roomControl.close();
+              this._roomProvider.exitRoom();
             case 2:
             case "end":
-              return _context4.stop();
+              return _context3.stop();
           }
-        }, _callee4, this);
+        }, _callee3, this);
       }));
       function end() {
         return _end.apply(this, arguments);
@@ -305,7 +263,7 @@ var LeaveMeetingStore = exports.LeaveMeetingStore = /*#__PURE__*/function () {
   }]);
 }();
 _LeaveMeetingStore = LeaveMeetingStore;
-var _applyDecs$e = (0, _slicedToArray2["default"])(_applyDecs(_LeaveMeetingStore, [[_mobx.observable, 1, "keepConnect"], [_mobx.observable, 1, "canAssign"], [_mobx.observable, 1, "loading"], [_mobx.computed, 3, "localUserId"], [_mobx.computed, 3, "localUserRole"], [_mobx.computed, 3, "hostAvailibleRemoteUsers"], [_mobx.computed, 3, "isPstnUser"], [_mobx.computed, 3, "isAssignHostAvailable"], [_showEndConfirmDialogDecs, 18, "showEndConfirmDialog"], [_isHostSupportedByPlatformDecs, 18, "isHostSupportedByPlatform"], [_assignHostDecs, 18, "assignHost"], [_leaveDecs, 18, "leave"], [_keepPhoneAudioConnectionDecs, 18, "keepPhoneAudioConnection"], [_setCanAssignDecs, 18, "setCanAssign"], [_setKeepConnectDecs, 18, "setKeepConnect"], [_endDecs, 18, "end"]], []).e, 4);
+var _applyDecs$e = (0, _slicedToArray2["default"])(_applyDecs(_LeaveMeetingStore, [[_mobx.observable, 1, "keepConnect"], [_mobx.observable, 1, "canAssign"], [_mobx.observable, 1, "loading"], [_mobx.computed, 3, "hostAvailibleRemoteUsers"], [_mobx.computed, 3, "isPstnUser"], [_mobx.computed, 3, "isAssignHostAvailable"], [_showEndConfirmDialogDecs, 18, "showEndConfirmDialog"], [_isHostSupportedByPlatformDecs, 18, "isHostSupportedByPlatform"], [_assignHostDecs, 18, "assignHost"], [_leaveDecs, 18, "leave"], [_keepPhoneAudioConnectionDecs, 18, "keepPhoneAudioConnection"], [_setCanAssignDecs, 18, "setCanAssign"], [_setKeepConnectDecs, 18, "setKeepConnect"], [_endDecs, 18, "end"]], []).e, 4);
 _init_keepConnect = _applyDecs$e[0];
 _init_canAssign = _applyDecs$e[1];
 _init_loading = _applyDecs$e[2];

package/lib/modules/components/member-window/components/member-actions/components/audio-control.js

@@ -10,8 +10,9 @@ var _react = _interopRequireDefault(require("react"));
 var _provider = require("../provider");
 var _i18n = require("agora-ui-foundation/lib/i18n");
 var _iconButtons = require("./icon-buttons");
+var _mobxReact = require("mobx-react");
 var _jsxRuntime = require("react/jsx-runtime");
-var AudioControl = exports.AudioControl = function AudioControl(_ref) {
+var AudioControl = exports.AudioControl = (0, _mobxReact.observer)(function (_ref) {
   var isMeeting = _ref.isMeeting,
     iconSize = _ref.iconSize;
   var store = (0, _provider.useMemberWindowActionsStore)();
@@ -33,4 +34,4 @@ var AudioControl = exports.AudioControl = function AudioControl(_ref) {
   return isMeeting ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_iconButtons.SipDeviceIconButton, {
     iconSize: iconSize
   }) : null;
-};
+});

package/lib/modules/components/member-window/components/member-actions/components/icon-buttons/index.js

@@ -100,7 +100,7 @@ var InterpreterTag = exports.InterpreterTag = function InterpreterTag(props) {
     return null;
   }
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-    className: (0, _classnames["default"])('fcr-user-window-actions-tag', 'fcr-user-window-actions-tag-host', className || (0, _classnames["default"])('fcr-user-window-actions-bottom', 'fcr-user-window-actions-middle', {
+    className: (0, _classnames["default"])('fcr-user-window-actions-tag', 'fcr-user-window-actions-tag-host', className || (0, _classnames["default"])('fcr-user-window-actions-middle', {
       'fcr-user-window-actions-bottom-show': showActionBottomLabel,
       'fcr-user-window-actions-tag_large': windowSize === 'large'
     })),

package/lib/modules/components/member-window/components/member-actions/components/icon-status.js

@@ -29,12 +29,16 @@ var IconStatus = exports.IconStatus = (0, _mobxReact.observer)(function (_ref) {
     videoStreamId = store.videoStreamId,
     hasMicrophoneAudioStream = store.hasMicrophoneAudioStream,
     isManager = store.isManager,
-    phoneMicEnabled = store.phoneMicEnabled;
+    phoneMicEnabled = store.phoneMicEnabled,
+    isScreenSharing = store.isScreenSharing;
   var isNormal = connectorType === _fcrCore.FcrRoomConnectorType.NONE;
   var isPhone = store.isPhone;
   var isMeeting = meetingConnectorTypes.has(connectorType);
   var isPurePhone = audioStreamId === videoStreamId;
   var renderNormalStatus = function renderNormalStatus() {
+    if (isScreenSharing && windowSize === 'large') {
+      return;
+    }
     if (!hasMicrophoneAudioStream && !isMeeting) {
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(_iconButtons.NoMuteIconButton, {
         iconSize: iconSize,
@@ -42,14 +46,11 @@ var IconStatus = exports.IconStatus = (0, _mobxReact.observer)(function (_ref) {
         isManager: isManager
       });
     }
-    if (windowSize === 'large') {
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_micVolume.MicVolume, {
-        id: id,
-        size: iconSize,
-        volume: volume
-      });
-    }
-    return null;
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_micVolume.MicVolume, {
+      id: id,
+      size: iconSize,
+      volume: volume
+    });
   };
   var renderPhoneStatus = function renderPhoneStatus() {
     if (windowSize === 'large' && !isPurePhone) {

package/lib/modules/components/member-window/components/member-actions/components/more-actions.js

@@ -112,14 +112,14 @@ var MoreActions = exports.MoreActions = (0, _mobxReact.observer)(function (_ref)
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.FcrToolTip, {
       content: t('fmt_participants_member_button_more'),
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_popover.FcrPopover, {
-        showArrow: true,
+        showArrow: false,
         placement: "bottomLeft",
         trigger: "click",
         visible: store.isShowDropMenu,
         onVisibleChange: onVisibleChange,
         overlayInnerStyle: {
           border: 0,
-          boxShadow: '0px 0px 15px var(--fcr_web_light_dropup_m)',
+          boxShadow: 'var(--fcr_web_light_dropup_m)',
           borderRadius: 'var(--fcr_cornerradius_l)',
           minWidth: '210px',
           maxWidth: '300px',

package/lib/modules/components/member-window/components/member-actions/components/user-info.js

@@ -117,7 +117,7 @@ var UserInfo = exports.UserInfo = (0, _mobxReact.observer)(function (_ref) {
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_shareStatus.ShareStatus, {})
         })]
       })]
-    }), !insideShow && !store.isManager && /*#__PURE__*/(0, _jsxRuntime.jsx)(_iconButtons.InterpreterTag, {
+    }), !insideShow && windowSize === 'large' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_iconButtons.InterpreterTag, {
       isShow: isShowInterpreterTag,
       className: "fcr-user-window-actions-bottom-interpreter-tag",
       windowSize: windowSize

package/lib/modules/components/member-window/components/member-actions/index.js

@@ -39,12 +39,12 @@ require("core-js/modules/esnext.set.union.v2.js");
 require("core-js/modules/esnext.set.union.js");
 require("core-js/modules/web.dom-collections.iterator.js");
 var _react = _interopRequireDefault(require("react"));
+var _fcrCore = require("fcr-core");
 var _provider = require("./provider");
 var _index = require("./components/layout/index");
 var _moreActions = require("./components/more-actions");
 var _userInfo = require("./components/user-info");
 var _iconButtons = require("./components/icon-buttons");
-var _fcrCore = require("fcr-core");
 var _jsxRuntime = require("react/jsx-runtime");
 var meetingConnectorTypes = new Set([_fcrCore.FcrRoomConnectorType.SIP, _fcrCore.FcrRoomConnectorType.H323]);
 var MemberWindowActions = exports.MemberWindowActions = function MemberWindowActions(_ref) {
@@ -88,7 +88,7 @@ var MemberWindowActions = exports.MemberWindowActions = function MemberWindowAct
         onContextMenu: function onContextMenu() {
           return store.onVisibleChange(true);
         },
-        headerSlot: store.isManager && /*#__PURE__*/(0, _jsxRuntime.jsx)(_iconButtons.InterpreterTag, {
+        headerSlot: store.isManager && windowSize !== 'large' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_iconButtons.InterpreterTag, {
           isShow: !!(interpreterUserList !== null && interpreterUserList !== void 0 && interpreterUserList.find(function (ele) {
             return ele.userId === store.userId;
           })) && !!isInterpreterEnabled,

package/lib/modules/components/member-window/components/video-player/components/remote-video-player.js

@@ -10,8 +10,6 @@ var _mobxReact = require("mobx-react");
 var _react = require("react");
 var _i18n = require("agora-ui-foundation/lib/i18n");
 var _classnames = _interopRequireDefault(require("classnames"));
-var _icon = require("agora-ui-foundation/lib/components/icon");
-var _type = require("agora-ui-foundation/lib/components/icon/type");
 var _videoTrackRenderContext = require("../../../../../../utilities/video-track-render-context");
 var _jsxRuntime = require("react/jsx-runtime");
 var FcrUIRemoteVideoPlayer = exports.FcrUIRemoteVideoPlayer = (0, _mobxReact.observer)(function (_ref) {
@@ -42,21 +40,12 @@ var FcrUIRemoteVideoPlayer = exports.FcrUIRemoteVideoPlayer = (0, _mobxReact.obs
       dom && (stopRenderRemoteVideo === null || stopRenderRemoteVideo === void 0 ? void 0 : stopRenderRemoteVideo(streamId, dom));
     };
   }, [hasVideoStream, streamId, videoStreamType, renderMode]);
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: (0, _classnames["default"])('fcr-member-window-body fcr-member-window-body-video-remote', {
         'fcr-member-window-body-video-remote-render': isFirstRemoteVideoFrameRendered && hasVideoStream
       }),
       ref: divRef
-    }), !isFirstRemoteVideoFrameRendered && hasVideoStream && hasScreenSharing && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-      className: "fcr-member-window-body-render-video-loading",
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
-        className: "render-video-loading-icon",
-        size: 24,
-        type: _type.FcrIconType.FCR_LOADING
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
-        children: [" ", t('fmt_screenshare_status_sharing'), " "]
-      })]
-    })]
+    })
   });
 });

package/lib/modules/components/member-window/index.css

@@ -118,7 +118,7 @@
   position: absolute;
   inset: 0;
   font-size: 0;
-  border: 2px solid var(--fcr_ui_scene_ramp_green6);
+  border: 3px solid var(--fcr_ui_scene_ramp_green6);
   opacity: 0;
 }
 .fcr-member-window-excitation-show {
@@ -137,7 +137,7 @@
   background-color: var(--fcr_ui_scene_view_toast);
   /* opacity: 0; */
   /* transition: opacity 0.2s; */
-  z-index: 3;
+  z-index: 11;
 }
 .fcr-member-window-pin-show {
   /* opacity: 1; */
@@ -196,10 +196,18 @@
 
 .fcr-user-window-actions-bottom {
   position: absolute;
-  /* inset: auto auto 4px 4px; */
-  z-index: 1;
+  inset: auto auto 4px 4px;
+  color: var(--fcr_ui_scene_icontext1);
+  border-radius: var(--fcr_cornerradius_xxs);
+  backdrop-filter: blur(25px);
+  font-weight: var(--fcr_font_weight_m);
+  font-size: 10px;
+  display: inline-flex;
+  align-items: center;
   max-width: calc(100% - 8px);
   height: 18px;
+  overflow: hidden;
+  z-index: 10;
   transition: opacity 0.2s;
   opacity: 1;
 }
@@ -319,7 +327,7 @@
 .fcr-user-window-actions-bottom .fcr-user-window-actions-name {
   padding: 0 2px;
   font-weight: var(--fcr_font_weight_s);
-  line-height: 1;
+  line-height: 1.5;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -357,6 +365,9 @@
   font-weight: var(--fcr_font_weight_s);
   white-space: nowrap;
   padding-right: 6px;
+  flex: 1;
+  text-overflow: ellipsis;
+  overflow: hidden;
 }
 
 .fcr-user-window-actions-top {
@@ -369,7 +380,7 @@
   font-size: 12px;
   opacity: 0;
   transition: opacity 0.2s;
-  z-index: 1;
+  z-index: 10;
 }
 .fcr-member-window .fcr-user-window-actions-top-active {
   opacity: 1;
@@ -395,7 +406,7 @@
   height: 0px;
   width: 100%;
   transition: height 0s;
-  z-index: 1;
+  z-index: 10;
 }
 
 .fcr-layout-speaker .fcr-layout-content-bar {

package/lib/modules/components/member-window/types.d.ts

@@ -4,7 +4,7 @@ import { FcrVideoWindowPreviewType } from '../../video-window/type';
 import { FcrInterpreterUserInfo } from 'fcr-core/lib/room-control/interpreter-control/types';
 export interface MemberWindowCustomProps {
     showAvatar: boolean;
-    onDoubleClick: () => void;
+    onDoubleClick?: () => void;
     onRemovePin: (streamId: string) => void;
     slot?: React.ReactNode;
     width?: number;

package/lib/modules/components/security-menu/index.css

@@ -33,10 +33,10 @@
   background: none;
 }
 
-.security-menu .fcr-checkbox-inner svg path {
+.security-menu .fcr-checkbox-inner svg:not(.fcr-watermark-rotate-icon) path {
   fill: var(--fcr_ui_scene_icontext1) !important;
 }
 
-.security-menu .fcr-drop-menu-option:hover svg path {
+.security-menu .fcr-drop-menu-option:hover svg:not(.fcr-watermark-rotate-icon) path {
   fill: var(--fcr_ui_scene_ramp_brand6) !important;
 }