fcr-ui-scene 3.4.0 → 3.4.2

package/lib/modules/participant/components/mute-all/index.js

@@ -8,19 +8,17 @@ Object.defineProperty(exports, "__esModule", {
 exports.MuteAllDialog = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _checkbox = require("agora-ui-foundation/lib/components/checkbox");
-var _dialog = require("agora-ui-foundation/lib/components/dialog");
 var _i18n = require("agora-ui-foundation/lib/i18n");
 var _react = require("react");
 var _jsxRuntime = require("react/jsx-runtime");
 var MuteAllDialog = exports.MuteAllDialog = function MuteAllDialog(_ref) {
-  var getContainer = _ref.getContainer,
+  var open = _ref.open,
     _ref$allowUnmuteSelfA = _ref.allowUnmuteSelfAudio,
     allowUnmuteSelfAudio = _ref$allowUnmuteSelfA === void 0 ? false : _ref$allowUnmuteSelfA,
     _ref$allowJoinWithMut = _ref.allowJoinWithMuteAudio,
     allowJoinWithMuteAudio = _ref$allowJoinWithMut === void 0 ? false : _ref$allowJoinWithMut,
-    showMuteAllDialog = _ref.showMuteAllDialog,
     onCancel = _ref.onCancel,
-    onOk = _ref.onOk,
+    setMuteAllDialogValue = _ref.setMuteAllDialogValue,
     onClose = _ref.onClose;
   var _useState = (0, _react.useState)(allowUnmuteSelfAudio),
     _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
@@ -30,49 +28,38 @@ var MuteAllDialog = exports.MuteAllDialog = function MuteAllDialog(_ref) {
     _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
     joinWithMute = _useState4[0],
     setJoinWithMute = _useState4[1];
-  var handlerConfirm = function handlerConfirm() {
-    onOk && onOk(allowUnmute, joinWithMute);
-  };
+  var transI18n = (0, _i18n.useI18n)();
   (0, _react.useEffect)(function () {
-    if (showMuteAllDialog) {
+    if (open) {
       setAllowUnmute(allowUnmuteSelfAudio);
       setJoinWithMute(allowJoinWithMuteAudio);
     }
-  }, [allowUnmuteSelfAudio, allowJoinWithMuteAudio, showMuteAllDialog]);
-  var transI18n = (0, _i18n.useI18n)();
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_dialog.FcrConfirmDialog, {
-    getContainer: getContainer,
-    title: transI18n('fmt_attendies_options_muteall'),
-    visible: showMuteAllDialog,
-    okButtonProps: {
-      styleType: 'danger',
-      shape: 'rounded'
-    },
-    cancelButtonProps: {
-      shape: 'rounded'
-    },
-    onCancel: onCancel,
-    okText: transI18n('fmt_attendies_button_muteall'),
-    cancelText: transI18n('fmt_attendies_button_cancel'),
-    onClose: onClose,
-    onOk: handlerConfirm,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_checkbox.FcrCheckbox, {
-        label: transI18n('fmt_attendies_options_muteuponjoin'),
-        checked: joinWithMute,
-        onChange: function onChange(checked) {
-          return setJoinWithMute(checked);
-        }
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_checkbox.FcrCheckbox, {
-        label: transI18n('fmt_attendies_options_allowunmute'),
-        checked: allowUnmute,
-        onChange: function onChange(checked) {
-          return setAllowUnmute(checked);
-        },
-        style: {
-          marginTop: '16px'
-        }
-      })]
-    })
+  }, [allowUnmuteSelfAudio, allowJoinWithMuteAudio, open]);
+  var handleCheckboxChange = (0, _react.useCallback)(function (type, checked) {
+    if (type === 'allowUnmute') {
+      setAllowUnmute(checked);
+      setMuteAllDialogValue && setMuteAllDialogValue(checked, joinWithMute);
+    } else if (type === 'joinWithMute') {
+      setJoinWithMute(checked);
+      setMuteAllDialogValue && setMuteAllDialogValue(allowUnmute, checked);
+    }
+  }, [allowUnmute, joinWithMute, setMuteAllDialogValue]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_checkbox.FcrCheckbox, {
+      label: transI18n('fmt_attendies_options_muteuponjoin'),
+      checked: joinWithMute,
+      onChange: function onChange(checked) {
+        return handleCheckboxChange('joinWithMute', checked);
+      }
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_checkbox.FcrCheckbox, {
+      label: transI18n('fmt_attendies_options_allowunmute'),
+      checked: allowUnmute,
+      onChange: function onChange(checked) {
+        return handleCheckboxChange('allowUnmute', checked);
+      },
+      style: {
+        marginTop: '16px'
+      }
+    })]
   });
 };

package/lib/modules/participant/components/operate-waitingroom-member/index.d.ts

@@ -0,0 +1,2 @@
+import { OperateWaitingRoomMemberDialogProps } from '../../type';
+export declare const OperateWaitingRoomMemberDialog: ({ type, tooltip, onChecked, }: OperateWaitingRoomMemberDialogProps) => import("react/jsx-runtime").JSX.Element;

package/lib/modules/participant/components/operate-waitingroom-member/index.js

@@ -0,0 +1,48 @@
+"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.OperateWaitingRoomMemberDialog = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _i18n = require("agora-ui-foundation/lib/i18n");
+var _react = require("react");
+var _checkbox = require("agora-ui-foundation/lib/components/checkbox");
+var _jsxRuntime = require("react/jsx-runtime");
+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')
+        })]
+      })
+    })]
+  });
+};

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

@@ -19,12 +19,13 @@ var _store = require("../../../dialog/store");
 var _store2 = require("../../store");
 var _i18n = require("agora-ui-foundation/lib/i18n");
 var _footer = _interopRequireDefault(require("../footer"));
-var _muteAll = require("../mute-all");
 var _react = require("react");
 var _constant = require("../../../../utilities/constant");
 var _env = require("agora-foundation/lib/utilities/env");
-var _attendee = require("../../attendee");
+var _attendee = require("../attendee");
 var _merge = _interopRequireDefault(require("../merge"));
+var _type = require("fcr-core/lib/room-control/type");
+var _userAction = require("../user-action");
 var _jsxRuntime = require("react/jsx-runtime");
 var ParticipantsContainer = (0, _mobxReact.observer)(function () {
   var _useContext = (0, _react.useContext)(_store2.StoreContext),
@@ -64,12 +65,15 @@ var ParticipantsContainer = (0, _mobxReact.observer)(function () {
     interpreterUsers = _useContext.interpreterUsers,
     interpreterState = _useContext.interpreterState,
     interpreterInputLanguageList = _useContext.interpreterInputLanguageList,
-    refreshList = _useContext.refreshList;
+    refreshList = _useContext.refreshList,
+    openMuteAllDialog = _useContext.openMuteAllDialog;
   var dialogStore = (0, _react.useContext)(_store.StoreContext);
   var transI18n = (0, _i18n.useI18n)();
   var handlerRoomControlClick = function handlerRoomControlClick(action, userId) {
-    if (action === _constant.RoomControlType.MUTE_ALL_AUDIO) {
-      setShowMuteAllDialog(true);
+    if (action === _constant.FcrUIRoomControlType.MUTE_ALL_AUDIO) {
+      openMuteAllDialog({
+        open: true
+      });
       return;
     }
     setShowMuteAllDialog(false);
@@ -93,7 +97,7 @@ var ParticipantsContainer = (0, _mobxReact.observer)(function () {
     children: [waitingRoomUserCount > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_tabs.FcrTabs, {
       items: [{
         label: transI18n('fmt_waitingroom_sidebar_chat_label_meeting'),
-        key: _constant.RoomType.MAIN_ROOM
+        key: _type.FcrRoomType.Mainroom
       }, {
         label: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
           className: "participants-container-icon",
@@ -103,7 +107,7 @@ var ParticipantsContainer = (0, _mobxReact.observer)(function () {
             reason1: waitingRoomUserCount
           })]
         }),
-        key: _constant.RoomType.WAITING_ROOM
+        key: _type.FcrRoomType.Waitingroom
       }],
       activeKey: activeTab,
       onChange: function onChange(key) {
@@ -126,36 +130,27 @@ var ParticipantsContainer = (0, _mobxReact.observer)(function () {
         return /*#__PURE__*/(0, _jsxRuntime.jsx)(_mobxReact.Observer, {
           children: function children() {
             return /*#__PURE__*/(0, _jsxRuntime.jsx)(_attendee.ParticipantAttendee, {
+              user: user,
               interpreterInputLanguage: interpreterInputLanguage,
               activeTab: activeTab,
               interpreterUsers: interpreterUsers,
               interpreterState: interpreterState,
-              moveToMainRoomByUserIds: moveToMainRoomByUserIds,
-              hasMutePermission: hasMutePermission,
-              hasUnmutePermission: hasUnmutePermission,
-              hasRequestStartAudioPermission: hasRequestStartAudioPermission,
-              currentPerspectiveType: currentPerspectiveType,
-              onParticipantsButtonClick: handlerUserAction,
-              userId: user.userId,
-              userName: user.userName,
               type: currentModal,
-              avatar: user.avatar,
-              hasAudio: user.hasAudio,
-              hasVideo: user.hasVideo,
-              isHost: user.isHost,
-              isMe: user.isMe,
-              audioDeviceType: user.audioDeviceType,
-              videoDeviceType: user.videoDeviceType,
-              userType: user.userType,
-              volume: user.volume,
-              userRole: user.userRole,
-              isSpotlight: user.isSpotlight,
-              isScreenSharing: user.isScreenSharing,
-              isBoardActive: user.isBoardActive,
-              isPin: checkIsPin(user.userId),
-              hasPinnedStream: hasPinnedStream,
               enableSpotlight: enableSpotlight,
-              allowedOperations: getAllowedOperations(user.userRole, !!user.isMe)
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_userAction.UserActions, {
+                user: user,
+                onParticipantsButtonClick: handlerUserAction,
+                hasMutePermission: hasMutePermission,
+                hasUnmutePermission: hasUnmutePermission,
+                hasRequestStartAudioPermission: hasRequestStartAudioPermission,
+                moveToMainRoomByUserIds: moveToMainRoomByUserIds,
+                activeTab: activeTab,
+                isPin: checkIsPin(user.userId),
+                hasPinnedStream: hasPinnedStream,
+                allowedOperations: getAllowedOperations(user.userRole, !!user.isMe),
+                audioDeviceType: user.audioDeviceType,
+                type: currentModal
+              })
             });
           }
         });
@@ -167,25 +162,7 @@ var ParticipantsContainer = (0, _mobxReact.observer)(function () {
       footer: /*#__PURE__*/(0, _jsxRuntime.jsx)(_footer["default"], {
         handlerRoomControlClick: handlerRoomControlClick
       })
-    }, refreshList), /*#__PURE__*/(0, _jsxRuntime.jsx)(_muteAll.MuteAllDialog, {
-      getContainer: dialogContaner,
-      allowUnmuteSelfAudio: allowUnmuteSelfAudio,
-      allowJoinWithMuteAudio: allowJoinWithMuteAudio,
-      showMuteAllDialog: showMuteAllDialog,
-      onCancel: function onCancel() {
-        return setShowMuteAllDialog(false);
-      },
-      onOk: function onOk(allowUnmute, joinWithMute) {
-        setShowMuteAllDialog(false);
-        handlerRoomControlAction(_constant.RoomControlType.MUTE_ALL_AUDIO, {
-          allowUnmute: allowUnmute,
-          joinWithMuteAudio: joinWithMute
-        });
-      },
-      onClose: function onClose() {
-        return setShowMuteAllDialog(false);
-      }
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_merge["default"], {
+    }, refreshList), /*#__PURE__*/(0, _jsxRuntime.jsx)(_merge["default"], {
       getContainer: dialogContaner,
       showMergeConfirmDialog: mergeConfirmDialog,
       onClose: function onClose() {

package/lib/modules/participant/components/user-action/index.d.ts

@@ -0,0 +1,17 @@
+import { ParticipantActionType, User } from 'agora-ui-foundation/lib/components/participants/attendee';
+import { FcrRoomType } from 'fcr-core/lib/room-control/type';
+import { FcrPrivilegeUserRole, FcrUserRole } from 'fcr-core';
+export declare const UserActions: (props: {
+    user: User;
+    onParticipantsButtonClick: (action: ParticipantActionType, userId: string) => void;
+    hasMutePermission: (role: FcrPrivilegeUserRole | FcrUserRole) => boolean;
+    hasUnmutePermission: (targetRole: FcrPrivilegeUserRole | FcrUserRole) => boolean;
+    hasRequestStartAudioPermission: (targetRole: FcrPrivilegeUserRole | FcrUserRole) => boolean;
+    moveToMainRoomByUserIds: (userIds: string[]) => void;
+    activeTab: FcrRoomType;
+    isPin: boolean;
+    hasPinnedStream: boolean;
+    allowedOperations: string[];
+    audioDeviceType: string;
+    type: "modal" | "window";
+}) => import("react/jsx-runtime").JSX.Element;

package/lib/modules/participant/components/user-action/index.js

@@ -0,0 +1,169 @@
+"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/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");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.UserActions = 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 _attendee = require("agora-ui-foundation/lib/components/participants/attendee");
+var _react = require("react");
+var _type = require("fcr-core/lib/room-control/type");
+var _action = require("agora-ui-foundation/lib/components/button/action");
+var _popover = require("agora-ui-foundation/lib/components/popover");
+var _participantsMore = require("agora-ui-foundation/lib/components/participants/participants-more");
+var _type2 = require("agora-ui-foundation/lib/components/icon/type");
+var _i18n = require("agora-ui-foundation/lib/i18n");
+var _fcrCore = require("fcr-core");
+var _muteAction = require("../../../../utilities/mute-action");
+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 UserActions = exports.UserActions = function UserActions(props) {
+  var t = (0, _i18n.useI18n)();
+  var _props$user = props.user,
+    hasAudio = _props$user.hasAudio,
+    userId = _props$user.userId,
+    userRole = _props$user.userRole,
+    userName = _props$user.userName,
+    userType = _props$user.userType,
+    hasVideo = _props$user.hasVideo,
+    isMe = _props$user.isMe;
+  var activeTab = props.activeTab,
+    isPin = props.isPin,
+    hasPinnedStream = props.hasPinnedStream,
+    allowedOperations = props.allowedOperations,
+    audioDeviceType = props.audioDeviceType,
+    type = props.type,
+    onParticipantsButtonClick = props.onParticipantsButtonClick,
+    hasMutePermission = props.hasMutePermission,
+    hasUnmutePermission = props.hasUnmutePermission,
+    hasRequestStartAudioPermission = props.hasRequestStartAudioPermission,
+    moveToMainRoomByUserIds = props.moveToMainRoomByUserIds;
+  var dialogInstanceContext = (0, _react.useContext)(_useElectron.DialogInstanceContext);
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    isShowDropMenu = _useState2[0],
+    setIsShowDropMenu = _useState2[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 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 = isMe ? ['private_chat'] : [];
+  (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 === _type.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 === _type.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 === _type.FcrRoomType.Mainroom ? mainRoomParticipateActionsNeedHiden : waitingRoomParticipateActionsNeedHiden
+        }))
+      }),
+      placement: "bottomRight",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_action.FcrActionButton, {
+        onClick: function onClick() {
+          if (!isShowDropMenu) {
+            setIsShowDropMenu(true);
+          }
+        },
+        size: "small",
+        iconType: _type2.FcrIconType.FCR_DROPDOWN,
+        children: t('fmt_participants_member_button_more')
+      })
+    })]
+  });
+};

package/lib/modules/participant/index.css

@@ -2,6 +2,7 @@
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
+  flex-direction: column;
   width: 100%;
   min-width: 320px;
   flex: 1;
@@ -82,3 +83,7 @@
   display: flex;
   flex: 1;
 }
+
+.participants-container .fcr-tabs {
+  margin: 0 15px;
+}

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

@@ -1,30 +1,42 @@
-import { FcrCoreEngine } from 'fcr-core';
 import { UIModule } from '../../base';
-import { FcrSecurityStore } from '../../common/security-store';
-import { FcrUIEventStore } from '../../common/event-store';
-import { FcrDeviceStore } from '../../common/device-store';
-import { FcrDeviceStreamStore } from '../../common/device-stream-store';
-import { FcrPeerSessionControl } from 'fcr-core/lib/peer-session/type';
-import { FcrInterpreterControl } from 'fcr-core/lib/room-control/interpreter-control/types';
-import { FcrMainRoomControl } from 'fcr-core/lib/room-control/type';
-import { OperateWaitingRoomMemberDialogProps } from './attendee';
-import { FcrRoomStore } from '../../common/room-store';
 import './index.css';
+import { FcrUIDeviceStreamProvider } from '../../providers/device-stream-provider';
+import { FcrUIEventProvider } from '../../providers/event-provider';
+import { FcrUIMainRoomControlProvider } from '../../providers/room-provider';
+import { FcrUIPrivilegeProvider } from '../../providers/privilege-provider';
+import { FcrUIDeviceProvider } from '../../providers/device-provider';
+import { FcrUISessionProvider } from '../../providers/session-provider';
+import { FcrUIRoomProvider } from '../../providers/room-provider';
+import { FcrUISharedSpeakerSpotlightDataSource } from '../../shared-data-source/speaker-spotlight';
+import { FcrUISharedPinDataSource } from '../../shared-data-source/pin-data';
+import { FcrUISharedLayoutDataSource } from '../../shared-data-source/layout-data';
+import { FcrUISharedInterpreterDataSource } from '../../shared-data-source/interpreter';
+import { FcrUISharedSettingDataSource } from '../../shared-data-source/setting';
+import { FcrUISharedWaitingRoomDataSource } from '../../shared-data-source/waiting-room';
+import { FcrUIVideoWindowDataSource } from '../../shared-data-source/video-window';
+import { FcrUIChatProvider } from '../../providers/chat-provider';
+import { OperateWaitingRoomMemberDialogProps } from './type';
 export declare class ParticipantUIModule extends UIModule {
     private _store;
-    constructor(args: {
-        roomControl: FcrMainRoomControl;
-        engine: FcrCoreEngine;
-        peerSessionControl: FcrPeerSessionControl;
-        securityStore: FcrSecurityStore;
-        uiEventStore: FcrUIEventStore;
-        deviceStore: FcrDeviceStore;
-        deviceStreamStore: FcrDeviceStreamStore;
-        interpreterControl: FcrInterpreterControl;
-        roomStore: FcrRoomStore;
-    });
+    deviceStreamProvider?: FcrUIDeviceStreamProvider;
+    deviceProvider?: FcrUIDeviceProvider;
+    privilegeProvider?: FcrUIPrivilegeProvider;
+    mainRoomControlProvider?: FcrUIMainRoomControlProvider;
+    eventProvider?: FcrUIEventProvider;
+    sessionProvider?: FcrUISessionProvider;
+    roomStoreProvider?: FcrUIRoomProvider;
+    sharedSpeakerSpotlightDataSource?: FcrUISharedSpeakerSpotlightDataSource;
+    sharedPinDataSource?: FcrUISharedPinDataSource;
+    sharedLayoutDataSource?: FcrUISharedLayoutDataSource;
+    sharedInterpreterDataSource?: FcrUISharedInterpreterDataSource;
+    sharedVideoWindowDataSource?: FcrUIVideoWindowDataSource;
+    roomProvider?: FcrUIRoomProvider;
+    sharedSettingDataSource?: FcrUISharedSettingDataSource;
+    sharedWaitingRoomDataSource?: FcrUISharedWaitingRoomDataSource;
+    chatProvider?: FcrUIChatProvider;
+    onNodeWillActive(): void;
+    onNodeWillInactive(): void;
     getComponent(): import("react/jsx-runtime").JSX.Element;
     getWaitingRoomDialog(params: OperateWaitingRoomMemberDialogProps): import("react/jsx-runtime").JSX.Element;
     onProcessEvent(event: RendererCustomEvent): void;
-    protected onUnload(): void;
 }

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

@@ -1 +0,0 @@
-export {};