fcr-ui-scene 3.3.0 → 3.4.0

package/lib/modules/participant/attendee/index.d.ts

@@ -1,17 +1,24 @@
 import { ParticipantActionType, User } from 'agora-ui-foundation/lib/components/participants/attendee';
 import { FcrUserRole } from '../../../type';
 import './index.css';
-import { FcrPrivilegeUserRole } from 'agora-edu-core';
-import { FcrUserKickOutType } from 'agora-edu-core/lib/room-control/type';
+import { FcrPrivilegeUserRole } from 'fcr-core';
+import { DialogKey } from '../../../utilities/constant';
+import { FcrInterpreterUserInfo, FcrLanguage } from 'fcr-core/lib/room-control/interpreter-control/types';
+import { FcrUserKickedOutType } from 'fcr-core/lib/room-control/user-control/type';
 export type OperateWaitingRoomMemberDialogProps = {
     type: 'remove' | 'removeAll' | 'admitAll';
     tooltip: string;
     title: string;
     userId?: string;
 };
+export declare const WaitingRoomDialogKeyMap: {
+    remove: DialogKey;
+    removeAll: DialogKey;
+    admitAll: DialogKey;
+};
 export declare const OperateWaitingRoomMemberDialog: ({ type, tooltip, title, userId, }: OperateWaitingRoomMemberDialogProps) => import("react/jsx-runtime").JSX.Element;
 interface ParticipantAttendeeProps extends User {
-    onParticipantsButtonClick: (action: ParticipantActionType, userId: string, type?: FcrUserKickOutType | undefined) => void;
+    onParticipantsButtonClick: (action: ParticipantActionType, userId: string, type?: FcrUserKickedOutType | undefined) => void;
     currentPerspectiveType?: 'host' | 'attendee' | 'cohost';
     isPin: boolean;
     hasPinnedStream: boolean;
@@ -23,6 +30,10 @@ interface ParticipantAttendeeProps extends User {
     hasRequestStartAudioPermission: (role: FcrPrivilegeUserRole | FcrUserRole) => boolean;
     activeTab: string;
     moveToMainRoomByUserIds: (userId: string[]) => void;
+    interpreterUsers?: FcrInterpreterUserInfo[] | null;
+    interpreterState: boolean;
+    interpreterInputLanguage: FcrLanguage | undefined;
+    type: 'modal' | 'window';
 }
 export declare const ParticipantAttendee: (props: ParticipantAttendeeProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/lib/modules/participant/attendee/index.js

@@ -9,10 +9,8 @@ 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.get-own-property-descriptors.js");
 require("core-js/modules/es.object.keys.js");
-require("core-js/modules/es.object.to-string.js");
 require("core-js/modules/esnext.async-iterator.filter.js");
 require("core-js/modules/esnext.async-iterator.for-each.js");
-require("core-js/modules/esnext.iterator.constructor.js");
 require("core-js/modules/esnext.iterator.filter.js");
 require("core-js/modules/esnext.iterator.for-each.js");
 require("core-js/modules/web.dom-collections.for-each.js");
@@ -20,7 +18,12 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ParticipantAttendee = exports.OperateWaitingRoomMemberDialog = void 0;
+exports.WaitingRoomDialogKeyMap = exports.ParticipantAttendee = exports.OperateWaitingRoomMemberDialog = void 0;
+require("core-js/modules/es.array.find.js");
+require("core-js/modules/es.object.to-string.js");
+require("core-js/modules/esnext.async-iterator.find.js");
+require("core-js/modules/esnext.iterator.constructor.js");
+require("core-js/modules/esnext.iterator.find.js");
 require("core-js/modules/web.timers.js");
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
@@ -35,21 +38,29 @@ var _microphoneState = require("agora-ui-foundation/lib/components/room-screen-s
 var _classnames = _interopRequireDefault(require("classnames"));
 var _mobxReact = require("mobx-react");
 var _react = require("react");
-var _context = require("../context");
+var _store = require("../store");
 var _type2 = require("../../../type");
 var _i18n = require("agora-ui-foundation/lib/i18n");
 var _muteAction = require("../../../utilities/mute-action");
 require("./index.css");
 var _helper = require("agora-ui-foundation/lib/components/avatar/helper");
-var _agoraEduCore = require("agora-edu-core");
+var _fcrCore = require("fcr-core");
 var _participantsMore = require("agora-ui-foundation/lib/components/participants/participants-more");
-var _type3 = require("agora-edu-core/lib/room-control/type");
 var _constant = require("../../../utilities/constant");
 var _checkbox = require("agora-ui-foundation/lib/components/checkbox");
 var _button = require("agora-ui-foundation/lib/components/button");
+var _useLanguageConfig = require("../../interpreter/interpreter-list/interpreter-item/components/pick-language/useLanguageConfig");
+var _type3 = require("fcr-core/lib/room-control/user-control/type");
+var _useClickAnywhere = require("agora-ui-foundation/lib/hooks/use-click-anywhere");
+var _useElectron = require("../../dialog/hooks/useElectron");
 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 WaitingRoomDialogKeyMap = exports.WaitingRoomDialogKeyMap = {
+  remove: _constant.DialogKey.WAITING_ROOM_SINGLE_REMOVE,
+  removeAll: _constant.DialogKey.WAITING_ROOM_ALL_REMOVE,
+  admitAll: _constant.DialogKey.WAITING_ROOM_ALL_ADMIT
+};
 var OperateWaitingRoomMemberDialog = exports.OperateWaitingRoomMemberDialog = function OperateWaitingRoomMemberDialog(_ref) {
   var type = _ref.type,
     tooltip = _ref.tooltip,
@@ -60,16 +71,11 @@ var OperateWaitingRoomMemberDialog = exports.OperateWaitingRoomMemberDialog = fu
     _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
     isChecked = _useState2[0],
     setIsChecked = _useState2[1];
-  var _useContext = (0, _react.useContext)(_context.StoreContext),
+  var _useContext = (0, _react.useContext)(_store.StoreContext),
     removeWaitingRoomUser = _useContext.removeWaitingRoomUser,
     moveToMainRoomAllMember = _useContext.moveToMainRoomAllMember,
     kickOutWaitingRoomAllMember = _useContext.kickOutWaitingRoomAllMember,
     closeRemoveAdmitWaitingRoomDialog = _useContext.closeRemoveAdmitWaitingRoomDialog;
-  var DialogKeyMap = {
-    remove: _constant.DialogKey.WAITING_ROOM_SINGLE_REMOVE,
-    removeAll: _constant.DialogKey.WAITING_ROOM_ALL_REMOVE,
-    admitAll: _constant.DialogKey.WAITING_ROOM_ALL_ADMIT
-  };
   var buttonTextMap = {
     removeAll: t('fmt_waitingroom_sidebar_button_removeall'),
     admitAll: t('fmt_waitingroom_sidebar_button_admitall'),
@@ -105,7 +111,7 @@ var OperateWaitingRoomMemberDialog = exports.OperateWaitingRoomMemberDialog = fu
         shape: "rounded",
         styleType: "white",
         onClick: function onClick() {
-          closeRemoveAdmitWaitingRoomDialog(DialogKeyMap[type]);
+          closeRemoveAdmitWaitingRoomDialog(WaitingRoomDialogKeyMap[type]);
         },
         children: t('fmt_waitingroom_sidebar_popup_button_cancel')
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.FcrButton, {
@@ -114,15 +120,15 @@ var OperateWaitingRoomMemberDialog = exports.OperateWaitingRoomMemberDialog = fu
         styleType: type === 'admitAll' ? 'normal' : 'danger',
         onClick: function onClick() {
           if (type === 'remove') {
-            removeWaitingRoomUser(userId, isChecked ? _type3.FcrUserKickOutType.Forever : _type3.FcrUserKickOutType.Once);
+            removeWaitingRoomUser(userId, isChecked ? _type3.FcrUserKickedOutType.Forever : _type3.FcrUserKickedOutType.Once);
           }
           if (type === 'removeAll') {
-            kickOutWaitingRoomAllMember(isChecked ? _type3.FcrUserKickOutType.Forever : _type3.FcrUserKickOutType.Once);
+            kickOutWaitingRoomAllMember(isChecked ? _type3.FcrUserKickedOutType.Forever : _type3.FcrUserKickedOutType.Once);
           }
           if (type === 'admitAll') {
             moveToMainRoomAllMember();
           }
-          closeRemoveAdmitWaitingRoomDialog(DialogKeyMap[type]);
+          closeRemoveAdmitWaitingRoomDialog(WaitingRoomDialogKeyMap[type]);
         },
         children: buttonTextMap[type]
       })]
@@ -159,7 +165,12 @@ var ParticipantAttendee = exports.ParticipantAttendee = (0, _mobxReact.observer)
     hasUnmutePermission = props.hasUnmutePermission,
     hasRequestStartAudioPermission = props.hasRequestStartAudioPermission,
     activeTab = props.activeTab,
-    moveToMainRoomByUserIds = props.moveToMainRoomByUserIds;
+    moveToMainRoomByUserIds = props.moveToMainRoomByUserIds,
+    interpreterUsers = props.interpreterUsers,
+    interpreterState = props.interpreterState,
+    interpreterInputLanguage = props.interpreterInputLanguage,
+    type = props.type;
+  var dialogInstanceContext = (0, _react.useContext)(_useElectron.DialogInstanceContext);
   var _useState5 = (0, _react.useState)(false),
     _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
     disableHover = _useState6[0],
@@ -170,6 +181,10 @@ var ParticipantAttendee = exports.ParticipantAttendee = (0, _mobxReact.observer)
     _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
     phoneCallFrame = _useState8[0],
     setPhoneCallFrame = _useState8[1];
+  var clickAnywhere = (0, _react.useCallback)(function () {
+    setIsShowDropMenu(false);
+  }, [setIsShowDropMenu]);
+  var clickRef = (0, _useClickAnywhere.useClickAnywhere)(clickAnywhere, type === 'modal' ? dialogInstanceContext === null || dialogInstanceContext === void 0 ? void 0 : dialogInstanceContext.newRendererWindow : window);
   var percentPhone = function percentPhone(phoneCallFrame) {
     switch (phoneCallFrame) {
       case '0':
@@ -241,14 +256,22 @@ var ParticipantAttendee = exports.ParticipantAttendee = (0, _mobxReact.observer)
       onParticipantsButtonClick(action, userId);
       setIsShowDropMenu(false);
     };
-    var muteAudioPermission = hasMutePermission(isMe ? _agoraEduCore.FcrPrivilegeUserRole.SELF : userRole);
-    var startAudioPermission = hasUnmutePermission(isMe ? _agoraEduCore.FcrPrivilegeUserRole.SELF : userRole);
+    var muteAudioPermission = hasMutePermission(isMe ? _fcrCore.FcrPrivilegeUserRole.SELF : userRole);
+    var startAudioPermission = hasUnmutePermission(isMe ? _fcrCore.FcrPrivilegeUserRole.SELF : userRole);
     var requestStartAudioPermission = hasRequestStartAudioPermission(userRole);
     var _actionMute = (0, _muteAction.actionMute)(!!isMe, hasAudio, muteAudioPermission, startAudioPermission, requestStartAudioPermission),
       isShowActionAudio = _actionMute.isShowActionAudio,
       actionAudioTag = _actionMute.actionAudioTag;
     var waitingRoomParticipateActionsNeedHiden = ['start_video', 'request_start_video', 'stop_video', 'pin', 'set_as_host', 'set_as_co_host', 'revoke_co_host', 'merge_video', 'put_into_waiting_room'];
     var mainRoomParticipateActionsNeedHiden = [];
+    (0, _react.useEffect)(function () {
+      return function () {
+        if (timeoutId.current) {
+          clearTimeout(timeoutId.current);
+        }
+      };
+    }, []);
+    var timeoutId = (0, _react.useRef)();
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: "attendee__user-action attendee__user-action-host ".concat(isShowDropMenu ? 'attendee__user-action-hovered' : ''),
       children: [isShowActionAudio && activeTab === _constant.RoomType.MAIN_ROOM && /*#__PURE__*/(0, _jsxRuntime.jsx)(_action.FcrActionButton, {
@@ -272,16 +295,24 @@ var ParticipantAttendee = exports.ParticipantAttendee = (0, _mobxReact.observer)
         overlayInnerStyle: {
           border: 0,
           boxShadow: '0px 0px 15px var(--fcr_web_light_dropup_m)',
-          borderRadius: 'var(--fcr_cornerradius_l)'
+          borderRadius: 'var(--fcr_cornerradius_l)',
+          minWidth: '210px',
+          maxWidth: '300px',
+          width: 'fit-content'
         },
         overlayClassName: "attendee__more-actions",
         mouseEnterDelay: 0,
         content: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          ref: clickRef,
           onMouseEnter: function onMouseEnter() {
-            return setIsShowDropMenu(true);
+            if (timeoutId.current) {
+              clearTimeout(timeoutId.current);
+            }
           },
           onMouseLeave: function onMouseLeave() {
-            return setIsShowDropMenu(false);
+            timeoutId.current = setTimeout(function () {
+              setIsShowDropMenu(false);
+            }, 200);
           },
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_participantsMore.FcrParticipantsMoreActions, _objectSpread(_objectSpread({}, props), {}, {
             onParticipantsButtonClick: handleMoreActionsClick,
@@ -301,7 +332,9 @@ var ParticipantAttendee = exports.ParticipantAttendee = (0, _mobxReact.observer)
         placement: "bottomRight",
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_action.FcrActionButton, {
           onClick: function onClick() {
-            return setIsShowDropMenu(true);
+            if (!isShowDropMenu) {
+              setIsShowDropMenu(true);
+            }
           },
           size: "small",
           iconType: _type.FcrIconType.FCR_DROPDOWN,
@@ -311,13 +344,28 @@ var ParticipantAttendee = exports.ParticipantAttendee = (0, _mobxReact.observer)
     });
   };
   var t = (0, _i18n.useI18n)();
+  var interpreter = (0, _react.useMemo)(function () {
+    return interpreterUsers === null || interpreterUsers === void 0 ? void 0 : interpreterUsers.find(function (ele) {
+      return ele.userId === userId;
+    });
+  }, [interpreterUsers, userId]);
+  var getLanguageConfig = (0, _useLanguageConfig.useLanguageConfig)();
+  var interpreterTag = /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+    children: interpreter && interpreterState && interpreterInputLanguage && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "attendee__host-badge attendee__interpreter-tag-bg",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "attendee__interpreter-tag-user",
+        children: t('fmt_ai_transcriptions_setting_label_translator')
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "attendee__interpreter-tag-language",
+        children: getLanguageConfig(interpreterInputLanguage).abbr
+      })]
+    })
+  });
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     className: (0, _classnames["default"])('attendee', {
       'attendee-active': isShowDropMenu && !disableHover
     }),
-    onMouseLeave: function onMouseLeave() {
-      return setIsShowDropMenu(false);
-    },
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: "attendee__user-info",
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
@@ -340,12 +388,18 @@ var ParticipantAttendee = exports.ParticipantAttendee = (0, _mobxReact.observer)
             className: "attendee__me-badge",
             children: "(Me)"
           })]
-        }), isHost && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          className: "attendee__host-badge",
-          children: t('fmt_role_host')
-        }), userRole === _type2.FcrUserRole.COHOST && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          className: "attendee__host-badge attendee__cohost-tag-bg",
-          children: t('fmt_role_cohost')
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: "attendee__tag-group",
+          children: [isHost && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: "attendee__host-badge",
+            children: t('fmt_role_host')
+          }), isHost && interpreterTag]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: "attendee__tag-group",
+          children: [userRole === _type2.FcrUserRole.COHOST && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: "attendee__host-badge attendee__cohost-tag-bg",
+            children: t('fmt_role_cohost')
+          }), !isHost && interpreterTag]
         })]
       })]
     }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
@@ -379,7 +433,7 @@ var MicrophoneIndicator = (0, _mobxReact.observer)(function (_ref2) {
     hasAudio = _ref2.hasAudio,
     isLocal = _ref2.isLocal,
     userId = _ref2.userId;
-  var _useContext2 = (0, _react.useContext)(_context.StoreContext),
+  var _useContext2 = (0, _react.useContext)(_store.StoreContext),
     audioVolumeMap = _useContext2.audioVolumeMap,
     localMicVolume = _useContext2.localMicVolume;
   var volume = isLocal ? localMicVolume : audioVolumeMap.get(userId);

package/lib/modules/participant/attendee/participants-more-action.d.ts

@@ -0,0 +1,18 @@
+import { ParticipantType } from '../../../utilities/constant';
+import { FcrUserRole } from '../../../type';
+interface ParticipantsMoreActionsProps {
+    isMe?: boolean;
+    userId: string;
+    hasVideo: boolean;
+    hasAudio: boolean;
+    onParticipantsButtonClick: (action: ParticipantType, userId: string) => void;
+    userName: string;
+    userRole: FcrUserRole;
+    isPin: boolean;
+    hasPinnedStream: boolean;
+    allowedOperations: string[];
+    audioDeviceType: string;
+    userType?: string;
+}
+export declare const ParticipantsMoreActions: (props: ParticipantsMoreActionsProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/modules/participant/attendee/participants-more-action.js

@@ -0,0 +1,278 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ParticipantsMoreActions = void 0;
+require("core-js/modules/es.array.filter.js");
+require("core-js/modules/es.array.includes.js");
+require("core-js/modules/es.object.to-string.js");
+require("core-js/modules/es.string.includes.js");
+require("core-js/modules/esnext.async-iterator.filter.js");
+require("core-js/modules/esnext.iterator.constructor.js");
+require("core-js/modules/esnext.iterator.filter.js");
+var _dropMenu = require("agora-ui-foundation/lib/components/drop-menu");
+var _icon = require("agora-ui-foundation/lib/components/icon");
+var _type = require("agora-ui-foundation/lib/components/icon/type");
+var _cameraState = require("agora-ui-foundation/lib/components/room-screen-share-state-bar/camera-state");
+var _constant = require("../../../utilities/constant");
+var _type2 = require("../../../type");
+var _i18n = require("agora-ui-foundation/lib/i18n");
+var _jsxRuntime = require("react/jsx-runtime");
+var ParticipantsMoreActions = exports.ParticipantsMoreActions = function ParticipantsMoreActions(props) {
+  var t = (0, _i18n.useI18n)();
+  var isMe = props.isMe,
+    userId = props.userId,
+    hasVideo = props.hasVideo,
+    hasAudio = props.hasAudio,
+    onParticipantsButtonClick = props.onParticipantsButtonClick,
+    userName = props.userName,
+    userRole = props.userRole,
+    isPin = props.isPin,
+    hasPinnedStream = props.hasPinnedStream,
+    allowedOperations = props.allowedOperations,
+    audioDeviceType = props.audioDeviceType,
+    userType = props.userType;
+  var disableOperationMenu = [{
+    icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+      type: _type.FcrIconType.FCR_LOWER_HAND,
+      size: 20,
+      colors: {
+        iconPrimary: 'var(--fcr_ui_scene_icontext1)',
+        iconSecondary: 'var(--fcr_ui_scene_ramp_red6)'
+      }
+    }),
+    title: t('fmt_attendies_button_handsdown'),
+    key: 'put_down_hand',
+    type: 'disabled',
+    onButtonClick: function onButtonClick() {
+      onParticipantsButtonClick(_constant.ParticipantType.STOP_RAISE_HAND, userId);
+    }
+  }, {
+    icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+      type: _type.FcrIconType.FCR_FOCUSONHIM,
+      size: 20,
+      colors: {
+        iconPrimary: 'var(--fcr_ui_scene_icontext5)'
+      }
+    }),
+    title: t('fmt_attendies_options_setfocus'),
+    key: 'set_as_focus_video',
+    type: 'disabled',
+    onButtonClick: function onButtonClick() {
+      onParticipantsButtonClick(_constant.ParticipantType.SET_MAIN_SPEAKER, userId);
+    }
+  }, {
+    title: t('fmt_attendies_options_allowlocalrecord'),
+    icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+      type: _type.FcrIconType.FCR_PINPAGE,
+      size: 20,
+      colors: {
+        iconPrimary: 'var(--fcr_ui_scene_icontext5)'
+      }
+    }),
+    key: 'allow_record_local_video',
+    type: 'disabled',
+    onButtonClick: function onButtonClick() {
+      onParticipantsButtonClick(_constant.ParticipantType.ALL_RECORDING_LOCAL_VIDEO, userId);
+    },
+    classNames: 'fcr-drop-menu-option-with-under-line'
+  }, {
+    title: t('fmt_attendies_options_putinwaitingroom'),
+    icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+      type: _type.FcrIconType.FCR_PINPAGE,
+      size: 20,
+      colors: {
+        iconPrimary: 'var(--fcr_ui_scene_icontext5)'
+      }
+    }),
+    key: 'put_into_waiting_room',
+    type: 'disabled',
+    role: ['host'],
+    onButtonClick: function onButtonClick() {
+      onParticipantsButtonClick(_constant.ParticipantType.PUT_IN_WAITING_ROOM, userId);
+    },
+    classNames: 'fcr-drop-menu-option-with-under-line'
+  }, {
+    icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+      type: _type.FcrIconType.FCR_RENAME,
+      size: 20,
+      colors: {
+        iconPrimary: 'var(--fcr_ui_scene_icontext5)'
+      }
+    }),
+    title: t('fmt_attendies_button_rename'),
+    key: 'rename',
+    type: 'disabled',
+    onButtonClick: function onButtonClick() {
+      onParticipantsButtonClick(_constant.ParticipantType.RENAME, userId);
+    },
+    classNames: 'fcr-drop-menu-option-with-under-line'
+  }];
+  var allOperationMenu = [{
+    icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_cameraState.CameraState, {
+      isCameraMuted: true
+    }),
+    title: t('fmt_device_label_video_start'),
+    key: 'start_video',
+    type: 'primary',
+    canOperation: !hasVideo && userType !== 'phone',
+    onButtonClick: function onButtonClick() {
+      onParticipantsButtonClick(_constant.ParticipantType.UNMUTE_VIDEO, userId);
+    },
+    classNames: 'fcr-drop-menu-option-with-under-line'
+  }, {
+    icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_cameraState.CameraState, {
+      isCameraMuted: true
+    }),
+    title: t('fmt_sip_button_opencamera'),
+    key: 'request_start_video',
+    type: 'primary',
+    canOperation: !hasVideo && !isMe && userType !== 'phone',
+    onButtonClick: function onButtonClick() {
+      onParticipantsButtonClick(_constant.ParticipantType.UNMUTE_VIDEO, userId);
+    },
+    classNames: 'fcr-drop-menu-option-with-under-line'
+  }, {
+    icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_cameraState.CameraState, {
+      isCameraMuted: false
+    }),
+    title: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      style: {
+        color: 'var(--fcr_ui_scene_ramp_red6)'
+      },
+      children: t('fmt_device_label_video_stop')
+    }),
+    key: 'stop_video',
+    type: 'primary',
+    canOperation: hasVideo && userType !== 'phone',
+    onButtonClick: function onButtonClick() {
+      onParticipantsButtonClick(_constant.ParticipantType.MUTE_VIDEO, userId);
+    },
+    classNames: 'fcr-drop-menu-option-with-under-line'
+  }, {
+    icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+      type: _type.FcrIconType.FCR_MOBILE_CHAT3,
+      size: 20,
+      colors: {
+        iconPrimary: 'var(--fcr_ui_scene_icontext5)'
+      }
+    }),
+    title: t('fmt_attendies_label_privatechat'),
+    key: 'private_chat',
+    type: 'primary',
+    canOperation: !isMe && userType !== 'phone',
+    onButtonClick: function onButtonClick() {
+      onParticipantsButtonClick(_constant.ParticipantType.PRIVATE_CHAT, userId);
+    }
+  }, {
+    icon: isPin ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+      type: _type.FcrIconType.FCR_UNPIN,
+      size: 20
+    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+      type: _type.FcrIconType.FCR_PINPAGE,
+      size: 20,
+      colors: {
+        iconPrimary: 'var(--fcr_ui_scene_icontext5)'
+      }
+    }),
+    title: isPin ? /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      style: {
+        color: 'var(--fcr_ui_scene_ramp_red6)'
+      },
+      children: t('fmt_attendies_options_cancelfixed')
+    }) : hasPinnedStream ? t('fmt_attendies_options_replacefixed') : t('fmt_attendies_options_fixfirst'),
+    key: 'pin',
+    type: 'primary',
+    canOperation: userType === 'normal' || userType === 'meeting-system' && hasVideo,
+    onButtonClick: function onButtonClick() {
+      onParticipantsButtonClick(isPin ? _constant.ParticipantType.REMOVE_PIN : _constant.ParticipantType.ADD_PIN, userId);
+    },
+    classNames: 'fcr-drop-menu-option-with-under-line'
+  }, {
+    title: t('fmt_attendies_options_sethost'),
+    icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+      type: _type.FcrIconType.FCR_HOST2,
+      size: 20,
+      colors: {
+        iconPrimary: 'var(--fcr_ui_scene_icontext5)'
+      }
+    }),
+    key: 'set_as_host',
+    canOperation: userRole !== _type2.FcrUserRole.HOST && userType === 'normal',
+    onButtonClick: function onButtonClick() {
+      onParticipantsButtonClick(_constant.ParticipantType.SET_AS_HOST, userId);
+    }
+  }, {
+    title: t('fmt_attendies_options_setcohost'),
+    icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+      type: _type.FcrIconType.FCR_COHOST2,
+      size: 20,
+      colors: {
+        iconPrimary: 'var(--fcr_ui_scene_icontext5)'
+      }
+    }),
+    key: 'set_as_co_host',
+    type: 'primary',
+    canOperation: userRole !== _type2.FcrUserRole.COHOST && userType === 'normal',
+    onButtonClick: function onButtonClick() {
+      onParticipantsButtonClick(_constant.ParticipantType.SET_AS_CO_HOST, userId);
+    }
+  }, {
+    title: t('fmt_attendies_options_revokecohost'),
+    icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+      type: _type.FcrIconType.FCR_PINPAGE,
+      size: 20,
+      colors: {
+        iconPrimary: 'var(--fcr_ui_scene_icontext5)'
+      }
+    }),
+    key: 'revoke_co_host',
+    type: 'danger',
+    canOperation: userRole === _type2.FcrUserRole.COHOST && userType === 'normal',
+    onButtonClick: function onButtonClick() {
+      onParticipantsButtonClick(_constant.ParticipantType.SET_AS_ATTENDEE, userId);
+    }
+  }, {
+    title: t('fmt_modules_tips_mergevideo'),
+    icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+      type: _type.FcrIconType.FCR_MOBILE_CAMERA2,
+      size: 20,
+      colors: {
+        iconPrimary: 'var(--fcr_ui_scene_icontext5)'
+      }
+    }),
+    key: 'merge_video',
+    type: 'primary',
+    canOperation: userType === 'phone',
+    onButtonClick: function onButtonClick() {
+      onParticipantsButtonClick(_constant.ParticipantType.MERGE_VIDEO, userId);
+    }
+  }, {
+    title: t('fmt_attendies_button_remove'),
+    icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+      type: _type.FcrIconType.FCR_SETTING_NONE,
+      size: 20,
+      colors: {
+        iconPrimary: 'var(--fcr_ui_scene_ramp_red6)'
+      }
+    }),
+    key: 'kick_out',
+    type: 'danger',
+    canOperation: true,
+    onButtonClick: function onButtonClick() {
+      onParticipantsButtonClick(_constant.ParticipantType.KICK_OUT, userId);
+    }
+  }];
+  var currentActions = allOperationMenu.filter(function (item) {
+    return allowedOperations.includes(item.key) && item.canOperation;
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: "participants-more-action",
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_dropMenu.FcrDropMenu, {
+      title: userName,
+      options: currentActions
+    })
+  });
+};

package/lib/modules/participant/components/drop-menu/index.css

@@ -0,0 +1,59 @@
+.room-control-drop-with-under-line {
+  position: relative;
+  /* margin: 8px 0; */
+}
+.room-control-options-box {
+  display: flex;
+  justify-content: space-between;
+}
+.room-control-options-box .fcr-checkbox {
+  width: fit-content;
+}
+
+.room-control-options-watermark-btns {
+  min-width: 104px;
+  height: 24px;
+  display: flex;
+  background-color: var(--fcr_mobile_ui_scene_fill1);
+  align-items: center;
+  padding: 2px;
+  margin-left: 80px;
+}
+
+.room-control-options-watermark-btn {
+  min-width: 50px;
+  height: 20px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: var(--fcr_ui_scene_icontext1);
+  font-size: 12px;
+  background-color: transparent;
+  padding: 0px 4px;
+  width: auto !important;
+}
+.room-control-options-watermark-btn--active {
+  background-color: #ffffff;
+  color: var(--fcr_ui_scene_ramp_brand6);
+}
+
+.room-control-options-watermark-title-box {
+  display: flex;
+  align-items: center;
+  font-size: 13px;
+}
+
+.room-control-drop-with-under-line::after {
+  content: '';
+  position: absolute;
+  left: -10px;
+  right: -10px;
+  bottom: -12px;
+  border-top: 1px solid var(--fcr_ui_scene_line1);
+  margin: 8px 0;
+}
+
+.room-control-drop-disable {
+  opacity: 0.5;
+  cursor: not-allowed;
+}

package/lib/modules/participant/components/drop-menu/index.d.ts

@@ -0,0 +1,2 @@
+import './index.css';
+export declare const RoomControlDropMenu: () => import("react/jsx-runtime").JSX.Element;