fcr-ui-scene 3.4.5 → 3.5.0

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

@@ -0,0 +1,202 @@
+"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.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.FcrParticipant = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = require("react");
+var _participantsMore = require("../participants-more");
+require("./index.css");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _action = require("agora-ui-foundation/lib/components/button/action");
+var _i18n = require("agora-ui-foundation/lib/i18n");
+var _popover = require("agora-ui-foundation/lib/components/popover");
+var _type = require("agora-ui-foundation/lib/components/icon/type");
+var _icon = require("agora-ui-foundation/lib/components/icon");
+var _avatar = require("agora-ui-foundation/lib/components/avatar");
+var _microphoneState = require("agora-ui-foundation/lib/components/room-screen-share-state-bar/microphone-state");
+var _cameraState = require("agora-ui-foundation/lib/components/room-screen-share-state-bar/camera-state");
+var _types = require("../../../../types");
+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 FcrParticipant = exports.FcrParticipant = function FcrParticipant(props) {
+  var user = props.user,
+    hasPinnedStream = props.hasPinnedStream,
+    _props$onParticipants = props.onParticipantsButtonClick,
+    onParticipantsButtonClick = _props$onParticipants === void 0 ? function () {} : _props$onParticipants,
+    _props$hideActions = props.hideActions,
+    hideActions = _props$hideActions === void 0 ? [] : _props$hideActions;
+  var userId = user.userId,
+    _user$userName = user.userName,
+    userName = _user$userName === void 0 ? '' : _user$userName,
+    hasAudio = user.hasAudio,
+    hasVideo = user.hasVideo,
+    isHost = user.isHost,
+    _user$isMe = user.isMe,
+    isMe = _user$isMe === void 0 ? false : _user$isMe,
+    _user$isScreenSharing = user.isScreenSharing,
+    isScreenSharing = _user$isScreenSharing === void 0 ? false : _user$isScreenSharing,
+    userType = user.userType,
+    videoDeviceType = user.videoDeviceType,
+    audioDeviceType = user.audioDeviceType;
+  var t = (0, _i18n.useI18n)();
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    isShowDropMenu = _useState2[0],
+    setIsShowDropMenu = _useState2[1];
+  var _useState3 = (0, _react.useState)(false),
+    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+    disableHover = _useState4[0],
+    setDisableHover = _useState4[1];
+  (0, _react.useEffect)(function () {
+    setDisableHover(userType !== 'normal');
+  }, [userType]);
+  var userActions = function userActions() {
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "attendee__user-action attendee__user-action-host ".concat(isShowDropMenu ? 'attendee__user-action-hovered' : ''),
+      children: [isMe && isHost ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_action.FcrActionButton, {
+        size: "small",
+        onClick: function onClick() {
+          onParticipantsButtonClick(hasAudio ? _types.ParticipantActionType.MUTE_AUDIO : _types.ParticipantActionType.UNMUTE_AUDIO, userId);
+        },
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          className: hasAudio ? 'attendee__danger-operate' : 'attendee__normal-operate',
+          children: hasAudio ? t('fmt_device_label_audio_mute') : isMe ? t('fmt_device_label_audio_unmute') : t('fmt_sip_button_unmute')
+        })
+      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        children: isMe ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_action.FcrActionButton, {
+          size: "small",
+          onClick: function onClick() {
+            return onParticipantsButtonClick(hasAudio ? _types.ParticipantActionType.MUTE_AUDIO : _types.ParticipantActionType.UNMUTE_AUDIO, userId);
+          },
+          children: hasAudio ? t('fmt_device_label_audio_mute') : t('fmt_device_label_audio_unmute')
+        }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_action.FcrActionButton, {
+          size: "small",
+          onClick: function onClick() {
+            return onParticipantsButtonClick(_types.ParticipantActionType.PRIVATE_CHAT, userId);
+          },
+          children: t('fmt_chats_label_privatechat')
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_popover.FcrPopover, {
+        visible: isShowDropMenu,
+        overlayInnerStyle: {
+          border: 0,
+          boxShadow: 'var(--fcr_web_light_dropup_m)',
+          borderRadius: 'var(--fcr_cornerradius_l)'
+        },
+        overlayClassName: "attendee__more-actions",
+        mouseEnterDelay: 0,
+        content: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          onMouseEnter: function onMouseEnter() {
+            return setIsShowDropMenu(true);
+          },
+          onMouseLeave: function onMouseLeave() {
+            return setIsShowDropMenu(false);
+          },
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_participantsMore.FcrParticipantsMoreActions, {
+            hideActions: hideActions,
+            hasPinnedStream: hasPinnedStream,
+            onParticipantsButtonClick: onParticipantsButtonClick,
+            user: user
+          })
+        }),
+        placement: "bottomRight",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_action.FcrActionButton, {
+          onClick: function onClick() {
+            return setIsShowDropMenu(true);
+          },
+          iconType: _type.FcrIconType.FCR_DROPDOWN,
+          children: t('fmt_participants_member_button_more')
+        })
+      })]
+    });
+  };
+  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
+        }),
+        backgroundColor: 'var(--fcr_ui_scene_ramp_green6)'
+      };
+    }
+    return {
+      icon: null,
+      backgroundColor: ''
+    };
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: (0, _classnames["default"])('attendee', {
+      'attendee-active': isShowDropMenu && !disableHover
+    }),
+    onMouseLeave: function onMouseLeave() {
+      return setIsShowDropMenu(false);
+    },
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "attendee__user-info",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_avatar.FcrAvatar, _objectSpread({
+        size: 24,
+        nickName: userName,
+        textSize: 12
+      }, userAvatar())), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "attendee__user-info-identity",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: "attendee__name",
+          children: [userName, isMe && /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+            className: "attendee__me-badge",
+            children: ["(", t('fmt_participant_label_Me'), ")"]
+          })]
+        }), isHost && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "attendee__host-badge",
+          children: t('fmt_role_host')
+        })]
+      })]
+    }), /*#__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)'
+        }
+      }), audioDeviceType !== 'none' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_microphoneState.MicrophoneState, {
+        isMicrophoneMuted: !hasAudio,
+        size: 28,
+        isPhoneMic: audioDeviceType === 'phone-mic'
+      }), videoDeviceType !== 'none' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_cameraState.CameraState, {
+        isCameraMuted: !hasVideo,
+        size: 28
+      })]
+    }), userActions()]
+  }, userId);
+};

package/lib/modules/participant/components/participants/components/participants/components/participants-more/index.css

@@ -0,0 +1,49 @@
+/* .fcr-drop-menu-option-with-under-line{
+  position: relative;
+  padding: 8px
+}
+.fcr-drop-menu-option-with-under-line::after {
+  content: "";
+  position: absolute;
+  left: 0;
+  right: -30px;
+  bottom: -10px;
+  border-top: 1px solid var(--fcr_ui_scene_line1);
+  margin: 8px 10px;
+} */
+.fcr-drop-menu-option-with-under-line:last-child:after {
+  border: 0;
+}
+
+.fcr-participants-more-dropmenu {
+  max-width: 300px;
+  padding: 15px 10px 15px 10px;
+}
+
+.fcr-participants-more-dropmenu .fcr-drop-menu-title {
+  height: 32px;
+  line-height: 32px;
+  padding-left: 8px;
+  text-align: left;
+}
+
+.fcr-participants-more-dropmenu .fcr-drop-menu-options {
+  gap: 0;
+}
+
+.fcr-participants-more-dropmenu .fcr-drop-menu-option {
+  min-height: 32px;
+  height: auto;
+  padding: 5px 10px 5px 5px;
+  align-items: start;
+}
+
+.fcr-participants-more-dropmenu .fcr-drop-menu-group {
+  font-size: 12px;
+  line-height: 32px;
+  padding: 8px 0 0 5px;
+  color: var(--fcr_ui_scene_icontext2);
+  margin: 8px -10px 0 5px;
+  border-top: 1px solid var(--fcr_ui_scene_line1);
+  text-align: left;
+}

package/lib/modules/participant/components/participants/components/participants/components/participants-more/index.d.ts

@@ -0,0 +1,5 @@
+import { FC } from 'react';
+import './index.css';
+import { ParticipantsMoreActionsProps } from '../../../../types';
+declare const FcrParticipantsMoreActions: FC<ParticipantsMoreActionsProps>;
+export { FcrParticipantsMoreActions };

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

@@ -0,0 +1,217 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FcrParticipantsMoreActions = void 0;
+require("core-js/modules/es.array.filter.js");
+require("core-js/modules/es.array.includes.js");
+require("core-js/modules/es.array.is-array.js");
+require("core-js/modules/es.array.some.js");
+require("core-js/modules/es.object.to-string.js");
+require("core-js/modules/es.string.includes.js");
+require("core-js/modules/esnext.array.group.js");
+require("core-js/modules/esnext.iterator.constructor.js");
+require("core-js/modules/esnext.iterator.filter.js");
+require("core-js/modules/esnext.iterator.some.js");
+require("./index.css");
+var _i18next = require("i18next");
+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 _dropMenu = require("agora-ui-foundation/lib/components/drop-menu");
+var _types = require("../../../../types");
+var _jsxRuntime = require("react/jsx-runtime");
+// 提取常量
+var ICON_SIZE = 20;
+var ICON_PRIMARY_COLOR = 'var(--fcr_ui_scene_icontext5)';
+var RAMP_RED_COLOR = 'var(--fcr_ui_scene_ramp_red6)';
+
+// 封装图标创建函数
+var createIcon = function createIcon(type) {
+  var size = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : ICON_SIZE;
+  var colors = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {
+    iconPrimary: ICON_PRIMARY_COLOR
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+    type: type,
+    size: size,
+    colors: colors
+  });
+};
+
+// 封装按钮点击处理函数
+var handleButtonClick = function handleButtonClick(actionType, userId, onParticipantsButtonClick) {
+  return function () {
+    onParticipantsButtonClick(actionType, userId);
+  };
+};
+var FcrParticipantsMoreActions = exports.FcrParticipantsMoreActions = function FcrParticipantsMoreActions(props) {
+  var onParticipantsButtonClick = props.onParticipantsButtonClick,
+    hasPinnedStream = props.hasPinnedStream,
+    hideActions = props.hideActions,
+    user = props.user;
+  var isMe = user.isMe,
+    userId = user.userId,
+    hasVideo = user.hasVideo,
+    userName = user.userName,
+    userRole = user.userRole,
+    isPin = user.isPin,
+    userType = user.userType,
+    allowedOperations = user.allowedOperations;
+  var cameraStateType = !hasVideo ? 'primary' : 'danger';
+
+  // 定义所有操作菜单
+  var allOperationMenu = [{
+    icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_cameraState.CameraState, {
+      ignoreColor: true,
+      isCameraMuted: true,
+      renderMode: "forward-state"
+    }),
+    title: (0, _i18next.t)('fmt_device_label_video_start'),
+    key: 'start_video',
+    type: cameraStateType,
+    canOperation: !hasVideo && userType !== 'phone',
+    onButtonClick: handleButtonClick(_types.ParticipantActionType.UNMUTE_VIDEO, userId, onParticipantsButtonClick)
+  }, {
+    icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_cameraState.CameraState, {
+      ignoreColor: true,
+      isCameraMuted: true,
+      renderMode: "forward-state"
+    }),
+    title: (0, _i18next.t)('fmt_sip_button_opencamera'),
+    key: 'request_start_video',
+    type: 'primary',
+    canOperation: !hasVideo && !isMe && userType !== 'phone',
+    onButtonClick: handleButtonClick(_types.ParticipantActionType.UNMUTE_VIDEO, userId, onParticipantsButtonClick)
+  }, {
+    icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_cameraState.CameraState, {
+      isCameraMuted: false,
+      renderMode: "forward-state"
+    }),
+    title: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      children: (0, _i18next.t)('fmt_device_label_video_stop')
+    }),
+    key: 'stop_video',
+    type: cameraStateType,
+    canOperation: hasVideo && userType !== 'phone',
+    onButtonClick: handleButtonClick(_types.ParticipantActionType.MUTE_VIDEO, userId, onParticipantsButtonClick)
+  }, {
+    icon: createIcon(_type.FcrIconType.FCR_MOBILE_CHAT3),
+    title: (0, _i18next.t)('fmt_attendies_label_privatechat'),
+    key: 'private_chat',
+    type: 'primary',
+    canOperation: !isMe && userType !== 'phone',
+    onButtonClick: handleButtonClick(_types.ParticipantActionType.PRIVATE_CHAT, userId, onParticipantsButtonClick)
+  }, {
+    type: 'group',
+    title: (0, _i18next.t)('fmt_additional_label_meet_view_own'),
+    key: 'own_view'
+  }, {
+    icon: isPin ? createIcon(_type.FcrIconType.FCR_UNPIN) : createIcon(_type.FcrIconType.FCR_PINPAGE),
+    title: isPin ? /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      children: (0, _i18next.t)('fmt_attendies_options_cancelfixed')
+    }) : hasPinnedStream ? (0, _i18next.t)('fmt_attendies_options_replacefixed') : (0, _i18next.t)('fmt_attendies_options_fixfirst'),
+    key: 'pin',
+    type: isPin ? 'danger' : 'primary',
+    canOperation: userType === 'normal' || userType === 'meeting-system' && hasVideo,
+    onButtonClick: handleButtonClick(isPin ? _types.ParticipantActionType.REMOVE_PIN : _types.ParticipantActionType.ADD_PIN, userId, onParticipantsButtonClick),
+    group: 'own_view'
+  }, {
+    type: 'group',
+    title: (0, _i18next.t)('fmt_additional_label_attendee_permission'),
+    key: 'permission'
+  }, {
+    title: (0, _i18next.t)('fmt_attendies_options_sethost'),
+    icon: createIcon(_type.FcrIconType.FCR_HOST2),
+    key: 'set_as_host',
+    canOperation: userRole !== _types.FcrUserRole.HOST && userType === 'normal',
+    onButtonClick: handleButtonClick(_types.ParticipantActionType.SET_AS_HOST, userId, onParticipantsButtonClick),
+    group: 'permission'
+  }, {
+    title: (0, _i18next.t)('fmt_attendies_options_setcohost'),
+    icon: createIcon(_type.FcrIconType.FCR_COHOST2),
+    key: 'set_as_co_host',
+    type: 'primary',
+    canOperation: userRole !== _types.FcrUserRole.COHOST && userType === 'normal',
+    onButtonClick: handleButtonClick(_types.ParticipantActionType.SET_AS_CO_HOST, userId, onParticipantsButtonClick),
+    group: 'permission'
+  }, {
+    title: (0, _i18next.t)('fmt_attendies_options_revokecohost'),
+    icon: createIcon(_type.FcrIconType.FCR_PINPAGE),
+    key: 'revoke_co_host',
+    type: 'danger',
+    canOperation: userRole === _types.FcrUserRole.COHOST && userType === 'normal',
+    onButtonClick: handleButtonClick(_types.ParticipantActionType.SET_AS_ATTENDEE, userId, onParticipantsButtonClick),
+    group: 'permission'
+  }, {
+    title: (0, _i18next.t)('fmt_additional_option_rename_in_meeting'),
+    icon: createIcon(_type.FcrIconType.FCR_RENAME2),
+    key: 'change_name',
+    type: 'primary',
+    canOperation: true,
+    onButtonClick: handleButtonClick(_types.ParticipantActionType.RENAME_IN_MEETING, userId, onParticipantsButtonClick),
+    group: 'permission'
+  }, {
+    title: (0, _i18next.t)('fmt_modules_tips_mergevideo'),
+    icon: createIcon(_type.FcrIconType.FCR_MOBILE_CAMERA2),
+    key: 'merge_video',
+    type: 'primary',
+    canOperation: userType === 'phone',
+    onButtonClick: handleButtonClick(_types.ParticipantActionType.MERGE_VIDEO, userId, onParticipantsButtonClick),
+    group: 'permission'
+  }, {
+    type: 'group',
+    title: (0, _i18next.t)('fmt_screenshare_controlbar_button_security'),
+    key: 'security'
+  }, {
+    title: (0, _i18next.t)('fmt_attendies_options_putinwaitingroom'),
+    icon: createIcon(_type.FcrIconType.FCR_PUT_WAITING_ROOM, ICON_SIZE, {
+      iconPrimary: RAMP_RED_COLOR
+    }),
+    key: 'put_into_waiting_room',
+    type: 'danger',
+    canOperation: true,
+    onButtonClick: handleButtonClick(_types.ParticipantActionType.PUT_IN_WAITING_ROOM, userId, onParticipantsButtonClick),
+    group: 'security'
+  }, {
+    title: (0, _i18next.t)('fmt_attendies_button_remove'),
+    icon: createIcon(_type.FcrIconType.FCR_SETTING_NONE, ICON_SIZE, {
+      iconPrimary: RAMP_RED_COLOR
+    }),
+    key: 'kick_out',
+    type: 'danger',
+    canOperation: true,
+    onButtonClick: handleButtonClick(_types.ParticipantActionType.KICK_OUT, userId, onParticipantsButtonClick),
+    group: 'security'
+  }];
+
+  // 过滤允许的操作
+  var filterAllowedOperations = function filterAllowedOperations(menuItems) {
+    if (Array.isArray(allowedOperations) && allowedOperations.length > 0) {
+      return menuItems.filter(function (item) {
+        return allowedOperations.includes(item.key) && item.canOperation || item.type === 'group';
+      }).filter(function (item) {
+        if (hideActions && hideActions.length) {
+          return !hideActions.includes(item.key);
+        }
+        return true;
+      });
+    }
+    return menuItems;
+  };
+  var currentActions = filterAllowedOperations(allOperationMenu);
+
+  // 过滤有分组的项
+  var hasGroupItem = currentActions.filter(function (item) {
+    return item.type === 'group' && currentActions.some(function (action) {
+      return action.group === item.key;
+    }) || item.type !== 'group';
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_dropMenu.FcrDropMenu, {
+    className: "fcr-participants-more-dropmenu",
+    title: userName,
+    options: hasGroupItem
+  });
+};

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

@@ -0,0 +1,5 @@
+import { ListRowProps } from 'react-virtualized';
+import { CellMeasurerCache } from 'react-virtualized/dist/es/CellMeasurer';
+import { ParticipantActionType, User } from '../../../../types';
+export declare const cache: CellMeasurerCache;
+export declare const userRowRenderer: (userList: User[], userRenderer: ((user: User) => React.ReactNode) | undefined, hasPinnedStream: boolean, toggleParticipantAction: ((action: ParticipantActionType, userId: string) => void) | undefined) => (renderProps: ListRowProps) => import("react/jsx-runtime").JSX.Element;

package/lib/modules/participant/components/participants/components/participants/components/user-row/index.js

@@ -0,0 +1,68 @@
+"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.iterator.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/es.string.iterator.js");
+require("core-js/modules/es.weak-map.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/esnext.weak-map.delete-all.js");
+require("core-js/modules/esnext.weak-map.emplace.js");
+require("core-js/modules/web.dom-collections.for-each.js");
+require("core-js/modules/web.dom-collections.iterator.js");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.userRowRenderer = exports.cache = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _CellMeasurer = _interopRequireWildcard(require("react-virtualized/dist/es/CellMeasurer"));
+var _attendee = require("../attendee");
+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; }
+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 cache = exports.cache = new _CellMeasurer.CellMeasurerCache({
+  fixedWidth: true,
+  defaultHeight: 52
+});
+var userRowRenderer = exports.userRowRenderer = function userRowRenderer(userList, userRenderer, hasPinnedStream, toggleParticipantAction) {
+  return function (renderProps) {
+    var key = renderProps.key,
+      parent = renderProps.parent,
+      index = renderProps.index,
+      style = renderProps.style;
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_CellMeasurer["default"], {
+      cache: cache,
+      parent: parent,
+      columnIndex: 0,
+      rowIndex: index,
+      children: function children(_ref) {
+        var measure = _ref.measure;
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          style: _objectSpread(_objectSpread({}, style), {}, {
+            pointerEvents: 'all'
+          }),
+          onLoad: measure,
+          children: userRenderer ? userRenderer(userList[index]) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_attendee.FcrParticipant, {
+            hasPinnedStream: hasPinnedStream,
+            user: userList[index],
+            onParticipantsButtonClick: toggleParticipantAction
+          })
+        });
+      }
+    }, key);
+  };
+};

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

@@ -0,0 +1,104 @@
+.fcr-participant {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  min-width: 320px;
+  min-height: 560px;
+}
+
+.fcr-participant__search-and-invite {
+  display: flex;
+  align-items: center;
+  /* margin-bottom: 15px; */
+  gap: 8px;
+  width: 100%;
+  padding: 5px 15px;
+}
+
+.fcr-participant__search-and-invite .fcr-input {
+  height: 32px;
+  flex: 1;
+}
+
+.fcr-participant__search-and-invite .fcr-button-secondary {
+  border: 0.5px solid var(--fcr_web_ui_scene_line4);
+  color: var(--fcr_ui_scene_icontext1);
+}
+
+.fcr-participant__list {
+  flex: 1;
+}
+
+.fcr-participant__list div:focus {
+  outline: none;
+}
+.fcr-participant__footer {
+  display: flex;
+  justify-content: space-between;
+  padding: 4px 15px 10px 15px;
+  gap: 8px;
+  width: 100%;
+  background-color: var(--fcr_mobile_ui_scene_color_popup_fill2);
+}
+
+.fcr-participant__footer button {
+  border-radius: var(--fcr_cornerradius_s);
+}
+
+.fcr-participant__footer .fcr-button-posticon {
+  width: 16px;
+}
+
+.fcr-participant__footer .fcr-button-posticon path {
+  fill: var(--fcr_ui_scene_icontext1);
+}
+
+.fcr-participant__footer .fcr-button:hover {
+  /* border-color: var(--fcr_ui_scene_ramp_brand6); */
+}
+.fcr-participant__footer .fcr-button:hover path {
+  fill: var(--fcr_web_ui_scene_mainicon2);
+}
+
+.fcr-participant__search-and-invite input {
+  border-radius: var(--fcr_cornerradius_s);
+}
+
+.attendee__more-actions,
+.attendee__footer-more-actions {
+  border: 0;
+  box-shadow: var(--fcr_web_light_dropup_m);
+  border-radius: var(--fcr_cornerradius_l);
+  max-width: fit-content;
+}
+
+.attendee__footer-more-actions .fcr-tooltip-inner {
+  max-width: 364px;
+  min-width: 302px;
+  width: auto !important;
+}
+
+.attendee__more-actions .fcr-checkbox-input-wrapper,
+.attendee__footer-more-actions .fcr-checkbox-input-wrapper {
+  border: 0;
+}
+
+.attendee__more-actions .fcr-checkbox-input-wrapper .fcr-btn-click-effect,
+.attendee__footer-more-actions .fcr-checkbox-input-wrapper .fcr-btn-click-effect {
+  height: 24px;
+  width: 24px;
+  background: transparent;
+}
+
+.attendee__footer-more-actions .fcr-checkbox {
+  width: 100%;
+}
+
+.attendee__footer-more-actions .fcr-drop-menu-option {
+  width: auto;
+}
+
+.fcr_participants_button_invite {
+  min-width: 70px !important;
+}

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

@@ -0,0 +1,3 @@
+import { ParticipantProps } from '../../types';
+import './index.css';
+export declare const FcrParticipants: (props: ParticipantProps) => import("react/jsx-runtime").JSX.Element;