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

package/dist/multistream/remoteMediaManager.js

@@ -35,9 +35,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 +45,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 +55,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,
@@ -79,9 +70,6 @@ var OnePlusFiveLayout = {
 
 // A layout with 2 big panes for 2 main active speakers and a strip of 6 small panes for other active speakers:
 var TwoMainPlusSixSmallLayout = {
-  screenShareVideo: {
-    size: null
-  },
   activeSpeakerVideoPaneGroups: [{
     id: 'mainGroupWith2BigPanes',
     numPanes: 2,
@@ -97,9 +85,7 @@ var TwoMainPlusSixSmallLayout = {
 
 // A strip of 8 small video panes (thumbnails) displayed at the top of a remote screenshare:
 var RemoteScreenShareWithSmallThumbnailsLayout = {
-  screenShareVideo: {
-    size: 'best'
-  },
+  // screenShareVideo: {size: 'best'}, // todo: SPARK-393485: uncomment this once backend supports screen sharing
   activeSpeakerVideoPaneGroups: [{
     id: 'thumbnails',
     numPanes: 8,
@@ -110,9 +96,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,8 +129,10 @@ var Stage2x2With6ThumbnailsLayout = {
  */
 var DefaultConfiguration = {
   audio: {
-    numOfActiveSpeakerStreams: 3
+    numOfActiveSpeakerStreams: 3,
+    numOfScreenShareStreams: 0 // todo: SPARK-393485: change to 1 once backend supports screen sharing
   },
+
   video: {
     preferLiveVideo: true,
     initialLayoutId: 'AllEqual',
@@ -158,10 +143,6 @@ var DefaultConfiguration = {
       Stage: Stage2x2With6ThumbnailsLayout,
       ScreenShareView: RemoteScreenShareWithSmallThumbnailsLayout
     }
-  },
-  screenShare: {
-    audio: true,
-    video: true
   }
 };
 exports.DefaultConfiguration = DefaultConfiguration;
@@ -169,7 +150,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 +194,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 +279,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 +312,8 @@ var RemoteMediaManager = /*#__PURE__*/function (_EventsScope) {
       this.invalidateCurrentRemoteMedia({
         audio: true,
         video: true,
+        screenShareAudio: true,
+        screenShareVideo: true,
         commit: true
       });
 
@@ -330,8 +323,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 +392,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 +440,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();
           }
@@ -479,7 +482,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 +508,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
@@ -605,32 +673,32 @@ var RemoteMediaManager = /*#__PURE__*/function (_EventsScope) {
   }, {
     key: "updateVideoReceiveSlots",
     value: function () {
-      var _updateVideoReceiveSlots = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee5() {
+      var _updateVideoReceiveSlots = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee6() {
         var _this$slots$video$unu4;
         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
               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"
@@ -649,9 +717,9 @@ var RemoteMediaManager = /*#__PURE__*/function (_EventsScope) {
               this.releaseUnusedVideoSlots();
             case 19:
             case "end":
-              return _context5.stop();
+              return _context6.stop();
           }
-        }, _callee5, this);
+        }, _callee6, this);
       }));
       function updateVideoReceiveSlots() {
         return _updateVideoReceiveSlots.apply(this, arguments);
@@ -670,6 +738,8 @@ var RemoteMediaManager = /*#__PURE__*/function (_EventsScope) {
       this.invalidateCurrentRemoteMedia({
         audio: false,
         video: true,
+        screenShareAudio: false,
+        screenShareVideo: false,
         commit: false
       });
 
@@ -724,11 +794,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 +833,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 +850,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 +875,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 +909,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 _callee7(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 _callee7$(_context7) {
+          while (1) switch (_context7.prev = _context7.next) {
             case 0:
               if (this.currentLayout) {
-                _context6.next = 2;
+                _context7.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;
+                _context7.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);
+              _context7.next = 8;
+              return this.receiveSlotManager.allocateSlot(_internalMediaCore.MediaType.VideoMain);
             case 8:
-              receiveSlot = _context6.sent;
+              receiveSlot = _context7.sent;
               this.slots.video.receiverSelected.push(receiveSlot);
               remoteMedia = new _remoteMedia.RemoteMedia(receiveSlot, this.mediaRequestManagers.video, {
                 resolution: newPane.size
@@ -838,12 +943,12 @@ var RemoteMediaManager = /*#__PURE__*/function (_EventsScope) {
                 remoteMedia.sendMediaRequest(newPane.csi, true);
               }
               this.media.video.memberPanes[newPane.id] = remoteMedia;
-              return _context6.abrupt("return", remoteMedia);
+              return _context7.abrupt("return", remoteMedia);
             case 14:
             case "end":
-              return _context6.stop();
+              return _context7.stop();
           }
-        }, _callee6, this);
+        }, _callee7, this);
       }));
       function addMemberVideoPane(_x2) {
         return _addMemberVideoPane.apply(this, arguments);