fcr-ui-scene 3.4.5 → 3.5.0

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

@@ -0,0 +1,398 @@
+"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/esnext.iterator.filter.js");
+require("core-js/modules/esnext.iterator.for-each.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 = 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.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"));
+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 _attendee = require("agora-ui-foundation/lib/components/participants/attendee");
+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 _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 _fcrCore = require("fcr-core");
+var _participantsMore = require("agora-ui-foundation/lib/components/participants/participants-more");
+var _checkbox = require("agora-ui-foundation/lib/components/checkbox");
+var _useLanguageConfig = require("../../interpreter/interpreter-list/interpreter-item/components/pick-language/useLanguageConfig");
+var _useClickAnywhere = require("agora-ui-foundation/lib/hooks/use-click-anywhere");
+var _useElectron = require("../../dialog/hooks/useElectron");
+var _type3 = require("fcr-core/lib/room-control/type");
+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 OperateWaitingRoomMemberDialog = exports.OperateWaitingRoomMemberDialog = function OperateWaitingRoomMemberDialog(_ref) {
+  var type = _ref.type,
+    tooltip = _ref.tooltip,
+    onChecked = _ref.onChecked;
+  var t = (0, _i18n.useI18n)();
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    isChecked = _useState2[0],
+    setIsChecked = _useState2[1];
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: "operate-waiting-room-dialog-content",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "operate-waiting-room-dialog-tooltip",
+      children: tooltip
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "operate-waiting-room-dialog-confirm",
+      children: type === 'admitAll' ? null : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_checkbox.FcrCheckbox, {
+          checked: isChecked,
+          onChange: function onChange(value) {
+            setIsChecked(value);
+            onChecked && onChecked(value);
+          },
+          size: "small",
+          styleType: "white"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          style: {
+            marginLeft: '10px'
+          },
+          children: t('fmt_waitingroom_sidebar_popup_option_notagain')
+        })]
+      })
+    })]
+  });
+};
+var ParticipantAttendee = exports.ParticipantAttendee = (0, _mobxReact.observer)(function (props) {
+  var _useState3 = (0, _react.useState)(false),
+    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+    isShowDropMenu = _useState4[0],
+    setIsShowDropMenu = _useState4[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,
+    activeTab = props.activeTab,
+    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],
+    setDisableHover = _useState6[1];
+  var nameColor = (0, _helper.getNameColor)(userName);
+  var volumeTimer = undefined;
+  var _useState7 = (0, _react.useState)(0),
+    _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':
+        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 ? _attendee.ParticipantActionType.MUTE_AUDIO : _attendee.ParticipantActionType.UNMUTE_AUDIO;
+      onParticipantsButtonClick(action, userId);
+    };
+    var handlePrivateChatButtonClick = function handlePrivateChatButtonClick() {
+      onParticipantsButtonClick(_attendee.ParticipantActionType.PRIVATE_CHAT, userId);
+    };
+    var handleMoreActionsClick = function handleMoreActionsClick(action, userId) {
+      onParticipantsButtonClick(action, userId);
+      setIsShowDropMenu(false);
+    };
+    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 === _type3.FcrRoomType.Mainroom && /*#__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)
+        })
+      }), activeTab === _type3.FcrRoomType.Waitingroom && /*#__PURE__*/(0, _jsxRuntime.jsx)(_action.FcrActionButton, {
+        size: "small",
+        onClick: function onClick() {
+          return moveToMainRoomByUserIds([userId]);
+        },
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          className: 'attendee__normal-operate',
+          children: t('fmt_waitingroom_sidebar_button_admit')
+        })
+      }), /*#__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)',
+          minWidth: '210px',
+          maxWidth: '300px',
+          width: 'fit-content'
+        },
+        overlayClassName: "attendee__more-actions",
+        mouseEnterDelay: 0,
+        content: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          ref: clickRef,
+          onMouseEnter: function onMouseEnter() {
+            if (timeoutId.current) {
+              clearTimeout(timeoutId.current);
+            }
+          },
+          onMouseLeave: function onMouseLeave() {
+            timeoutId.current = setTimeout(function () {
+              setIsShowDropMenu(false);
+            }, 200);
+          },
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_participantsMore.FcrParticipantsMoreActions, _objectSpread(_objectSpread({}, props), {}, {
+            onParticipantsButtonClick: handleMoreActionsClick,
+            userRole: userRole,
+            isPin: isPin,
+            hasPinnedStream: hasPinnedStream,
+            allowedOperations: allowedOperations,
+            userType: userType,
+            userId: userId,
+            hasVideo: hasVideo,
+            hasAudio: hasAudio,
+            userName: userName,
+            audioDeviceType: audioDeviceType,
+            hideActions: activeTab === _type3.FcrRoomType.Mainroom ? mainRoomParticipateActionsNeedHiden : waitingRoomParticipateActionsNeedHiden
+          }))
+        }),
+        placement: "bottomRight",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_action.FcrActionButton, {
+          onClick: function onClick() {
+            if (!isShowDropMenu) {
+              setIsShowDropMenu(true);
+            }
+          },
+          size: "small",
+          iconType: _type.FcrIconType.FCR_DROPDOWN,
+          children: t('fmt_participants_member_button_more')
+        })
+      })]
+    });
+  };
+  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
+    }),
+    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",
+          style: {
+            color: nameColor
+          },
+          children: [userName, isMe && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+            className: "attendee__me-badge",
+            children: "(Me)"
+          })]
+        }), /*#__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", {
+      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' && activeTab === _type3.FcrRoomType.Mainroom && /*#__PURE__*/(0, _jsxRuntime.jsx)(MicrophoneIndicator, {
+        audioDeviceType: audioDeviceType,
+        hasAudio: hasAudio,
+        isLocal: !!isMe,
+        userId: userId
+      }), videoDeviceType !== 'none' && activeTab === _type3.FcrRoomType.Mainroom && /*#__PURE__*/(0, _jsxRuntime.jsx)(_cameraState.CameraState, {
+        isCameraMuted: !hasVideo,
+        size: 28,
+        renderIconType: 'surface'
+      })]
+    }), userActions()]
+  }, userId);
+});
+var MicrophoneIndicator = (0, _mobxReact.observer)(function (_ref2) {
+  var audioDeviceType = _ref2.audioDeviceType,
+    hasAudio = _ref2.hasAudio,
+    isLocal = _ref2.isLocal,
+    userId = _ref2.userId;
+  var _useContext = (0, _react.useContext)(_store.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/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;

package/lib/modules/participant/can-moveable/index.js

@@ -0,0 +1,68 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Moveable = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = require("react");
+var _reactRnd = require("react-rnd");
+var _jsxRuntime = require("react/jsx-runtime");
+var Moveable = exports.Moveable = function Moveable(_ref) {
+  var children = _ref.children;
+  var _useState = (0, _react.useState)(0),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    currentCoordinateX = _useState2[0],
+    setCurrentCoordinateX = _useState2[1];
+  var _useState3 = (0, _react.useState)(0),
+    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+    currentCoordinateY = _useState4[0],
+    setCurrentCoordinateY = _useState4[1];
+  var rndRef = (0, _react.useRef)(null);
+  (0, _react.useEffect)(function () {
+    if (rndRef.current) {
+      var width = rndRef.current.offsetWidth;
+      var x = window.innerWidth - width;
+      setCurrentCoordinateX(x);
+    }
+  }, [rndRef.current]);
+  var handleDragStop = function handleDragStop(_, data) {
+    var x = data.lastX,
+      y = data.lastY;
+    setCurrentCoordinateX(x);
+    setCurrentCoordinateY(y);
+  };
+  var handleResize = (0, _react.useCallback)(function () {
+    console.log('window.innerWidth < currentCoordinateX', window.innerWidth < currentCoordinateX, window.innerWidth, currentCoordinateX);
+    if (window.innerWidth < currentCoordinateX - rndRef.current) {
+      setCurrentCoordinateX(0);
+    }
+  }, [currentCoordinateX]);
+  (0, _react.useEffect)(function () {
+    window.addEventListener('resize', handleResize);
+    return function () {
+      window.removeEventListener('resize', handleResize);
+    };
+  }, [currentCoordinateX]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactRnd.Rnd, {
+    bounds: "window",
+    onDragStop: handleDragStop,
+    minHeight: 560,
+    minWidth: 360,
+    maxHeight: 700,
+    maxWidth: 620,
+    enableUserSelectHack: true,
+    position: {
+      x: currentCoordinateX,
+      y: currentCoordinateY
+    },
+    dragHandleClassName: "can-draggable",
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      ref: rndRef,
+      className: "participants-container participants-moveable",
+      children: children
+    })
+  });
+};

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

@@ -9,8 +9,6 @@ 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/esnext.async-iterator.filter.js");
-require("core-js/modules/esnext.async-iterator.for-each.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");
@@ -21,7 +19,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.ParticipantAttendee = 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");

package/lib/modules/participant/components/confirm-input/index.d.ts

@@ -0,0 +1,6 @@
+declare function ConfirmInput(props: {
+    onChange: (name: string | number) => void;
+    placeholder?: string;
+    type?: 'number' | 'text';
+}): import("react/jsx-runtime").JSX.Element;
+export default ConfirmInput;

package/lib/modules/participant/components/confirm-input/index.js

@@ -0,0 +1,50 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+require("core-js/modules/es.regexp.exec.js");
+require("core-js/modules/es.regexp.test.js");
+require("core-js/modules/es.string.trim.js");
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _input = require("agora-ui-foundation/lib/components/input");
+var _i18n = require("agora-ui-foundation/lib/i18n");
+var _react = require("react");
+var _jsxRuntime = require("react/jsx-runtime");
+function ConfirmInput(props) {
+  var onChange = props.onChange,
+    placeholder = props.placeholder,
+    _props$type = props.type,
+    type = _props$type === void 0 ? 'text' : _props$type;
+  var _useState = (0, _react.useState)(''),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    name = _useState2[0],
+    setName = _useState2[1];
+  var t = (0, _i18n.useI18n)();
+  (0, _react.useEffect)(function () {
+    onChange(name);
+  }, [name]);
+  function handleNameChange(name) {
+    type === 'number' ? (/^\d+$/.test(name) || name === '') && setName(name.trim()) : setName(name.trim());
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: "participants-container-rename",
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_input.FcrInput, {
+      autoFocus: true,
+      style: {
+        flex: 1
+      },
+      value: name,
+      onChange: handleNameChange,
+      size: "large",
+      allowClear: true,
+      shape: "rounded",
+      maxLength: 18,
+      placeholder: placeholder || t('fmt_additional_popup_label_enter_nickname')
+    })
+  });
+}
+var _default = exports["default"] = ConfirmInput;

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

@@ -8,7 +8,6 @@ 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/esnext.async-iterator.for-each.js");
 require("core-js/modules/esnext.iterator.for-each.js");
 require("core-js/modules/web.dom-collections.for-each.js");
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -21,8 +20,6 @@ require("core-js/modules/es.array.filter.js");
 require("core-js/modules/es.array.map.js");
 require("core-js/modules/es.array.unshift.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.map.js");
 require("core-js/modules/esnext.iterator.constructor.js");
 require("core-js/modules/esnext.iterator.filter.js");
 require("core-js/modules/esnext.iterator.map.js");