@agilemotion/oui-react-js 1.6.1 → 1.6.2

package/dist/components/media/VCRoomParticipant.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
 });
@@ -37,18 +39,37 @@ var _Button = _interopRequireDefault(require("@material-ui/core/Button"));
 
 var _ApplicationManager = _interopRequireDefault(require("../../ApplicationManager"));
 
+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 () { 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 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 _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 _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."); }
 
-/* eslint-disable react-hooks/exhaustive-deps */
-const VIDEO_CODEC_OPTIONS = {
+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 = {
   videoGoogleStartBitrate: 1000
 };
 exports.VIDEO_CODEC_OPTIONS = VIDEO_CODEC_OPTIONS;
-const VIDEO_CONSTRAINTS = {
+var VIDEO_CONSTRAINTS = {
   audio: false,
   video: {
     width: {
@@ -62,7 +83,7 @@ const VIDEO_CONSTRAINTS = {
   }
 };
 exports.VIDEO_CONSTRAINTS = VIDEO_CONSTRAINTS;
-const VIDEO_ENCODINGS = [{
+var VIDEO_ENCODINGS = [{
   rid: 'r0',
   maxBitrate: 20000,
   //scaleResolutionDownBy: 10.0,
@@ -77,56 +98,95 @@ const VIDEO_ENCODINGS = [{
   scalabilityMode: 'S1T3'
 }];
 exports.VIDEO_ENCODINGS = VIDEO_ENCODINGS;
-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
-  } = props;
-  const {
-    numberOfInViewParticipants
-  } = props;
-  const [anchorEl, setAnchorEl] = (0, _react.useState)(null);
-  const openMoreActions = Boolean(anchorEl);
-  const [downloadUrl, setDownloadUrl] = (0, _react.useState)(null);
-
-  const handler = () => {
+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() {
     return {
       get id() {
         return 'meeting-participant-' + props.data.userId;
       },
 
-      on: (eventType, be) => {
+      on: function on(eventType, be) {
         switch (eventType) {
           case _VCEventType.VCEventType.AUDIO_VISUAL_SETTINGS_CHANGED:
             onAVSettingsChange(be.payload ? be.payload : be);
@@ -155,37 +215,37 @@ const VCRoomParticipant = props => {
     };
   };
 
-  const handleClickDevicesIcon = event => {
+  var handleClickDevicesIcon = function handleClickDevicesIcon(event) {
     setAnchorEl(event.currentTarget);
   };
 
-  const changeAudioDevice = device => {
+  var changeAudioDevice = function changeAudioDevice(device) {
     setSelectedAudioDevice(device);
   };
 
-  const onRaiseHand = payload => {
+  var onRaiseHand = function onRaiseHand(payload) {
     if (payload && payload.userId === props.data.userId) {
       setHandRaised(true);
       props.data.handRaised = true;
     }
   };
 
-  const onLowerHand = payload => {
+  var onLowerHand = function onLowerHand(payload) {
     if (payload && payload.userId === props.data.userId) {
       setHandRaised(false);
       props.data.handRaised = false;
     }
   };
 
-  (0, _react.useEffect)(() => {
+  (0, _react.useEffect)(function () {
     eventHandler.api = handler();
   });
-  (0, _react.useEffect)(() => {
+  (0, _react.useEffect)(function () {
     if (videoRef.current && videoStream.current) {
       videoRef.current.srcObject = videoStream.current;
     }
   }, [videoRef.current]);
-  (0, _react.useEffect)(() => {
+  (0, _react.useEffect)(function () {
     if (props.soundMonitor && !props.inView) {
       if (soundLevel > 3) {
         soundLevelCounter.current = 10;
@@ -196,7 +256,7 @@ const VCRoomParticipant = props => {
       props.soundMonitor(props.data.userId, soundLevelCounter.current === 0 || audioMuted);
     }
   }, [soundLevel]);
-  (0, _react.useEffect)(() => {
+  (0, _react.useEffect)(function () {
     if (audioMuted) {
       setSoundLevel(0);
 
@@ -206,11 +266,11 @@ const VCRoomParticipant = props => {
     }
   }, [audioMuted]);
 
-  const handleCloseDeviceMenu = () => {
+  var handleCloseDeviceMenu = function handleCloseDeviceMenu() {
     setAnchorEl(null);
   };
 
-  const onAVSettingsChange = payload => {
+  var onAVSettingsChange = function onAVSettingsChange(payload) {
     if (props.data.userId === payload.userId) {
       if (props.isCurrentUser) {
         if (payload.audioMuted) {
@@ -235,18 +295,18 @@ const VCRoomParticipant = props => {
     } else if (props.isCurrentUser) {}
   };
 
-  (0, _react.useEffect)(() => {
+  (0, _react.useEffect)(function () {
     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)(() => {
+  (0, _react.useEffect)(function () {
     setAudioMuted(props.audioMuted);
   }, [props.audioMuted]);
-  (0, _react.useEffect)(() => {
+  (0, _react.useEffect)(function () {
     setVideoMuted(props.videoMuted);
   }, [props.videoMuted]);
-  (0, _react.useEffect)(() => {
+  (0, _react.useEffect)(function () {
     if (producerTransport) {
       if (props.videoMuted) {
         stopProducing('video');
@@ -261,13 +321,13 @@ const VCRoomParticipant = props => {
       }
     }
   }, [producerTransport]);
-  (0, _react.useEffect)(() => {
+  (0, _react.useEffect)(function () {
     setProducerTransport(props.producerTransport);
   }, [props.producerTransport]);
-  (0, _react.useEffect)(() => {
+  (0, _react.useEffect)(function () {
     if (props.isCurrentUser) {
       props.onAudioDeviceChange(selectedAudioDevice);
-      stopProducing('audio', () => {
+      stopProducing('audio', function () {
         if (selectedAudioDevice) {
           if (!producerTransport) {
             createProducerTransport();
@@ -278,7 +338,7 @@ const VCRoomParticipant = props => {
       });
     }
   }, [selectedAudioDevice]);
-  (0, _react.useEffect)(() => {
+  (0, _react.useEffect)(function () {
     if (consumerTransport) {
       console.log('TRANSI ARRIVED WITH PRODUCERS : ', props.data.producers);
 
@@ -292,26 +352,68 @@ const VCRoomParticipant = props => {
       if (producers) {
         console.log('RE-INSTATING CONSUMERS');
 
-        for (let [key, value] of producers) {
-          console.log('PROCESSING PRODUCER OF TYPE : ' + key + ' : ' + value.id);
+        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 && (void 0).props.data.producers.find(p => p.producerId === value.id))) {
-            consume(value.id, key, true, value.userId);
-          } else {
-            console.log('PRODUCER ALREADY PROCESSED');
+            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();
           }
+        } catch (err) {
+          _iterator.e(err);
+        } finally {
+          _iterator.f();
         }
       }
     }
   }, [consumerTransport]);
 
-  const createProducerTransport = async () => {
-    setProducerTransport(await _MediaSoupHelper.default.initProducerTransport(props.device, props.meetingId, sessionStorage.getItem('username')));
-  };
+  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);
+    };
+  }();
 
-  const handleDevicesChanged = devices => {
-    let audioDeviceList = [];
-    devices.forEach(device => {
+  var handleDevicesChanged = function handleDevicesChanged(devices) {
+    var audioDeviceList = [];
+    devices.forEach(function (device) {
       if ('audioinput' === device.kind) {
         audioDeviceList.push({
           id: device.deviceId,
@@ -328,24 +430,28 @@ const VCRoomParticipant = props => {
     }
   };
 
-  (0, _react.useEffect)(() => {
+  (0, _react.useEffect)(function () {
     _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 = () => {
-        navigator.mediaDevices.enumerateDevices().then(devices => {
+      navigator.mediaDevices.ondevicechange = function () {
+        navigator.mediaDevices.enumerateDevices().then(function (devices) {
           handleDevicesChanged(devices);
         });
       };
 
-      navigator.mediaDevices.enumerateDevices().then(devices => {
+      navigator.mediaDevices.enumerateDevices().then(function (devices) {
         handleDevicesChanged(devices);
       });
     }
 
-    return () => {
+    if (props.isCurrentUser) {
+      consumeFailedProducers();
+    }
+
+    return function () {
       console.log('======================DESTROYING PARTICIPANT========================= : ' + props.data.userId);
 
       if (props.isCurrentUser) {
@@ -353,114 +459,185 @@ const VCRoomParticipant = props => {
         stopProducing('video');
       }
 
-      for (let [key, value] of consumers) {
-        removeConsumer(key, '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();
       }
 
       _VCEventManager.default.removeSubscriptions(eventHandler);
     };
   }, []);
 
-  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;
-    }
+  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]]);
+    }));
 
-    let stream = await navigator.mediaDevices.getUserMedia(mediaConstraints);
-    const track = type === 'audio' ? stream.getAudioTracks()[0] : stream.getVideoTracks()[0];
-    const params = {
-      track
+    return function produce(_x) {
+      return _ref2.apply(this, arguments);
     };
-    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);
+  var consumeFailedProducers = function consumeFailedProducers() {
+    setTimeout(function () {
+      if (consumerTransport) {
+        onNewProducers(failedProducersDueToNullTransport, true);
+        failedProducersDueToNullTransport.splice(0, failedProducersDueToNullTransport.length);
+        consumeFailedProducers();
       }
-
-      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);
-      });
-    }
+    }, 5000);
   };
 
-  const stopProducing = (type, callback) => {
+  var stopProducing = function stopProducing(type, callback) {
     if (!producers.has(type)) {
       console.log('There is no producer for this type ' + type);
       return;
     }
 
-    let producerId = producers.get(type).id;
+    var producerId = producers.get(type).id;
     console.log('Close producer', producerId);
     producers.get(type).close();
     producers.delete(type);
@@ -481,35 +658,53 @@ const VCRoomParticipant = props => {
 
     _SocketManager.default.emitEvent(_VCEventType.VCEventType.PRODUCER_CLOSED, {
       userId: props.data.userId,
-      producerId,
+      producerId: producerId,
       roomId: props.meetingId
-    }).then(data => {}).catch(e => console.log('PRODUCER_CLOSED ERROR : ', e));
+    }).then(function (data) {}).catch(function (e) {
+      return console.log('PRODUCER_CLOSED ERROR : ', e);
+    });
   };
 
-  const onNewProducers = (producers, loading = false) => {
-    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);
+  var onNewProducers = function onNewProducers(producers) {
+    var 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);
+            }
           }
-        }
 
-        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) + " ] =======");
   };
 
-  const removeConsumer = (consumerId, kind, userId) => {
+  var removeConsumer = function removeConsumer(consumerId, kind, userId) {
     if (kind === 'video') {
       if (videoStream.current) {
         if (videoStream.current) {
@@ -519,7 +714,7 @@ const VCRoomParticipant = props => {
         }
       }
     } else if (kind === 'audio') {
-      let audioElement = document.getElementById(consumerId);
+      var audioElement = document.getElementById(consumerId);
 
       if (audioElement && audioElement.srcObject) {
         audioElement.srcObject.getTracks().forEach(function (track) {
@@ -530,7 +725,7 @@ const VCRoomParticipant = props => {
           _VCRoomRecorder.default.removeTrack(userId);
         }
 
-        let elementById = document.getElementById(props.data.userId + '-audio-el-container');
+        var elementById = document.getElementById(props.data.userId + '-audio-el-container');
 
         if (elementById) {
           elementById.removeChild(audioElement);
@@ -541,52 +736,101 @@ const VCRoomParticipant = props => {
     consumers.delete(consumerId);
   };
 
-  const consume = async (producerId, kind, loading, userId) => {
-    _MediaSoupHelper.default.getConsumeStream(producerId, device.rtpCapabilities, consumerTransport, props.meetingId, sessionStorage.getItem('username'), kind).then(({
-      consumer,
-      stream,
-      kind
-    }) => {
-      if (consumer) {
-        consumers.set(consumer.id, consumer);
-        console.log('=====================================CONSUME===================================== : ' + kind + ' FOR : ' + userId);
-
-        if (kind === 'video') {
-          if (videoRef.current) {
-            videoRef.current.srcObject = stream;
-          }
+  function retryConsume(kind, userId, e, retries, producerId, loading) {
+    console.log('FAILED TO CONSUME ' + kind + ' FROM ' + userId);
+    console.log(e);
 
-          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]);
-            }
+    if (retries < 10) {
+      console.log('RE-TRYING [' + retries + ']');
+      setTimeout(function () {
+        consume(producerId, kind, loading, userId, retries);
+      }, 5000);
+    } else {
+      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();
           }
         }
+      }, _callee3);
+    }));
 
-        consumer.on('trackended', () => {
-          removeConsumer(consumer.id, kind, userId);
-        });
-        consumer.on('transportclose', () => {
-          removeConsumer(consumer.id, kind, userId);
-        });
-      }
-    });
-  };
+    return function consume(_x2, _x3, _x4, _x5) {
+      return _ref3.apply(this, arguments);
+    };
+  }();
 
-  const getParticipantName = () => {
-    let name = props.data.name;
+  var getParticipantName = function getParticipantName() {
+    var name = props.data.name;
 
     if (_Utils.default.isNull(props.data.userId)) {
       name = "".concat(name, " (Guest)");
@@ -668,7 +912,7 @@ const VCRoomParticipant = props => {
       marginLeft: '4px'
     }
   }, props.isHost && !audioMuted ? /*#__PURE__*/_react.default.createElement(_IconButton.default, {
-    onClick: e => {
+    onClick: function onClick(e) {
       props.onHostAudioMute(props.data);
     },
     style: {
@@ -684,7 +928,7 @@ const VCRoomParticipant = props => {
   }) : /*#__PURE__*/_react.default.createElement(_Icon.default, {
     id: 'MIC'
   })), props.isHost && !videoMuted && /*#__PURE__*/_react.default.createElement(_IconButton.default, {
-    onClick: e => {
+    onClick: function onClick(e) {
       props.onHostVideoMute(props.data);
     },
     style: {
@@ -784,9 +1028,11 @@ const VCRoomParticipant = props => {
       horizontal: 'right',
       vertical: 'top'
     }
-  }, audioDevices.map((device, index) => {
+  }, audioDevices.map(function (device, index) {
     return /*#__PURE__*/_react.default.createElement(_core.MenuItem, {
-      onClick: () => changeAudioDevice(device)
+      onClick: function onClick() {
+        return changeAudioDevice(device);
+      }
     }, /*#__PURE__*/_react.default.createElement("span", {
       style: {
         color: selectedAudioDevice && selectedAudioDevice.id === device.id ? '#198754' : null