@agilemotion/oui-react-js 1.3.8 → 1.4.0

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;

package/dist/components/media/VCRoom.css

@@ -0,0 +1,42 @@
+.meeting-room-container {
+  width: 100%;
+  height: 100%;
+  max-height: 100%;
+  background-color: #000000;
+  overflow-y: auto;
+  padding: 0 16px;
+}
+
+.footer-container {
+  position: absolute;
+  margin: 0 16px;
+  height: 72px;
+  width: 100%;
+  padding: 0 4px;
+  background-color: #000000;
+}
+
+.meeting-room-content {
+  background-color: transparent;
+}
+
+.closable-panel-container {
+  background-color: #f9f9f9;
+  color: #000000;
+  height: 100%;
+  width: 25%;
+  min-width: 320px;
+  margin-left: 16px;
+}
+
+.participants-container {
+  width: 25%;
+  height: 100%;
+  min-width: 320px;
+}
+
+@media (max-width: 991px) {
+  .closable-panel-container {
+    width: 100%;
+  }
+}

package/dist/components/media/VCRoom.js

@@ -0,0 +1,90 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.STREAM_ERROR_MESSAGE = exports.CONNECTION_ERROR_MESSAGE = exports.SYSTEM_ERROR_MESSAGE = exports.WAITING_FOR_OTHERS_TO_JOIN_MESSAGE = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Utils = _interopRequireDefault(require("../../Utils"));
+
+require("./Video.css");
+
+require("./VCRoom.css");
+
+var _TrainingRoom = _interopRequireDefault(require("./TrainingRoom"));
+
+var _Observable = _interopRequireDefault(require("../../event/Observable"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const WAITING_FOR_OTHERS_TO_JOIN_MESSAGE = 'Waiting for others to join';
+exports.WAITING_FOR_OTHERS_TO_JOIN_MESSAGE = WAITING_FOR_OTHERS_TO_JOIN_MESSAGE;
+const SYSTEM_ERROR_MESSAGE = 'A system error has occurred. Please try again later or contact your system administrator';
+exports.SYSTEM_ERROR_MESSAGE = SYSTEM_ERROR_MESSAGE;
+const CONNECTION_ERROR_MESSAGE = 'There seems to be a problem with your connection. Please check your network connection';
+exports.CONNECTION_ERROR_MESSAGE = CONNECTION_ERROR_MESSAGE;
+const STREAM_ERROR_MESSAGE = 'The system cannot initiate audio and video streams. Please check your microphone and camera settings';
+exports.STREAM_ERROR_MESSAGE = STREAM_ERROR_MESSAGE;
+
+const VCRoom = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.forwardRef((props, ref) => {
+  const [settings, setSettings] = _react.default.useState(null);
+
+  const [calendarEvent, setCalendarEvent] = _react.default.useState(null);
+
+  _react.default.useEffect(() => {
+    props.handle.api = api();
+  });
+
+  _react.default.useEffect(() => {
+    props.handle.api = api();
+
+    let parsedConfig = _Utils.default.parseConfig(props.config, props.viewId);
+
+    _Observable.default.addSubscriptions(parsedConfig.eventHandlingConfig, props.handle, props.viewId);
+
+    _Observable.default.addSystemSubscriptions(props.viewId, parsedConfig);
+  }, []);
+
+  const api = () => {
+    return {
+      get id() {
+        return props.config.id;
+      },
+
+      set settings(settings) {
+        setSettings(settings);
+      },
+
+      set calendarEvent(calendarEvent) {
+        setCalendarEvent(calendarEvent);
+      }
+
+    };
+  };
+
+  return /*#__PURE__*/_react.default.createElement("div", {
+    style: _Utils.default.mergeStyles({
+      width: '100%',
+      height: '100%'
+    }, props.config)
+  }, settings && calendarEvent && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      fontSize: '24px',
+      margin: '8px 0 0 12px',
+      height: '48px',
+      color: '#404239'
+    }
+  }, calendarEvent.title), /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      height: 'calc(100% - 64px)'
+    }
+  }, props.config.roomType === 'training' ? /*#__PURE__*/_react.default.createElement(_TrainingRoom.default, {
+    settings: settings,
+    calendarEvent: calendarEvent
+  }) : /*#__PURE__*/_react.default.createElement("div", null, "Unknown room type"))));
+}));
+
+var _default = VCRoom;
+exports.default = _default;

package/dist/components/media/VCRoomParticipant.css

@@ -0,0 +1,25 @@
+.meeting-participant-container {
+  display: inline-block;
+  text-align: center;
+  width: 100%;
+  height: 100%;
+  max-height: 100%;
+  color: rgb(40, 40, 43);
+  background-color: #f9f9f9;
+}
+
+.avatar-wrapper,
+.avatar-wrapper-sm {
+  font-size: 36px;
+  width: 112px;
+  height: 112px;
+  border-radius: 50%;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.avatar-wrapper-sm {
+  width: 72px;
+  height: 72px;
+}