@agilemotion/oui-react-js 1.6.4 → 1.6.5

package/dist/components/media/VCRoomParticipant.js

@@ -1,75 +1,34 @@
 "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
 });
 exports.default = exports.VIDEO_ENCODINGS = exports.VIDEO_CONSTRAINTS = exports.VIDEO_CODEC_OPTIONS = void 0;
-
 var _react = _interopRequireWildcard(require("react"));
-
 require("./VCRoomParticipant.css");
-
 var _Utils = _interopRequireDefault(require("../../Utils"));
-
 var _VCEventType = require("./VCEventType");
-
 var _VCEventManager = _interopRequireDefault(require("./VCEventManager"));
-
 var _VCRoomRecorder = _interopRequireDefault(require("./VCRoomRecorder"));
-
 var _MediaSoupHelper = _interopRequireDefault(require("./MediaSoupHelper"));
-
 var _Tracks = _interopRequireDefault(require("./Tracks"));
-
 var _IconButton = _interopRequireDefault(require("@material-ui/core/IconButton"));
-
 var _Icon = _interopRequireDefault(require("../Icon"));
-
 var _icons = require("@material-ui/icons");
-
 var _Tooltip = _interopRequireDefault(require("@material-ui/core/Tooltip"));
-
 var _core = require("@material-ui/core");
-
 var _SocketManager = _interopRequireDefault(require("../SocketManager"));
-
 var _Button = _interopRequireDefault(require("@material-ui/core/Button"));
-
 var _ApplicationManager = _interopRequireDefault(require("../../ApplicationManager"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (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; }
+/* eslint-disable react-hooks/exhaustive-deps */
 
-var _this = void 0;
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-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 asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
-
-function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
-
-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 _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); }
-
-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 VIDEO_CODEC_OPTIONS = {
+const VIDEO_CODEC_OPTIONS = exports.VIDEO_CODEC_OPTIONS = {
   videoGoogleStartBitrate: 1000
 };
-exports.VIDEO_CODEC_OPTIONS = VIDEO_CODEC_OPTIONS;
-var VIDEO_CONSTRAINTS = {
+const VIDEO_CONSTRAINTS = exports.VIDEO_CONSTRAINTS = {
   audio: false,
   video: {
     width: {
@@ -82,8 +41,7 @@ var VIDEO_CONSTRAINTS = {
     }
   }
 };
-exports.VIDEO_CONSTRAINTS = VIDEO_CONSTRAINTS;
-var VIDEO_ENCODINGS = [{
+const VIDEO_ENCODINGS = exports.VIDEO_ENCODINGS = [{
   rid: 'r0',
   maxBitrate: 20000,
   //scaleResolutionDownBy: 10.0,
@@ -97,180 +55,113 @@ var VIDEO_ENCODINGS = [{
   maxBitrate: 450000,
   scalabilityMode: 'S1T3'
 }];
-exports.VIDEO_ENCODINGS = VIDEO_ENCODINGS;
-var location = window.location.protocol + '//' + window.location.hostname;
-
-var VCRoomParticipant = function VCRoomParticipant(props) {
-  var _React$useState = _react.default.useState(false),
-      _React$useState2 = _slicedToArray(_React$useState, 2),
-      handRaised = _React$useState2[0],
-      setHandRaised = _React$useState2[1];
-
-  var _React$useState3 = _react.default.useState(props.videoMuted),
-      _React$useState4 = _slicedToArray(_React$useState3, 2),
-      videoMuted = _React$useState4[0],
-      setVideoMuted = _React$useState4[1];
-
-  var _React$useState5 = _react.default.useState(props.audioMuted),
-      _React$useState6 = _slicedToArray(_React$useState5, 2),
-      audioMuted = _React$useState6[0],
-      setAudioMuted = _React$useState6[1];
-
-  var _React$useState7 = _react.default.useState(props.producerTransport),
-      _React$useState8 = _slicedToArray(_React$useState7, 2),
-      producerTransport = _React$useState8[0],
-      setProducerTransport = _React$useState8[1];
-
-  var _React$useState9 = _react.default.useState(false),
-      _React$useState10 = _slicedToArray(_React$useState9, 2),
-      videoRefresher = _React$useState10[0],
-      setVideoRefresher = _React$useState10[1];
-
-  var _React$useState11 = _react.default.useState(new Map()),
-      _React$useState12 = _slicedToArray(_React$useState11, 1),
-      producers = _React$useState12[0];
-
-  var _React$useState13 = _react.default.useState([]),
-      _React$useState14 = _slicedToArray(_React$useState13, 1),
-      failedProducersDueToNullTransport = _React$useState14[0];
-
-  var _React$useState15 = _react.default.useState([]),
-      _React$useState16 = _slicedToArray(_React$useState15, 2),
-      audioDevices = _React$useState16[0],
-      setAudioDevices = _React$useState16[1];
-
-  var _React$useState17 = _react.default.useState(null),
-      _React$useState18 = _slicedToArray(_React$useState17, 2),
-      selectedAudioDevice = _React$useState18[0],
-      setSelectedAudioDevice = _React$useState18[1];
-
-  var _React$useState19 = _react.default.useState(new Map()),
-      _React$useState20 = _slicedToArray(_React$useState19, 1),
-      consumers = _React$useState20[0];
-
-  var _React$useState21 = _react.default.useState(0),
-      _React$useState22 = _slicedToArray(_React$useState21, 2),
-      soundLevel = _React$useState22[0],
-      setSoundLevel = _React$useState22[1];
-
-  var _useState = (0, _react.useState)({}),
-      _useState2 = _slicedToArray(_useState, 1),
-      eventHandler = _useState2[0];
-
-  var videoRef = (0, _react.useRef)();
-  var videoStream = (0, _react.useRef)();
-  var audioRef = (0, _react.useRef)();
-  var tracks = (0, _react.useRef)(new _Tracks.default());
-  var soundLevelCounter = (0, _react.useRef)(0);
-  var showVideo = true;
-  var consumerTransport = props.consumerTransport,
-      device = props.device,
-      participants = props.participants;
-  var numberOfInViewParticipants = props.numberOfInViewParticipants;
-
-  var _useState3 = (0, _react.useState)(null),
-      _useState4 = _slicedToArray(_useState3, 2),
-      anchorEl = _useState4[0],
-      setAnchorEl = _useState4[1];
-
-  var openMoreActions = Boolean(anchorEl);
-
-  var _useState5 = (0, _react.useState)(null),
-      _useState6 = _slicedToArray(_useState5, 2),
-      downloadUrl = _useState6[0],
-      setDownloadUrl = _useState6[1];
-
-  var handler = function handler() {
+const location = window.location.protocol + '//' + window.location.hostname;
+const VCRoomParticipant = props => {
+  const [handRaised, setHandRaised] = _react.default.useState(false);
+  const [videoMuted, setVideoMuted] = _react.default.useState(props.videoMuted);
+  const [audioMuted, setAudioMuted] = _react.default.useState(props.audioMuted);
+  const [producerTransport, setProducerTransport] = _react.default.useState(props.producerTransport);
+  const [videoRefresher, setVideoRefresher] = _react.default.useState(false);
+  const [producers] = _react.default.useState(new Map());
+  const [failedProducersDueToNullTransport] = _react.default.useState([]);
+  const [audioDevices, setAudioDevices] = _react.default.useState([]);
+  const [selectedAudioDevice, setSelectedAudioDevice] = _react.default.useState(null);
+  const [consumers] = _react.default.useState(new Map());
+  const [soundLevel, setSoundLevel] = _react.default.useState(0);
+  const [eventHandler] = (0, _react.useState)({});
+  const videoRef = (0, _react.useRef)();
+  const videoStream = (0, _react.useRef)();
+  const audioRef = (0, _react.useRef)();
+  const tracks = (0, _react.useRef)(new _Tracks.default());
+  const soundLevelCounter = (0, _react.useRef)(0);
+  const showVideo = true;
+  const {
+    consumerTransport,
+    device,
+    participants
+  } = props;
+  const {
+    numberOfInViewParticipants
+  } = props;
+  const [anchorEl, setAnchorEl] = (0, _react.useState)(null);
+  const openMoreActions = Boolean(anchorEl);
+  const [downloadUrl, setDownloadUrl] = (0, _react.useState)(null);
+  const handler = () => {
     return {
       get id() {
         return 'meeting-participant-' + props.data.userId;
       },
-
-      on: function on(eventType, be) {
+      on: (eventType, be) => {
         switch (eventType) {
           case _VCEventType.VCEventType.AUDIO_VISUAL_SETTINGS_CHANGED:
             onAVSettingsChange(be.payload ? be.payload : be);
             break;
-
           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.CONSUMER_CLOSED:
             if (consumers.has(be.payload.consumerId)) {
               removeConsumer(be.payload.consumerId, be.payload.kind);
             }
-
             break;
         }
       }
     };
   };
-
-  var handleClickDevicesIcon = function handleClickDevicesIcon(event) {
+  const handleClickDevicesIcon = event => {
     setAnchorEl(event.currentTarget);
   };
-
-  var changeAudioDevice = function changeAudioDevice(device) {
+  const changeAudioDevice = device => {
     setSelectedAudioDevice(device);
   };
-
-  var onRaiseHand = function onRaiseHand(payload) {
+  const onRaiseHand = payload => {
     if (payload && payload.userId === props.data.userId) {
       setHandRaised(true);
       props.data.handRaised = true;
     }
   };
-
-  var onLowerHand = function onLowerHand(payload) {
+  const onLowerHand = payload => {
     if (payload && payload.userId === props.data.userId) {
       setHandRaised(false);
       props.data.handRaised = false;
     }
   };
-
-  (0, _react.useEffect)(function () {
+  (0, _react.useEffect)(() => {
     eventHandler.api = handler();
   });
-  (0, _react.useEffect)(function () {
+  (0, _react.useEffect)(() => {
     if (videoRef.current && videoStream.current) {
       videoRef.current.srcObject = videoStream.current;
     }
   }, [videoRef.current]);
-  (0, _react.useEffect)(function () {
+  (0, _react.useEffect)(() => {
     if (props.soundMonitor && !props.inView) {
       if (soundLevel > 3) {
         soundLevelCounter.current = 10;
       } else if (soundLevelCounter.current > 0) {
         soundLevelCounter.current--;
       }
-
       props.soundMonitor(props.data.userId, soundLevelCounter.current === 0 || audioMuted);
     }
   }, [soundLevel]);
-  (0, _react.useEffect)(function () {
+  (0, _react.useEffect)(() => {
     if (audioMuted) {
       setSoundLevel(0);
-
       if (props.soundMonitor && !props.inView) {
         props.soundMonitor(props.data.userId, true);
       }
     }
   }, [audioMuted]);
-
-  var handleCloseDeviceMenu = function handleCloseDeviceMenu() {
+  const handleCloseDeviceMenu = () => {
     setAnchorEl(null);
   };
-
-  var onAVSettingsChange = function onAVSettingsChange(payload) {
+  const onAVSettingsChange = payload => {
     if (props.data.userId === payload.userId) {
       if (props.isCurrentUser) {
         if (payload.audioMuted) {
@@ -280,7 +171,6 @@ var VCRoomParticipant = function VCRoomParticipant(props) {
             produce('audio');
           }
         }
-
         if (payload.videoMuted) {
           stopProducing('video');
         } else {
@@ -289,31 +179,28 @@ var VCRoomParticipant = function VCRoomParticipant(props) {
           }
         }
       }
-
       setAudioMuted(payload.audioMuted);
       setVideoMuted(payload.videoMuted);
     } else if (props.isCurrentUser) {}
   };
-
-  (0, _react.useEffect)(function () {
+  (0, _react.useEffect)(() => {
     if (props.data && !_Utils.default.isNull(props.data.avatarId) && props.data.avatarId !== 'undefined' && props.data.avatarId !== 'null') {
       setDownloadUrl(location + _ApplicationManager.default.getContextRoot() + '/docs/api/v1/manager/download/' + props.data.avatarId + '?access_token=' + sessionStorage.getItem('accessToken') + '&idToken=' + sessionStorage.getItem('idToken'));
     }
   }, [props.data]);
-  (0, _react.useEffect)(function () {
+  (0, _react.useEffect)(() => {
     setAudioMuted(props.audioMuted);
   }, [props.audioMuted]);
-  (0, _react.useEffect)(function () {
+  (0, _react.useEffect)(() => {
     setVideoMuted(props.videoMuted);
   }, [props.videoMuted]);
-  (0, _react.useEffect)(function () {
+  (0, _react.useEffect)(() => {
     if (producerTransport) {
       if (props.videoMuted) {
         stopProducing('video');
       } else {
         produce('video');
       }
-
       if (props.audioMuted) {
         stopProducing('audio');
       } else {
@@ -321,13 +208,13 @@ var VCRoomParticipant = function VCRoomParticipant(props) {
       }
     }
   }, [producerTransport]);
-  (0, _react.useEffect)(function () {
+  (0, _react.useEffect)(() => {
     setProducerTransport(props.producerTransport);
   }, [props.producerTransport]);
-  (0, _react.useEffect)(function () {
+  (0, _react.useEffect)(() => {
     if (props.isCurrentUser) {
       props.onAudioDeviceChange(selectedAudioDevice);
-      stopProducing('audio', function () {
+      stopProducing('audio', () => {
         if (selectedAudioDevice) {
           if (!producerTransport) {
             createProducerTransport();
@@ -338,82 +225,33 @@ var VCRoomParticipant = function VCRoomParticipant(props) {
       });
     }
   }, [selectedAudioDevice]);
-  (0, _react.useEffect)(function () {
+  (0, _react.useEffect)(() => {
     if (consumerTransport) {
       console.log('TRANSI ARRIVED WITH PRODUCERS : ', props.data.producers);
-
       if (props.data.producers) {
         onNewProducers(props.data.producers, true);
       }
-
       onNewProducers(failedProducersDueToNullTransport, true);
       failedProducersDueToNullTransport.splice(0, failedProducersDueToNullTransport.length);
-
       if (producers) {
         console.log('RE-INSTATING CONSUMERS');
-
-        var _iterator = _createForOfIteratorHelper(producers),
-            _step;
-
-        try {
-          var _loop = function _loop() {
-            var _step$value = _slicedToArray(_step.value, 2),
-                key = _step$value[0],
-                value = _step$value[1];
-
-            console.log('PROCESSING PRODUCER OF TYPE : ' + key + ' : ' + value.id);
-
-            if (!(props.data.producers && _this.props.data.producers.find(function (p) {
-              return p.producerId === value.id;
-            }))) {
-              consume(value.id, key, true, value.userId);
-            } else {
-              console.log('PRODUCER ALREADY PROCESSED');
-            }
-          };
-
-          for (_iterator.s(); !(_step = _iterator.n()).done;) {
-            _loop();
+        for (let [key, value] of producers) {
+          console.log('PROCESSING PRODUCER OF TYPE : ' + key + ' : ' + value.id);
+          if (!(props.data.producers && (void 0).props.data.producers.find(p => p.producerId === value.id))) {
+            consume(value.id, key, true, value.userId);
+          } else {
+            console.log('PRODUCER ALREADY PROCESSED');
           }
-        } catch (err) {
-          _iterator.e(err);
-        } finally {
-          _iterator.f();
         }
       }
     }
   }, [consumerTransport]);
-
-  var createProducerTransport = /*#__PURE__*/function () {
-    var _ref = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
-      return regeneratorRuntime.wrap(function _callee$(_context) {
-        while (1) {
-          switch (_context.prev = _context.next) {
-            case 0:
-              _context.t0 = setProducerTransport;
-              _context.next = 3;
-              return _MediaSoupHelper.default.initProducerTransport(props.device, props.meetingId, sessionStorage.getItem('username'));
-
-            case 3:
-              _context.t1 = _context.sent;
-              (0, _context.t0)(_context.t1);
-
-            case 5:
-            case "end":
-              return _context.stop();
-          }
-        }
-      }, _callee);
-    }));
-
-    return function createProducerTransport() {
-      return _ref.apply(this, arguments);
-    };
-  }();
-
-  var handleDevicesChanged = function handleDevicesChanged(devices) {
-    var audioDeviceList = [];
-    devices.forEach(function (device) {
+  const createProducerTransport = async () => {
+    setProducerTransport(await _MediaSoupHelper.default.initProducerTransport(props.device, props.meetingId, sessionStorage.getItem('username')));
+  };
+  const handleDevicesChanged = devices => {
+    let audioDeviceList = [];
+    devices.forEach(device => {
       if ('audioinput' === device.kind) {
         audioDeviceList.push({
           id: device.deviceId,
@@ -422,206 +260,117 @@ var VCRoomParticipant = function VCRoomParticipant(props) {
       }
     });
     setAudioDevices(audioDeviceList);
-
     if (audioDeviceList.length > 0) {
       setSelectedAudioDevice(audioDeviceList[0]);
     } else {
       setSelectedAudioDevice(null);
     }
   };
-
-  (0, _react.useEffect)(function () {
+  (0, _react.useEffect)(() => {
     _VCEventManager.default.removeSubscriptions(eventHandler);
-
     _VCEventManager.default.addSubscriptions(eventHandler, _VCEventType.VCEventType.AUDIO_VISUAL_SETTINGS_CHANGED, _VCEventType.VCEventType.RAISE_HAND, _VCEventType.VCEventType.LOWER_HAND, _VCEventType.VCEventType.NEW_PRODUCERS, _VCEventType.VCEventType.CONSUMER_CLOSED);
-
     if (props.isCurrentUser) {
-      navigator.mediaDevices.ondevicechange = function () {
-        navigator.mediaDevices.enumerateDevices().then(function (devices) {
+      navigator.mediaDevices.ondevicechange = () => {
+        navigator.mediaDevices.enumerateDevices().then(devices => {
           handleDevicesChanged(devices);
         });
       };
-
-      navigator.mediaDevices.enumerateDevices().then(function (devices) {
+      navigator.mediaDevices.enumerateDevices().then(devices => {
         handleDevicesChanged(devices);
       });
     }
-
     if (props.isCurrentUser) {
       consumeFailedProducers();
     }
-
-    return function () {
+    return () => {
       console.log('======================DESTROYING PARTICIPANT========================= : ' + props.data.userId);
-
       if (props.isCurrentUser) {
         stopProducing('audio');
         stopProducing('video');
       }
-
-      var _iterator2 = _createForOfIteratorHelper(consumers),
-          _step2;
-
-      try {
-        for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
-          var _step2$value = _slicedToArray(_step2.value, 2),
-              key = _step2$value[0],
-              value = _step2$value[1];
-
-          removeConsumer(key, 'video');
-        }
-      } catch (err) {
-        _iterator2.e(err);
-      } finally {
-        _iterator2.f();
+      for (let [key, value] of consumers) {
+        removeConsumer(key, 'video');
       }
-
       _VCEventManager.default.removeSubscriptions(eventHandler);
     };
   }, []);
-
-  var produce = /*#__PURE__*/function () {
-    var _ref2 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2(type) {
-      var mediaConstraints, stream, track, params, producer;
-      return regeneratorRuntime.wrap(function _callee2$(_context2) {
-        while (1) {
-          switch (_context2.prev = _context2.next) {
-            case 0:
-              if (device) {
-                _context2.next = 3;
-                break;
-              }
-
-              console.error('No available device');
-              return _context2.abrupt("return");
-
-            case 3:
-              if (!(!device.canProduce('video') && type === 'video')) {
-                _context2.next = 6;
-                break;
-              }
-
-              console.error('Cannot produce video');
-              return _context2.abrupt("return");
-
-            case 6:
-              if (!(!selectedAudioDevice && type === 'audio')) {
-                _context2.next = 9;
-                break;
-              }
-
-              console.error('No audio device selected');
-              return _context2.abrupt("return");
-
-            case 9:
-              if (!producers.has(type)) {
-                _context2.next = 12;
-                break;
-              }
-
-              console.log('Producer already exists for this type ' + type);
-              return _context2.abrupt("return");
-
-            case 12:
-              _context2.t0 = type;
-              _context2.next = _context2.t0 === 'audio' ? 15 : _context2.t0 === 'video' ? 17 : 19;
-              break;
-
-            case 15:
-              mediaConstraints = {
-                deviceId: selectedAudioDevice.id,
-                audio: true,
-                video: false
-              };
-              return _context2.abrupt("break", 20);
-
-            case 17:
-              mediaConstraints = VIDEO_CONSTRAINTS;
-              return _context2.abrupt("break", 20);
-
-            case 19:
-              return _context2.abrupt("return");
-
-            case 20:
-              _context2.next = 22;
-              return navigator.mediaDevices.getUserMedia(mediaConstraints);
-
-            case 22:
-              stream = _context2.sent;
-              track = type === 'audio' ? stream.getAudioTracks()[0] : stream.getVideoTracks()[0];
-              params = {
-                track: track
-              };
-              audioRef.current = stream;
-
-              if (props.isHost && type === 'audio') {
-                _VCRoomRecorder.default.addTrack(props.data.userId, track);
-
-                tracks.current.setAudioTrack(track);
-              }
-
-              if (type === 'video') {
-                params.encodings = VIDEO_ENCODINGS;
-                params.codecOptions = VIDEO_CODEC_OPTIONS;
-                tracks.current.setVideoTrack(track);
-              }
-
-              _context2.prev = 28;
-              _context2.next = 31;
-              return producerTransport.produce(params);
-
-            case 31:
-              producer = _context2.sent;
-              _context2.next = 37;
-              break;
-
-            case 34:
-              _context2.prev = 34;
-              _context2.t1 = _context2["catch"](28);
-              console.log(_context2.t1);
-
-            case 37:
-              if (producer) {
-                producerTransport.getStats().then(function (data) {
-                  return console.log(data);
-                });
-                producers.set(type, producer);
-
-                if (type === 'video') {
-                  videoRef.current.srcObject = stream;
-                  videoStream.current = stream;
-                  setVideoRefresher(!videoRefresher);
-                  console.log(stream);
-                }
-
-                producer.on('transportclose', function () {
-                  stream.srcObject.getTracks().forEach(function (track) {
-                    track.stop();
-                  });
-                  producers.delete(type);
-                });
-                producer.on('close', function () {
-                  stream.srcObject.getTracks().forEach(function (track) {
-                    track.stop();
-                  });
-                  producers.delete(type);
-                });
-              }
-
-            case 38:
-            case "end":
-              return _context2.stop();
-          }
-        }
-      }, _callee2, null, [[28, 34]]);
-    }));
-
-    return function produce(_x) {
-      return _ref2.apply(this, arguments);
+  const produce = async type => {
+    if (!device) {
+      console.error('No available device');
+      return;
+    }
+    if (!device.canProduce('video') && type === 'video') {
+      console.error('Cannot produce video');
+      return;
+    }
+    if (!selectedAudioDevice && type === 'audio') {
+      console.error('No audio device selected');
+      return;
+    }
+    if (producers.has(type)) {
+      console.log('Producer already exists for this type ' + type);
+      return;
+    }
+    let mediaConstraints;
+    switch (type) {
+      case 'audio':
+        mediaConstraints = {
+          deviceId: selectedAudioDevice.id,
+          audio: true,
+          video: false
+        };
+        break;
+      case 'video':
+        mediaConstraints = VIDEO_CONSTRAINTS;
+        break;
+      default:
+        return;
+    }
+    let stream = await navigator.mediaDevices.getUserMedia(mediaConstraints);
+    const track = type === 'audio' ? stream.getAudioTracks()[0] : stream.getVideoTracks()[0];
+    const params = {
+      track
     };
-  }();
-
-  var consumeFailedProducers = function consumeFailedProducers() {
+    audioRef.current = stream;
+    if (props.isHost && type === 'audio') {
+      _VCRoomRecorder.default.addTrack(props.data.userId, track);
+      tracks.current.setAudioTrack(track);
+    }
+    if (type === 'video') {
+      params.encodings = VIDEO_ENCODINGS;
+      params.codecOptions = VIDEO_CODEC_OPTIONS;
+      tracks.current.setVideoTrack(track);
+    }
+    let producer;
+    try {
+      producer = await producerTransport.produce(params);
+    } catch (e) {
+      console.log(e);
+    }
+    if (producer) {
+      producerTransport.getStats().then(data => console.log(data));
+      producers.set(type, producer);
+      if (type === 'video') {
+        videoRef.current.srcObject = stream;
+        videoStream.current = stream;
+        setVideoRefresher(!videoRefresher);
+        console.log(stream);
+      }
+      producer.on('transportclose', () => {
+        stream.srcObject.getTracks().forEach(function (track) {
+          track.stop();
+        });
+        producers.delete(type);
+      });
+      producer.on('close', () => {
+        stream.srcObject.getTracks().forEach(function (track) {
+          track.stop();
+        });
+        producers.delete(type);
+      });
+    }
+  };
+  const consumeFailedProducers = () => {
     setTimeout(function () {
       if (consumerTransport) {
         onNewProducers(failedProducersDueToNullTransport, true);
@@ -630,81 +379,56 @@ var VCRoomParticipant = function VCRoomParticipant(props) {
       }
     }, 5000);
   };
-
-  var stopProducing = function stopProducing(type, callback) {
+  const stopProducing = (type, callback) => {
     if (!producers.has(type)) {
       console.log('There is no producer for this type ' + type);
       return;
     }
-
-    var producerId = producers.get(type).id;
+    let producerId = producers.get(type).id;
     console.log('Close producer', producerId);
     producers.get(type).close();
     producers.delete(type);
-
     if (type === 'video') {
       tracks.current.stopVideoTrack();
     }
-
     if (type === 'audio') {
       tracks.current.stopAudioTrack();
     }
-
     if (callback) {
       callback();
     }
-
     console.log('CLOSING PRODUCER OF ID : ' + producerId);
-
     _SocketManager.default.emitEvent(_VCEventType.VCEventType.PRODUCER_CLOSED, {
       userId: props.data.userId,
-      producerId: producerId,
+      producerId,
       roomId: props.meetingId
-    }).then(function (data) {}).catch(function (e) {
-      return console.log('PRODUCER_CLOSED ERROR : ', e);
-    });
+    }).then(data => {}).catch(e => console.log('PRODUCER_CLOSED ERROR : ', e));
   };
-
-  var onNewProducers = function onNewProducers(producers) {
-    var loading = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+  const onNewProducers = function (producers) {
+    let loading = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
     console.log("====== PRODUCERS RECEIVED : [ " + JSON.stringify(producers) + " ] =======");
-
-    var _iterator3 = _createForOfIteratorHelper(producers),
-        _step3;
-
-    try {
-      for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
-        var producer = _step3.value;
-
-        if (consumerTransport) {
-          if (producer.userId === props.data.userId) {
-            if (producer.kind === 'video' && !producer.screenSharing) {
-              console.log('CALLING CONSUME FROM ON NEW PRODUCERS FOR : ' + props.data.userId + ' - ' + producer.producerId);
-              consume(producer.producerId, producer.kind, loading, producer.userId);
-            }
+    for (const producer of producers) {
+      if (consumerTransport) {
+        if (producer.userId === props.data.userId) {
+          if (producer.kind === 'video' && !producer.screenSharing) {
+            console.log('CALLING CONSUME FROM ON NEW PRODUCERS FOR : ' + props.data.userId + ' - ' + producer.producerId);
+            consume(producer.producerId, producer.kind, loading, producer.userId);
           }
-
-          if (props.isCurrentUser || loading) {
-            // The small participant box at the bottom belonging to the current user must consume all audio
-            // This is because we do not want to disturb the audio due to any rendering such as Bring to view
-            if (producer.kind === 'audio') {
-              consume(producer.producerId, producer.kind, loading, producer.userId);
-            }
+        }
+        if (props.isCurrentUser || loading) {
+          // The small participant box at the bottom belonging to the current user must consume all audio
+          // This is because we do not want to disturb the audio due to any rendering such as Bring to view
+          if (producer.kind === 'audio') {
+            consume(producer.producerId, producer.kind, loading, producer.userId);
           }
-        } else {
-          failedProducersDueToNullTransport.push(producer);
         }
+      } else {
+        failedProducersDueToNullTransport.push(producer);
       }
-    } catch (err) {
-      _iterator3.e(err);
-    } finally {
-      _iterator3.f();
     }
-
     console.log("====== PRODUCERS THAT COULD NOT BE CONSUMES : [ " + JSON.stringify(failedProducersDueToNullTransport) + " ] =======");
   };
-
-  var removeConsumer = function removeConsumer(consumerId, kind, userId) {
+  const removeConsumer = (consumerId, kind, userId) => {
     if (kind === 'video') {
       if (videoStream.current) {
         if (videoStream.current) {
@@ -714,32 +438,25 @@ var VCRoomParticipant = function VCRoomParticipant(props) {
         }
       }
     } else if (kind === 'audio') {
-      var audioElement = document.getElementById(consumerId);
-
+      let audioElement = document.getElementById(consumerId);
       if (audioElement && audioElement.srcObject) {
         audioElement.srcObject.getTracks().forEach(function (track) {
           track.stop();
         });
-
         if (userId && _VCRoomRecorder.default) {
           _VCRoomRecorder.default.removeTrack(userId);
         }
-
-        var elementById = document.getElementById(props.data.userId + '-audio-el-container');
-
+        let elementById = document.getElementById(props.data.userId + '-audio-el-container');
         if (elementById) {
           elementById.removeChild(audioElement);
         }
       }
     }
-
     consumers.delete(consumerId);
   };
-
   function retryConsume(kind, userId, e, retries, producerId, loading) {
     console.log('FAILED TO CONSUME ' + kind + ' FROM ' + userId);
     console.log(e);
-
     if (retries < 10) {
       console.log('RE-TRYING [' + retries + ']');
       setTimeout(function () {
@@ -749,98 +466,65 @@ var VCRoomParticipant = function VCRoomParticipant(props) {
       console.log('COMPLETELY FAILED TO CONSUME ' + kind + ' FROM ' + userId);
     }
   }
-
-  var consume = /*#__PURE__*/function () {
-    var _ref3 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee3(producerId, kind, loading, userId) {
-      var retries,
-          _args3 = arguments;
-      return regeneratorRuntime.wrap(function _callee3$(_context3) {
-        while (1) {
-          switch (_context3.prev = _context3.next) {
-            case 0:
-              retries = _args3.length > 4 && _args3[4] !== undefined ? _args3[4] : 0;
-
-              _MediaSoupHelper.default.getConsumeStream(producerId, device.rtpCapabilities, consumerTransport, props.meetingId, sessionStorage.getItem('username'), kind).then(function (_ref4) {
-                var consumer = _ref4.consumer,
-                    stream = _ref4.stream,
-                    kind = _ref4.kind;
-
-                if (consumer) {
-                  consumers.set(consumer.id, consumer);
-                  console.log('=====================================CONSUME===================================== : ' + kind + ' FOR : ' + userId);
-
-                  if (kind === 'video') {
-                    if (videoRef.current) {
-                      videoRef.current.srcObject = stream;
-                    }
-
-                    videoStream.current = stream;
-                    setVideoMuted(false);
-                    setVideoRefresher(!videoRefresher);
-                    tracks.current.setVideoTrack(stream.getVideoTracks()[0]);
-                  } else {
-                    if (props.isCurrentUser || loading) {
-                      var audioElement = document.createElement('audio');
-                      audioElement.srcObject = stream;
-                      audioElement.id = consumer.id;
-                      audioElement.playsinline = false;
-                      audioElement.autoplay = true;
-                      document.getElementById('meeting-audio-el-container').appendChild(audioElement);
-
-                      if (props.isHost) {
-                        _VCRoomRecorder.default.addTrack(userId, stream.getAudioTracks()[0]);
-                      }
-                    }
-                  }
-
-                  consumer.on('trackended', function () {
-                    console.log(kind + " CONSUMER TRACK ENDED FOR " + userId);
-                    removeConsumer(consumer.id, kind, userId);
-                    var participantVideoMuted = participants.find(function (p) {
-                      return p.userId === userId;
-                    }).videoMuted;
-                    var participantAudioMuted = participants.find(function (p) {
-                      return p.userId === userId;
-                    }).audioMuted;
-
-                    if (kind === 'video' && !participantVideoMuted || kind === 'audio' && !participantAudioMuted) {
-                      retryConsume(kind, userId, new Error('trackended while ' + kind + ' is NOT muted'), retries, producerId, loading);
-                    }
-                  });
-                  consumer.on('transportclose', function () {
-                    console.log(kind + " CONSUMER CLOSED FOR " + userId);
-                    removeConsumer(consumer.id, kind, userId);
-                  });
-                }
-              }).catch(function (e) {
-                retryConsume(kind, userId, e, retries, producerId, loading);
-              });
-
-            case 2:
-            case "end":
-              return _context3.stop();
+  const consume = async function (producerId, kind, loading, userId) {
+    let retries = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 0;
+    _MediaSoupHelper.default.getConsumeStream(producerId, device.rtpCapabilities, consumerTransport, props.meetingId, sessionStorage.getItem('username'), kind).then(_ref => {
+      let {
+        consumer,
+        stream,
+        kind
+      } = _ref;
+      if (consumer) {
+        consumers.set(consumer.id, consumer);
+        console.log('=====================================CONSUME===================================== : ' + kind + ' FOR : ' + userId);
+        if (kind === 'video') {
+          if (videoRef.current) {
+            videoRef.current.srcObject = stream;
+          }
+          videoStream.current = stream;
+          setVideoMuted(false);
+          setVideoRefresher(!videoRefresher);
+          tracks.current.setVideoTrack(stream.getVideoTracks()[0]);
+        } else {
+          if (props.isCurrentUser || loading) {
+            let audioElement = document.createElement('audio');
+            audioElement.srcObject = stream;
+            audioElement.id = consumer.id;
+            audioElement.playsinline = false;
+            audioElement.autoplay = true;
+            document.getElementById('meeting-audio-el-container').appendChild(audioElement);
+            if (props.isHost) {
+              _VCRoomRecorder.default.addTrack(userId, stream.getAudioTracks()[0]);
+            }
           }
         }
-      }, _callee3);
-    }));
-
-    return function consume(_x2, _x3, _x4, _x5) {
-      return _ref3.apply(this, arguments);
-    };
-  }();
-
-  var getParticipantName = function getParticipantName() {
-    var name = props.data.name;
-
+        consumer.on('trackended', () => {
+          console.log(kind + " CONSUMER TRACK ENDED FOR " + userId);
+          removeConsumer(consumer.id, kind, userId);
+          let participantVideoMuted = participants.find(p => p.userId === userId).videoMuted;
+          let participantAudioMuted = participants.find(p => p.userId === userId).audioMuted;
+          if (kind === 'video' && !participantVideoMuted || kind === 'audio' && !participantAudioMuted) {
+            retryConsume(kind, userId, new Error('trackended while ' + kind + ' is NOT muted'), retries, producerId, loading);
+          }
+        });
+        consumer.on('transportclose', () => {
+          console.log(kind + " CONSUMER CLOSED FOR " + userId);
+          removeConsumer(consumer.id, kind, userId);
+        });
+      }
+    }).catch(e => {
+      retryConsume(kind, userId, e, retries, producerId, loading);
+    });
+  };
+  const getParticipantName = () => {
+    let name = props.data.name;
     if (_Utils.default.isNull(props.data.userId)) {
-      name = "".concat(name, " (Guest)");
+      name = `${name} (Guest)`;
     }
-
     return name;
   };
-
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
-    className: "".concat('col-*-* ' + (props.isCurrentUser ? 'meeting-participant-container-current-user' : 'meeting-participant-container')),
+    className: `${'col-*-* ' + (props.isCurrentUser ? 'meeting-participant-container-current-user' : 'meeting-participant-container')}`,
     style: {
       padding: props.padding ? props.padding : null,
       height: props.height ? props.height : null,
@@ -875,7 +559,7 @@ var VCRoomParticipant = function VCRoomParticipant(props) {
       backgroundPosition: 'center',
       borderRadius: '50%',
       backgroundColor: 'transparent',
-      backgroundImage: "url(".concat(downloadUrl, ")")
+      backgroundImage: `url(${downloadUrl})`
     }
   }) : _Utils.default.getInitials(props.data.name))), /*#__PURE__*/_react.default.createElement("video", {
     id: props.data.userId + '-video',
@@ -890,8 +574,7 @@ var VCRoomParticipant = function VCRoomParticipant(props) {
       zIndex: '0',
       display: videoMuted || !videoRef.current || !videoRef.current.srcObject ? 'none' : null
     }
-  }),
-  /*We need this element to capture recording sound*/
+  }), /*We need this element to capture recording sound*/
   props.isHost && /*#__PURE__*/_react.default.createElement("audio", {
     id: props.data.userId + '-audio',
     autoPlay: true,
@@ -912,7 +595,7 @@ var VCRoomParticipant = function VCRoomParticipant(props) {
       marginLeft: '4px'
     }
   }, props.isHost && !audioMuted ? /*#__PURE__*/_react.default.createElement(_IconButton.default, {
-    onClick: function onClick(e) {
+    onClick: e => {
       props.onHostAudioMute(props.data);
     },
     style: {
@@ -928,7 +611,7 @@ var VCRoomParticipant = function VCRoomParticipant(props) {
   }) : /*#__PURE__*/_react.default.createElement(_Icon.default, {
     id: 'MIC'
   })), props.isHost && !videoMuted && /*#__PURE__*/_react.default.createElement(_IconButton.default, {
-    onClick: function onClick(e) {
+    onClick: e => {
       props.onHostVideoMute(props.data);
     },
     style: {
@@ -1028,11 +711,9 @@ var VCRoomParticipant = function VCRoomParticipant(props) {
       horizontal: 'right',
       vertical: 'top'
     }
-  }, audioDevices.map(function (device, index) {
+  }, audioDevices.map((device, index) => {
     return /*#__PURE__*/_react.default.createElement(_core.MenuItem, {
-      onClick: function onClick() {
-        return changeAudioDevice(device);
-      }
+      onClick: () => changeAudioDevice(device)
     }, /*#__PURE__*/_react.default.createElement("span", {
       style: {
         color: selectedAudioDevice && selectedAudioDevice.id === device.id ? '#198754' : null
@@ -1040,6 +721,4 @@ var VCRoomParticipant = function VCRoomParticipant(props) {
     }, device.label));
   })));
 };
-
-var _default = VCRoomParticipant;
-exports.default = _default;
+var _default = exports.default = VCRoomParticipant;