@agilemotion/oui-react-js 1.6.1 → 1.6.3

package/dist/components/media/TrainingRoom.js

@@ -1,5 +1,7 @@
 "use strict";
 
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -43,11 +45,25 @@ var _Observable = _interopRequireDefault(require("../../event/Observable"));
 
 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 _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { 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; }
+
+function _createForOfIteratorHelper(o, allowArrayLike) { var it; if (typeof Symbol === "undefined" || o[Symbol.iterator] == null) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e2) { throw _e2; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = o[Symbol.iterator](); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e3) { didErr = true; err = _e3; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 
-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; }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
 
-const Status = {
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+var Status = {
   LOBBY: 'LOBBY',
   SESSION: 'SESSION',
   SESSION_ENDED: 'SESSION_ENDED',
@@ -55,44 +71,155 @@ const Status = {
   CONNECTION_ERROR: 'CONNECTION_ERROR',
   STREAM_ERROR: 'STREAM_ERROR'
 };
-const location = window.location.protocol + '//' + window.location.hostname;
-
-const TrainingRoom = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.forwardRef((props, ref) => {
-  const recordRef = (0, _react.useRef)();
-  const [hasUnreadChats, setHasUnreadChats] = (0, _react.useState)(null);
-  const [participants, setParticipants] = (0, _react.useState)([]);
-  const [handRaised, setHandRaised] = (0, _react.useState)(false);
-  const [isRecording, setIsRecording] = (0, _react.useState)(false);
-  const [videoDisabled] = (0, _react.useState)(props.videoDisabled);
-  const [audioDisabled, setAudioDisabled] = (0, _react.useState)(props.audioDisabled);
-  const [videoMuted, setVideoMuted] = (0, _react.useState)(true);
-  const [audioMuted, setAudioMuted] = (0, _react.useState)(true);
-  const [displayState, setDisplayState] = (0, _react.useState)(null);
-  const [roomStatus, setRoomStatus] = (0, _react.useState)(null);
-  const [someoneSharing, setSomeoneSharing] = (0, _react.useState)(null);
-  const [sideBarOpen, setSideBarOpen] = (0, _react.useState)(false);
-  const [sideBarTab, setSideBarTab] = (0, _react.useState)('');
-  const [allUserParticipantsLeft, setAllUserParticipantsLeft] = (0, _react.useState)(false);
-  const [lobbyWaitingList, setLobbyWaitingList] = (0, _react.useState)([]);
-  const [isHost, setIsHost] = (0, _react.useState)(false);
-  const [meetingParticipantGridMode, setMeetingParticipantGridMode] = (0, _react.useState)('DEFAULT');
-  const [autoPermit, setAutoPermit] = (0, _react.useState)(!props.calendarEvent.askToJoin);
-  const [rtpCapabilities, setRtpCapabilities] = (0, _react.useState)(null);
-  const [activityMessage, setActivityMessage] = (0, _react.useState)(null);
-  const [onloadScreenShareData, setOnloadScreenShareData] = (0, _react.useState)(null);
-  const [chatMessage, setChatMessage] = (0, _react.useState)(null);
-  const [chatSender, setChatSender] = (0, _react.useState)(null);
-  const [currentUserFullName, setCurrentUserFullName] = (0, _react.useState)(null);
-  const [eventHandler] = (0, _react.useState)({});
-  const [meetingChat, setMeetingChat] = (0, _react.useState)(null);
-
-  const [screenShared, setScreenShared] = _react.default.useState(null);
-
-  const [startScreenSharing, setStartScreenSharing] = _react.default.useState(false);
-
-  const [raisedHands, setRaisedHands] = (0, _react.useState)([]);
-
-  const handler = () => {
+var location = window.location.protocol + '//' + window.location.hostname;
+
+var TrainingRoom = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
+  var recordRef = (0, _react.useRef)();
+
+  var _useState = (0, _react.useState)(null),
+      _useState2 = _slicedToArray(_useState, 2),
+      hasUnreadChats = _useState2[0],
+      setHasUnreadChats = _useState2[1];
+
+  var _useState3 = (0, _react.useState)([]),
+      _useState4 = _slicedToArray(_useState3, 2),
+      participants = _useState4[0],
+      setParticipants = _useState4[1];
+
+  var _useState5 = (0, _react.useState)(false),
+      _useState6 = _slicedToArray(_useState5, 2),
+      handRaised = _useState6[0],
+      setHandRaised = _useState6[1];
+
+  var _useState7 = (0, _react.useState)(false),
+      _useState8 = _slicedToArray(_useState7, 2),
+      isRecording = _useState8[0],
+      setIsRecording = _useState8[1];
+
+  var _useState9 = (0, _react.useState)(props.videoDisabled),
+      _useState10 = _slicedToArray(_useState9, 1),
+      videoDisabled = _useState10[0];
+
+  var _useState11 = (0, _react.useState)(props.audioDisabled),
+      _useState12 = _slicedToArray(_useState11, 2),
+      audioDisabled = _useState12[0],
+      setAudioDisabled = _useState12[1];
+
+  var _useState13 = (0, _react.useState)(true),
+      _useState14 = _slicedToArray(_useState13, 2),
+      videoMuted = _useState14[0],
+      setVideoMuted = _useState14[1];
+
+  var _useState15 = (0, _react.useState)(true),
+      _useState16 = _slicedToArray(_useState15, 2),
+      audioMuted = _useState16[0],
+      setAudioMuted = _useState16[1];
+
+  var _useState17 = (0, _react.useState)(null),
+      _useState18 = _slicedToArray(_useState17, 2),
+      displayState = _useState18[0],
+      setDisplayState = _useState18[1];
+
+  var _useState19 = (0, _react.useState)(null),
+      _useState20 = _slicedToArray(_useState19, 2),
+      roomStatus = _useState20[0],
+      setRoomStatus = _useState20[1];
+
+  var _useState21 = (0, _react.useState)(null),
+      _useState22 = _slicedToArray(_useState21, 2),
+      someoneSharing = _useState22[0],
+      setSomeoneSharing = _useState22[1];
+
+  var _useState23 = (0, _react.useState)(false),
+      _useState24 = _slicedToArray(_useState23, 2),
+      sideBarOpen = _useState24[0],
+      setSideBarOpen = _useState24[1];
+
+  var _useState25 = (0, _react.useState)(''),
+      _useState26 = _slicedToArray(_useState25, 2),
+      sideBarTab = _useState26[0],
+      setSideBarTab = _useState26[1];
+
+  var _useState27 = (0, _react.useState)(false),
+      _useState28 = _slicedToArray(_useState27, 2),
+      allUserParticipantsLeft = _useState28[0],
+      setAllUserParticipantsLeft = _useState28[1];
+
+  var _useState29 = (0, _react.useState)([]),
+      _useState30 = _slicedToArray(_useState29, 2),
+      lobbyWaitingList = _useState30[0],
+      setLobbyWaitingList = _useState30[1];
+
+  var _useState31 = (0, _react.useState)(false),
+      _useState32 = _slicedToArray(_useState31, 2),
+      isHost = _useState32[0],
+      setIsHost = _useState32[1];
+
+  var _useState33 = (0, _react.useState)('DEFAULT'),
+      _useState34 = _slicedToArray(_useState33, 2),
+      meetingParticipantGridMode = _useState34[0],
+      setMeetingParticipantGridMode = _useState34[1];
+
+  var _useState35 = (0, _react.useState)(!props.calendarEvent.askToJoin),
+      _useState36 = _slicedToArray(_useState35, 2),
+      autoPermit = _useState36[0],
+      setAutoPermit = _useState36[1];
+
+  var _useState37 = (0, _react.useState)(null),
+      _useState38 = _slicedToArray(_useState37, 2),
+      rtpCapabilities = _useState38[0],
+      setRtpCapabilities = _useState38[1];
+
+  var _useState39 = (0, _react.useState)(null),
+      _useState40 = _slicedToArray(_useState39, 2),
+      activityMessage = _useState40[0],
+      setActivityMessage = _useState40[1];
+
+  var _useState41 = (0, _react.useState)(null),
+      _useState42 = _slicedToArray(_useState41, 2),
+      onloadScreenShareData = _useState42[0],
+      setOnloadScreenShareData = _useState42[1];
+
+  var _useState43 = (0, _react.useState)(null),
+      _useState44 = _slicedToArray(_useState43, 2),
+      chatMessage = _useState44[0],
+      setChatMessage = _useState44[1];
+
+  var _useState45 = (0, _react.useState)(null),
+      _useState46 = _slicedToArray(_useState45, 2),
+      chatSender = _useState46[0],
+      setChatSender = _useState46[1];
+
+  var _useState47 = (0, _react.useState)(null),
+      _useState48 = _slicedToArray(_useState47, 2),
+      currentUserFullName = _useState48[0],
+      setCurrentUserFullName = _useState48[1];
+
+  var _useState49 = (0, _react.useState)({}),
+      _useState50 = _slicedToArray(_useState49, 1),
+      eventHandler = _useState50[0];
+
+  var _useState51 = (0, _react.useState)(null),
+      _useState52 = _slicedToArray(_useState51, 2),
+      meetingChat = _useState52[0],
+      setMeetingChat = _useState52[1];
+
+  var _React$useState = _react.default.useState(null),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      screenShared = _React$useState2[0],
+      setScreenShared = _React$useState2[1];
+
+  var _React$useState3 = _react.default.useState(false),
+      _React$useState4 = _slicedToArray(_React$useState3, 2),
+      startScreenSharing = _React$useState4[0],
+      setStartScreenSharing = _React$useState4[1];
+
+  var _useState53 = (0, _react.useState)([]),
+      _useState54 = _slicedToArray(_useState53, 2),
+      raisedHands = _useState54[0],
+      setRaisedHands = _useState54[1];
+
+  var handler = function handler() {
     return {
       get id() {
         return 'meeting-room-' + props.calendarEvent.id;
@@ -102,7 +229,7 @@ const TrainingRoom = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.defau
         return participants;
       },
 
-      on: (eventType, be) => {
+      on: function on(eventType, be) {
         switch (eventType) {
           case _VCEventType.VCEventType.REQUEST_TO_JOIN_MEETING:
             break;
@@ -138,19 +265,26 @@ const TrainingRoom = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.defau
             setScreenShared(false);
             setStartScreenSharing(false);
             break;
+
+          case _VCEventType.VCEventType.CONSUMER_TRANSPORT_FAILED:
+            hangUp();
+            alert('Connection error - Please check your network connection and re-join the meeting');
+            break;
         }
       }
     };
   };
 
-  const onRaiseHand = payload => {
+  var onRaiseHand = function onRaiseHand(payload) {
     raisedHands.push(payload.userId);
     setRaisedHands([].concat(raisedHands));
   };
 
-  const onLowerHand = payload => {
+  var onLowerHand = function onLowerHand(payload) {
     if (raisedHands.length > 0) {
-      let index = raisedHands.findIndex(p => p === payload.userId);
+      var index = raisedHands.findIndex(function (p) {
+        return p === payload.userId;
+      });
 
       if (index > -1) {
         raisedHands.splice(index, 1);
@@ -160,17 +294,19 @@ const TrainingRoom = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.defau
     setRaisedHands([].concat(raisedHands));
   };
 
-  const fetchChats = () => {
-    (0, _RestUtils.sendRequest)("".concat(location, "/api/v1/chat/fetchMeetingChat/").concat(props.calendarEvent.id), response => {
+  var fetchChats = function fetchChats() {
+    (0, _RestUtils.sendRequest)("".concat(location, "/api/v1/chat/fetchMeetingChat/").concat(props.calendarEvent.id), function (response) {
       if (response && response.id) {
         setMeetingChat(response);
       }
-    }, e => {}, true, false);
+    }, function (e) {}, true, false);
   };
 
-  const onAVSettingsChange = payload => {
+  var onAVSettingsChange = function onAVSettingsChange(payload) {
     if (payload) {
-      let participant = participants.find(p => p.userId === payload.userId);
+      var participant = participants.find(function (p) {
+        return p.userId === payload.userId;
+      });
 
       if (participant) {
         participant.audioMuted = payload.audioMuted;
@@ -187,41 +323,41 @@ const TrainingRoom = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.defau
       userId: sessionStorage.getItem('username'),
       audioMuted: audioMuted,
       videoMuted: videoMuted
-    }).catch(error => {});
+    }).catch(function (error) {});
   }
 
-  (0, _react.useEffect)(() => {
+  (0, _react.useEffect)(function () {
     if (audioMuted !== null) {
       onAVSettingsChange({
         userId: sessionStorage.getItem('username'),
-        videoMuted,
-        audioMuted
+        videoMuted: videoMuted,
+        audioMuted: audioMuted
       });
       emitAVSettingsChange();
     }
   }, [audioMuted]);
-  (0, _react.useEffect)(() => {
+  (0, _react.useEffect)(function () {
     if (videoMuted !== null) {
       onAVSettingsChange({
         userId: sessionStorage.getItem('username'),
-        videoMuted,
-        audioMuted
+        videoMuted: videoMuted,
+        audioMuted: audioMuted
       });
       emitAVSettingsChange();
     }
   }, [videoMuted]);
 
-  const handleMessageArrived = event => {
+  var handleMessageArrived = function handleMessageArrived(event) {
     if (roomStatus === Status.SESSION && event.message && event.message.length > 0) {
       setActivityMessage(event.message);
-      const messageTimeout = setTimeout(() => {
+      var messageTimeout = setTimeout(function () {
         setActivityMessage(null);
         clearTimeout(messageTimeout);
       }, 4000);
     }
   };
 
-  const addUser = payload => {
+  var addUser = function addUser(payload) {
     console.log('ADD USER : ', payload);
     addUserToParticipants(payload.user);
     setAllUserParticipantsLeft(false);
@@ -237,13 +373,17 @@ const TrainingRoom = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.defau
     });
   };
 
-  const removeUser = payload => {
+  var removeUser = function removeUser(payload) {
     if (props.calendarEvent.id === payload.meetingId) {
-      const userId = payload.userId;
-      const find = participants.find(p => p.userId === userId);
+      var userId = payload.userId;
+      var find = participants.find(function (p) {
+        return p.userId === userId;
+      });
 
       if (find) {
-        const newParticipants = participants.filter(p => p.userId !== userId);
+        var newParticipants = participants.filter(function (p) {
+          return p.userId !== userId;
+        });
         setParticipants(newParticipants);
 
         if (newParticipants.length === 0) {
@@ -254,8 +394,8 @@ const TrainingRoom = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.defau
     }
   };
 
-  const handleSidebarToggle = e => {
-    let paper = document.getElementById('meetingDialogPaper');
+  var handleSidebarToggle = function handleSidebarToggle(e) {
+    var paper = document.getElementById('meetingDialogPaper');
 
     if (e.detail.open) {
       paper.style.margin = '54px 0 0 136px';
@@ -264,31 +404,31 @@ const TrainingRoom = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.defau
     }
   };
 
-  (0, _react.useEffect)(() => {
+  (0, _react.useEffect)(function () {
     eventHandler.api = handler();
   });
-  (0, _react.useEffect)(() => {
+  (0, _react.useEffect)(function () {
     if (props.settings) {
       setAudioMuted(!props.settings.audioOn);
       setVideoMuted(!props.settings.videoOn);
     }
   }, [props.settings]);
-  (0, _react.useEffect)(() => {
+  (0, _react.useEffect)(function () {
     if (!_Utils.default.isNull(handRaised)) {
       if (handRaised) {
         _SocketManager.default.emitEvent(_VCEventType.VCEventType.RAISE_HAND, {
           roomId: props.calendarEvent.id,
           userId: sessionStorage.getItem('username')
-        }).catch(error => {});
+        }).catch(function (error) {});
       } else {
         _SocketManager.default.emitEvent(_VCEventType.VCEventType.LOWER_HAND, {
           roomId: props.calendarEvent.id,
           userId: sessionStorage.getItem('username')
-        }).catch(error => {});
+        }).catch(function (error) {});
       }
     }
   }, [handRaised]);
-  (0, _react.useEffect)(() => {
+  (0, _react.useEffect)(function () {
     _VCEventManager.default.removeSubscriptions(eventHandler);
 
     _ApplicationManager.default.addApplicationContextSubscription({
@@ -297,13 +437,15 @@ const TrainingRoom = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.defau
           return 'training-room';
         },
 
-        onContextChange: (context, newValues) => {
-          if (Object.keys(newValues).find(key => key === 'windowDisplayState')) {
+        onContextChange: function onContextChange(context, newValues) {
+          if (Object.keys(newValues).find(function (key) {
+            return key === 'windowDisplayState';
+          })) {
             setDisplayState(newValues.windowDisplayState);
           }
         }
       }
-    }).then(initialContext => {
+    }).then(function (initialContext) {
       setDisplayState(initialContext ? initialContext.windowDisplayState : 'MAXIMIZED');
     });
 
@@ -313,7 +455,7 @@ const TrainingRoom = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.defau
 
     _ApplicationManager.default.setHasActiveMeeting(true);
 
-    return () => {
+    return function () {
       _VCEventManager.default.removeSubscriptions(eventHandler);
 
       _Observable.default.removeApplicationContextSubscriptions('training-room');
@@ -328,35 +470,37 @@ const TrainingRoom = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.defau
     };
   }, []);
 
-  _react.default.useEffect(() => {
+  _react.default.useEffect(function () {
     _ApplicationManager.default.setHasActiveMeeting(true);
 
-    let userFullName;
+    var userFullName;
 
     if (props.calendarEvent.host.username === sessionStorage.getItem('username')) {
       userFullName = props.calendarEvent.host.name;
     } else {
-      userFullName = props.calendarEvent.attendees.find(a => a.username === sessionStorage.getItem('username')).name;
+      userFullName = props.calendarEvent.attendees.find(function (a) {
+        return a.username === sessionStorage.getItem('username');
+      }).name;
     }
 
     setCurrentUserFullName(userFullName);
     setIsHost(props.calendarEvent.host.username === sessionStorage.getItem('username'));
 
     try {
-      _Media.default.joinMeeting(props.calendarEvent, props.settings, userFullName).then(response => {
+      _Media.default.joinMeeting(props.calendarEvent, props.settings, userFullName).then(function (response) {
         console.log('JOIN RESPONSE : ', response);
         createParticipants(response.participants);
         setRtpCapabilities(response.rtpCapabilities);
         setOnloadScreenShareData(response.shareScreenProducerData);
         setRoomStatus(participants.length > 0 ? Status.SESSION : Status.LOBBY);
-      }).catch(e => {
+      }).catch(function (e) {
         setRoomStatus(Status.SYSTEM_ERROR);
       });
     } catch (e) {
       setRoomStatus(Status.SYSTEM_ERROR);
     }
 
-    return () => {
+    return function () {
       _ApplicationManager.default.setHasActiveMeeting(false);
     };
   }, []);
@@ -365,7 +509,9 @@ const TrainingRoom = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.defau
     // Typically, a user shoud not exist. We are ensuring that there are never duplicates
     console.log('SEARCHING PARTICIPANT : ' + user.userId);
     console.log(participants);
-    let participant = participants.find(u => u.userId === user.userId);
+    var participant = participants.find(function (u) {
+      return u.userId === user.userId;
+    });
 
     if (participant) {
       console.log('FOUND EXISTING PARTICIPANT : ', participant);
@@ -389,11 +535,11 @@ const TrainingRoom = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.defau
     }
   }
 
-  const changeOtherParticipantAVSettings = (userId, audioMuted, videoMuted) => {};
+  var changeOtherParticipantAVSettings = function changeOtherParticipantAVSettings(userId, audioMuted, videoMuted) {};
 
-  const createParticipants = users => {
+  var createParticipants = function createParticipants(users) {
     console.log('ALL USERS received and creating participants : ', users);
-    users.forEach(user => {
+    users.forEach(function (user) {
       console.log('ADDING ITEM TO PARTICIPANTS : ', user);
       addUserToParticipants(user);
     });
@@ -407,7 +553,7 @@ const TrainingRoom = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.defau
     }
   };
 
-  const hangUp = () => {
+  var hangUp = function hangUp() {
     _SocketManager.default.leaveMeeting(props.calendarEvent.id);
 
     _ApplicationManager.default.setHasActiveMeeting(false);
@@ -418,8 +564,8 @@ const TrainingRoom = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.defau
     setSideBarTab('');
   };
 
-  const endSession = () => {
-    _ApplicationManager.default.openConfirmDialog("Are you sure you want to end the current session?", result => {
+  var _endSession = function endSession() {
+    _ApplicationManager.default.openConfirmDialog("Are you sure you want to end the current session?", function (result) {
       if (result === true) {
         _SocketManager.default.endSession(props.calendarEvent.id);
 
@@ -433,14 +579,26 @@ const TrainingRoom = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.defau
     });
   };
 
-  const emitSystemEvent = (eventType, data, toParticipantIds = null) => {
-    let participantIds = [];
+  var emitSystemEvent = function emitSystemEvent(eventType, data) {
+    var toParticipantIds = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
+    var participantIds = [];
 
     if (!toParticipantIds) {
-      for (const participant of participants) {
-        if (participant.userId !== sessionStorage.getItem('username')) {
-          participantIds.push(participant.userId);
+      var _iterator = _createForOfIteratorHelper(participants),
+          _step;
+
+      try {
+        for (_iterator.s(); !(_step = _iterator.n()).done;) {
+          var participant = _step.value;
+
+          if (participant.userId !== sessionStorage.getItem('username')) {
+            participantIds.push(participant.userId);
+          }
         }
+      } catch (err) {
+        _iterator.e(err);
+      } finally {
+        _iterator.f();
       }
     } else {
       participantIds = participantIds.concat(toParticipantIds);
@@ -450,10 +608,10 @@ const TrainingRoom = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.defau
       systemEventType: eventType,
       recipients: participantIds,
       data: data
-    }).catch(error => {});
+    }).catch(function (error) {});
   };
 
-  const recordMeeting = () => {
+  var _recordMeeting = function recordMeeting() {
     _VCRoomRecorder.default.init(props.calendarEvent.id, props.calendarEvent.title);
 
     setIsRecording(true);
@@ -465,7 +623,8 @@ const TrainingRoom = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.defau
     _VCRoomRecorder.default.recordMeeting();
   };
 
-  const stopRecordingMeeting = (publish = true) => {
+  var stopRecordingMeeting = function stopRecordingMeeting() {
+    var publish = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
     setIsRecording(false);
 
     if (publish) {
@@ -502,42 +661,42 @@ const TrainingRoom = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.defau
     }
   }, /*#__PURE__*/_react.default.createElement(_Toolbar.default, {
     eventHandler: {
-      onMuteVideo: muted => {
+      onMuteVideo: function onMuteVideo(muted) {
         setVideoMuted(muted);
       },
-      onMuteAudio: muted => {
+      onMuteAudio: function onMuteAudio(muted) {
         setAudioMuted(muted);
       },
-      endCall: () => {
+      endCall: function endCall() {
         hangUp();
       },
-      endSession: () => {
-        endSession();
+      endSession: function endSession() {
+        _endSession();
       },
-      showChat: () => {
+      showChat: function showChat() {
         fetchChats();
       },
-      showPeople: () => {
+      showPeople: function showPeople() {
         setSideBarTab('People');
         setSideBarOpen(true);
       },
-      shareScreen: () => {
+      shareScreen: function shareScreen() {
         setStartScreenSharing(true);
       },
-      stopShareScreen: () => {
+      stopShareScreen: function stopShareScreen() {
         setScreenShared(false);
         setStartScreenSharing(false);
       },
-      recordMeeting: () => {
-        recordMeeting();
+      recordMeeting: function recordMeeting() {
+        _recordMeeting();
       },
-      stopRecording: () => {
+      stopRecording: function stopRecording() {
         stopRecordingMeeting();
       },
-      raiseHand: () => {
+      raiseHand: function raiseHand() {
         setHandRaised(true);
       },
-      lowerHand: () => {
+      lowerHand: function lowerHand() {
         setHandRaised(false);
       }
     },
@@ -556,6 +715,8 @@ const TrainingRoom = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.defau
     someoneSharing: someoneSharing,
     isRecording: isRecording,
     raisedHands: raisedHands,
+    isAudioDeviceConnected: props.settings.isAudioDeviceConnected,
+    isVideoDeviceConnected: props.settings.isVideoDeviceConnected,
     meetingId: props.calendarEvent.id
   })), roomStatus === Status.SYSTEM_ERROR && /*#__PURE__*/_react.default.createElement("div", {
     style: {
@@ -583,19 +744,21 @@ const TrainingRoom = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.defau
     meetingTitle: props.calendarEvent.title,
     meetingId: props.calendarEvent.id,
     currentUserFullName: currentUserFullName,
-    onGridSetup: () => {
+    onGridSetup: function onGridSetup() {
       setSideBarTab('People');
     },
     sideBarTab: sideBarTab,
     roomStatus: roomStatus,
     isHost: isHost,
     startScreenSharing: startScreenSharing,
-    sharingHandler: someoneSharing => setSomeoneSharing(someoneSharing),
-    onStopSharing: () => {
+    sharingHandler: function sharingHandler(someoneSharing) {
+      return setSomeoneSharing(someoneSharing);
+    },
+    onStopSharing: function onStopSharing() {
       setScreenShared(false);
       setStartScreenSharing(false);
     },
-    onStartSharing: () => {
+    onStartSharing: function onStartSharing() {
       setScreenShared(true);
       setStartScreenSharing(false);
     },
@@ -605,19 +768,19 @@ const TrainingRoom = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.defau
     displayState: displayState,
     onloadScreenShareData: onloadScreenShareData,
     allUserParticipantsLeft: allUserParticipantsLeft,
-    onAudioDeviceChange: device => {
+    onAudioDeviceChange: function onAudioDeviceChange(device) {
       setAudioDisabled(_Utils.default.isNull(device));
     },
-    onHostAudioMute: participant => {
+    onHostAudioMute: function onHostAudioMute(participant) {
       changeOtherParticipantAVSettings(participant.userId, true, participant.videoMuted);
     },
-    onHostVideoMute: participant => {
+    onHostVideoMute: function onHostVideoMute(participant) {
       changeOtherParticipantAVSettings(participant.userId, participant.audioMuted, true);
     }
   }))), sideBarOpen && sideBarTab && displayState === 'MAXIMIZED' && roomStatus === Status.SESSION && /*#__PURE__*/_react.default.createElement("div", {
     className: 'closable-panel-container'
   }, /*#__PURE__*/_react.default.createElement(_ClosablePanel.default, {
-    closeHandler: e => {
+    closeHandler: function closeHandler(e) {
       setSideBarOpen(false);
       setSideBarTab(null);
     },
@@ -628,10 +791,10 @@ const TrainingRoom = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.defau
     tab: sideBarTab,
     meetingId: props.calendarEvent.id,
     participants: participants,
-    onHostAudioMute: participant => {
+    onHostAudioMute: function onHostAudioMute(participant) {
       changeOtherParticipantAVSettings(participant.userId, true, participant.videoMuted);
     },
-    onHostVideoMute: participant => {
+    onHostVideoMute: function onHostVideoMute(participant) {
       changeOtherParticipantAVSettings(participant.userId, participant.audioMuted, true);
     }
   })))), /*#__PURE__*/_react.default.createElement("div", {