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

package/dist/multistream/remoteMediaManager.js

@@ -0,0 +1,1113 @@
+"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 _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 = {
+  screenShareVideo: {
+    size: null
+  },
+  activeSpeakerVideoPaneGroups: [{
+    id: 'main',
+    numPanes: 9,
+    size: 'best',
+    priority: 255
+  }]
+}; // A layout with just a single remote active speaker video pane:
+
+var SingleLayout = {
+  screenShareVideo: {
+    size: null
+  },
+  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 = {
+  screenShareVideo: {
+    size: null
+  },
+  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 = {
+  screenShareVideo: {
+    size: null
+  },
+  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 = {
+  screenShareVideo: {
+    size: null
+  },
+  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
+  },
+  video: {
+    preferLiveVideo: true,
+    initialLayoutId: 'AllEqual',
+    layouts: {
+      AllEqual: AllEqualLayout,
+      OnePlusFive: OnePlusFiveLayout,
+      Single: SingleLayout,
+      Stage: Stage2x2With6ThumbnailsLayout,
+      ScreenShareView: RemoteScreenShareWithSmallThumbnailsLayout
+    }
+  },
+  screenShare: {
+    audio: true,
+    video: true
+  }
+};
+exports.DefaultConfiguration = DefaultConfiguration;
+var Event;
+exports.Event = Event;
+
+(function (Event) {
+  Event["AudioCreated"] = "AudioCreated";
+  Event["ScreenShareAudioCreated"] = "ScreenShareCreated";
+  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: {}
+      }
+    };
+
+    _this.checkConfigValidity();
+
+    _this.slots = {
+      audio: [],
+      screenShareAudio: undefined,
+      screenShareVideo: 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.preallocateVideoReceiveSlots();
+
+              case 7:
+                _context.next = 9;
+                return this.setLayout(this.config.video.initialLayoutId);
+
+              case 9:
+              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,
+        commit: true
+      }); // release all audio receive slots
+
+      this.slots.audio.forEach(function (slot) {
+        return _this2.receiveSlotManager.releaseSlot(slot);
+      });
+      this.slots.audio.length = 0; // todo: screenshare slots... (SPARK-377812)
+
+      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.MediaConnection.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.emitVideoLayoutChangedEvent();
+
+              case 10:
+              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.MediaConnection.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;
+    }()
+    /**
+     * 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 video panes in the current selected layout
+     */
+
+  }, {
+    key: "allocateSlotsToVideoPaneGroups",
+    value: function allocateSlotsToVideoPaneGroups() {
+      var _this$currentLayout2,
+          _this$currentLayout2$,
+          _this5 = this,
+          _this$currentLayout3,
+          _this$currentLayout3$;
+
+      this.receiveSlotAllocations = {
+        activeSpeaker: {},
+        receiverSelected: {}
+      };
+      (_this$currentLayout2 = this.currentLayout) === null || _this$currentLayout2 === void 0 ? void 0 : (_this$currentLayout2$ = _this$currentLayout2.activeSpeakerVideoPaneGroups) === null || _this$currentLayout2$ === void 0 ? void 0 : _this$currentLayout2$.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
+          var freeSlot = _this5.slots.video.unused.pop();
+
+          if (freeSlot) {
+            _this5.slots.video.activeSpeaker.push(freeSlot);
+
+            _this5.receiveSlotAllocations.activeSpeaker[group.id].slots.push(freeSlot);
+          }
+        }
+      });
+      (_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 = _this5.slots.video.receiverSelected.find(function (slot) {
+          return slot.csi === memberPane.csi;
+        });
+
+        var isExistingSlotAlreadyAllocated = (0, _values.default)(_this5.receiveSlotAllocations.receiverSelected).includes(existingSlot);
+
+        if (memberPane.csi !== undefined && existingSlot && !isExistingSlotAlreadyAllocated) {
+          // found it, so use it
+          _this5.receiveSlotAllocations.receiverSelected[memberPane.id] = existingSlot;
+        } else {
+          // allocate a slot from the "unused" list
+          var freeSlot = _this5.slots.video.unused.pop();
+
+          if (freeSlot) {
+            _this5.slots.video.receiverSelected.push(freeSlot);
+
+            _this5.receiveSlotAllocations.receiverSelected[memberPane.id] = freeSlot;
+          }
+        }
+      });
+    }
+    /**
+     * 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 _callee5() {
+        var _this$slots$video$unu4;
+
+        var requiredNumSlots, totalNumSlots, numSlotsToCreate;
+        return _regenerator.default.wrap(function _callee5$(_context5) {
+          while (1) {
+            switch (_context5.prev = _context5.next) {
+              case 0:
+                requiredNumSlots = this.getRequiredNumVideoSlotsForLayout(this.currentLayout);
+                totalNumSlots = this.slots.video.unused.length + this.slots.video.activeSpeaker.length + this.slots.video.receiverSelected.length; // ensure we have enough total slots for current layout
+
+                if (!(totalNumSlots < requiredNumSlots)) {
+                  _context5.next = 13;
+                  break;
+                }
+
+                numSlotsToCreate = requiredNumSlots - totalNumSlots;
+
+              case 4:
+                if (!(numSlotsToCreate > 0)) {
+                  _context5.next = 13;
+                  break;
+                }
+
+                _context5.t0 = this.slots.video.unused;
+                _context5.next = 8;
+                return this.receiveSlotManager.allocateSlot(_internalMediaCore.MediaConnection.MediaType.VideoMain);
+
+              case 8:
+                _context5.t1 = _context5.sent;
+
+                _context5.t0.push.call(_context5.t0, _context5.t1);
+
+                numSlotsToCreate -= 1;
+                _context5.next = 4;
+                break;
+
+              case 13:
+                // move all no longer needed receiver-selected slots to "unused"
+                this.trimReceiverSelectedSlots(); // move all active speaker slots to "unused"
+
+                (_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; // allocate the slots to the right panes / pane groups
+
+                this.allocateSlotsToVideoPaneGroups();
+
+                _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)); // 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 19:
+              case "end":
+                return _context5.stop();
+            }
+          }
+        }, _callee5, 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 _this6 = this;
+
+      // invalidate all the previous remote media objects and cancel their media requests
+      this.invalidateCurrentRemoteMedia({
+        audio: false,
+        video: true,
+        commit: false
+      }); // create new remoteMediaGroup objects
+
+      this.media.video.activeSpeakerGroups = {};
+      this.media.video.memberPanes = {};
+
+      var _loop = function _loop() {
+        var _this6$currentLayout, _this6$currentLayout$;
+
+        var _Object$entries$_i = (0, _slicedToArray2.default)(_Object$entries[_i], 2),
+            groupId = _Object$entries$_i[0],
+            group = _Object$entries$_i[1];
+
+        var paneGroupInCurrentLayout = (_this6$currentLayout = _this6.currentLayout) === null || _this6$currentLayout === void 0 ? void 0 : (_this6$currentLayout$ = _this6$currentLayout.activeSpeakerVideoPaneGroups) === null || _this6$currentLayout$ === void 0 ? void 0 : _this6$currentLayout$.find(function (groupInLayout) {
+          return groupInLayout.id === groupId;
+        });
+
+        if (paneGroupInCurrentLayout) {
+          var mediaGroup = new _remoteMediaGroup.RemoteMediaGroup(_this6.mediaRequestManagers.video, group.slots, paneGroupInCurrentLayout.priority, false, {
+            preferLiveVideo: _this6.config.video.preferLiveVideo,
+            resolution: paneGroupInCurrentLayout.size
+          });
+          _this6.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 _this6$currentLayout2, _this6$currentLayout3;
+
+        var _Object$entries3$_i = (0, _slicedToArray2.default)(_Object$entries3[_i2], 2),
+            paneId = _Object$entries3$_i[0],
+            slot = _Object$entries3$_i[1];
+
+        var paneInCurrentLayout = (_this6$currentLayout2 = _this6.currentLayout) === null || _this6$currentLayout2 === void 0 ? void 0 : (_this6$currentLayout3 = _this6$currentLayout2.memberVideoPanes) === null || _this6$currentLayout3 === void 0 ? void 0 : _this6$currentLayout3.find(function (paneInLayout) {
+          return paneInLayout.id === paneId;
+        });
+
+        if (paneInCurrentLayout) {
+          var remoteMedia = new _remoteMedia.RemoteMedia(slot, _this6.mediaRequestManagers.video, {
+            resolution: paneInCurrentLayout.size
+          });
+
+          if (paneInCurrentLayout.csi) {
+            remoteMedia.sendMediaRequest(paneInCurrentLayout.csi, false);
+          }
+
+          _this6.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();
+      } // todo: screenshare (SPARK-377812)
+
+
+      this.mediaRequestManagers.video.commit();
+    }
+    /**
+     * Invalidates all remote media objects belonging to currently selected layout
+     */
+
+  }, {
+    key: "invalidateCurrentRemoteMedia",
+    value: function invalidateCurrentRemoteMedia(options) {
+      var audio = options.audio,
+          video = options.video,
+          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();
+        }
+      }
+    }
+    /** emits Event.VideoLayoutChanged */
+
+  }, {
+    key: "emitVideoLayoutChangedEvent",
+    value: function emitVideoLayoutChangedEvent() {
+      // 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 fullfilled, 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: undefined // todo: screen share (SPARK-377812)
+
+      });
+    }
+    /**
+     * 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 _callee6(newPane) {
+        var _this$currentLayout4;
+
+        var receiveSlot, remoteMedia;
+        return _regenerator.default.wrap(function _callee6$(_context6) {
+          while (1) {
+            switch (_context6.prev = _context6.next) {
+              case 0:
+                if (this.currentLayout) {
+                  _context6.next = 2;
+                  break;
+                }
+
+                throw new Error('There is no current layout selected, call start() first');
+
+              case 2:
+                if (!((_this$currentLayout4 = this.currentLayout) !== null && _this$currentLayout4 !== void 0 && _this$currentLayout4.memberVideoPanes)) {
+                  this.currentLayout.memberVideoPanes = [];
+                }
+
+                if (!(newPane.id in this.currentLayout.memberVideoPanes)) {
+                  _context6.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);
+                _context6.next = 8;
+                return this.receiveSlotManager.allocateSlot(_internalMediaCore.MediaConnection.MediaType.VideoMain);
+
+              case 8:
+                receiveSlot = _context6.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 _context6.abrupt("return", remoteMedia);
+
+              case 14:
+              case "end":
+                return _context6.stop();
+            }
+          }
+        }, _callee6, 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