@webex/plugin-meetings 3.0.0-beta.17 → 3.0.0-beta.171

package/dist/multistream/remoteMediaManager.js

@@ -23,6 +23,7 @@ var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime
 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"));
@@ -35,9 +36,6 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !_R
 
 // An "all equal" grid, with size up to 3 x 3 = 9:
 var AllEqualLayout = {
-  screenShareVideo: {
-    size: null
-  },
   activeSpeakerVideoPaneGroups: [{
     id: 'main',
     numPanes: 9,
@@ -48,9 +46,6 @@ var AllEqualLayout = {
 
 // A layout with just a single remote active speaker video pane:
 var SingleLayout = {
-  screenShareVideo: {
-    size: null
-  },
   activeSpeakerVideoPaneGroups: [{
     id: 'main',
     numPanes: 1,
@@ -61,9 +56,6 @@ var SingleLayout = {
 
 // 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,
@@ -78,10 +70,8 @@ var OnePlusFiveLayout = {
 };
 
 // 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,
@@ -110,9 +100,6 @@ var RemoteScreenShareWithSmallThumbnailsLayout = {
 
 // 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,
@@ -146,7 +133,8 @@ var Stage2x2With6ThumbnailsLayout = {
  */
 var DefaultConfiguration = {
   audio: {
-    numOfActiveSpeakerStreams: 3
+    numOfActiveSpeakerStreams: 3,
+    numOfScreenShareStreams: 1
   },
   video: {
     preferLiveVideo: true,
@@ -158,10 +146,6 @@ var DefaultConfiguration = {
       Stage: Stage2x2With6ThumbnailsLayout,
       ScreenShareView: RemoteScreenShareWithSmallThumbnailsLayout
     }
-  },
-  screenShare: {
-    audio: true,
-    video: true
   }
 };
 exports.DefaultConfiguration = DefaultConfiguration;
@@ -169,7 +153,7 @@ var Event;
 exports.Event = Event;
 (function (Event) {
   Event["AudioCreated"] = "AudioCreated";
-  Event["ScreenShareAudioCreated"] = "ScreenShareCreated";
+  Event["ScreenShareAudioCreated"] = "ScreenShareAudioCreated";
   Event["VideoLayoutChanged"] = "VideoLayoutChanged";
 })(Event || (exports.Event = Event = {}));
 /**
@@ -213,13 +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: [],
@@ -292,11 +282,15 @@ var RemoteMediaManager = /*#__PURE__*/function (_EventsScope) {
               return this.createAudioMedia();
             case 5:
               _context.next = 7;
-              return this.preallocateVideoReceiveSlots();
+              return this.createScreenShareReceiveSlots();
             case 7:
-              _context.next = 9;
+              this.createScreenShareAudioMedia();
+              _context.next = 10;
+              return this.preallocateVideoReceiveSlots();
+            case 10:
+              _context.next = 12;
               return this.setLayout(this.config.video.initialLayoutId);
-            case 9:
+            case 12:
             case "end":
               return _context.stop();
           }
@@ -321,6 +315,8 @@ var RemoteMediaManager = /*#__PURE__*/function (_EventsScope) {
       this.invalidateCurrentRemoteMedia({
         audio: true,
         video: true,
+        screenShareAudio: true,
+        screenShareVideo: true,
         commit: true
       });
 
@@ -330,8 +326,17 @@ var RemoteMediaManager = /*#__PURE__*/function (_EventsScope) {
       });
       this.slots.audio.length = 0;
 
-      // todo: screenshare slots... (SPARK-377812)
+      // 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: {}
@@ -390,7 +395,7 @@ var RemoteMediaManager = /*#__PURE__*/function (_EventsScope) {
               }
               _context2.t0 = this.slots.video.unused;
               _context2.next = 5;
-              return this.receiveSlotManager.allocateSlot(_internalMediaCore.MediaConnection.MediaType.VideoMain);
+              return this.receiveSlotManager.allocateSlot(_internalMediaCore.MediaType.VideoMain);
             case 5:
               _context2.t1 = _context2.sent;
               _context2.t0.push.call(_context2.t0, _context2.t1);
@@ -438,8 +443,9 @@ var RemoteMediaManager = /*#__PURE__*/function (_EventsScope) {
               return this.updateVideoReceiveSlots();
             case 8:
               this.updateVideoRemoteMediaObjects();
+              this.updateScreenShareVideoRemoteMediaObject();
               this.emitVideoLayoutChangedEvent();
-            case 10:
+            case 11:
             case "end":
               return _context3.stop();
           }
@@ -461,6 +467,41 @@ var RemoteMediaManager = /*#__PURE__*/function (_EventsScope) {
       return this.currentLayoutId;
     }
 
+    /**
+     * 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
      */
@@ -479,7 +520,7 @@ var RemoteMediaManager = /*#__PURE__*/function (_EventsScope) {
                 break;
               }
               _context4.next = 4;
-              return this.receiveSlotManager.allocateSlot(_internalMediaCore.MediaConnection.MediaType.AudioMain);
+              return this.receiveSlotManager.allocateSlot(_internalMediaCore.MediaType.AudioMain);
             case 4:
               slot = _context4.sent;
               this.slots.audio.push(slot);
@@ -505,6 +546,71 @@ var RemoteMediaManager = /*#__PURE__*/function (_EventsScope) {
       }
       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
@@ -549,109 +655,185 @@ var RemoteMediaManager = /*#__PURE__*/function (_EventsScope) {
     }
 
     /**
-     * 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$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) {
+        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; // ensure we have enough total slots for current layout
+              totalNumSlots = this.slots.video.unused.length + this.slots.video.activeSpeaker.length + this.slots.video.receiverSelected.length;
               if (!(totalNumSlots < requiredNumSlots)) {
-                _context5.next = 13;
+                _context6.next = 13;
                 break;
               }
               numSlotsToCreate = requiredNumSlots - totalNumSlots;
             case 4:
               if (!(numSlotsToCreate > 0)) {
-                _context5.next = 13;
+                _context6.next = 13;
                 break;
               }
-              _context5.t0 = this.slots.video.unused;
-              _context5.next = 8;
-              return this.receiveSlotManager.allocateSlot(_internalMediaCore.MediaConnection.MediaType.VideoMain);
+              _context6.t0 = this.slots.video.unused;
+              _context6.next = 8;
+              return this.receiveSlotManager.allocateSlot(_internalMediaCore.MediaType.VideoMain);
             case 8:
-              _context5.t1 = _context5.sent;
-              _context5.t0.push.call(_context5.t0, _context5.t1);
+              _context6.t1 = _context6.sent;
+              _context6.t0.push.call(_context6.t0, _context6.t1);
               numSlotsToCreate -= 1;
-              _context5.next = 4;
+              _context6.next = 4;
               break;
             case 13:
-              // move all no longer needed receiver-selected slots to "unused"
-              this.trimReceiverSelectedSlots();
+            case "end":
+              return _context6.stop();
+          }
+        }, _callee6, this);
+      }));
+      function refillRequiredSlotsIfNeeded() {
+        return _refillRequiredSlotsIfNeeded.apply(this, arguments);
+      }
+      return refillRequiredSlotsIfNeeded;
+    }()
+    /**
+     * Move all active speaker slots to "unused"
+     */
+  }, {
+    key: "trimActiveSpeakerSlots",
+    value: function trimActiveSpeakerSlots() {
+      var _this$slots$video$unu4;
+      (_this$slots$video$unu4 = this.slots.video.unused).push.apply(_this$slots$video$unu4, (0, _toConsumableArray2.default)(this.slots.video.activeSpeaker));
+      this.slots.video.activeSpeaker.length = 0;
+    }
 
+    /**
+     * Logs the state of the receive slots
+     */
+  }, {
+    key: "logReceieveSlots",
+    value: function logReceieveSlots() {
+      var logMessage = '';
+      (0, _forEach2.default)(this.receiveSlotAllocations.activeSpeaker, function (group, groupName) {
+        logMessage += "group: ".concat(groupName, "\n").concat(group.slots.map(function (slot) {
+          return slot.logString;
+        }).join(' '));
+      });
+      logMessage += '\nreceiverSelected:\n';
+      (0, _forEach2.default)(this.receiveSlotAllocations.receiverSelected, function (slot, key) {
+        logMessage += " ".concat(key, ": ").concat(slot.logString, "\n");
+      });
+      _loggerProxy.default.logger.log("RemoteMediaManager#updateVideoReceiveSlots --> receive slots updated: unused=".concat(this.slots.video.unused.length, ", activeSpeaker=").concat(this.slots.video.activeSpeaker.length, ", receiverSelected=").concat(this.slots.video.receiverSelected.length, "\n").concat(logMessage));
+    }
+
+    /**
+     * Makes sure we have the right number of receive slots created for the current layout
+     * and allocates them to the right video panes / pane groups
+     *
+     * @returns {Promise}
+     */
+  }, {
+    key: "updateVideoReceiveSlots",
+    value: function () {
+      var _updateVideoReceiveSlots = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee7() {
+        return _regenerator.default.wrap(function _callee7$(_context7) {
+          while (1) switch (_context7.prev = _context7.next) {
+            case 0:
               // move all active speaker slots to "unused"
-              (_this$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;
+              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
-              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));
+              // reset allocations
+              this.receiveSlotAllocations = {
+                activeSpeaker: {},
+                receiverSelected: {}
+              };
+              // allocate active speaker
+              this.allocateSlotsToActiveSpeakerPaneGroups();
+              // allocate receiver selected
+              this.allocateSlotsToReceiverSelectedVideoPaneGroups();
+              this.logReceieveSlots();
 
               // If this is the initial layout, there may be some "unused" slots left because of the preallocation
               // done in this.preallocateVideoReceiveSlots(), so release them now
               this.releaseUnusedVideoSlots();
-            case 19:
+            case 9:
             case "end":
-              return _context5.stop();
+              return _context7.stop();
           }
-        }, _callee5, this);
+        }, _callee7, this);
       }));
       function updateVideoReceiveSlots() {
         return _updateVideoReceiveSlots.apply(this, arguments);
@@ -665,11 +847,13 @@ var RemoteMediaManager = /*#__PURE__*/function (_EventsScope) {
   }, {
     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
       });
 
@@ -677,19 +861,19 @@ var RemoteMediaManager = /*#__PURE__*/function (_EventsScope) {
       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) {
+        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"));
@@ -701,21 +885,21 @@ var RemoteMediaManager = /*#__PURE__*/function (_EventsScope) {
 
       // 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) {
+        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"));
@@ -724,11 +908,37 @@ var RemoteMediaManager = /*#__PURE__*/function (_EventsScope) {
       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();
     }
 
+    /**
+     * 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
      */
@@ -737,6 +947,8 @@ var RemoteMediaManager = /*#__PURE__*/function (_EventsScope) {
     value: function invalidateCurrentRemoteMedia(options) {
       var audio = options.audio,
         video = options.video,
+        screenShareAudio = options.screenShareAudio,
+        screenShareVideo = options.screenShareVideo,
         commit = options.commit;
       if (audio && this.media.audio) {
         this.media.audio.stop(commit);
@@ -752,14 +964,21 @@ var RemoteMediaManager = /*#__PURE__*/function (_EventsScope) {
           this.mediaRequestManagers.video.commit();
         }
       }
+      if (screenShareAudio && this.media.screenShare.audio) {
+        this.media.screenShare.audio.stop(commit);
+      }
+      if (screenShareVideo && this.media.screenShare.video) {
+        this.media.screenShare.video.stop(commit);
+      }
     }
 
     /** emits Event.VideoLayoutChanged */
   }, {
     key: "emitVideoLayoutChangedEvent",
     value: function emitVideoLayoutChangedEvent() {
+      var _this$media$screenSha;
       // todo: at this point the receive slots might still be showing a participant from previous layout, we should
-      // wait for our media requests to be 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
 
@@ -770,7 +989,7 @@ 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]
       });
     }
 
@@ -804,32 +1023,32 @@ var RemoteMediaManager = /*#__PURE__*/function (_EventsScope) {
   }, {
     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) {
+        return _regenerator.default.wrap(function _callee8$(_context8) {
+          while (1) switch (_context8.prev = _context8.next) {
             case 0:
               if (this.currentLayout) {
-                _context6.next = 2;
+                _context8.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)) {
+              if (!((_this$currentLayout5 = this.currentLayout) !== null && _this$currentLayout5 !== void 0 && _this$currentLayout5.memberVideoPanes)) {
                 this.currentLayout.memberVideoPanes = [];
               }
               if (!(newPane.id in this.currentLayout.memberVideoPanes)) {
-                _context6.next = 5;
+                _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);
-              _context6.next = 8;
-              return this.receiveSlotManager.allocateSlot(_internalMediaCore.MediaConnection.MediaType.VideoMain);
+              _context8.next = 8;
+              return this.receiveSlotManager.allocateSlot(_internalMediaCore.MediaType.VideoMain);
             case 8:
-              receiveSlot = _context6.sent;
+              receiveSlot = _context8.sent;
               this.slots.video.receiverSelected.push(receiveSlot);
               remoteMedia = new _remoteMedia.RemoteMedia(receiveSlot, this.mediaRequestManagers.video, {
                 resolution: newPane.size
@@ -838,12 +1057,12 @@ var RemoteMediaManager = /*#__PURE__*/function (_EventsScope) {
                 remoteMedia.sendMediaRequest(newPane.csi, true);
               }
               this.media.video.memberPanes[newPane.id] = remoteMedia;
-              return _context6.abrupt("return", remoteMedia);
+              return _context8.abrupt("return", remoteMedia);
             case 14:
             case "end":
-              return _context6.stop();
+              return _context8.stop();
           }
-        }, _callee6, this);
+        }, _callee8, this);
       }));
       function addMemberVideoPane(_x2) {
         return _addMemberVideoPane.apply(this, arguments);