fcr-ui-scene 3.4.1 → 3.4.2

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

@@ -0,0 +1,337 @@
+"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.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");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+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");
+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 _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 _classnames = _interopRequireDefault(require("classnames"));
+var _mobxReact = require("mobx-react");
+var _react = require("react");
+var _type2 = require("../../../../type");
+var _i18n = require("agora-ui-foundation/lib/i18n");
+require("./index.css");
+var _helper = require("agora-ui-foundation/lib/components/avatar/helper");
+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 _microphoneIndicator = require("./components/microphone-indicator");
+var _userAvatar = require("./components/user-avatar");
+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 _props$user = props.user,
+    userId = _props$user.userId,
+    userName = _props$user.userName,
+    isMe = _props$user.isMe,
+    hasAudio = _props$user.hasAudio,
+    hasVideo = _props$user.hasVideo,
+    isHost = _props$user.isHost,
+    isScreenSharing = _props$user.isScreenSharing,
+    userType = _props$user.userType,
+    userRole = _props$user.userRole,
+    isSpotlight = _props$user.isSpotlight,
+    isBoardActive = _props$user.isBoardActive,
+    audioDeviceType = _props$user.audioDeviceType,
+    videoDeviceType = _props$user.videoDeviceType;
+  var enableSpotlight = props.enableSpotlight,
+    activeTab = props.activeTab,
+    interpreterUsers = props.interpreterUsers,
+    interpreterState = props.interpreterState,
+    interpreterInputLanguage = props.interpreterInputLanguage,
+    type = props.type,
+    children = props.children;
+  var dialogInstanceContext = (0, _react.useContext)(_useElectron.DialogInstanceContext);
+  var _useState3 = (0, _react.useState)(false),
+    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+    disableHover = _useState4[0],
+    setDisableHover = _useState4[1];
+  var nameColor = (0, _helper.getNameColor)(userName);
+  var volumeTimer = undefined;
+  var _useState5 = (0, _react.useState)(0),
+    _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
+    phoneCallFrame = _useState6[0],
+    setPhoneCallFrame = _useState6[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;
+    }
+  };
+  (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]);
+
+  // const userActions = () => {
+  //   const handleAudioButtonClick = () => {
+  //     const action = hasAudio
+  //       ? ParticipantActionType.MUTE_AUDIO
+  //       : ParticipantActionType.UNMUTE_AUDIO;
+  //     onParticipantsButtonClick(action, userId);
+  //   };
+
+  //   const handlePrivateChatButtonClick = () => {
+  //     onParticipantsButtonClick(ParticipantActionType.PRIVATE_CHAT, userId);
+  //   };
+
+  //   const handleMoreActionsClick = (action: ParticipantActionType, userId: string) => {
+  //     onParticipantsButtonClick(action, userId);
+  //     setIsShowDropMenu(false);
+  //   };
+  //   const muteAudioPermission = hasMutePermission(
+  //     isMe ? FcrPrivilegeUserRole.SELF : (userRole as FcrUserRole),
+  //   );
+  //   const startAudioPermission = hasUnmutePermission(
+  //     isMe ? FcrPrivilegeUserRole.SELF : (userRole as FcrUserRole),
+  //   );
+  //   const requestStartAudioPermission = hasRequestStartAudioPermission(userRole as FcrUserRole);
+  //   const { isShowActionAudio, actionAudioTag } = actionMute(
+  //     !!isMe,
+  //     hasAudio,
+  //     muteAudioPermission,
+  //     startAudioPermission,
+  //     requestStartAudioPermission,
+  //   );
+  //   const 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',
+  //   ];
+  //   const mainRoomParticipateActionsNeedHiden: string[] = [];
+
+  //   useEffect(() => {
+  //     return () => {
+  //       if (timeoutId.current) {
+  //         clearTimeout(timeoutId.current);
+  //       }
+  //     };
+  //   }, []);
+  //   const timeoutId = useRef<NodeJS.Timeout | null>();
+  //   return (
+  //     <div
+  //       className={`attendee__user-action attendee__user-action-host ${isShowDropMenu ? 'attendee__user-action-hovered' : ''}`}>
+  //       {isShowActionAudio && activeTab === FcrRoomType.Mainroom && (
+  //         <FcrActionButton size="small" onClick={handleAudioButtonClick}>
+  //           <span className={hasAudio ? 'attendee__danger-operate' : 'attendee__normal-operate'}>
+  //             {t(actionAudioTag as GenerateI18nKey<I18nResouceTypes>)}
+  //           </span>
+  //         </FcrActionButton>
+  //       )}
+  //       {activeTab === FcrRoomType.Waitingroom && (
+  //         <FcrActionButton size="small" onClick={() => moveToMainRoomByUserIds([userId])}>
+  //           <span className={'attendee__normal-operate'}>
+  //             {t('fmt_waitingroom_sidebar_button_admit')}
+  //           </span>
+  //         </FcrActionButton>
+  //       )}
+  //       <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={
+  //           <div
+  //             ref={clickRef}
+  //             onMouseEnter={() => {
+  //               if (timeoutId.current) {
+  //                 clearTimeout(timeoutId.current);
+  //               }
+  //             }}
+  //             onMouseLeave={() => {
+  //               timeoutId.current = setTimeout(() => {
+  //                 setIsShowDropMenu(false);
+  //               }, 200);
+  //             }}>
+  //             <FcrParticipantsMoreActions
+  //               {...props}
+  //               onParticipantsButtonClick={handleMoreActionsClick}
+  //               userRole={userRole as FcrUserRoleValue}
+  //               isPin={isPin}
+  //               hasPinnedStream={hasPinnedStream}
+  //               allowedOperations={allowedOperations}
+  //               userType={userType}
+  //               userId={userId}
+  //               hasVideo={hasVideo}
+  //               hasAudio={hasAudio}
+  //               userName={userName}
+  //               audioDeviceType={audioDeviceType}
+  //               hideActions={
+  //                 activeTab === FcrRoomType.Mainroom
+  //                   ? mainRoomParticipateActionsNeedHiden
+  //                   : waitingRoomParticipateActionsNeedHiden
+  //               }
+  //             />
+  //           </div>
+  //         }
+  //         placement="bottomRight">
+  //         <FcrActionButton
+  //           onClick={() => {
+  //             if (!isShowDropMenu) {
+  //               setIsShowDropMenu(true);
+  //             }
+  //           }}
+  //           size="small"
+  //           iconType={FcrIconType.FCR_DROPDOWN}>
+  //           {t('fmt_participants_member_button_more')}
+  //         </FcrActionButton>
+  //       </FcrPopover>
+  //     </div>
+  //   );
+  // };
+
+  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
+        }, (0, _userAvatar.userAvatar)(userType)))
+      }), /*#__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.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'
+      })]
+    }), children]
+  }, userId);
+});

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

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

package/lib/modules/participant/components/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/drop-menu/index.js

@@ -68,7 +68,7 @@ var RoomControlDropMenu = exports.RoomControlDropMenu = (0, _mobxReact.observer)
     key: 'join_room_with_mute',
     type: 'primary',
     onButtonClick: function onButtonClick() {
-      handlerRoomControlAction(_constant.RoomControlType.JOIN_WITH_MUTE_AUDIO, !allowJoinWithMuteAudio);
+      handlerRoomControlAction(_constant.FcrUIRoomControlType.JOIN_WITH_MUTE_AUDIO, !allowJoinWithMuteAudio);
     }
   }, {
     title: /*#__PURE__*/(0, _jsxRuntime.jsx)(_checkbox.FcrCheckbox, {
@@ -79,7 +79,7 @@ var RoomControlDropMenu = exports.RoomControlDropMenu = (0, _mobxReact.observer)
     key: 'play_join_leave_sound',
     type: 'disabled',
     onButtonClick: function onButtonClick() {
-      handlerRoomControlAction(_constant.RoomControlType.PLAY_JOIN_LEAVE_SOUND);
+      handlerRoomControlAction(_constant.FcrUIRoomControlType.PLAY_JOIN_LEAVE_SOUND);
     }
   }, {
     title: /*#__PURE__*/(0, _jsxRuntime.jsx)(_checkbox.FcrCheckbox, {
@@ -90,7 +90,7 @@ var RoomControlDropMenu = exports.RoomControlDropMenu = (0, _mobxReact.observer)
     key: 'lock_room',
     type: 'primary',
     onButtonClick: function onButtonClick() {
-      handlerRoomControlAction(_constant.RoomControlType.LOCK_ROOM, !isLockRoomEnabled);
+      handlerRoomControlAction(_constant.FcrUIRoomControlType.LOCK_ROOM, !isLockRoomEnabled);
     }
   }, {
     title: /*#__PURE__*/(0, _jsxRuntime.jsx)(_checkbox.FcrCheckbox, {
@@ -102,7 +102,7 @@ var RoomControlDropMenu = exports.RoomControlDropMenu = (0, _mobxReact.observer)
     type: 'disabled',
     classNames: 'room-control-drop-with-under-line',
     onButtonClick: function onButtonClick() {
-      handlerRoomControlAction(_constant.RoomControlType.ENABLE_WAITING_ROOM, !isWaitingRoomEnabled);
+      handlerRoomControlAction(_constant.FcrUIRoomControlType.ENABLE_WAITING_ROOM, !isWaitingRoomEnabled);
     }
   }, {
     title: t('fmt_screenshare_options_allow'),
@@ -117,7 +117,7 @@ var RoomControlDropMenu = exports.RoomControlDropMenu = (0, _mobxReact.observer)
     key: 'unmute_yourself',
     type: 'primary',
     onButtonClick: function onButtonClick() {
-      handlerRoomControlAction(_constant.RoomControlType.ALLOW_ATTENDEE_TO_UNMUTE, !allowUnmuteSelfAudio);
+      handlerRoomControlAction(_constant.FcrUIRoomControlType.ALLOW_ATTENDEE_TO_UNMUTE, !allowUnmuteSelfAudio);
     }
   }, {
     title: /*#__PURE__*/(0, _jsxRuntime.jsx)(_checkbox.FcrCheckbox, {
@@ -128,7 +128,7 @@ var RoomControlDropMenu = exports.RoomControlDropMenu = (0, _mobxReact.observer)
     key: 'start_video',
     type: 'primary',
     onButtonClick: function onButtonClick() {
-      handlerRoomControlAction(_constant.RoomControlType.ALLOW_ATTENDEE_TO_OPEN_CAMERA, !allowUnmuteSelfVideo);
+      handlerRoomControlAction(_constant.FcrUIRoomControlType.ALLOW_ATTENDEE_TO_OPEN_CAMERA, !allowUnmuteSelfVideo);
     }
   }, {
     title: /*#__PURE__*/(0, _jsxRuntime.jsx)(_checkbox.FcrCheckbox, {
@@ -139,7 +139,7 @@ var RoomControlDropMenu = exports.RoomControlDropMenu = (0, _mobxReact.observer)
     key: 'change_name',
     type: 'primary',
     onButtonClick: function onButtonClick() {
-      handlerRoomControlAction(_constant.RoomControlType.RENAME, !allowChangeSelfName);
+      handlerRoomControlAction(_constant.FcrUIRoomControlType.RENAME, !allowChangeSelfName);
     }
   }
   // {
@@ -166,7 +166,7 @@ var RoomControlDropMenu = exports.RoomControlDropMenu = (0, _mobxReact.observer)
       key: 'revoke_host',
       type: 'primary',
       onButtonClick: function onButtonClick() {
-        return handlerRoomControlAction(_constant.RoomControlType.REVOKE_HOST);
+        return handlerRoomControlAction(_constant.FcrUIRoomControlType.REVOKE_HOST);
       },
       classNames: 'room-control-drop-with-under-line'
     });

package/lib/modules/participant/components/footer/buttons.d.ts

@@ -1,7 +1,6 @@
-import { DialogKey } from '../../../../utilities/constant';
-import { OperateWaitingRoomMemberDialogProps } from '../../attendee';
+import { OperateWaitingRoomMemberDialogProps } from '../../type';
 type ParticipantWaitingRoomFooterBtnListProps = {
-    openRemoveAdmitWaitingRoomDialog: (dialogKey: DialogKey, params: OperateWaitingRoomMemberDialogProps) => void;
+    openRemoveAdmitWaitingRoomDialog: (params: OperateWaitingRoomMemberDialogProps) => void;
 };
 declare const ParticipantWaitingRoomFooterBtnList: ({ openRemoveAdmitWaitingRoomDialog, }: ParticipantWaitingRoomFooterBtnListProps) => import("react/jsx-runtime").JSX.Element;
 export default ParticipantWaitingRoomFooterBtnList;

package/lib/modules/participant/components/footer/buttons.js

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 var _i18n = require("agora-ui-foundation/lib/i18n");
-var _constant = require("../../../../utilities/constant");
 var _tooltip = require("agora-ui-foundation/lib/components/tooltip");
 var _button = require("agora-ui-foundation/lib/components/button");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -23,7 +22,7 @@ var ParticipantWaitingRoomFooterBtnList = function ParticipantWaitingRoomFooterB
         type: "secondary-bordered",
         size: "XS",
         onClick: function onClick() {
-          openRemoveAdmitWaitingRoomDialog(_constant.DialogKey.WAITING_ROOM_ALL_REMOVE, {
+          openRemoveAdmitWaitingRoomDialog({
             title: t('fmt_waitingroom_sidebar_popup_removeall'),
             type: 'removeAll',
             tooltip: t('fmt_waitingroom_mobile_memberlist_popup_label_sure_to_remove_all')
@@ -39,7 +38,7 @@ var ParticipantWaitingRoomFooterBtnList = function ParticipantWaitingRoomFooterB
         type: "secondary-bordered",
         size: "XS",
         onClick: function onClick() {
-          openRemoveAdmitWaitingRoomDialog(_constant.DialogKey.WAITING_ROOM_ALL_ADMIT, {
+          openRemoveAdmitWaitingRoomDialog({
             title: t('fmt_waitingroom_mobile_memberlist_popup_label_admit_all'),
             type: 'admitAll',
             tooltip: t('fmt_waitingroom_mobile_memberlist_popup_label_sure_to_admit_all')

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

@@ -9,10 +9,10 @@ exports["default"] = void 0;
 var _mobxReact = require("mobx-react");
 var _react = require("react");
 var _store = require("../../store");
-var _constant = require("../../../../utilities/constant");
 var _footer = require("agora-ui-foundation/lib/components/participants/footer");
 var _dropMenu = require("../drop-menu");
 var _buttons = _interopRequireDefault(require("./buttons"));
+var _type = require("fcr-core/lib/room-control/type");
 var _jsxRuntime = require("react/jsx-runtime");
 var ParticipantFooter = (0, _mobxReact.observer)(function (_ref) {
   var handlerRoomControlClick = _ref.handlerRoomControlClick;
@@ -24,7 +24,7 @@ var ParticipantFooter = (0, _mobxReact.observer)(function (_ref) {
     moveToMainRoomAllMember = _useContext.moveToMainRoomAllMember,
     openRemoveAdmitWaitingRoomDialog = _useContext.openRemoveAdmitWaitingRoomDialog;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-    children: activeTab === _constant.RoomType.MAIN_ROOM ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_footer.FcrParticipantsFooter, {
+    children: activeTab === _type.FcrRoomType.Mainroom ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_footer.FcrParticipantsFooter, {
       hasRevokeHostPermission: hasRevokeHostPermission,
       onRoomControlClick: handlerRoomControlClick,
       type: currentPerspectiveType,

package/lib/modules/participant/components/mute-all/index.d.ts

@@ -1,9 +1,8 @@
-export declare const MuteAllDialog: ({ getContainer, allowUnmuteSelfAudio, allowJoinWithMuteAudio, showMuteAllDialog, onCancel, onOk, onClose, }: {
-    getContainer?: () => HTMLElement;
+export declare const MuteAllDialog: ({ open, allowUnmuteSelfAudio, allowJoinWithMuteAudio, onCancel, setMuteAllDialogValue, onClose, }: {
+    open: boolean;
     allowUnmuteSelfAudio?: boolean;
     allowJoinWithMuteAudio?: boolean;
-    showMuteAllDialog: boolean;
     onCancel?: () => void;
     onClose?: () => void;
-    onOk?: (allowUnmute: boolean, joinWidthMute: boolean) => void;
+    setMuteAllDialogValue?: (allowUnmute: boolean, joinWithMute: boolean) => void;
 }) => import("react/jsx-runtime").JSX.Element;

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;