@webex/plugin-meetings 3.0.0-beta.3 → 3.0.0-beta.300

package/dist/multistream/remoteMediaManager.js

@@ -1,95 +1,61 @@
 "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 = {
-  screenShareVideo: {
-    size: null
-  },
   activeSpeakerVideoPaneGroups: [{
     id: 'main',
     numPanes: 9,
     size: 'best',
     priority: 255
   }]
-}; // A layout with just a single remote active speaker video pane:
+};
 
+// 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:
+};
 
+// 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,
@@ -101,12 +67,11 @@ var OnePlusFiveLayout = {
     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:
+};
 
+// A layout with 2 big panes for 2 main active speakers and a strip of 6 small panes for other active speakers:
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
 var TwoMainPlusSixSmallLayout = {
-  screenShareVideo: {
-    size: null
-  },
   activeSpeakerVideoPaneGroups: [{
     id: 'mainGroupWith2BigPanes',
     numPanes: 2,
@@ -118,8 +83,9 @@ var TwoMainPlusSixSmallLayout = {
     size: 'small',
     priority: 254
   }]
-}; // A strip of 8 small video panes (thumbnails) displayed at the top of a remote screenshare:
+};
 
+// A strip of 8 small video panes (thumbnails) displayed at the top of a remote screenshare:
 var RemoteScreenShareWithSmallThumbnailsLayout = {
   screenShareVideo: {
     size: 'best'
@@ -130,12 +96,10 @@ var RemoteScreenShareWithSmallThumbnailsLayout = {
     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:
+};
 
+// 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,
@@ -160,16 +124,17 @@ var Stage2x2With6ThumbnailsLayout = {
     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
+    numOfActiveSpeakerStreams: 3,
+    numOfScreenShareStreams: 1
   },
   video: {
     preferLiveVideo: true,
@@ -181,22 +146,16 @@ var DefaultConfiguration = {
       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["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.
@@ -207,9 +166,7 @@ exports.Event = Event;
  */
 var RemoteMediaManager = /*#__PURE__*/function (_EventsScope) {
   (0, _inherits2.default)(RemoteMediaManager, _EventsScope);
-
   var _super = _createSuper(RemoteMediaManager);
-
   /**
    * Constructor
    *
@@ -219,7 +176,6 @@ var RemoteMediaManager = /*#__PURE__*/function (_EventsScope) {
    */
   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);
@@ -241,15 +197,19 @@ var RemoteMediaManager = /*#__PURE__*/function (_EventsScope) {
       video: {
         activeSpeakerGroups: {},
         memberPanes: {}
+      },
+      screenShare: {
+        audio: undefined,
+        video: undefined
       }
     };
-
     _this.checkConfigValidity();
-
     _this.slots = {
       audio: [],
-      screenShareAudio: undefined,
-      screenShareVideo: undefined,
+      screenShare: {
+        audio: [],
+        video: undefined
+      },
       video: {
         unused: [],
         activeSpeaker: [],
@@ -260,27 +220,23 @@ var RemoteMediaManager = /*#__PURE__*/function (_EventsScope) {
       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
-
+      }
 
+      // 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 = {};
@@ -288,186 +244,172 @@ var RemoteMediaManager = /*#__PURE__*/function (_EventsScope) {
           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();
-            }
+          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;
-
+        _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
+      });
 
+      // 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.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.MediaConnection.MediaType.VideoMain);
-
-              case 5:
-                _context2.t1 = _context2.sent;
-
-                _context2.t0.push.call(_context2.t0, _context2.t1);
-
-                _context2.next = 1;
+          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;
-
-              case 9:
-              case "end":
-                return _context2.stop();
-            }
+              }
+              _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;
     }()
     /**
@@ -476,52 +418,43 @@ var RemoteMediaManager = /*#__PURE__*/function (_EventsScope) {
      * @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();
-            }
+          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:
+              _loggerProxy.default.logger.log("RemoteMediaManager#setLayout --> new layout selected: ".concat(layoutId));
+              this.currentLayoutId = layoutId;
+              this.currentLayout = (0, _cloneDeep2.default)(this.config.video.layouts[this.currentLayoutId]);
+              _context3.next = 9;
+              return this.updateVideoReceiveSlots();
+            case 9:
+              this.updateVideoRemoteMediaObjects();
+              this.updateScreenShareVideoRemoteMediaObject();
+              this.emitVideoLayoutChangedEvent();
+            case 12:
+            case "end":
+              return _context3.stop();
           }
         }, _callee3, this);
       }));
-
       function setLayout(_x) {
         return _setLayout.apply(this, arguments);
       }
-
       return setLayout;
     }()
     /**
@@ -529,344 +462,534 @@ var RemoteMediaManager = /*#__PURE__*/function (_EventsScope) {
      *
      * @returns {LayoutId}
      */
-
   }, {
     key: "getLayoutId",
     value: function getLayoutId() {
       return this.currentLayoutId;
     }
+
     /**
-     * Creates the audio slots
+     * sets the preferLiveVideo
      */
+  }, {
+    key: "setPreferLiveVideo",
+    value: function setPreferLiveVideo(preferLiveVideo) {
+      _loggerProxy.default.logger.log("RemoteMediaManager#setPreferLiveVideo --> setPreferLiveVideo is called to set preferLiveVideo to ".concat(preferLiveVideo));
+      this.config.video.preferLiveVideo = preferLiveVideo;
+      (0, _values.default)(this.media.video.activeSpeakerGroups).forEach(function (activeSpeakerGroup) {
+        activeSpeakerGroup.setPreferLiveVideo(preferLiveVideo, false);
+      });
+      this.mediaRequestManagers.video.commit();
+    }
 
+    /**
+     * Sets CSIs for multiple RemoteMedia instances belonging to RemoteMediaGroup.
+     * For each entry in the remoteMediaCsis array:
+     * - if csi is specified, the RemoteMedia instance is pinned to that CSI
+     * - if csi is undefined, the RemoteMedia instance is unpinned
+     */
+  }, {
+    key: "setActiveSpeakerCsis",
+    value: function setActiveSpeakerCsis(remoteMediaCsis) {
+      (0, _values.default)(this.media.video.activeSpeakerGroups).forEach(function (remoteMediaGroup) {
+        var groupRemoteMediaCsis = remoteMediaCsis.filter(function (_ref) {
+          var remoteMedia = _ref.remoteMedia;
+          return remoteMediaGroup.includes(remoteMedia);
+        });
+        if (groupRemoteMediaCsis.length > 0) {
+          remoteMediaGroup.setActiveSpeakerCsis(groupRemoteMediaCsis, false);
+        }
+      });
+      this.mediaRequestManagers.video.commit();
+    }
+
+    /**
+     * 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;
+          while (1) switch (_context4.prev = _context4.next) {
+            case 0:
+              i = 0;
+            case 1:
+              if (!(i < this.config.audio.numOfActiveSpeakerStreams)) {
+                _context4.next = 9;
                 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();
-            }
+              }
+              _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 = {};
 
-      var requiredCsis = {}; // fill requiredCsis with all the CSIs that the given layout requires
-
+      // 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
-
+      };
 
+      // 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
+     * 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: "allocateSlotsToVideoPaneGroups",
-    value: function allocateSlotsToVideoPaneGroups() {
+    key: "allocateSlotsToActiveSpeakerPaneGroups",
+    value: function allocateSlotsToActiveSpeakerPaneGroups() {
       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) {
+        _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
-          var freeSlot = _this5.slots.video.unused.pop();
-
+          // 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 = _this5.slots.video.receiverSelected.find(function (slot) {
+        var existingSlot = _this6.slots.video.receiverSelected.find(function (slot) {
           return slot.csi === memberPane.csi;
         });
-
-        var isExistingSlotAlreadyAllocated = (0, _values.default)(_this5.receiveSlotAllocations.receiverSelected).includes(existingSlot);
-
+        var isExistingSlotAlreadyAllocated = (0, _values.default)(_this6.receiveSlotAllocations.receiverSelected).includes(existingSlot);
         if (memberPane.csi !== undefined && existingSlot && !isExistingSlotAlreadyAllocated) {
           // found it, so use it
-          _this5.receiveSlotAllocations.receiverSelected[memberPane.id] = existingSlot;
+          _this6.receiveSlotAllocations.receiverSelected[memberPane.id] = existingSlot;
         } else {
           // allocate a slot from the "unused" list
-          var freeSlot = _this5.slots.video.unused.pop();
-
+          var freeSlot = _this6.slots.video.unused.pop();
           if (freeSlot) {
-            _this5.slots.video.receiverSelected.push(freeSlot);
-
-            _this5.receiveSlotAllocations.receiverSelected[memberPane.id] = freeSlot;
+            _this6.slots.video.receiverSelected.push(freeSlot);
+            _this6.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}
+     * Ensures that we have enough slots for the current layout.
      */
-
   }, {
-    key: "updateVideoReceiveSlots",
+    key: "refillRequiredSlotsIfNeeded",
     value: function () {
-      var _updateVideoReceiveSlots = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee5() {
-        var _this$slots$video$unu4;
-
+      var _refillRequiredSlotsIfNeeded = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee6() {
         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;
+        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;
+    }
 
-              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
+    /**
+     * Logs the state of the receive slots
+     */
+  }, {
+    key: "logMainVideoReceiveSlots",
+    value: function logMainVideoReceiveSlots() {
+      var logMessage = '';
+      (0, _forEach2.default)(this.receiveSlotAllocations.activeSpeaker, function (group, groupName) {
+        logMessage += "\ngroup: ".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#logMainVideoReceiveSlots --> MAIN VIDEO receive slots: unused=".concat(this.slots.video.unused.length, ", activeSpeaker=").concat(this.slots.video.activeSpeaker.length, ", receiverSelected=").concat(this.slots.video.receiverSelected.length).concat(logMessage));
+    }
 
-                this.allocateSlotsToVideoPaneGroups();
+    /** logs main audio slots */
+  }, {
+    key: "logMainAudioReceiveSlots",
+    value: function logMainAudioReceiveSlots() {
+      _loggerProxy.default.logger.log("RemoteMediaManager#logMainAudioReceiveSlots --> MAIN AUDIO receive slots: ".concat(this.slots.audio.map(function (slot) {
+        return slot.logString;
+      }).join(', ')));
+    }
 
-                _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
+    /** logs slides video slots */
+  }, {
+    key: "logSlidesVideoReceiveSlots",
+    value: function logSlidesVideoReceiveSlots() {
+      var _this$slots$screenSha;
+      _loggerProxy.default.logger.log("RemoteMediaManager#logSlidesVideoReceiveSlots --> SLIDES VIDEO receive slot: ".concat((_this$slots$screenSha = this.slots.screenShare.video) === null || _this$slots$screenSha === void 0 ? void 0 : _this$slots$screenSha.logString));
+    }
 
+    /** logs slides audio slots */
+  }, {
+    key: "logSlidesAudioReceiveSlots",
+    value: function logSlidesAudioReceiveSlots() {
+      _loggerProxy.default.logger.log("RemoteMediaManager#logSlidesAudioReceiveSlots --> SLIDES AUDIO receive slots: ".concat(this.slots.screenShare.audio.map(function (slot) {
+        return slot.logString;
+      }).join(', ')));
+    }
 
-                this.releaseUnusedVideoSlots();
+    /** Logs all current receive slots */
+  }, {
+    key: "logAllReceiveSlots",
+    value: function logAllReceiveSlots() {
+      this.logMainVideoReceiveSlots();
+      this.logMainAudioReceiveSlots();
+      this.logSlidesVideoReceiveSlots();
+      this.logSlidesAudioReceiveSlots();
+    }
 
-              case 19:
-              case "end":
-                return _context5.stop();
-            }
+    /**
+     * 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.logMainVideoReceiveSlots();
+
+              // 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();
           }
-        }, _callee5, this);
+        }, _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 _this6 = this;
-
+      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
+      });
 
+      // create new remoteMediaGroup objects
       this.media.video.activeSpeakerGroups = {};
       this.media.video.memberPanes = {};
-
       var _loop = function _loop() {
-        var _this6$currentLayout, _this6$currentLayout$;
-
+        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 = (_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) {
+          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(_this6.mediaRequestManagers.video, group.slots, paneGroupInCurrentLayout.priority, false, {
-            preferLiveVideo: _this6.config.video.preferLiveVideo,
+          var mediaGroup = new _remoteMediaGroup.RemoteMediaGroup(_this7.mediaRequestManagers.video, group.slots, paneGroupInCurrentLayout.priority, false, {
+            preferLiveVideo: _this7.config.video.preferLiveVideo,
             resolution: paneGroupInCurrentLayout.size
           });
-          _this6.media.video.activeSpeakerGroups[groupId] = mediaGroup;
+          _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
-
+      }
 
+      // create new remoteMedia objects
       var _loop2 = function _loop2() {
-        var _this6$currentLayout2, _this6$currentLayout3;
-
+        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 = (_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) {
+          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, _this6.mediaRequestManagers.video, {
+          var remoteMedia = new _remoteMedia.RemoteMedia(slot, _this7.mediaRequestManagers.video, {
             resolution: paneInCurrentLayout.size
           });
-
           if (paneInCurrentLayout.csi) {
             remoteMedia.sendMediaRequest(paneInCurrentLayout.csi, false);
           }
-
-          _this6.media.video.memberPanes[paneId] = remoteMedia;
+          _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();
-      } // todo: screenshare (SPARK-377812)
-
-
+      }
       this.mediaRequestManagers.video.commit();
     }
+
     /**
-     * Invalidates all remote media objects belonging to currently selected layout
+     * 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,
-          commit = options.commit;
-
+        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);
@@ -874,21 +997,28 @@ var RemoteMediaManager = /*#__PURE__*/function (_EventsScope) {
         (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 */
 
+    /** 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 fullfilled, but there is no API for that right now (we could wait for source updates
+      // 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'
@@ -896,30 +1026,29 @@ var RemoteMediaManager = /*#__PURE__*/function (_EventsScope) {
         layoutId: this.currentLayoutId,
         activeSpeakerVideoPanes: this.media.video.activeSpeakerGroups,
         memberVideoPanes: this.media.video.memberPanes,
-        screenShareVideo: undefined // todo: screen share (SPARK-377812)
-
+        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.
      *
@@ -928,68 +1057,53 @@ var RemoteMediaManager = /*#__PURE__*/function (_EventsScope) {
      * @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 _addMemberVideoPane = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee8(newPane) {
+        var _this$currentLayout5;
         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();
-            }
+        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();
           }
-        }, _callee6, this);
+        }, _callee8, this);
       }));
-
       function addMemberVideoPane(_x2) {
         return _addMemberVideoPane.apply(this, arguments);
       }
-
       return addMemberVideoPane;
     }()
     /**
@@ -1000,49 +1114,40 @@ var RemoteMediaManager = /*#__PURE__*/function (_EventsScope) {
      * @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
@@ -1051,39 +1156,35 @@ var RemoteMediaManager = /*#__PURE__*/function (_EventsScope) {
      * @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.
@@ -1091,23 +1192,19 @@ var RemoteMediaManager = /*#__PURE__*/function (_EventsScope) {
      * @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