@webex/plugin-meetings 3.0.0-beta.24 → 3.0.0-beta.241

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"));
@@ -69,6 +70,7 @@ 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 = {
   activeSpeakerVideoPaneGroups: [{
     id: 'mainGroupWith2BigPanes',
@@ -85,7 +87,9 @@ var TwoMainPlusSixSmallLayout = {
 
 // A strip of 8 small video panes (thumbnails) displayed at the top of a remote screenshare:
 var RemoteScreenShareWithSmallThumbnailsLayout = {
-  // screenShareVideo: {size: 'best'}, // todo: SPARK-393485: uncomment this once backend supports screen sharing
+  screenShareVideo: {
+    size: 'best'
+  },
   activeSpeakerVideoPaneGroups: [{
     id: 'thumbnails',
     numPanes: 8,
@@ -130,9 +134,8 @@ var Stage2x2With6ThumbnailsLayout = {
 var DefaultConfiguration = {
   audio: {
     numOfActiveSpeakerStreams: 3,
-    numOfScreenShareStreams: 0 // todo: SPARK-393485: change to 1 once backend supports screen sharing
+    numOfScreenShareStreams: 1
   },
-
   video: {
     preferLiveVideo: true,
     initialLayoutId: 'AllEqual',
@@ -434,15 +437,16 @@ var RemoteMediaManager = /*#__PURE__*/function (_EventsScope) {
               }
               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 = 8;
+              _context3.next = 9;
               return this.updateVideoReceiveSlots();
-            case 8:
+            case 9:
               this.updateVideoRemoteMediaObjects();
               this.updateScreenShareVideoRemoteMediaObject();
               this.emitVideoLayoutChangedEvent();
-            case 11:
+            case 12:
             case "end":
               return _context3.stop();
           }
@@ -464,6 +468,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
      */
@@ -617,70 +656,82 @@ 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 _callee6() {
-        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 _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)) {
                 _context6.next = 13;
                 break;
@@ -701,25 +752,125 @@ var RemoteMediaManager = /*#__PURE__*/function (_EventsScope) {
               _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: "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));
+    }
+
+    /** 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(', ')));
+    }
+
+    /** 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(', ')));
+    }
+
+    /** Logs all current receive slots */
+  }, {
+    key: "logAllReceiveSlots",
+    value: function logAllReceiveSlots() {
+      this.logMainVideoReceiveSlots();
+      this.logMainAudioReceiveSlots();
+      this.logSlidesVideoReceiveSlots();
+      this.logSlidesAudioReceiveSlots();
+    }
 
+    /**
+     * 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.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 19:
+            case 9:
             case "end":
-              return _context6.stop();
+              return _context7.stop();
           }
-        }, _callee6, this);
+        }, _callee7, this);
       }));
       function updateVideoReceiveSlots() {
         return _updateVideoReceiveSlots.apply(this, arguments);
@@ -733,7 +884,7 @@ 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,
@@ -747,19 +898,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"));
@@ -771,21 +922,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"));
@@ -909,14 +1060,14 @@ var RemoteMediaManager = /*#__PURE__*/function (_EventsScope) {
   }, {
     key: "addMemberVideoPane",
     value: function () {
-      var _addMemberVideoPane = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee7(newPane) {
+      var _addMemberVideoPane = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee8(newPane) {
         var _this$currentLayout5;
         var receiveSlot, remoteMedia;
-        return _regenerator.default.wrap(function _callee7$(_context7) {
-          while (1) switch (_context7.prev = _context7.next) {
+        return _regenerator.default.wrap(function _callee8$(_context8) {
+          while (1) switch (_context8.prev = _context8.next) {
             case 0:
               if (this.currentLayout) {
-                _context7.next = 2;
+                _context8.next = 2;
                 break;
               }
               throw new Error('There is no current layout selected, call start() first');
@@ -925,16 +1076,16 @@ var RemoteMediaManager = /*#__PURE__*/function (_EventsScope) {
                 this.currentLayout.memberVideoPanes = [];
               }
               if (!(newPane.id in this.currentLayout.memberVideoPanes)) {
-                _context7.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);
-              _context7.next = 8;
+              _context8.next = 8;
               return this.receiveSlotManager.allocateSlot(_internalMediaCore.MediaType.VideoMain);
             case 8:
-              receiveSlot = _context7.sent;
+              receiveSlot = _context8.sent;
               this.slots.video.receiverSelected.push(receiveSlot);
               remoteMedia = new _remoteMedia.RemoteMedia(receiveSlot, this.mediaRequestManagers.video, {
                 resolution: newPane.size
@@ -943,12 +1094,12 @@ var RemoteMediaManager = /*#__PURE__*/function (_EventsScope) {
                 remoteMedia.sendMediaRequest(newPane.csi, true);
               }
               this.media.video.memberPanes[newPane.id] = remoteMedia;
-              return _context7.abrupt("return", remoteMedia);
+              return _context8.abrupt("return", remoteMedia);
             case 14:
             case "end":
-              return _context7.stop();
+              return _context8.stop();
           }
-        }, _callee7, this);
+        }, _callee8, this);
       }));
       function addMemberVideoPane(_x2) {
         return _addMemberVideoPane.apply(this, arguments);