fcr-ui-scene 1.0.40 → 3.1.0-1

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

@@ -0,0 +1,280 @@
+"use strict";
+
+require("core-js/modules/es.symbol.js");
+require("core-js/modules/es.array.filter.js");
+require("core-js/modules/es.array.for-each.js");
+require("core-js/modules/es.array.push.js");
+require("core-js/modules/es.object.define-properties.js");
+require("core-js/modules/es.object.define-property.js");
+require("core-js/modules/es.object.get-own-property-descriptor.js");
+require("core-js/modules/es.object.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/web.dom-collections.for-each.js");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ParticipantAttendee = void 0;
+require("core-js/modules/web.timers.js");
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _avatar = require("agora-ui-foundation/lib/components/avatar");
+var _action = require("agora-ui-foundation/lib/components/button/action");
+var _icon = require("agora-ui-foundation/lib/components/icon");
+var _type = require("agora-ui-foundation/lib/components/icon/type");
+var _popover = require("agora-ui-foundation/lib/components/popover");
+var _cameraState = require("agora-ui-foundation/lib/components/room-screen-share-state-bar/camera-state");
+var _microphoneState = require("agora-ui-foundation/lib/components/room-screen-share-state-bar/microphone-state");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _mobxReact = require("mobx-react");
+var _react = require("react");
+var _constant = require("../../../utilities/constant");
+var _participantsMoreAction = require("./participants-more-action");
+var _context = require("../context");
+var _type2 = require("../../../type");
+var _i18n = require("agora-ui-foundation/lib/i18n");
+var _muteAction = require("../../../utilities/mute-action");
+require("./index.css");
+var _agoraEduCore = require("agora-edu-core");
+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 ParticipantAttendee = exports.ParticipantAttendee = (0, _mobxReact.observer)(function (props) {
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    isShowDropMenu = _useState2[0],
+    setIsShowDropMenu = _useState2[1];
+  var userId = props.userId,
+    userName = props.userName,
+    isMe = props.isMe,
+    isHost = props.isHost,
+    hasAudio = props.hasAudio,
+    hasVideo = props.hasVideo,
+    isScreenSharing = props.isScreenSharing,
+    isBoardActive = props.isBoardActive,
+    _props$onParticipants = props.onParticipantsButtonClick,
+    onParticipantsButtonClick = _props$onParticipants === void 0 ? function () {} : _props$onParticipants,
+    _props$currentPerspec = props.currentPerspectiveType,
+    currentPerspectiveType = _props$currentPerspec === void 0 ? 'attendee' : _props$currentPerspec,
+    audioDeviceType = props.audioDeviceType,
+    videoDeviceType = props.videoDeviceType,
+    userType = props.userType,
+    userRole = props.userRole,
+    isSpotlight = props.isSpotlight,
+    isPin = props.isPin,
+    hasPinnedStream = props.hasPinnedStream,
+    enableSpotlight = props.enableSpotlight,
+    allowedOperations = props.allowedOperations,
+    hasMutePermission = props.hasMutePermission,
+    hasUnmutePermission = props.hasUnmutePermission,
+    hasRequestStartAudioPermission = props.hasRequestStartAudioPermission;
+  var _useState3 = (0, _react.useState)(false),
+    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+    disableHover = _useState4[0],
+    setDisableHover = _useState4[1];
+  var volumeTimer = undefined;
+  var _useState5 = (0, _react.useState)(0),
+    _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
+    phoneCallFrame = _useState6[0],
+    setPhoneCallFrame = _useState6[1];
+  var percentPhone = function percentPhone(phoneCallFrame) {
+    switch (phoneCallFrame) {
+      case '0':
+        return 30;
+      case '1':
+        return 19;
+      case '2':
+        return 9;
+      default:
+        return 4;
+    }
+  };
+  var userAvatar = function userAvatar() {
+    if (userType === 'meeting-system') {
+      return {
+        icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+          type: _type.FcrIconType.FCR_SIPDEVICE,
+          colors: {
+            iconPrimary: 'var(--fcr_ui_scene_white10)',
+            iconSecondary: 'var(--fcr_ui_scene_ramp_green6)'
+          }
+        }),
+        backgroundColor: 'var(--fcr_ui_scene_ramp_purple7)'
+      };
+    }
+    if (userType === 'phone') {
+      return {
+        icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+          type: _type.FcrIconType.FCR_PHONECALL3,
+          colors: {
+            iconPrimary: 'var(--fcr_ui_scene_white10)'
+          }
+        }),
+        backgroundColor: 'var(--fcr_ui_scene_ramp_green6)'
+      };
+    }
+    return {
+      icon: null,
+      backgroundColor: ''
+    };
+  };
+  (0, _react.useEffect)(function () {
+    setDisableHover(userType === 'meeting-system');
+  }, [userType]);
+  (0, _react.useEffect)(function () {
+    if (volumeTimer) {
+      clearInterval(volumeTimer);
+    }
+    if (audioDeviceType === 'phone-mic') {
+      volumeTimer = setInterval(function () {
+        setPhoneCallFrame(function (frame) {
+          return (frame + 1) % 4;
+        });
+      }, 250);
+      return function () {
+        return clearInterval(volumeTimer);
+      };
+    }
+  }, [audioDeviceType]);
+  var userActions = function userActions() {
+    var handleAudioButtonClick = function handleAudioButtonClick() {
+      var action = hasAudio ? _constant.ParticipantType.MUTE_AUDIO : _constant.ParticipantType.UNMUTE_AUDIO;
+      onParticipantsButtonClick(action, userId);
+    };
+    var handlePrivateChatButtonClick = function handlePrivateChatButtonClick() {
+      onParticipantsButtonClick(_constant.ParticipantType.PRIVATE_CHAT, userId);
+    };
+    var handleMoreActionsClick = function handleMoreActionsClick(action, userId) {
+      onParticipantsButtonClick(action, userId);
+      setIsShowDropMenu(false);
+    };
+    var muteAudioPermission = hasMutePermission(isMe ? _agoraEduCore.FcrPrivilegeUserRole.SELF : userRole);
+    var startAudioPermission = hasUnmutePermission(isMe ? _agoraEduCore.FcrPrivilegeUserRole.SELF : userRole);
+    var requestStartAudioPermission = hasRequestStartAudioPermission(userRole);
+    var _actionMute = (0, _muteAction.actionMute)(!!isMe, hasAudio, muteAudioPermission, startAudioPermission, requestStartAudioPermission),
+      isShowActionAudio = _actionMute.isShowActionAudio,
+      actionAudioTag = _actionMute.actionAudioTag;
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "attendee__user-action attendee__user-action-host ".concat(isShowDropMenu ? 'attendee__user-action-hovered' : ''),
+      children: [isShowActionAudio && /*#__PURE__*/(0, _jsxRuntime.jsx)(_action.FcrActionButton, {
+        size: "small",
+        onClick: handleAudioButtonClick,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          className: hasAudio ? 'attendee__danger-operate' : 'attendee__normal-operate',
+          children: t(actionAudioTag)
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_popover.FcrPopover, {
+        visible: isShowDropMenu,
+        overlayInnerStyle: {
+          border: 0,
+          boxShadow: '0px 0px 15px var(--fcr_web_light_dropup_m)',
+          borderRadius: 'var(--fcr_cornerradius_l)'
+        },
+        overlayClassName: "attendee__more-actions",
+        mouseEnterDelay: 0,
+        content: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          onMouseEnter: function onMouseEnter() {
+            return setIsShowDropMenu(true);
+          },
+          onMouseLeave: function onMouseLeave() {
+            return setIsShowDropMenu(false);
+          },
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_participantsMoreAction.ParticipantsMoreActions, _objectSpread(_objectSpread({}, props), {}, {
+            onParticipantsButtonClick: handleMoreActionsClick,
+            userRole: userRole,
+            isPin: isPin,
+            hasPinnedStream: hasPinnedStream,
+            allowedOperations: allowedOperations,
+            userType: userType
+          }))
+        }),
+        placement: "bottomRight",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_action.FcrActionButton, {
+          onClick: function onClick() {
+            return setIsShowDropMenu(true);
+          },
+          size: "small",
+          iconType: _type.FcrIconType.FCR_DROPDOWN,
+          children: t('fmt_participants_member_button_more')
+        })
+      })]
+    });
+  };
+  var t = (0, _i18n.useI18n)();
+  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", {
+        className: (0, _classnames["default"])('attendee__user-info-avatar', {
+          'attendee__user-info-avatar_speakerSpotlight': isSpotlight && enableSpotlight
+        }),
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_avatar.FcrAvatar, _objectSpread({
+          size: 32,
+          nickName: userName,
+          textSize: 14
+        }, userAvatar()))
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "attendee__user-info-identity",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: "attendee__name",
+          children: [userName, isMe && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+            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__user-media",
+      children: [isScreenSharing && /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+        type: _type.FcrIconType.FCR_SCREENSHARING_1,
+        size: 28,
+        colors: {
+          iconPrimary: 'var(--fcr_ui_scene_ramp_green6)'
+        }
+      }), isBoardActive && /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+        type: _type.FcrIconType.FCR_WHITEBOARD,
+        size: 28,
+        colors: {
+          iconPrimary: 'var(--fcr_ui_scene_ramp_green6)'
+        }
+      }), audioDeviceType !== 'none' && /*#__PURE__*/(0, _jsxRuntime.jsx)(MicrophoneIndicator, {
+        audioDeviceType: audioDeviceType,
+        hasAudio: hasAudio,
+        isLocal: !!isMe,
+        userId: userId
+      }), videoDeviceType !== 'none' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_cameraState.CameraState, {
+        isCameraMuted: !hasVideo,
+        size: 28
+      })]
+    }), userActions()]
+  }, userId);
+});
+var MicrophoneIndicator = (0, _mobxReact.observer)(function (_ref) {
+  var audioDeviceType = _ref.audioDeviceType,
+    hasAudio = _ref.hasAudio,
+    isLocal = _ref.isLocal,
+    userId = _ref.userId;
+  var _useContext = (0, _react.useContext)(_context.StoreContext),
+    audioVolumeMap = _useContext.audioVolumeMap,
+    localMicVolume = _useContext.localMicVolume;
+  var volume = isLocal ? localMicVolume : audioVolumeMap.get(userId);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_microphoneState.MicrophoneState, {
+    isMicrophoneMuted: !hasAudio,
+    size: 28,
+    isPhoneMic: audioDeviceType === 'phone-mic',
+    voicePercent: volume || 0
+  });
+});

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,275 @@
+"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");
+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_PINPAGE,
+      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_PINPAGE,
+      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/attendee/user-more-actions.d.ts

@@ -0,0 +1,22 @@
+import { FcrIconType } from 'agora-ui-foundation/lib/components/icon/type';
+export declare enum PARTICIPANT_HOST_ACTIONS {
+    AUDIO = "AUDIO",
+    PRIVATE_CHAT = "PRIVATE_CHAT",
+    VIDEO = "VIDEO",
+    FOCUS_VIDEO = "FOCUS_VIDEO",
+    PIN_VIDEO = "PIN_VIDEO",
+    SET_AS_HOST = "SET_AS_HOST",
+    SET_AS_COHOST = "SET_AS_COHOST",
+    RENAME = "RENAME",
+    ALLOW_RECORD_LOCAL_VIDEO = "ALLOW_RECORD_LOCAL_VIDEO",
+    PUT_INTO_WAITING_ROOM = "PUT_INTO_WAITING_ROOM",
+    KICK_OUT = "KICK_OUT"
+}
+interface ParticipantActions {
+    key: PARTICIPANT_HOST_ACTIONS;
+    displayWhenNoPermission: 'hide' | 'show' | 'disable';
+    defaultType: 'primary' | 'disabled' | 'danger';
+    iconType?: FcrIconType;
+}
+export declare const participantActions: ParticipantActions[];
+export {};

package/lib/modules/participant/attendee/user-more-actions.js

@@ -0,0 +1,76 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.participantActions = exports.PARTICIPANT_HOST_ACTIONS = void 0;
+var _type = require("agora-ui-foundation/lib/components/icon/type");
+var PARTICIPANT_HOST_ACTIONS = exports.PARTICIPANT_HOST_ACTIONS = /*#__PURE__*/function (PARTICIPANT_HOST_ACTIONS) {
+  PARTICIPANT_HOST_ACTIONS["AUDIO"] = "AUDIO";
+  PARTICIPANT_HOST_ACTIONS["PRIVATE_CHAT"] = "PRIVATE_CHAT";
+  PARTICIPANT_HOST_ACTIONS["VIDEO"] = "VIDEO";
+  PARTICIPANT_HOST_ACTIONS["FOCUS_VIDEO"] = "FOCUS_VIDEO";
+  PARTICIPANT_HOST_ACTIONS["PIN_VIDEO"] = "PIN_VIDEO";
+  PARTICIPANT_HOST_ACTIONS["SET_AS_HOST"] = "SET_AS_HOST";
+  PARTICIPANT_HOST_ACTIONS["SET_AS_COHOST"] = "SET_AS_COHOST";
+  PARTICIPANT_HOST_ACTIONS["RENAME"] = "RENAME";
+  PARTICIPANT_HOST_ACTIONS["ALLOW_RECORD_LOCAL_VIDEO"] = "ALLOW_RECORD_LOCAL_VIDEO";
+  PARTICIPANT_HOST_ACTIONS["PUT_INTO_WAITING_ROOM"] = "PUT_INTO_WAITING_ROOM";
+  PARTICIPANT_HOST_ACTIONS["KICK_OUT"] = "KICK_OUT";
+  return PARTICIPANT_HOST_ACTIONS;
+}({});
+var participantActions = exports.participantActions = [{
+  key: PARTICIPANT_HOST_ACTIONS.AUDIO,
+  displayWhenNoPermission: 'hide',
+  defaultType: 'primary'
+}, {
+  key: PARTICIPANT_HOST_ACTIONS.PRIVATE_CHAT,
+  displayWhenNoPermission: 'show',
+  defaultType: 'primary',
+  iconType: _type.FcrIconType.FCR_MOBILE_CHAT3
+}, {
+  key: PARTICIPANT_HOST_ACTIONS.VIDEO,
+  displayWhenNoPermission: 'show',
+  defaultType: 'primary'
+}, {
+  key: PARTICIPANT_HOST_ACTIONS.FOCUS_VIDEO,
+  displayWhenNoPermission: 'disable',
+  defaultType: 'disabled',
+  iconType: _type.FcrIconType.FCR_FOCUSONHIM
+}, {
+  key: PARTICIPANT_HOST_ACTIONS.PIN_VIDEO,
+  displayWhenNoPermission: 'disable',
+  defaultType: 'disabled',
+  iconType: _type.FcrIconType.FCR_PINPAGE
+}, {
+  key: PARTICIPANT_HOST_ACTIONS.SET_AS_HOST,
+  displayWhenNoPermission: 'hide',
+  defaultType: 'disabled',
+  iconType: _type.FcrIconType.FCR_PINPAGE
+}, {
+  key: PARTICIPANT_HOST_ACTIONS.SET_AS_COHOST,
+  displayWhenNoPermission: 'hide',
+  defaultType: 'disabled',
+  iconType: _type.FcrIconType.FCR_PINPAGE
+}, {
+  key: PARTICIPANT_HOST_ACTIONS.RENAME,
+  displayWhenNoPermission: 'hide',
+  defaultType: 'disabled',
+  iconType: _type.FcrIconType.FCR_RENAME
+}, {
+  key: PARTICIPANT_HOST_ACTIONS.ALLOW_RECORD_LOCAL_VIDEO,
+  displayWhenNoPermission: 'hide',
+  defaultType: 'disabled',
+  iconType: _type.FcrIconType.FCR_PINPAGE
+}, {
+  key: PARTICIPANT_HOST_ACTIONS.PUT_INTO_WAITING_ROOM,
+  displayWhenNoPermission: 'hide',
+  defaultType: 'disabled',
+  iconType: _type.FcrIconType.FCR_PINPAGE
+}, {
+  key: PARTICIPANT_HOST_ACTIONS.KICK_OUT,
+  displayWhenNoPermission: 'hide',
+  defaultType: 'danger',
+  iconType: _type.FcrIconType.FCR_SETTING_NONE
+}];

package/lib/modules/participant/can-moveable/index.d.ts

@@ -0,0 +1 @@
+export declare const Moveable: ({ children }: any) => import("react/jsx-runtime").JSX.Element;