fcr-ui-scene 3.4.1 → 3.4.3

package/lib/modules/notification/view.d.ts

@@ -1,10 +1,12 @@
-import { FcrUIEventStore } from '../../common/event-store';
 import './index.css';
+import { FcrUIEventProvider } from '../../providers/event-provider';
+import { FcrUIMessageProvider } from '../../providers/message-provider';
 export type NotificationContent = {
     onClose?: () => void;
     onOk?: () => void;
     data?: any;
 };
-export declare const View: ({ uiEventStore }: {
-    uiEventStore: FcrUIEventStore;
+export declare const View: ({ uiEventStore, messageProvider, }: {
+    uiEventStore: FcrUIEventProvider;
+    messageProvider: FcrUIMessageProvider;
 }) => import("react/jsx-runtime").JSX.Element;

package/lib/modules/notification/view.js

@@ -18,7 +18,6 @@ exports.View = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _notification = _interopRequireWildcard(require("agora-ui-foundation/lib/components/notification"));
-var _eventStore = require("../../common/event-store");
 var _react = require("react");
 var _constant = require("../../utilities/constant");
 var _mobxReact = require("mobx-react");
@@ -29,6 +28,7 @@ var _icon = require("agora-ui-foundation/lib/components/icon");
 var _button = require("agora-ui-foundation/lib/components/button");
 var _interpreterStatus = require("./interpreter-status");
 require("./index.css");
+var _type2 = require("../../type");
 var _jsxRuntime = require("react/jsx-runtime");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
@@ -76,9 +76,10 @@ var Content = (0, _mobxReact.observer)(function (_ref) {
     })]
   });
 });
-var ContentMap = (0, _defineProperty2["default"])((0, _defineProperty2["default"])({}, _eventStore.NotificationContentType.WAITING_ROOM, Content), _eventStore.NotificationContentType.INTERPRETER_STATUS, _interpreterStatus.InterpreterStatus);
+var ContentMap = (0, _defineProperty2["default"])((0, _defineProperty2["default"])({}, _type2.FcrUINotificationContentType.WAITING_ROOM, Content), _type2.FcrUINotificationContentType.INTERPRETER_STATUS, _interpreterStatus.InterpreterStatus);
 var View = exports.View = function View(_ref2) {
-  var uiEventStore = _ref2.uiEventStore;
+  var uiEventStore = _ref2.uiEventStore,
+    messageProvider = _ref2.messageProvider;
   var _useFcrNotification = (0, _notification["default"])(),
     _useFcrNotification2 = (0, _slicedToArray2["default"])(_useFcrNotification, 2),
     notification = _useFcrNotification2[0],
@@ -86,7 +87,7 @@ var View = exports.View = function View(_ref2) {
   (0, _react.useEffect)(function () {
     var observer = {
       onEvent: function onEvent(action, params) {
-        if (action === _constant.UIAction.SHOW_NOTIFICATION) {
+        if (action === _constant.FcrUIAction.SHOW_NOTIFICATION) {
           var _params$duration;
           var Comp = ContentMap[params.type];
           notification.open({
@@ -99,14 +100,16 @@ var View = exports.View = function View(_ref2) {
             placement: params.placement,
             key: params.type
           });
-        } else if (action === _constant.UIAction.COLSE_NOTIFICATION) {
+        } else if (action === _constant.FcrUIAction.COLSE_NOTIFICATION) {
           notification.close(params);
         }
       }
     };
     uiEventStore.addObserver(observer);
+    messageProvider.addObserver(observer);
     return function () {
       uiEventStore.removeObserver(observer);
+      messageProvider.removeObserver(observer);
     };
   }, []);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {

package/lib/modules/offscreen-pulling/index.js

@@ -15,7 +15,6 @@ require("core-js/modules/es.map.js");
 require("core-js/modules/es.object.to-string.js");
 require("core-js/modules/es.parse-int.js");
 require("core-js/modules/es.string.iterator.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.for-each.js");
 require("core-js/modules/esnext.map.delete-all.js");
@@ -53,7 +52,7 @@ var OffscreenPullingUIModule = exports.OffscreenPullingUIModule = /*#__PURE__*/f
       pullingCount = _ref.pullingCount,
       pullingStreamType = _ref.pullingStreamType;
     (0, _classCallCheck2["default"])(this, OffscreenPullingUIModule);
-    _this = _callSuper(this, OffscreenPullingUIModule);
+    _this = _callSuper(this, OffscreenPullingUIModule, [null, null]);
     (0, _defineProperty2["default"])(_this, "_pullingStreamMap", new Map());
     _this._streamControl = streamControl;
     _this._userControl = userControl;

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

@@ -16,3 +16,54 @@
   max-width: 300px;
   padding: 0;
 }
+
+.operate-waiting-room-dialog-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background: white;
+  padding: 20px;
+  border-radius: 20px;
+}
+
+.operate-waiting-room-dialog-title {
+  font-weight: 600;
+  font-size: 16px;
+  margin-bottom: 10px;
+}
+
+.operate-waiting-room-dialog-tooltip {
+  margin-bottom: 10px;
+}
+
+.operate-waiting-room-dialog-confirm {
+  display: flex;
+}
+
+.operate-waiting-room-dialog-btns {
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  margin-top: 10px;
+}
+
+.operate-waiting-room-dialog-btns .fcr-button-normal {
+  width: 48%;
+}
+
+.operate-waiting-room-dialog-btns .fcr-button-white {
+  background-color: var(--fcr_ui_scene_btn2);
+  color: var(--fcr_ui_scene_icontext2);
+  width: 48%;
+}
+
+.operate-waiting-room-dialog-btns .fcr-button-white:hover {
+  background-color: var(--fcr_ui_scene_btn2) !important;
+  color: var(--fcr_ui_scene_icontext2) !important;
+  width: 48%;
+}
+
+.operate-waiting-room-dialog-btns .fcr-button-danger {
+  width: 48%;
+}

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

@@ -2,21 +2,18 @@ import { ParticipantActionType, User } from 'agora-ui-foundation/lib/components/
 import { FcrUserRole } from '../../../type';
 import './index.css';
 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';
+import { FcrRoomType } from 'fcr-core/lib/room-control/type';
+import './index.css';
 export type OperateWaitingRoomMemberDialogProps = {
     type: 'remove' | 'removeAll' | 'admitAll';
     tooltip: string;
     title: string;
     userId?: string;
+    onChecked?: (value: boolean) => void;
 };
-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;
+export declare const OperateWaitingRoomMemberDialog: ({ type, tooltip, onChecked, }: OperateWaitingRoomMemberDialogProps) => import("react/jsx-runtime").JSX.Element;
 interface ParticipantAttendeeProps extends User {
     onParticipantsButtonClick: (action: ParticipantActionType, userId: string, type?: FcrUserKickedOutType | undefined) => void;
     currentPerspectiveType?: 'host' | 'attendee' | 'cohost';
@@ -28,7 +25,7 @@ interface ParticipantAttendeeProps extends User {
     hasMutePermission: (role: FcrPrivilegeUserRole | FcrUserRole) => boolean;
     hasUnmutePermission: (role: FcrPrivilegeUserRole | FcrUserRole) => boolean;
     hasRequestStartAudioPermission: (role: FcrPrivilegeUserRole | FcrUserRole) => boolean;
-    activeTab: string;
+    activeTab: FcrRoomType;
     moveToMainRoomByUserIds: (userId: string[]) => void;
     interpreterUsers?: FcrInterpreterUserInfo[] | null;
     interpreterState: boolean;

package/lib/modules/participant/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");
@@ -18,10 +16,9 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.WaitingRoomDialogKeyMap = exports.ParticipantAttendee = exports.OperateWaitingRoomMemberDialog = void 0;
+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");
@@ -46,47 +43,26 @@ 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 _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 _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 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,
-    title = _ref.title,
-    userId = _ref.userId;
+    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];
-  var _useContext = (0, _react.useContext)(_store.StoreContext),
-    removeWaitingRoomUser = _useContext.removeWaitingRoomUser,
-    moveToMainRoomAllMember = _useContext.moveToMainRoomAllMember,
-    kickOutWaitingRoomAllMember = _useContext.kickOutWaitingRoomAllMember,
-    closeRemoveAdmitWaitingRoomDialog = _useContext.closeRemoveAdmitWaitingRoomDialog;
-  var buttonTextMap = {
-    removeAll: t('fmt_waitingroom_sidebar_button_removeall'),
-    admitAll: t('fmt_waitingroom_sidebar_button_admitall'),
-    remove: t('fmt_waitingroom_sidebar_popup_button_remove')
-  };
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     className: "operate-waiting-room-dialog-content",
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      className: "operate-waiting-room-dialog-title",
-      children: title
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: "operate-waiting-room-dialog-tooltip",
       children: tooltip
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
@@ -94,7 +70,10 @@ var OperateWaitingRoomMemberDialog = exports.OperateWaitingRoomMemberDialog = fu
       children: type === 'admitAll' ? null : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_checkbox.FcrCheckbox, {
           checked: isChecked,
-          onChange: setIsChecked,
+          onChange: function onChange(value) {
+            setIsChecked(value);
+            onChecked && onChecked(value);
+          },
           size: "small",
           styleType: "white"
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
@@ -104,34 +83,6 @@ var OperateWaitingRoomMemberDialog = exports.OperateWaitingRoomMemberDialog = fu
           children: t('fmt_waitingroom_sidebar_popup_option_notagain')
         })]
       })
-    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-      className: "operate-waiting-room-dialog-btns",
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_button.FcrButton, {
-        size: "S",
-        shape: "rounded",
-        styleType: "white",
-        onClick: function onClick() {
-          closeRemoveAdmitWaitingRoomDialog(WaitingRoomDialogKeyMap[type]);
-        },
-        children: t('fmt_waitingroom_sidebar_popup_button_cancel')
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.FcrButton, {
-        size: "S",
-        shape: "rounded",
-        styleType: type === 'admitAll' ? 'normal' : 'danger',
-        onClick: function onClick() {
-          if (type === 'remove') {
-            removeWaitingRoomUser(userId, isChecked ? _type3.FcrUserKickedOutType.Forever : _type3.FcrUserKickedOutType.Once);
-          }
-          if (type === 'removeAll') {
-            kickOutWaitingRoomAllMember(isChecked ? _type3.FcrUserKickedOutType.Forever : _type3.FcrUserKickedOutType.Once);
-          }
-          if (type === 'admitAll') {
-            moveToMainRoomAllMember();
-          }
-          closeRemoveAdmitWaitingRoomDialog(WaitingRoomDialogKeyMap[type]);
-        },
-        children: buttonTextMap[type]
-      })]
     })]
   });
 };
@@ -274,14 +225,14 @@ var ParticipantAttendee = exports.ParticipantAttendee = (0, _mobxReact.observer)
     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, {
+      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 === _constant.RoomType.WAITING_ROOM && /*#__PURE__*/(0, _jsxRuntime.jsx)(_action.FcrActionButton, {
+      }), activeTab === _type3.FcrRoomType.Waitingroom && /*#__PURE__*/(0, _jsxRuntime.jsx)(_action.FcrActionButton, {
         size: "small",
         onClick: function onClick() {
           return moveToMainRoomByUserIds([userId]);
@@ -326,7 +277,7 @@ var ParticipantAttendee = exports.ParticipantAttendee = (0, _mobxReact.observer)
             hasAudio: hasAudio,
             userName: userName,
             audioDeviceType: audioDeviceType,
-            hideActions: activeTab === _constant.RoomType.MAIN_ROOM ? mainRoomParticipateActionsNeedHiden : waitingRoomParticipateActionsNeedHiden
+            hideActions: activeTab === _type3.FcrRoomType.Mainroom ? mainRoomParticipateActionsNeedHiden : waitingRoomParticipateActionsNeedHiden
           }))
         }),
         placement: "bottomRight",
@@ -416,12 +367,12 @@ var ParticipantAttendee = exports.ParticipantAttendee = (0, _mobxReact.observer)
         colors: {
           iconPrimary: 'var(--fcr_ui_scene_ramp_green6)'
         }
-      }), audioDeviceType !== 'none' && activeTab === _constant.RoomType.MAIN_ROOM && /*#__PURE__*/(0, _jsxRuntime.jsx)(MicrophoneIndicator, {
+      }), audioDeviceType !== 'none' && activeTab === _type3.FcrRoomType.Mainroom && /*#__PURE__*/(0, _jsxRuntime.jsx)(MicrophoneIndicator, {
         audioDeviceType: audioDeviceType,
         hasAudio: hasAudio,
         isLocal: !!isMe,
         userId: userId
-      }), videoDeviceType !== 'none' && activeTab === _constant.RoomType.MAIN_ROOM && /*#__PURE__*/(0, _jsxRuntime.jsx)(_cameraState.CameraState, {
+      }), videoDeviceType !== 'none' && activeTab === _type3.FcrRoomType.Mainroom && /*#__PURE__*/(0, _jsxRuntime.jsx)(_cameraState.CameraState, {
         isCameraMuted: !hasVideo,
         size: 28,
         renderIconType: 'surface'
@@ -434,9 +385,9 @@ var MicrophoneIndicator = (0, _mobxReact.observer)(function (_ref2) {
     hasAudio = _ref2.hasAudio,
     isLocal = _ref2.isLocal,
     userId = _ref2.userId;
-  var _useContext2 = (0, _react.useContext)(_store.StoreContext),
-    audioVolumeMap = _useContext2.audioVolumeMap,
-    localMicVolume = _useContext2.localMicVolume;
+  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,

package/lib/modules/participant/components/attendee/components/microphone-indicator/index.d.ts

@@ -0,0 +1,6 @@
+export declare const MicrophoneIndicator: ({ audioDeviceType, hasAudio, isLocal, userId, }: {
+    hasAudio: boolean;
+    audioDeviceType: "none" | "computer-mic" | "phone-mic";
+    isLocal: boolean;
+    userId: string;
+}) => import("react/jsx-runtime").JSX.Element;

package/lib/modules/participant/components/attendee/components/microphone-indicator/index.js

@@ -0,0 +1,28 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MicrophoneIndicator = void 0;
+var _mobxReact = require("mobx-react");
+var _react = require("react");
+var _store = require("../../../../store");
+var _microphoneState = require("agora-ui-foundation/lib/components/room-screen-share-state-bar/microphone-state");
+var _jsxRuntime = require("react/jsx-runtime");
+var MicrophoneIndicator = exports.MicrophoneIndicator = (0, _mobxReact.observer)(function (_ref) {
+  var audioDeviceType = _ref.audioDeviceType,
+    hasAudio = _ref.hasAudio,
+    isLocal = _ref.isLocal,
+    userId = _ref.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/components/attendee/components/user-avatar/index.d.ts

@@ -0,0 +1,7 @@
+export declare const userAvatar: (userType: string) => {
+    icon: import("react/jsx-runtime").JSX.Element;
+    backgroundColor: string;
+} | {
+    icon: null;
+    backgroundColor: string;
+};

package/lib/modules/participant/components/attendee/components/user-avatar/index.js

@@ -0,0 +1,39 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.userAvatar = void 0;
+var _icon = require("agora-ui-foundation/lib/components/icon");
+var _type = require("agora-ui-foundation/lib/components/icon/type");
+var _jsxRuntime = require("react/jsx-runtime");
+var userAvatar = exports.userAvatar = function userAvatar(userType) {
+  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: ''
+  };
+};

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

@@ -0,0 +1,69 @@
+.attendee__user-info-avatar_speakerSpotlight {
+  position: relative;
+}
+.attendee__user-info-avatar_speakerSpotlight::before {
+  content: '';
+  display: block;
+  position: absolute;
+  top: -4px;
+  left: -4px;
+  width: calc(100% + 8px);
+  height: calc(100% + 8px);
+  border: 2px solid var(--fcr_ui_scene_ramp_green6);
+  border-radius: var(--fcr_cornerradius_l);
+}
+.attendee__more-actions {
+  max-width: 300px;
+  padding: 0;
+}
+
+.operate-waiting-room-dialog-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background: white;
+  padding: 20px;
+  border-radius: 20px;
+}
+
+.operate-waiting-room-dialog-title {
+  font-weight: 600;
+  font-size: 16px;
+  margin-bottom: 10px;
+}
+
+.operate-waiting-room-dialog-tooltip {
+  margin-bottom: 10px;
+}
+
+.operate-waiting-room-dialog-confirm {
+  display: flex;
+}
+
+.operate-waiting-room-dialog-btns {
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  margin-top: 10px;
+}
+
+.operate-waiting-room-dialog-btns .fcr-button-normal {
+  width: 48%;
+}
+
+.operate-waiting-room-dialog-btns .fcr-button-white {
+  background-color: var(--fcr_ui_scene_btn2);
+  color: var(--fcr_ui_scene_icontext2);
+  width: 48%;
+}
+
+.operate-waiting-room-dialog-btns .fcr-button-white:hover {
+  background-color: var(--fcr_ui_scene_btn2) !important;
+  color: var(--fcr_ui_scene_icontext2) !important;
+  width: 48%;
+}
+
+.operate-waiting-room-dialog-btns .fcr-button-danger {
+  width: 48%;
+}

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

@@ -0,0 +1,4 @@
+import { PropsWithChildren } from 'react';
+import './index.css';
+import { ParticipantAttendeeProps } from '../../type';
+export declare const ParticipantAttendee: (props: PropsWithChildren<ParticipantAttendeeProps>) => import("react/jsx-runtime").JSX.Element;