@webex/plugin-meetings 3.0.0-beta.1 → 3.0.0-beta.104

package/dist/multistream/remoteMediaManager.js

@@ -0,0 +1,1137 @@
+"use strict";
+
+var _Reflect$construct = require("@babel/runtime-corejs2/core-js/reflect/construct");
+var _Object$defineProperty = require("@babel/runtime-corejs2/core-js/object/define-property");
+var _interopRequireDefault = require("@babel/runtime-corejs2/helpers/interopRequireDefault");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.RemoteMediaManager = exports.Event = exports.DefaultConfiguration = void 0;
+var _regenerator = _interopRequireDefault(require("@babel/runtime-corejs2/regenerator"));
+var _stringify = _interopRequireDefault(require("@babel/runtime-corejs2/core-js/json/stringify"));
+var _values = _interopRequireDefault(require("@babel/runtime-corejs2/core-js/object/values"));
+var _entries = _interopRequireDefault(require("@babel/runtime-corejs2/core-js/object/entries"));
+var _promise = _interopRequireDefault(require("@babel/runtime-corejs2/core-js/promise"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs2/helpers/slicedToArray"));
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime-corejs2/helpers/toConsumableArray"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime-corejs2/helpers/asyncToGenerator"));
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime-corejs2/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime-corejs2/helpers/createClass"));
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime-corejs2/helpers/assertThisInitialized"));
+var _inherits2 = _interopRequireDefault(require("@babel/runtime-corejs2/helpers/inherits"));
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime-corejs2/helpers/possibleConstructorReturn"));
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime-corejs2/helpers/getPrototypeOf"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs2/helpers/defineProperty"));
+var _remove2 = _interopRequireDefault(require("lodash/remove"));
+var _forEach2 = _interopRequireDefault(require("lodash/forEach"));
+var _cloneDeep2 = _interopRequireDefault(require("lodash/cloneDeep"));
+var _internalMediaCore = require("@webex/internal-media-core");
+var _loggerProxy = _interopRequireDefault(require("../common/logs/logger-proxy"));
+var _eventsScope = _interopRequireDefault(require("../common/events/events-scope"));
+var _remoteMedia = require("./remoteMedia");
+var _remoteMediaGroup = require("./remoteMediaGroup");
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = _Reflect$construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !_Reflect$construct) return false; if (_Reflect$construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(_Reflect$construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+/* Predefined layouts: */
+
+// An "all equal" grid, with size up to 3 x 3 = 9:
+var AllEqualLayout = {
+  activeSpeakerVideoPaneGroups: [{
+    id: 'main',
+    numPanes: 9,
+    size: 'best',
+    priority: 255
+  }]
+};
+
+// A layout with just a single remote active speaker video pane:
+var SingleLayout = {
+  activeSpeakerVideoPaneGroups: [{
+    id: 'main',
+    numPanes: 1,
+    size: 'best',
+    priority: 255
+  }]
+};
+
+// A layout with 1 big pane for the highest priority active speaker and 5 small panes for other active speakers:
+var OnePlusFiveLayout = {
+  activeSpeakerVideoPaneGroups: [{
+    id: 'mainBigOne',
+    numPanes: 1,
+    size: 'large',
+    priority: 255
+  }, {
+    id: 'secondarySetOfSmallPanes',
+    numPanes: 5,
+    size: 'very small',
+    priority: 254
+  }]
+};
+
+// A layout with 2 big panes for 2 main active speakers and a strip of 6 small panes for other active speakers:
+var TwoMainPlusSixSmallLayout = {
+  activeSpeakerVideoPaneGroups: [{
+    id: 'mainGroupWith2BigPanes',
+    numPanes: 2,
+    size: 'large',
+    priority: 255
+  }, {
+    id: 'secondaryGroupOfSmallPanes',
+    numPanes: 6,
+    size: 'small',
+    priority: 254
+  }]
+};
+
+// A strip of 8 small video panes (thumbnails) displayed at the top of a remote screenshare:
+var RemoteScreenShareWithSmallThumbnailsLayout = {
+  screenShareVideo: {
+    size: 'best'
+  },
+  activeSpeakerVideoPaneGroups: [{
+    id: 'thumbnails',
+    numPanes: 8,
+    size: 'thumbnail',
+    priority: 255
+  }]
+};
+
+// A staged layout with 4 pre-selected meeting participants in the main 2x2 grid and 6 small panes for other active speakers at the top:
+var Stage2x2With6ThumbnailsLayout = {
+  activeSpeakerVideoPaneGroups: [{
+    id: 'thumbnails',
+    numPanes: 6,
+    size: 'thumbnail',
+    priority: 255
+  }],
+  memberVideoPanes: [{
+    id: 'stage-1',
+    size: 'medium',
+    csi: undefined
+  }, {
+    id: 'stage-2',
+    size: 'medium',
+    csi: undefined
+  }, {
+    id: 'stage-3',
+    size: 'medium',
+    csi: undefined
+  }, {
+    id: 'stage-4',
+    size: 'medium',
+    csi: undefined
+  }]
+};
+
+/**
+ * Default configuration:
+ * - uses 3 audio streams
+ * - prefers active speakers with live video (e.g. are not audio only or video muted) over active speakers without live video
+ * - has a few layouts defined, including 1 that contains remote screen share (ScreenShareView)
+ */
+var DefaultConfiguration = {
+  audio: {
+    numOfActiveSpeakerStreams: 3,
+    numOfScreenShareStreams: 1
+  },
+  video: {
+    preferLiveVideo: true,
+    initialLayoutId: 'AllEqual',
+    layouts: {
+      AllEqual: AllEqualLayout,
+      OnePlusFive: OnePlusFiveLayout,
+      Single: SingleLayout,
+      Stage: Stage2x2With6ThumbnailsLayout,
+      ScreenShareView: RemoteScreenShareWithSmallThumbnailsLayout
+    }
+  }
+};
+exports.DefaultConfiguration = DefaultConfiguration;
+var Event;
+exports.Event = Event;
+(function (Event) {
+  Event["AudioCreated"] = "AudioCreated";
+  Event["ScreenShareAudioCreated"] = "ScreenShareAudioCreated";
+  Event["VideoLayoutChanged"] = "VideoLayoutChanged";
+})(Event || (exports.Event = Event = {}));
+/**
+ * A helper class that manages all remote audio/video streams in order to achieve a predefined set of layouts.
+ * It also creates a fixed number of audio streams and these don't change during the meeting.
+ *
+ * Things that RemoteMediaManager does:
+ * - owns the receive slots (creates them when needed, and re-uses them when switching layouts)
+ * - constructs appropriate RemoteMedia and RemoteMediaGroup objects and sends appropriate mediaRequests
+ */
+var RemoteMediaManager = /*#__PURE__*/function (_EventsScope) {
+  (0, _inherits2.default)(RemoteMediaManager, _EventsScope);
+  var _super = _createSuper(RemoteMediaManager);
+  /**
+   * Constructor
+   *
+   * @param {ReceiveSlotManager} receiveSlotManager
+   * @param {{audio: MediaRequestManager, video: mediaRequestManagers}} mediaRequestManagers
+   * @param {Configuration} config Configuration describing what video layouts to use during the meeting
+   */
+  function RemoteMediaManager(receiveSlotManager, mediaRequestManagers) {
+    var _this;
+    var config = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : DefaultConfiguration;
+    (0, _classCallCheck2.default)(this, RemoteMediaManager);
+    _this = _super.call(this);
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "config", void 0);
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "started", void 0);
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "receiveSlotManager", void 0);
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "mediaRequestManagers", void 0);
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "currentLayout", void 0);
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "slots", void 0);
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "media", void 0);
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "receiveSlotAllocations", void 0);
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "currentLayoutId", void 0);
+    _this.started = false;
+    _this.config = config;
+    _this.receiveSlotManager = receiveSlotManager;
+    _this.mediaRequestManagers = mediaRequestManagers;
+    _this.media = {
+      audio: undefined,
+      video: {
+        activeSpeakerGroups: {},
+        memberPanes: {}
+      },
+      screenShare: {
+        audio: undefined,
+        video: undefined
+      }
+    };
+    _this.checkConfigValidity();
+    _this.slots = {
+      audio: [],
+      screenShare: {
+        audio: [],
+        video: undefined
+      },
+      video: {
+        unused: [],
+        activeSpeaker: [],
+        receiverSelected: []
+      }
+    };
+    _this.receiveSlotAllocations = {
+      activeSpeaker: {},
+      receiverSelected: {}
+    };
+    _loggerProxy.default.logger.log("RemoteMediaManager#constructor --> RemoteMediaManager created with config: ".concat((0, _stringify.default)(_this.config)));
+    return _this;
+  }
+
+  /**
+   * Checks if configuration is valid, throws an error if it's not
+   */
+  (0, _createClass2.default)(RemoteMediaManager, [{
+    key: "checkConfigValidity",
+    value: function checkConfigValidity() {
+      if (!(this.config.video.initialLayoutId in this.config.video.layouts)) {
+        throw new Error("invalid config: initialLayoutId \"".concat(this.config.video.initialLayoutId, "\" doesn't match any of the layouts"));
+      }
+
+      // check if each layout is valid
+      (0, _values.default)(this.config.video.layouts).forEach(function (layout) {
+        var _layout$activeSpeaker, _layout$memberVideoPa;
+        var groupIds = {};
+        var paneIds = {};
+        var groupPriorites = {};
+        (_layout$activeSpeaker = layout.activeSpeakerVideoPaneGroups) === null || _layout$activeSpeaker === void 0 ? void 0 : _layout$activeSpeaker.forEach(function (group) {
+          if (groupIds[group.id]) {
+            throw new Error("invalid config: duplicate active speaker video pane group id: ".concat(group.id));
+          }
+          groupIds[group.id] = true;
+          if (groupPriorites[group.priority]) {
+            throw new Error("invalid config: multiple active speaker video pane groups have same priority: ".concat(group.priority));
+          }
+          groupPriorites[group.priority] = true;
+        });
+        (_layout$memberVideoPa = layout.memberVideoPanes) === null || _layout$memberVideoPa === void 0 ? void 0 : _layout$memberVideoPa.forEach(function (pane) {
+          if (paneIds[pane.id]) {
+            throw new Error("invalid config: duplicate member video pane id: ".concat(pane.id));
+          }
+          paneIds[pane.id] = true;
+        });
+      });
+    }
+
+    /**
+     * Starts the RemoteMediaManager.
+     *
+     * @returns {Promise}
+     */
+  }, {
+    key: "start",
+    value: function () {
+      var _start = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
+        return _regenerator.default.wrap(function _callee$(_context) {
+          while (1) switch (_context.prev = _context.next) {
+            case 0:
+              if (!this.started) {
+                _context.next = 2;
+                break;
+              }
+              throw new Error('start() failure: already started');
+            case 2:
+              this.started = true;
+              _context.next = 5;
+              return this.createAudioMedia();
+            case 5:
+              _context.next = 7;
+              return this.createScreenShareReceiveSlots();
+            case 7:
+              this.createScreenShareAudioMedia();
+              _context.next = 10;
+              return this.preallocateVideoReceiveSlots();
+            case 10:
+              _context.next = 12;
+              return this.setLayout(this.config.video.initialLayoutId);
+            case 12:
+            case "end":
+              return _context.stop();
+          }
+        }, _callee, this);
+      }));
+      function start() {
+        return _start.apply(this, arguments);
+      }
+      return start;
+    }()
+    /**
+     * Releases all the used resources (like allocated receive slots). This function needs
+     * to be called when we leave the meeting, etc.
+     */
+  }, {
+    key: "stop",
+    value: function stop() {
+      var _this2 = this,
+        _this$slots$video$unu,
+        _this$slots$video$unu2;
+      // invalidate all remoteMedia objects
+      this.invalidateCurrentRemoteMedia({
+        audio: true,
+        video: true,
+        screenShareAudio: true,
+        screenShareVideo: true,
+        commit: true
+      });
+
+      // release all audio receive slots
+      this.slots.audio.forEach(function (slot) {
+        return _this2.receiveSlotManager.releaseSlot(slot);
+      });
+      this.slots.audio.length = 0;
+
+      // release screen share slots
+      this.slots.screenShare.audio.forEach(function (slot) {
+        return _this2.receiveSlotManager.releaseSlot(slot);
+      });
+      this.slots.screenShare.audio.length = 0;
+      if (this.slots.screenShare.video) {
+        this.receiveSlotManager.releaseSlot(this.slots.screenShare.video);
+        this.slots.screenShare.video = undefined;
+      }
+
+      // release video slots
+      this.receiveSlotAllocations = {
+        activeSpeaker: {},
+        receiverSelected: {}
+      };
+      (_this$slots$video$unu = this.slots.video.unused).push.apply(_this$slots$video$unu, (0, _toConsumableArray2.default)(this.slots.video.activeSpeaker));
+      this.slots.video.activeSpeaker.length = 0;
+      (_this$slots$video$unu2 = this.slots.video.unused).push.apply(_this$slots$video$unu2, (0, _toConsumableArray2.default)(this.slots.video.receiverSelected));
+      this.slots.video.receiverSelected.length = 0;
+      this.releaseUnusedVideoSlots();
+      this.currentLayout = undefined;
+      this.currentLayoutId = undefined;
+      this.started = false;
+    }
+
+    /**
+     * Returns the total number of main video panes required for a given layout
+     *
+     * @param {VideoLayout} layout
+     * @returns {number}
+     */
+  }, {
+    key: "getRequiredNumVideoSlotsForLayout",
+    value: function getRequiredNumVideoSlotsForLayout(layout) {
+      var _layout$activeSpeaker2, _layout$memberVideoPa2;
+      if (!layout) {
+        return 0;
+      }
+      var activeSpeakerCount = ((_layout$activeSpeaker2 = layout.activeSpeakerVideoPaneGroups) === null || _layout$activeSpeaker2 === void 0 ? void 0 : _layout$activeSpeaker2.reduce(function (sum, paneGroup) {
+        return sum + paneGroup.numPanes;
+      }, 0)) || 0;
+      var receiverSelectedCount = ((_layout$memberVideoPa2 = layout.memberVideoPanes) === null || _layout$memberVideoPa2 === void 0 ? void 0 : _layout$memberVideoPa2.length) || 0;
+      return activeSpeakerCount + receiverSelectedCount;
+    }
+
+    /**
+     * Allocates the maximum number of panes that any of the configured layouts will require.
+     * We do this at the beginning, because it's more efficient (much faster) then allocating receive slots
+     * later, after the SDP exchange was done.
+     */
+  }, {
+    key: "preallocateVideoReceiveSlots",
+    value: function () {
+      var _preallocateVideoReceiveSlots = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2() {
+        var _this3 = this;
+        var maxNumVideoPanesRequired;
+        return _regenerator.default.wrap(function _callee2$(_context2) {
+          while (1) switch (_context2.prev = _context2.next) {
+            case 0:
+              maxNumVideoPanesRequired = (0, _values.default)(this.config.video.layouts).reduce(function (maxValue, layout) {
+                return Math.max(maxValue, _this3.getRequiredNumVideoSlotsForLayout(layout));
+              }, 0);
+            case 1:
+              if (!(this.slots.video.unused.length < maxNumVideoPanesRequired)) {
+                _context2.next = 9;
+                break;
+              }
+              _context2.t0 = this.slots.video.unused;
+              _context2.next = 5;
+              return this.receiveSlotManager.allocateSlot(_internalMediaCore.MediaType.VideoMain);
+            case 5:
+              _context2.t1 = _context2.sent;
+              _context2.t0.push.call(_context2.t0, _context2.t1);
+              _context2.next = 1;
+              break;
+            case 9:
+            case "end":
+              return _context2.stop();
+          }
+        }, _callee2, this);
+      }));
+      function preallocateVideoReceiveSlots() {
+        return _preallocateVideoReceiveSlots.apply(this, arguments);
+      }
+      return preallocateVideoReceiveSlots;
+    }()
+    /**
+     * Changes the layout (triggers Event.VideoLayoutChanged)
+     *
+     * @param {LayoutId} layoutId new layout id
+     * @returns {Promise}
+     */
+  }, {
+    key: "setLayout",
+    value: function () {
+      var _setLayout = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee3(layoutId) {
+        return _regenerator.default.wrap(function _callee3$(_context3) {
+          while (1) switch (_context3.prev = _context3.next) {
+            case 0:
+              if (layoutId in this.config.video.layouts) {
+                _context3.next = 2;
+                break;
+              }
+              throw new Error("invalid layoutId: \"".concat(layoutId, "\" doesn't match any of the configured layouts"));
+            case 2:
+              if (this.started) {
+                _context3.next = 4;
+                break;
+              }
+              throw new Error('setLayout() called before start()');
+            case 4:
+              this.currentLayoutId = layoutId;
+              this.currentLayout = (0, _cloneDeep2.default)(this.config.video.layouts[this.currentLayoutId]);
+              _context3.next = 8;
+              return this.updateVideoReceiveSlots();
+            case 8:
+              this.updateVideoRemoteMediaObjects();
+              this.updateScreenShareVideoRemoteMediaObject();
+              this.emitVideoLayoutChangedEvent();
+            case 11:
+            case "end":
+              return _context3.stop();
+          }
+        }, _callee3, this);
+      }));
+      function setLayout(_x) {
+        return _setLayout.apply(this, arguments);
+      }
+      return setLayout;
+    }()
+    /**
+     * Returns the currently selected layout id
+     *
+     * @returns {LayoutId}
+     */
+  }, {
+    key: "getLayoutId",
+    value: function getLayoutId() {
+      return this.currentLayoutId;
+    }
+
+    /**
+     * Creates the audio slots
+     */
+  }, {
+    key: "createAudioMedia",
+    value: function () {
+      var _createAudioMedia = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee4() {
+        var i, slot;
+        return _regenerator.default.wrap(function _callee4$(_context4) {
+          while (1) switch (_context4.prev = _context4.next) {
+            case 0:
+              i = 0;
+            case 1:
+              if (!(i < this.config.audio.numOfActiveSpeakerStreams)) {
+                _context4.next = 9;
+                break;
+              }
+              _context4.next = 4;
+              return this.receiveSlotManager.allocateSlot(_internalMediaCore.MediaType.AudioMain);
+            case 4:
+              slot = _context4.sent;
+              this.slots.audio.push(slot);
+            case 6:
+              i += 1;
+              _context4.next = 1;
+              break;
+            case 9:
+              // create a remote media group
+              this.media.audio = new _remoteMediaGroup.RemoteMediaGroup(this.mediaRequestManagers.audio, this.slots.audio, 255, true);
+              this.emit({
+                file: 'multistream/remoteMediaManager',
+                function: 'createAudioMedia'
+              }, Event.AudioCreated, this.media.audio);
+            case 11:
+            case "end":
+              return _context4.stop();
+          }
+        }, _callee4, this);
+      }));
+      function createAudioMedia() {
+        return _createAudioMedia.apply(this, arguments);
+      }
+      return createAudioMedia;
+    }()
+    /**
+     * Creates receive slots required for receiving screen share audio and video
+     */
+  }, {
+    key: "createScreenShareReceiveSlots",
+    value: function () {
+      var _createScreenShareReceiveSlots = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee5() {
+        var i, slot, isAnyLayoutContainingScreenShareVideo;
+        return _regenerator.default.wrap(function _callee5$(_context5) {
+          while (1) switch (_context5.prev = _context5.next) {
+            case 0:
+              i = 0;
+            case 1:
+              if (!(i < this.config.audio.numOfScreenShareStreams)) {
+                _context5.next = 9;
+                break;
+              }
+              _context5.next = 4;
+              return this.receiveSlotManager.allocateSlot(_internalMediaCore.MediaType.AudioSlides);
+            case 4:
+              slot = _context5.sent;
+              this.slots.screenShare.audio.push(slot);
+            case 6:
+              i += 1;
+              _context5.next = 1;
+              break;
+            case 9:
+              // video
+              isAnyLayoutContainingScreenShareVideo = (0, _values.default)(this.config.video.layouts).some(function (layout) {
+                return !!layout.screenShareVideo;
+              });
+              if (!isAnyLayoutContainingScreenShareVideo) {
+                _context5.next = 14;
+                break;
+              }
+              _context5.next = 13;
+              return this.receiveSlotManager.allocateSlot(_internalMediaCore.MediaType.VideoSlides);
+            case 13:
+              this.slots.screenShare.video = _context5.sent;
+            case 14:
+            case "end":
+              return _context5.stop();
+          }
+        }, _callee5, this);
+      }));
+      function createScreenShareReceiveSlots() {
+        return _createScreenShareReceiveSlots.apply(this, arguments);
+      }
+      return createScreenShareReceiveSlots;
+    }()
+    /**
+     * Creates RemoteMedia objects for screen share
+     */
+  }, {
+    key: "createScreenShareAudioMedia",
+    value: function createScreenShareAudioMedia() {
+      if (this.slots.screenShare.audio.length > 0) {
+        this.media.screenShare.audio = new _remoteMediaGroup.RemoteMediaGroup(this.mediaRequestManagers.screenShareAudio, this.slots.screenShare.audio, 255, true);
+        this.emit({
+          file: 'multistream/remoteMediaManager',
+          function: 'createScreenShareAudioMedia'
+        }, Event.ScreenShareAudioCreated, this.media.screenShare.audio);
+      }
+    }
+
+    /**
+     * Goes over all receiver-selected slots and keeps only the ones that are required by a given layout,
+     * the rest are all moved to the "unused" list
+     */
+  }, {
+    key: "trimReceiverSelectedSlots",
+    value: function trimReceiverSelectedSlots() {
+      var _this$currentLayout, _this$currentLayout$m, _this$slots$video$unu3;
+      var requiredCsis = {};
+
+      // fill requiredCsis with all the CSIs that the given layout requires
+      (_this$currentLayout = this.currentLayout) === null || _this$currentLayout === void 0 ? void 0 : (_this$currentLayout$m = _this$currentLayout.memberVideoPanes) === null || _this$currentLayout$m === void 0 ? void 0 : _this$currentLayout$m.forEach(function (memberVideoPane) {
+        if (memberVideoPane.csi !== undefined) {
+          requiredCsis[memberVideoPane.csi] = true;
+        }
+      });
+      var isCsiNeededByCurrentLayout = function isCsiNeededByCurrentLayout(csi) {
+        if (csi === undefined) {
+          return false;
+        }
+        return !!requiredCsis[csi];
+      };
+
+      // keep receiverSelected slots that match our new requiredCsis, move the rest of receiverSelected slots to unused
+      var notNeededReceiverSelectedSlots = (0, _remove2.default)(this.slots.video.receiverSelected, function (slot) {
+        return isCsiNeededByCurrentLayout(slot.csi) === false;
+      });
+      (_this$slots$video$unu3 = this.slots.video.unused).push.apply(_this$slots$video$unu3, (0, _toConsumableArray2.default)(notNeededReceiverSelectedSlots));
+    }
+
+    /**
+     * Releases all the "unused" video slots.
+     */
+  }, {
+    key: "releaseUnusedVideoSlots",
+    value: function releaseUnusedVideoSlots() {
+      var _this4 = this;
+      this.slots.video.unused.forEach(function (slot) {
+        return _this4.receiveSlotManager.releaseSlot(slot);
+      });
+      this.slots.video.unused.length = 0;
+    }
+
+    /**
+     * Allocates receive slots to all active speaker video panes
+     * in the current selected layout.
+     *
+     * Allocation tries to keep the same order of the slots between the previous
+     * layout and the new one. Sorting helps making sure that highest priority slots
+     * go in the same order in the new layout.
+     */
+  }, {
+    key: "allocateSlotsToActiveSpeakerPaneGroups",
+    value: function allocateSlotsToActiveSpeakerPaneGroups() {
+      var _this$currentLayout2,
+        _this$currentLayout2$,
+        _this$currentLayout2$2,
+        _this5 = this;
+      (_this$currentLayout2 = this.currentLayout) === null || _this$currentLayout2 === void 0 ? void 0 : (_this$currentLayout2$ = _this$currentLayout2.activeSpeakerVideoPaneGroups
+      // sorting in descending order based on group priority
+      ) === null || _this$currentLayout2$ === void 0 ? void 0 : (_this$currentLayout2$2 = _this$currentLayout2$.sort(function (a, b) {
+        return a.priority < b.priority ? 1 : -1;
+      })) === null || _this$currentLayout2$2 === void 0 ? void 0 : _this$currentLayout2$2.forEach(function (group) {
+        _this5.receiveSlotAllocations.activeSpeaker[group.id] = {
+          slots: []
+        };
+        for (var paneIndex = 0; paneIndex < group.numPanes; paneIndex += 1) {
+          // allocate a slot from the "unused" list, by grabbing in same order (shift) as previous layout
+          var freeSlot = _this5.slots.video.unused.shift();
+          if (freeSlot) {
+            _this5.slots.video.activeSpeaker.push(freeSlot);
+            _this5.receiveSlotAllocations.activeSpeaker[group.id].slots.push(freeSlot);
+          }
+        }
+      });
+    }
+
+    /**
+     * Allocates receive slots to all receiver selected video panes
+     * in the current selected layout
+     */
+  }, {
+    key: "allocateSlotsToReceiverSelectedVideoPaneGroups",
+    value: function allocateSlotsToReceiverSelectedVideoPaneGroups() {
+      var _this$currentLayout3,
+        _this$currentLayout3$,
+        _this6 = this;
+      (_this$currentLayout3 = this.currentLayout) === null || _this$currentLayout3 === void 0 ? void 0 : (_this$currentLayout3$ = _this$currentLayout3.memberVideoPanes) === null || _this$currentLayout3$ === void 0 ? void 0 : _this$currentLayout3$.forEach(function (memberPane) {
+        // check if there is existing slot for this csi
+        var existingSlot = _this6.slots.video.receiverSelected.find(function (slot) {
+          return slot.csi === memberPane.csi;
+        });
+        var isExistingSlotAlreadyAllocated = (0, _values.default)(_this6.receiveSlotAllocations.receiverSelected).includes(existingSlot);
+        if (memberPane.csi !== undefined && existingSlot && !isExistingSlotAlreadyAllocated) {
+          // found it, so use it
+          _this6.receiveSlotAllocations.receiverSelected[memberPane.id] = existingSlot;
+        } else {
+          // allocate a slot from the "unused" list
+          var freeSlot = _this6.slots.video.unused.pop();
+          if (freeSlot) {
+            _this6.slots.video.receiverSelected.push(freeSlot);
+            _this6.receiveSlotAllocations.receiverSelected[memberPane.id] = freeSlot;
+          }
+        }
+      });
+    }
+
+    /**
+     * Ensures that we have enough slots for the current layout.
+     */
+  }, {
+    key: "refillRequiredSlotsIfNeeded",
+    value: function () {
+      var _refillRequiredSlotsIfNeeded = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee6() {
+        var requiredNumSlots, totalNumSlots, numSlotsToCreate;
+        return _regenerator.default.wrap(function _callee6$(_context6) {
+          while (1) switch (_context6.prev = _context6.next) {
+            case 0:
+              requiredNumSlots = this.getRequiredNumVideoSlotsForLayout(this.currentLayout);
+              totalNumSlots = this.slots.video.unused.length + this.slots.video.activeSpeaker.length + this.slots.video.receiverSelected.length;
+              if (!(totalNumSlots < requiredNumSlots)) {
+                _context6.next = 13;
+                break;
+              }
+              numSlotsToCreate = requiredNumSlots - totalNumSlots;
+            case 4:
+              if (!(numSlotsToCreate > 0)) {
+                _context6.next = 13;
+                break;
+              }
+              _context6.t0 = this.slots.video.unused;
+              _context6.next = 8;
+              return this.receiveSlotManager.allocateSlot(_internalMediaCore.MediaType.VideoMain);
+            case 8:
+              _context6.t1 = _context6.sent;
+              _context6.t0.push.call(_context6.t0, _context6.t1);
+              numSlotsToCreate -= 1;
+              _context6.next = 4;
+              break;
+            case 13:
+            case "end":
+              return _context6.stop();
+          }
+        }, _callee6, this);
+      }));
+      function refillRequiredSlotsIfNeeded() {
+        return _refillRequiredSlotsIfNeeded.apply(this, arguments);
+      }
+      return refillRequiredSlotsIfNeeded;
+    }()
+    /**
+     * Move all active speaker slots to "unused"
+     */
+  }, {
+    key: "trimActiveSpeakerSlots",
+    value: function trimActiveSpeakerSlots() {
+      var _this$slots$video$unu4;
+      (_this$slots$video$unu4 = this.slots.video.unused).push.apply(_this$slots$video$unu4, (0, _toConsumableArray2.default)(this.slots.video.activeSpeaker));
+      this.slots.video.activeSpeaker.length = 0;
+    }
+
+    /**
+     * Logs the state of the receive slots
+     */
+  }, {
+    key: "logReceieveSlots",
+    value: function logReceieveSlots() {
+      var logMessage = '';
+      (0, _forEach2.default)(this.receiveSlotAllocations.activeSpeaker, function (group, groupName) {
+        logMessage += "group: ".concat(groupName, "\n").concat(group.slots.map(function (slot) {
+          return slot.logString;
+        }).join(' '));
+      });
+      logMessage += '\nreceiverSelected:\n';
+      (0, _forEach2.default)(this.receiveSlotAllocations.receiverSelected, function (slot, key) {
+        logMessage += " ".concat(key, ": ").concat(slot.logString, "\n");
+      });
+      _loggerProxy.default.logger.log("RemoteMediaManager#updateVideoReceiveSlots --> receive slots updated: unused=".concat(this.slots.video.unused.length, ", activeSpeaker=").concat(this.slots.video.activeSpeaker.length, ", receiverSelected=").concat(this.slots.video.receiverSelected.length, "\n").concat(logMessage));
+    }
+
+    /**
+     * Makes sure we have the right number of receive slots created for the current layout
+     * and allocates them to the right video panes / pane groups
+     *
+     * @returns {Promise}
+     */
+  }, {
+    key: "updateVideoReceiveSlots",
+    value: function () {
+      var _updateVideoReceiveSlots = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee7() {
+        return _regenerator.default.wrap(function _callee7$(_context7) {
+          while (1) switch (_context7.prev = _context7.next) {
+            case 0:
+              // move all active speaker slots to "unused"
+              this.trimActiveSpeakerSlots();
+
+              // move all no longer needed receiver-selected slots to "unused"
+              this.trimReceiverSelectedSlots();
+
+              // ensure we have enough total slots for current layout
+              _context7.next = 4;
+              return this.refillRequiredSlotsIfNeeded();
+            case 4:
+              // allocate the slots to the right panes / pane groups
+              // reset allocations
+              this.receiveSlotAllocations = {
+                activeSpeaker: {},
+                receiverSelected: {}
+              };
+              // allocate active speaker
+              this.allocateSlotsToActiveSpeakerPaneGroups();
+              // allocate receiver selected
+              this.allocateSlotsToReceiverSelectedVideoPaneGroups();
+              this.logReceieveSlots();
+
+              // If this is the initial layout, there may be some "unused" slots left because of the preallocation
+              // done in this.preallocateVideoReceiveSlots(), so release them now
+              this.releaseUnusedVideoSlots();
+            case 9:
+            case "end":
+              return _context7.stop();
+          }
+        }, _callee7, this);
+      }));
+      function updateVideoReceiveSlots() {
+        return _updateVideoReceiveSlots.apply(this, arguments);
+      }
+      return updateVideoReceiveSlots;
+    }()
+    /**
+     * Creates new RemoteMedia and RemoteMediaGroup objects for the current layout
+     * and sends the media requests for all of them.
+     */
+  }, {
+    key: "updateVideoRemoteMediaObjects",
+    value: function updateVideoRemoteMediaObjects() {
+      var _this7 = this;
+      // invalidate all the previous remote media objects and cancel their media requests
+      this.invalidateCurrentRemoteMedia({
+        audio: false,
+        video: true,
+        screenShareAudio: false,
+        screenShareVideo: false,
+        commit: false
+      });
+
+      // create new remoteMediaGroup objects
+      this.media.video.activeSpeakerGroups = {};
+      this.media.video.memberPanes = {};
+      var _loop = function _loop() {
+        var _this7$currentLayout, _this7$currentLayout$;
+        var _Object$entries$_i = (0, _slicedToArray2.default)(_Object$entries[_i], 2),
+          groupId = _Object$entries$_i[0],
+          group = _Object$entries$_i[1];
+        var paneGroupInCurrentLayout = (_this7$currentLayout = _this7.currentLayout) === null || _this7$currentLayout === void 0 ? void 0 : (_this7$currentLayout$ = _this7$currentLayout.activeSpeakerVideoPaneGroups) === null || _this7$currentLayout$ === void 0 ? void 0 : _this7$currentLayout$.find(function (groupInLayout) {
+          return groupInLayout.id === groupId;
+        });
+        if (paneGroupInCurrentLayout) {
+          var mediaGroup = new _remoteMediaGroup.RemoteMediaGroup(_this7.mediaRequestManagers.video, group.slots, paneGroupInCurrentLayout.priority, false, {
+            preferLiveVideo: _this7.config.video.preferLiveVideo,
+            resolution: paneGroupInCurrentLayout.size
+          });
+          _this7.media.video.activeSpeakerGroups[groupId] = mediaGroup;
+        } else {
+          // this should never happen, because this.receiveSlotAllocations are created based on current layout configuration
+          _loggerProxy.default.logger.warn("a group id ".concat(groupId, " from this.receiveSlotAllocations.activeSpeaker cannot be found in the current layout configuration"));
+        }
+      };
+      for (var _i = 0, _Object$entries = (0, _entries.default)(this.receiveSlotAllocations.activeSpeaker); _i < _Object$entries.length; _i++) {
+        _loop();
+      }
+
+      // create new remoteMedia objects
+      var _loop2 = function _loop2() {
+        var _this7$currentLayout2, _this7$currentLayout3;
+        var _Object$entries3$_i = (0, _slicedToArray2.default)(_Object$entries3[_i2], 2),
+          paneId = _Object$entries3$_i[0],
+          slot = _Object$entries3$_i[1];
+        var paneInCurrentLayout = (_this7$currentLayout2 = _this7.currentLayout) === null || _this7$currentLayout2 === void 0 ? void 0 : (_this7$currentLayout3 = _this7$currentLayout2.memberVideoPanes) === null || _this7$currentLayout3 === void 0 ? void 0 : _this7$currentLayout3.find(function (paneInLayout) {
+          return paneInLayout.id === paneId;
+        });
+        if (paneInCurrentLayout) {
+          var remoteMedia = new _remoteMedia.RemoteMedia(slot, _this7.mediaRequestManagers.video, {
+            resolution: paneInCurrentLayout.size
+          });
+          if (paneInCurrentLayout.csi) {
+            remoteMedia.sendMediaRequest(paneInCurrentLayout.csi, false);
+          }
+          _this7.media.video.memberPanes[paneId] = remoteMedia;
+        } else {
+          // this should never happen, because this.receiveSlotAllocations are created based on current layout configuration
+          _loggerProxy.default.logger.warn("a pane id ".concat(paneId, " from this.receiveSlotAllocations.receiverSelected cannot be found in the current layout configuration"));
+        }
+      };
+      for (var _i2 = 0, _Object$entries3 = (0, _entries.default)(this.receiveSlotAllocations.receiverSelected); _i2 < _Object$entries3.length; _i2++) {
+        _loop2();
+      }
+      this.mediaRequestManagers.video.commit();
+    }
+
+    /**
+     * Checks if current layout requires a screen share.
+     * If it does, it creates new RemoteMediaGroup object for screen share
+     * and sends the media requests for it.
+     * If it doesn't, it makes sure we clean up any RemoteMediaGroup objects
+     * created earlier for screen share (for previous layout).
+     */
+  }, {
+    key: "updateScreenShareVideoRemoteMediaObject",
+    value: function updateScreenShareVideoRemoteMediaObject() {
+      var _this$currentLayout4;
+      this.invalidateCurrentRemoteMedia({
+        audio: false,
+        video: false,
+        screenShareAudio: false,
+        screenShareVideo: true,
+        commit: false
+      });
+      this.media.screenShare.video = undefined;
+      if ((_this$currentLayout4 = this.currentLayout) !== null && _this$currentLayout4 !== void 0 && _this$currentLayout4.screenShareVideo) {
+        // we create a group of 1, because for screen share we need to use the "active speaker" policy
+        this.media.screenShare.video = new _remoteMediaGroup.RemoteMediaGroup(this.mediaRequestManagers.screenShareVideo, [this.slots.screenShare.video], 255, false, {
+          resolution: this.currentLayout.screenShareVideo.size
+        });
+      }
+      this.mediaRequestManagers.screenShareVideo.commit();
+    }
+
+    /**
+     * Invalidates all remote media objects belonging to currently selected layout
+     */
+  }, {
+    key: "invalidateCurrentRemoteMedia",
+    value: function invalidateCurrentRemoteMedia(options) {
+      var audio = options.audio,
+        video = options.video,
+        screenShareAudio = options.screenShareAudio,
+        screenShareVideo = options.screenShareVideo,
+        commit = options.commit;
+      if (audio && this.media.audio) {
+        this.media.audio.stop(commit);
+      }
+      if (video) {
+        (0, _values.default)(this.media.video.activeSpeakerGroups).forEach(function (remoteMediaGroup) {
+          remoteMediaGroup.stop(false);
+        });
+        (0, _values.default)(this.media.video.memberPanes).forEach(function (remoteMedia) {
+          remoteMedia.stop(false);
+        });
+        if (commit) {
+          this.mediaRequestManagers.video.commit();
+        }
+      }
+      if (screenShareAudio && this.media.screenShare.audio) {
+        this.media.screenShare.audio.stop(commit);
+      }
+      if (screenShareVideo && this.media.screenShare.video) {
+        this.media.screenShare.video.stop(commit);
+      }
+    }
+
+    /** emits Event.VideoLayoutChanged */
+  }, {
+    key: "emitVideoLayoutChangedEvent",
+    value: function emitVideoLayoutChangedEvent() {
+      var _this$media$screenSha;
+      // todo: at this point the receive slots might still be showing a participant from previous layout, we should
+      // wait for our media requests to be fulfilled, but there is no API for that right now (we could wait for source updates
+      // but in some cases they might never come, or would need to always make sure to use a new set of receiver slots)
+      // for now it's fine to have it like this, we will re-evaluate if it needs improving after more testing
+
+      this.emit({
+        file: 'multistream/remoteMediaManager',
+        function: 'emitVideoLayoutChangedEvent'
+      }, Event.VideoLayoutChanged, {
+        layoutId: this.currentLayoutId,
+        activeSpeakerVideoPanes: this.media.video.activeSpeakerGroups,
+        memberVideoPanes: this.media.video.memberPanes,
+        screenShareVideo: (_this$media$screenSha = this.media.screenShare.video) === null || _this$media$screenSha === void 0 ? void 0 : _this$media$screenSha.getRemoteMedia()[0]
+      });
+    }
+
+    /**
+     * Sets a new CSI on a given remote media object
+     *
+     * @param {RemoteMedia} remoteMedia remote Media object to modify
+     * @param {CSI} csi new CSI value, can be null if we want to stop receiving media
+     */
+  }, {
+    key: "setRemoteVideoCsi",
+    value: function setRemoteVideoCsi(remoteMedia, csi) {
+      if (!(0, _values.default)(this.media.video.memberPanes).includes(remoteMedia)) {
+        throw new Error('remoteMedia not found');
+      }
+      if (csi) {
+        remoteMedia.sendMediaRequest(csi, true);
+      } else {
+        remoteMedia.cancelMediaRequest(true);
+      }
+    }
+
+    /**
+     * Adds a new member video pane to the currently selected layout.
+     *
+     * Changes to the layout are lost after a layout change.
+     *
+     * @param {MemberVideoPane} newPane
+     * @returns {Promise<RemoteMedia>}
+     */
+  }, {
+    key: "addMemberVideoPane",
+    value: function () {
+      var _addMemberVideoPane = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee8(newPane) {
+        var _this$currentLayout5;
+        var receiveSlot, remoteMedia;
+        return _regenerator.default.wrap(function _callee8$(_context8) {
+          while (1) switch (_context8.prev = _context8.next) {
+            case 0:
+              if (this.currentLayout) {
+                _context8.next = 2;
+                break;
+              }
+              throw new Error('There is no current layout selected, call start() first');
+            case 2:
+              if (!((_this$currentLayout5 = this.currentLayout) !== null && _this$currentLayout5 !== void 0 && _this$currentLayout5.memberVideoPanes)) {
+                this.currentLayout.memberVideoPanes = [];
+              }
+              if (!(newPane.id in this.currentLayout.memberVideoPanes)) {
+                _context8.next = 5;
+                break;
+              }
+              throw new Error("duplicate pane id ".concat(newPane.id, " - this pane already exists in current layout's memberVideoPanes"));
+            case 5:
+              this.currentLayout.memberVideoPanes.push(newPane);
+              _context8.next = 8;
+              return this.receiveSlotManager.allocateSlot(_internalMediaCore.MediaType.VideoMain);
+            case 8:
+              receiveSlot = _context8.sent;
+              this.slots.video.receiverSelected.push(receiveSlot);
+              remoteMedia = new _remoteMedia.RemoteMedia(receiveSlot, this.mediaRequestManagers.video, {
+                resolution: newPane.size
+              });
+              if (newPane.csi) {
+                remoteMedia.sendMediaRequest(newPane.csi, true);
+              }
+              this.media.video.memberPanes[newPane.id] = remoteMedia;
+              return _context8.abrupt("return", remoteMedia);
+            case 14:
+            case "end":
+              return _context8.stop();
+          }
+        }, _callee8, this);
+      }));
+      function addMemberVideoPane(_x2) {
+        return _addMemberVideoPane.apply(this, arguments);
+      }
+      return addMemberVideoPane;
+    }()
+    /**
+     * Removes a member video pane from the currently selected layout.
+     *
+     * Changes to the layout are lost after a layout change.
+     *
+     * @param {PaneId} paneId pane id of the pane to remove
+     * @returns {Promise<void>}
+     */
+  }, {
+    key: "removeMemberVideoPane",
+    value: function removeMemberVideoPane(paneId) {
+      var _this$currentLayout$m2, _this$currentLayout$m3;
+      if (!this.currentLayout) {
+        return _promise.default.reject(new Error('There is no current layout selected, call start() first'));
+      }
+      if (!((_this$currentLayout$m2 = this.currentLayout.memberVideoPanes) !== null && _this$currentLayout$m2 !== void 0 && _this$currentLayout$m2.find(function (pane) {
+        return pane.id === paneId;
+      }))) {
+        // pane id doesn't exist, so nothing to do
+        _loggerProxy.default.logger.log("RemoteMediaManager#removeMemberVideoPane --> removeMemberVideoPane() called for a non-existent paneId: ".concat(paneId, " (pane not found in currentLayout.memberVideoPanes)"));
+        return _promise.default.resolve();
+      }
+      if (!this.media.video.memberPanes[paneId]) {
+        // pane id doesn't exist, so nothing to do
+        _loggerProxy.default.logger.log("RemoteMediaManager#removeMemberVideoPane --> removeMemberVideoPane() called for a non-existent paneId: ".concat(paneId, " (pane not found in this.media.video.memberPanes)"));
+        return _promise.default.resolve();
+      }
+      var remoteMedia = this.media.video.memberPanes[paneId];
+      var receiveSlot = remoteMedia.getUnderlyingReceiveSlot();
+      if (receiveSlot) {
+        this.receiveSlotManager.releaseSlot(receiveSlot);
+        var index = this.slots.video.receiverSelected.indexOf(receiveSlot);
+        if (index >= 0) {
+          this.slots.video.receiverSelected.splice(index, 1);
+        }
+      }
+      remoteMedia.stop();
+      delete this.media.video.memberPanes[paneId];
+      (_this$currentLayout$m3 = this.currentLayout.memberVideoPanes) === null || _this$currentLayout$m3 === void 0 ? true : delete _this$currentLayout$m3[paneId];
+      return _promise.default.resolve();
+    }
+
+    /**
+     * Pins an active speaker remote media object to the given CSI value. From that moment
+     * onwards the remote media will only play audio/video from that specific CSI until
+     * unpinActiveSpeakerVideoPane() is called or current layout is changed.
+     *
+     * @param {RemoteMedia} remoteMedia remote media object reference
+     * @param {CSI} csi CSI value to pin to, if undefined, then current CSI value is used
+     */
+  }, {
+    key: "pinActiveSpeakerVideoPane",
+    value: function pinActiveSpeakerVideoPane(remoteMedia, csi) {
+      var remoteMediaGroup = (0, _values.default)(this.media.video.activeSpeakerGroups).find(function (group) {
+        return group.includes(remoteMedia, 'unpinned');
+      });
+      if (!remoteMediaGroup) {
+        throw new Error('remoteMedia not found among the unpinned remote media from any active speaker group');
+      }
+      remoteMediaGroup.pin(remoteMedia, csi);
+    }
+
+    /**
+     * Unpins a remote media object from the fixed CSI value it was pinned to.
+     *
+     * @param {RemoteMedia} remoteMedia remote media object reference
+     */
+  }, {
+    key: "unpinActiveSpeakerVideoPane",
+    value: function unpinActiveSpeakerVideoPane(remoteMedia) {
+      var remoteMediaGroup = (0, _values.default)(this.media.video.activeSpeakerGroups).find(function (group) {
+        return group.includes(remoteMedia, 'pinned');
+      });
+      if (!remoteMediaGroup) {
+        throw new Error('remoteMedia not found among the pinned remote media from any active speaker group');
+      }
+      remoteMediaGroup.unpin(remoteMedia);
+    }
+
+    /**
+     * Returns true if a given remote media object belongs to an active speaker group and has been pinned.
+     * Throws an error if the remote media object doesn't belong to any active speaker remote media group.
+     *
+     * @param {RemoteMedia} remoteMedia remote media object
+     * @returns {boolean}
+     */
+  }, {
+    key: "isPinned",
+    value: function isPinned(remoteMedia) {
+      var remoteMediaGroup = (0, _values.default)(this.media.video.activeSpeakerGroups).find(function (group) {
+        return group.includes(remoteMedia);
+      });
+      if (!remoteMediaGroup) {
+        throw new Error('remoteMedia not found among any remote media (pinned or unpinned) from any active speaker group');
+      }
+      return remoteMediaGroup.isPinned(remoteMedia);
+    }
+  }]);
+  return RemoteMediaManager;
+}(_eventsScope.default);
+exports.RemoteMediaManager = RemoteMediaManager;
+//# sourceMappingURL=remoteMediaManager.js.map