@agilemotion/oui-react-js 1.3.8 → 1.3.9

package/dist/components/media/VCEventType.js

@@ -0,0 +1,164 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.VCEventType = void 0;
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+class VCEventType {}
+
+exports.VCEventType = VCEventType;
+
+_defineProperty(VCEventType, "SECURITY_TOKENS_REFRESHED", "SECURITY_TOKENS_REFRESHED");
+
+_defineProperty(VCEventType, "UNAUTHORISED_API_CALL", "UNAUTHORISED_API_CALL");
+
+_defineProperty(VCEventType, "API_ERROR", "API_ERROR");
+
+_defineProperty(VCEventType, "API_SUCCESS", "API_SUCCESS");
+
+_defineProperty(VCEventType, "WHITEBOARD_EVENT_ARRIVED", "WHITEBOARD_EVENT_ARRIVED");
+
+_defineProperty(VCEventType, "ACTIVE_CHAT_CHANGED", "ACTIVE_CHAT_CHANGED");
+
+_defineProperty(VCEventType, "FIRST_CHAT_ARRIVED", "FIRST_CHAT_ARRIVED");
+
+_defineProperty(VCEventType, "SOCKET_CONNECT", "SOCKET_CONNECT");
+
+_defineProperty(VCEventType, "CALL_REJECTED", "CALL_REJECTED");
+
+_defineProperty(VCEventType, "SOCKET_DISCONNECT", "SOCKET_DISCONNECT");
+
+_defineProperty(VCEventType, "PEER_DISCONNECT", "PEER_DISCONNECT");
+
+_defineProperty(VCEventType, "AUDIO_VISUAL_SETTINGS_CHANGED", "AUDIO_VISUAL_SETTINGS_CHANGED");
+
+_defineProperty(VCEventType, "PARTICIPANT_IN_VIEW", "PARTICIPANT_IN_VIEW");
+
+_defineProperty(VCEventType, "PARTICIPANT_OFF_VIEW", "PARTICIPANT_OFF_VIEW");
+
+_defineProperty(VCEventType, "CONSUMER_TRANSPORT_FAILED", "CONSUMER_TRANSPORT_FAILED");
+
+_defineProperty(VCEventType, "CREATE_TRANSPORT_FAILED", "CREATE_TRANSPORT_FAILED");
+
+_defineProperty(VCEventType, "GET_LOBBY", "GET_LOBBY");
+
+_defineProperty(VCEventType, "JOIN_MEETING", "JOIN_MEETING");
+
+_defineProperty(VCEventType, "CALL_USER", "CALL_USER");
+
+_defineProperty(VCEventType, "CALL_MULTIPLE_USER", "CALL_MULTIPLE_USER");
+
+_defineProperty(VCEventType, "ANSWER_CALL", "ANSWER_CALL");
+
+_defineProperty(VCEventType, "SENDING_SIGNAL", "SENDING_SIGNAL");
+
+_defineProperty(VCEventType, "USER_JOINED", "USER_JOINED");
+
+_defineProperty(VCEventType, "RETURNING_SIGNAL", "RETURNING_SIGNAL");
+
+_defineProperty(VCEventType, "RECEIVING_RETURNED_SIGNAL", "RECEIVING_RETURNED_SIGNAL");
+
+_defineProperty(VCEventType, "USER_LEFT_MEETING", "USER_LEFT_MEETING");
+
+_defineProperty(VCEventType, "END_MEETING", "END_MEETING");
+
+_defineProperty(VCEventType, "END_CALL", "END_CALL");
+
+_defineProperty(VCEventType, "LEAVE_MEETING", "LEAVE_MEETING");
+
+_defineProperty(VCEventType, "CALL_ENDED", "CALL_ENDED");
+
+_defineProperty(VCEventType, "ALL_USERS", "ALL_USERS");
+
+_defineProperty(VCEventType, "CANCEL_CALL", "CANCEL_CALL");
+
+_defineProperty(VCEventType, "PERMISSION", "PERMISSION");
+
+_defineProperty(VCEventType, "NO_PERMIT_REQUIRED", "NO_PERMIT_REQUIRED");
+
+_defineProperty(VCEventType, "ALLOWED", "ALLOWED");
+
+_defineProperty(VCEventType, "SYSTEM_ACTIVITY", "SYSTEM_ACTIVITY");
+
+_defineProperty(VCEventType, "SYSTEM_EVENT", "SYSTEM_EVENT");
+
+_defineProperty(VCEventType, "DENIED", "DENIED");
+
+_defineProperty(VCEventType, "JOIN_MEETING_PERMIT", "JOIN_MEETING_PERMIT");
+
+_defineProperty(VCEventType, "RECEIVING_CALL", "RECEIVING_CALL");
+
+_defineProperty(VCEventType, "CALL_REJECTED", "CALL_REJECTED");
+
+_defineProperty(VCEventType, "USERS_ONLINE", "USERS_ONLINE");
+
+_defineProperty(VCEventType, "USER_ONLINE", "USER_ONLINE");
+
+_defineProperty(VCEventType, "USER_OFFLINE", "USER_OFFLINE");
+
+_defineProperty(VCEventType, "REGISTER_ONLINE", "REGISTER_ONLINE");
+
+_defineProperty(VCEventType, "PERMIT_STATUS", "PERMIT_STATUS");
+
+_defineProperty(VCEventType, "CONNECT_ERROR", "CONNECT_ERROR");
+
+_defineProperty(VCEventType, "CONNECT", "CONNECT");
+
+_defineProperty(VCEventType, "JOIN_CHAT_ROOM", "JOIN_CHAT_ROOM");
+
+_defineProperty(VCEventType, "CHAT_MESSAGE", "CHAT_MESSAGE");
+
+_defineProperty(VCEventType, "DELETE_CHAT_MESSAGE", "DELETE_CHAT_MESSAGE");
+
+_defineProperty(VCEventType, "RAISE_HAND", "RAISE_HAND");
+
+_defineProperty(VCEventType, "LOWER_HAND", "LOWER_HAND");
+
+_defineProperty(VCEventType, "CHANGE_HOST", "CHANGE_HOST");
+
+_defineProperty(VCEventType, "TOGGLE_RECORD_MEETING", "TOGGLE_RECORD_MEETING");
+
+_defineProperty(VCEventType, "POLL_RECORDING_STATUS", "POLL_RECORDING_STATUS");
+
+_defineProperty(VCEventType, "REQUEST_TO_JOIN", "REQUEST_TO_JOIN");
+
+_defineProperty(VCEventType, "REQUEST_TO_JOIN_MEETING", "REQUEST_TO_JOIN_MEETING");
+
+_defineProperty(VCEventType, "AUDIO_VISUAL_SETTINGS_CHANGED", "AUDIO_VISUAL_SETTINGS_CHANGED");
+
+_defineProperty(VCEventType, "CREATE_WEBRTC_TRANSPORT", "CREATE_WEBRTC_TRANSPORT");
+
+_defineProperty(VCEventType, "CONNECT_TRANSPORT", "CONNECT_TRANSPORT");
+
+_defineProperty(VCEventType, "CLOSE_ALL_USER_TRANSPORTS", "CLOSE_ALL_USER_TRANSPORTS");
+
+_defineProperty(VCEventType, "PRODUCER_CLOSED", "PRODUCER_CLOSED");
+
+_defineProperty(VCEventType, "NEW_PRODUCERS", "NEW_PRODUCERS");
+
+_defineProperty(VCEventType, "PRODUCE", "PRODUCE");
+
+_defineProperty(VCEventType, "CONSUME", "CONSUME");
+
+_defineProperty(VCEventType, "SYSTEM_ALERT", "SYSTEM_ALERT");
+
+_defineProperty(VCEventType, "WHITEBOARD_EVENT", "WHITEBOARD_EVENT");
+
+_defineProperty(VCEventType, "WHITEBOARD", "WHITEBOARD");
+
+_defineProperty(VCEventType, "MEETING_ENDED", "MEETING_ENDED");
+
+_defineProperty(VCEventType, "SAVE_RECORDING", "SAVE_RECORDING");
+
+_defineProperty(VCEventType, "STOP_RECORDING", "STOP_RECORDING");
+
+_defineProperty(VCEventType, "UPDATE_CALENDAR", "UPDATE_CALENDAR");
+
+_defineProperty(VCEventType, "REQUEST_TO_JOIN_MEETING_ANSWERED", "REQUEST_TO_JOIN_MEETING_ANSWERED");
+
+_defineProperty(VCEventType, "PEER_DISCONNECT", "PEER_DISCONNECT");
+
+_defineProperty(VCEventType, "CONSUMER_CLOSED", "CONSUMER_CLOSED");

package/dist/components/media/VCParticipantList.css

@@ -0,0 +1,72 @@
+.people-container {
+  padding: 32px;
+}
+
+.search {
+  height: 64px;
+  width: 50%;
+}
+
+.people-content {
+  width: 100%;
+  padding: 0 !important;
+}
+
+.participant-card {
+  padding: 4px;
+  max-width: 100%;
+}
+
+.participant-card .bottom-strip {
+  width: 100%;
+  padding-top: 8px;
+}
+
+.participant-card .bottom-strip .buttons{
+  display: flex;
+  justify-content: flex-end;
+}
+
+.participant-card .bottom-strip .indicator {
+
+}
+
+.participant-card .bottom-strip .indicator .online,
+.participant-card .bottom-strip .indicator .offline{
+  width: 16px;
+  height: 16px;
+  margin: 20px 0 0 28px;
+}
+
+.participant-card .bottom-strip .indicator .offline{
+  background-color: red;
+}
+
+.participant-card .bottom-strip .indicator .online{
+  background-color: #198754;
+}
+
+.participant-card .user-details {
+  display: flex;
+  align-items: center;
+  justify-content: left !important;
+  font-size: 16px;
+  margin-left: 8px;
+}
+
+.avatar-small {
+  width: 32px;
+}
+
+
+.header-panel {
+  margin-bottom: 0.25rem;
+  margin-top: 8px;
+  letter-spacing: .01785714em;
+  font-family: "Google Sans",Roboto,Arial,sans-serif;
+  font-size: 16px;
+  font-weight: 500;
+  line-height: 1.25rem;
+  color: #a1a1a1 !important;
+  padding: 0 8px;
+}

package/dist/components/media/VCParticipantList.js

@@ -0,0 +1,56 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+require("./VCParticipantList.css");
+
+var _VCParticipantListItem = _interopRequireDefault(require("./VCParticipantListItem"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const VCParticipantList = props => {
+  const [anchorEl, setAnchorEl] = (0, _react.useState)(null);
+  const open = Boolean(anchorEl);
+  const {
+    participants
+  } = props;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: 'w-100 h-100 people-container'
+  }, participants.length > 0 && /*#__PURE__*/_react.default.createElement("div", {
+    className: 'people-content row',
+    style: {
+      height: '100%',
+      overflow: 'none'
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: 'people-content-list',
+    style: {
+      height: 'calc(100% - 48px)',
+      width: '100%',
+      overflow: 'auto'
+    }
+  }, participants.map((participant, index) => {
+    return /*#__PURE__*/_react.default.createElement(_VCParticipantListItem.default, {
+      key: index,
+      onChangeMeetingHostHandler: e => props.onChangeMeetingHostHandler(e),
+      onPinHandler: (participant, pinned) => props.onPinHandler(participant, pinned),
+      onBringToViewHandler: participant => props.onBringToViewHandler(participant),
+      onHostVideoMute: participant => props.onHostVideoMute(participant),
+      onHostAudioMute: participant => props.onHostAudioMute(participant),
+      isHost: props.isHost,
+      participant: participant
+    });
+  }))));
+};
+
+var _default = VCParticipantList;
+exports.default = _default;

package/dist/components/media/VCParticipantListItem.css

@@ -0,0 +1,73 @@
+.people-container {
+  padding: 32px;
+}
+
+.search {
+  height: 64px;
+  width: 50%;
+}
+
+.people-content {
+  width: 100%;
+  padding: 16px 0;
+}
+
+.participant-card {
+  padding: 8px;
+  max-width: 100%;
+}
+
+.participant-card .bottom-strip {
+  width: 100%;
+  padding-top: 8px;
+}
+
+.participant-card .bottom-strip .buttons{
+  display: flex;
+  justify-content: flex-end;
+}
+
+.participant-card .bottom-strip .indicator {
+
+}
+
+.participant-card .bottom-strip .indicator .online,
+.participant-card .bottom-strip .indicator .offline{
+  width: 16px;
+  height: 16px;
+  margin: 20px 0 0 28px;
+}
+
+.participant-card .bottom-strip .indicator .offline{
+  background-color: rgb(235, 63, 33);
+}
+
+.participant-card .bottom-strip .indicator .online{
+  background-color: #198754;
+}
+
+.participant-card .user-details {
+  display: flex;
+  align-items: center;
+  justify-content: left;
+  font-size: 16px;
+  margin-left: 8px;
+  padding-left: 0 !important;
+  padding-right: 0 !important;
+}
+
+.avatar-small {
+  width: 32px;
+}
+
+
+.header-panel {
+  margin-bottom: 0.25rem;
+  margin-top: 0.75rem;
+  letter-spacing: .01785714em;
+  font-family: "Google Sans",Roboto,Arial,sans-serif;
+  font-size: 16px;
+  font-weight: 500;
+  line-height: 1.25rem;
+  color: white !important;
+}

package/dist/components/media/VCParticipantListItem.js

@@ -0,0 +1,319 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+require("./VCParticipantList.css");
+
+var _core = require("@material-ui/core");
+
+var _Icon = _interopRequireDefault(require("../Icon"));
+
+var _icons = require("@material-ui/icons");
+
+var _Tooltip = _interopRequireDefault(require("@material-ui/core/Tooltip"));
+
+var _Utils = _interopRequireDefault(require("../../Utils"));
+
+var _VCEventManager = _interopRequireDefault(require("./VCEventManager"));
+
+var _VCEventType = require("./VCEventType");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const VCParticipantListItem = props => {
+  const [anchorEl, setAnchorEl] = (0, _react.useState)(null);
+  const openMoreActions = Boolean(anchorEl);
+  const {
+    participant
+  } = props;
+
+  const [handRaised, setHandRaised] = _react.default.useState(participant.handRaised);
+
+  const [inView, setInView] = _react.default.useState(participant.inView);
+
+  const [pinned, setPinned] = _react.default.useState(participant.pinned);
+
+  const [videoMuted, setVideoMuted] = _react.default.useState(participant.videoMuted);
+
+  const [audioMuted, setAudioMuted] = _react.default.useState(participant.audioMuted);
+
+  const [eventHandler] = (0, _react.useState)({});
+  const [systemEventHandler] = (0, _react.useState)({});
+
+  const handler = () => {
+    return {
+      get id() {
+        return 'vc-participant-card-' + participant.userId;
+      },
+
+      on: (eventType, be) => {
+        switch (eventType) {
+          case _VCEventType.VCEventType.RAISE_HAND:
+            onRaiseHand(be.payload);
+            break;
+
+          case _VCEventType.VCEventType.LOWER_HAND:
+            onLowerHand(be.payload);
+            break;
+
+          case _VCEventType.VCEventType.NEW_PRODUCERS:
+            onNewProducers(be.payload);
+            break;
+
+          case _VCEventType.VCEventType.PARTICIPANT_OFF_VIEW:
+            handleParticipantOffView(be.payload ? be.payload : be);
+            break;
+
+          case _VCEventType.VCEventType.AUDIO_VISUAL_SETTINGS_CHANGED:
+            onAVSettingsChange(be.payload ? be.payload : be);
+            break;
+        }
+      }
+    };
+  };
+
+  const onNewProducers = producers => {
+    let userProducers = [];
+
+    for (const producer of producers) {
+      if (producer.userId === participant.userId) {
+        if (producer.kind === 'video' && !producer.screenSharing) {
+          userProducers.push(producer);
+        }
+      }
+    }
+
+    if (userProducers.length > 0) {
+      participant.producers = userProducers;
+    }
+  };
+
+  const onAVSettingsChange = payload => {
+    if (payload.userId === participant.userId) {
+      setAudioMuted(payload.audioMuted);
+      setVideoMuted(payload.videoMuted);
+
+      if (payload.videoMuted) {
+        participant.producers = null;
+      }
+    }
+  };
+
+  const handleParticipantOffView = payload => {
+    if (payload.userId === participant.userId) {
+      setInView(false);
+    }
+  };
+
+  const onRaiseHand = payload => {
+    if (participant && payload && payload.userId === participant.userId) {
+      setHandRaised(true);
+    }
+  };
+
+  const onLowerHand = payload => {
+    if (participant && payload && payload.userId === participant.userId) {
+      setHandRaised(false);
+    }
+  };
+
+  (0, _react.useEffect)(() => {
+    eventHandler.api = handler();
+  });
+  (0, _react.useEffect)(() => {
+    _VCEventManager.default.addSubscriptions(eventHandler, _VCEventType.VCEventType.RAISE_HAND, _VCEventType.VCEventType.LOWER_HAND, _VCEventType.VCEventType.NEW_PRODUCERS, _VCEventType.VCEventType.PARTICIPANT_OFF_VIEW, _VCEventType.VCEventType.AUDIO_VISUAL_SETTINGS_CHANGED);
+
+    return () => {
+      _VCEventManager.default.removeSubscriptions(systemEventHandler);
+    };
+  }, []);
+
+  const handleClick = event => {
+    setAnchorEl(event.currentTarget);
+  };
+
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+
+  const togglePinned = () => {
+    let newPinnedVal = !pinned;
+    setPinned(newPinnedVal);
+    participant.pinned = newPinnedVal;
+
+    if (props.onPinHandler) {
+      props.onPinHandler(participant, newPinnedVal);
+    }
+  };
+
+  const computeParticipantName = () => {
+    let name = participant.name;
+
+    if (_Utils.default.isNull(participant.userId)) {
+      name = "".concat(name, " (Guest)");
+    }
+
+    return name;
+  };
+
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: 'col person-card-wrapper',
+    style: {
+      marginLeft: '0',
+      paddingLeft: '0',
+      paddingRight: '0',
+      maxWidth: props.maxWidth ? props.maxWidth : '400px',
+      borderBottom: props.borderBottom ? props.borderBottom : null
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "participant-card"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "row no-margin person-card"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: 'col user-details'
+  }, computeParticipantName()), /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      marginTop: '4px',
+      marginLeft: '0',
+      marginRight: '0',
+      paddingLeft: '0',
+      paddingRight: '0',
+      textAlign: 'right'
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", null, sessionStorage.getItem('username') !== participant.userId && handRaised && /*#__PURE__*/_react.default.createElement(_core.IconButton, {
+    onClick: () => {},
+    size: "small",
+    sx: {
+      ml: 1
+    },
+    style: {
+      color: '#e2b030'
+    }
+  }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    id: 'PANTOOL',
+    fontSize: 'small'
+  })), /*#__PURE__*/_react.default.createElement("span", {
+    style: {
+      marginLeft: '4px'
+    }
+  }, props.isHost && !audioMuted ? /*#__PURE__*/_react.default.createElement(_core.IconButton, {
+    onClick: e => {
+      props.onHostAudioMute(participant);
+    },
+    style: {
+      marginRight: '4px',
+      width: '16px',
+      height: '16px'
+    }
+  }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    id: 'MIC',
+    color: '#404239'
+  })) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, audioMuted ? /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    id: 'MIC_OFF',
+    color: '#eb3f21'
+  }) : /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    id: 'MIC',
+    color: '#404239'
+  })), props.isHost && !videoMuted && /*#__PURE__*/_react.default.createElement(_core.IconButton, {
+    onClick: e => {
+      props.onHostVideoMute(participant);
+    },
+    style: {
+      marginRight: '4px',
+      width: '16px',
+      height: '16px',
+      color: '#404239'
+    }
+  }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    id: 'CAMERA',
+    color: "#404239"
+  })), !props.isHost && !videoMuted && /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    id: 'CAMERA',
+    color: "#404239"
+  }), videoMuted && /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    id: 'CAMERA_OFF',
+    color: '#eb3f21'
+  })), sessionStorage.getItem('username') !== participant.userId && /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
+    title: "More Actions"
+  }, /*#__PURE__*/_react.default.createElement(_core.IconButton, {
+    onClick: handleClick,
+    size: "small",
+    sx: {
+      ml: 2
+    },
+    "aria-controls": openMoreActions ? 'account-menu' : undefined,
+    "aria-haspopup": "true",
+    "aria-expanded": openMoreActions ? 'true' : undefined
+  }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    id: 'MORE',
+    color: '#404239'
+  })))), /*#__PURE__*/_react.default.createElement(_core.Menu, {
+    anchorEl: anchorEl,
+    id: "account-menu",
+    open: openMoreActions,
+    onClose: handleClose,
+    onClick: handleClose,
+    PaperProps: {
+      elevation: 0,
+      sx: {
+        overflow: 'visible',
+        filter: 'drop-shadow(0px 2px 8px rgba(0,0,0,0.32))',
+        mt: 1.5,
+        '& .MuiList-root': {},
+        '& .MuiAvatar-root': {
+          width: 32,
+          height: 32,
+          ml: -0.5,
+          mr: 1
+        },
+        '&:before': {
+          content: '""',
+          display: 'block',
+          position: 'absolute',
+          top: 0,
+          right: 14,
+          width: 10,
+          height: 10,
+          bgcolor: 'primary',
+          transform: 'translateY(-50%) rotate(45deg)',
+          zIndex: 0
+        }
+      }
+    },
+    transformOrigin: {
+      horizontal: 20,
+      vertical: 44
+    },
+    anchorOrigin: {
+      horizontal: 'right',
+      vertical: 'top'
+    }
+  }, props.isHost && /*#__PURE__*/_react.default.createElement(_core.MenuItem, {
+    disabled: _Utils.default.isNull(participant.userId),
+    onClick: () => props.onChangeMeetingHostHandler(participant)
+  }, /*#__PURE__*/_react.default.createElement(_core.ListItemIcon, null, /*#__PURE__*/_react.default.createElement(_icons.PersonAdd, {
+    fontSize: "small"
+  })), "Change Meeting Host"), /*#__PURE__*/_react.default.createElement(_core.MenuItem, {
+    disabled: inView,
+    onClick: () => {
+      setInView(true);
+      participant.inView = true;
+
+      _VCEventManager.default.fireEvent(_VCEventType.VCEventType.PARTICIPANT_IN_VIEW, participant);
+    }
+  }, /*#__PURE__*/_react.default.createElement(_core.ListItemIcon, null, /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    id: 'MAXIMIZE'
+  })), "Bring to view"))))));
+};
+
+var _default = VCParticipantListItem;
+exports.default = _default;