@webex/plugin-meetings 3.0.0-beta.147 → 3.0.0-beta.149

package/src/meeting/index.ts

@@ -2200,6 +2200,29 @@ export default class Meeting extends StatelessWebexPlugin {
     });
   }
 
+  /**
+   * Trigger annotation info update event
+   @returns {undefined}
+   @param {object} contentShare
+   @param {object} previousContentShare
+   */
+  private triggerAnnotationInfoEvent(contentShare, previousContentShare) {
+    if (
+      contentShare?.annotation &&
+      !isEqual(contentShare?.annotation, previousContentShare?.annotation)
+    ) {
+      Trigger.trigger(
+        this,
+        {
+          file: 'meeting/index',
+          function: 'triggerAnnotationInfoEvent',
+        },
+        EVENT_TRIGGERS.MEETING_UPDATE_ANNOTATION_INFO,
+        contentShare.annotation
+      );
+    }
+  }
+
   /**
    * Set up the locus info media shares listener
    * update content and whiteboard sharing id value for members, and updates the member
@@ -2215,17 +2238,7 @@ export default class Meeting extends StatelessWebexPlugin {
       const previousContentShare = payload.previous?.content;
       const previousWhiteboardShare = payload.previous?.whiteboard;
 
-      if (!isEqual(contentShare?.annotation, previousContentShare?.annotation)) {
-        Trigger.trigger(
-          this,
-          {
-            file: 'meetings/index',
-            function: 'remoteShare',
-          },
-          EVENT_TRIGGERS.MEETING_UPDATE_ANNOTATION_INFO,
-          contentShare.annotation
-        );
-      }
+      this.triggerAnnotationInfoEvent(contentShare, previousContentShare);
 
       if (
         contentShare.beneficiaryId === previousContentShare?.beneficiaryId &&

package/src/multistream/remoteMediaGroup.ts

@@ -1,6 +1,7 @@
 /* eslint-disable valid-jsdoc */
 /* eslint-disable require-jsdoc */
 /* eslint-disable import/prefer-default-export */
+import {forEach} from 'lodash';
 import LoggerProxy from '../common/logs/logger-proxy';
 
 import {getMaxFs, RemoteMedia, RemoteVideoResolution} from './remoteMedia';
@@ -66,6 +67,53 @@ export class RemoteMediaGroup {
     return [...this.unpinnedRemoteMedia, ...this.pinnedRemoteMedia];
   }
 
+  /**
+   * Sets CSIs for multiple RemoteMedia instances belonging to this 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
+   * @internal
+   */
+  public setActiveSpeakerCsis(
+    remoteMediaCsis: {remoteMedia: RemoteMedia; csi?: number}[],
+    commit = true
+  ): void {
+    forEach(remoteMediaCsis, ({csi, remoteMedia}) => {
+      if (csi) {
+        if (!(this.pinnedRemoteMedia.indexOf(remoteMedia) >= 0)) {
+          const unpinId = this.unpinnedRemoteMedia.indexOf(remoteMedia);
+          if (unpinId >= 0) {
+            this.unpinnedRemoteMedia.splice(unpinId, 1);
+            this.pinnedRemoteMedia.push(remoteMedia);
+          } else {
+            throw new Error(
+              `failed to pin a remote media object ${remoteMedia.id}, because it is not found in this remote media group`
+            );
+          }
+        }
+        remoteMedia.sendMediaRequest(csi, false);
+      } else {
+        if (!(this.unpinnedRemoteMedia.indexOf(remoteMedia) >= 0)) {
+          const pinId = this.pinnedRemoteMedia.indexOf(remoteMedia);
+          if (pinId >= 0) {
+            this.pinnedRemoteMedia.splice(pinId, 1);
+            this.unpinnedRemoteMedia.push(remoteMedia);
+          } else {
+            throw new Error(
+              `failed to unpin a remote media object ${remoteMedia.id}, because it is not found in this remote media group`
+            );
+          }
+        }
+        remoteMedia.cancelMediaRequest(false);
+      }
+    });
+    this.cancelActiveSpeakerMediaRequest(false);
+    this.sendActiveSpeakerMediaRequest(false);
+    if (commit) {
+      this.mediaRequestManager.commit();
+    }
+  }
+
   /**
    * Pins a specific remote media instance to a specfic CSI, so the media will
    * no longer come from active speaker, but from that CSI.
@@ -151,6 +199,10 @@ export class RemoteMediaGroup {
     throw new Error(`remote media object ${remoteMedia.id} not found in the group`);
   }
 
+  /**
+   * setPreferLiveVideo - sets preferLiveVideo to true/false
+   * @internal
+   */
   public setPreferLiveVideo(preferLiveVideo: boolean, commit: boolean) {
     if (this.options.preferLiveVideo !== preferLiveVideo) {
       this.options.preferLiveVideo = preferLiveVideo;

package/src/multistream/remoteMediaManager.ts

@@ -505,6 +505,24 @@ export class RemoteMediaManager extends EventsScope {
     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
+   */
+  public setActiveSpeakerCsis(remoteMediaCsis: {remoteMedia: RemoteMedia; csi?: number}[]) {
+    Object.values(this.media.video.activeSpeakerGroups).forEach((remoteMediaGroup) => {
+      const groupRemoteMediaCsis = remoteMediaCsis.filter(({remoteMedia}) =>
+        remoteMediaGroup.includes(remoteMedia)
+      );
+      if (groupRemoteMediaCsis.length > 0) {
+        remoteMediaGroup.setActiveSpeakerCsis(groupRemoteMediaCsis, false);
+      }
+    });
+    this.mediaRequestManagers.video.commit();
+  }
+
   /**
    * Creates the audio slots
    */

package/test/unit/spec/annotation/index.ts

@@ -189,7 +189,7 @@ describe('live-annotation', () => {
     });
 
 
-    describe('encrypt/decrypt Content ', () => {
+    describe('encrypt/decrypt Content', () => {
       beforeEach(async () => {
         annotationService.webex.internal.encryption.encryptText = sinon.stub().returns(Promise.resolve('RETURN_VALUE'));
         annotationService.webex.internal.encryption.decryptText = sinon.stub().returns(Promise.resolve('RETURN_VALUE'));
@@ -201,7 +201,7 @@ describe('live-annotation', () => {
         assert.equal(result, 'RETURN_VALUE')
       });
 
-      it('decryptContent ', async() => {
+      it('decryptContent', async() => {
         const result =  await annotationService.decryptContent("decryptionKeyUrl", "content");
         assert.calledOnceWithExactly(webex.internal.encryption.decryptText, "decryptionKeyUrl", "content");
         assert.equal(result, 'RETURN_VALUE')
@@ -232,7 +232,7 @@ describe('live-annotation', () => {
       });
 
 
-      it('works on  publish Stroke Data', async () => {
+      it('works on publish Stroke Data', async () => {
         const strokeData = {
           content: {
             "contentsBuffer": [{
@@ -343,7 +343,7 @@ describe('live-annotation', () => {
         });
       });
 
-      describe('change annotation options', () => {
+      describe('change annotation info by presenter', () => {
         it('makes change annotation options as expected', async() => {
           const options =  { annotationInfo:{
               version: '1',

package/test/unit/spec/meeting/index.js

@@ -5489,6 +5489,50 @@ describe('plugin-meetings', () => {
         });
       });
       describe('share scenarios', () => {
+
+        describe('triggerAnnotationInfoEvent', () => {
+          it('check triggerAnnotationInfoEvent event', () => {
+
+            TriggerProxy.trigger.reset();
+            const annotationInfo = {version: '1', policy: 'Approval'};
+            meeting.triggerAnnotationInfoEvent({annotation:annotationInfo},{});
+
+            assert.calledWith(
+              TriggerProxy.trigger,
+              meeting,
+              {
+                file: 'meeting/index',
+                function: 'triggerAnnotationInfoEvent',
+              },
+              'meeting:updateAnnotationInfo',
+              annotationInfo
+            );
+
+            TriggerProxy.trigger.reset();
+            meeting.triggerAnnotationInfoEvent({annotation:annotationInfo},{annotation:annotationInfo});
+            assert.notCalled(TriggerProxy.trigger);
+
+            TriggerProxy.trigger.reset();
+            const annotationInfoUpdated = {version: '1', policy: 'AnnotationNotAllowed'};
+            meeting.triggerAnnotationInfoEvent({annotation:annotationInfoUpdated},{annotation:annotationInfo});
+            assert.calledWith(
+              TriggerProxy.trigger,
+              meeting,
+              {
+                file: 'meeting/index',
+                function: 'triggerAnnotationInfoEvent',
+              },
+              'meeting:updateAnnotationInfo',
+              annotationInfoUpdated
+            );
+
+            TriggerProxy.trigger.reset();
+            meeting.triggerAnnotationInfoEvent(null,{annotation:annotationInfoUpdated});
+            assert.notCalled(TriggerProxy.trigger);
+
+          });
+        });
+
         describe('setUpLocusMediaSharesListener', () => {
           beforeEach(() => {
             meeting.selfId = '9528d952-e4de-46cf-8157-fd4823b98377';
@@ -6179,29 +6223,6 @@ describe('plugin-meetings', () => {
               payloadTestHelper([data1, data2, data3]);
             });
           });
-
-          describe('annotation policy', () => {
-
-            it('Scenario #1: blank annotation', () => {
-              const data1 = generateData(blankPayload, true, true, USER_IDS.ME);
-              const data2 = generateData(data1.payload, false, true, USER_IDS.ME);
-              const data3 = generateData(data2.payload, true, true, USER_IDS.ME);
-              const data4 = generateData(data3.payload, false, true, USER_IDS.ME);
-
-              payloadTestHelper([data1, data2, data3, data4]);
-            });
-
-            it('Scenario #2: annotation', () => {
-              const annotationInfo = {version: '1', policy: 'Approval'};
-              const data1 = generateData(blankPayload, true, true, USER_IDS.ME, annotationInfo);
-              const data2 = generateData(data1.payload, false, true, USER_IDS.ME);
-              const data3 = generateData(data2.payload, true, true, USER_IDS.ME);
-              const data4 = generateData(data3.payload, false, true, USER_IDS.ME);
-
-              payloadTestHelper([data1, data2, data3, data4]);
-            });
-          });
-
           describe('Desktop A --> Desktop B', () => {
             it('Scenario #1: you share desktop A and then share desktop B', () => {
               const data1 = generateData(blankPayload, true, true, USER_IDS.ME);

package/test/unit/spec/multistream/remoteMediaGroup.ts

@@ -144,6 +144,225 @@ describe('RemoteMediaGroup', () => {
 
   });
 
+  describe('setActiveSpeakerCsis', () => {
+    it('checks when there is a csi and remote media is not in pinned array', () => {
+      const PINNED_INDEX = 2;
+      const CSI = 11111;
+
+      const group = new RemoteMediaGroup(fakeMediaRequestManager, fakeReceiveSlots, 255, true, {
+        resolution: 'medium',
+        preferLiveVideo: true,
+      });
+
+      // initially nothing should be pinned
+      assert.strictEqual(group.getRemoteMedia().length, NUM_SLOTS); // by default should return 'all'
+      assert.strictEqual(group.getRemoteMedia('all').length, NUM_SLOTS);
+      assert.strictEqual(group.getRemoteMedia('unpinned').length, NUM_SLOTS);
+      assert.strictEqual(group.getRemoteMedia('pinned').length, 0);
+
+      const remoteMedia = group.getRemoteMedia('all')[PINNED_INDEX];
+
+      resetHistory();
+
+      group.setActiveSpeakerCsis([{remoteMedia, csi: CSI}], false);
+
+      assert.strictEqual(group.getRemoteMedia().length, NUM_SLOTS); // by default should return 'all'
+      assert.strictEqual(group.getRemoteMedia('all').length, NUM_SLOTS);
+      assert.strictEqual(group.getRemoteMedia('unpinned').length, NUM_SLOTS - 1);
+      assert.strictEqual(group.getRemoteMedia('pinned').length, 1);
+
+      assert.strictEqual(group.isPinned(remoteMedia), true);
+      // now check that correct media requests were sent...
+
+      const expectedReceiverSelectedSlots = [fakeReceiveSlots[PINNED_INDEX]];
+      const expectedActiveSpeakerReceiveSlots = fakeReceiveSlots.filter(
+        (_, idx) => idx !== PINNED_INDEX
+      );
+
+      // the previous active speaker media request for the group should have been cancelled
+      assert.calledOnce(fakeMediaRequestManager.cancelRequest);
+      assert.calledWith(fakeMediaRequestManager.cancelRequest, 'fake active speaker request 1');
+      // a new one should be sent for active speaker and for receiver selected
+      assert.calledTwice(fakeMediaRequestManager.addRequest);
+      assert.calledWith(
+        fakeMediaRequestManager.addRequest,
+        sinon.match({
+          policyInfo: sinon.match({
+            policy: 'active-speaker',
+            priority: 255,
+          }),
+          receiveSlots: expectedActiveSpeakerReceiveSlots,
+          codecInfo: sinon.match({
+            codec: 'h264',
+            maxFs: 3600,
+          }),
+        })
+      );
+      assert.calledWith(
+        fakeMediaRequestManager.addRequest,
+        sinon.match({
+          policyInfo: sinon.match({
+            policy: 'receiver-selected',
+            csi: CSI,
+          }),
+          receiveSlots: expectedReceiverSelectedSlots,
+          codecInfo: sinon.match({
+            codec: 'h264',
+            maxFs: 3600,
+          }),
+        })
+      );
+      assert.notCalled(fakeMediaRequestManager.commit);
+    });
+
+    it('checks when there is csi and remoteMedia is in pinned array', () => {
+      const PINNED_INDEX = 4;
+
+      const group = new RemoteMediaGroup(fakeMediaRequestManager, fakeReceiveSlots, 255, true, {
+        resolution: 'medium',
+        preferLiveVideo: true,
+      });
+
+      // take one instance of remote media from the group
+      const remoteMedia = group.getRemoteMedia('all')[PINNED_INDEX];
+
+      resetHistory();
+
+      // pin it so that it is in pinned array
+      group.setActiveSpeakerCsis([{remoteMedia, csi: 1234}], false);
+
+      assert.strictEqual(group.getRemoteMedia().length, NUM_SLOTS); // by default should return 'all'
+      assert.strictEqual(group.getRemoteMedia('all').length, NUM_SLOTS);
+      assert.strictEqual(group.getRemoteMedia('unpinned').length, NUM_SLOTS - 1);
+      assert.strictEqual(group.getRemoteMedia('pinned').length, 1);
+
+      resetHistory();
+      // normally this would result in the underlying receive slot csi to be updated, because we're using fake
+      // receive slots, we have to do that manually:
+      fakeReceiveSlots[PINNED_INDEX].csi = 1234;
+      const expectedReceiverSelectedSlots = [fakeReceiveSlots[PINNED_INDEX]];
+
+      // pin again to same CSI
+      group.setActiveSpeakerCsis([{remoteMedia, csi: 1234}], false);
+
+      assert.strictEqual(group.getRemoteMedia().length, NUM_SLOTS); // by default should return 'all'
+      assert.strictEqual(group.getRemoteMedia('all').length, NUM_SLOTS);
+      assert.strictEqual(group.getRemoteMedia('unpinned').length, NUM_SLOTS - 1);
+      assert.strictEqual(group.getRemoteMedia('pinned').length, 1);
+
+      assert.strictEqual(group.isPinned(remoteMedia), true);
+      
+      assert.calledTwice(fakeMediaRequestManager.cancelRequest);
+      assert.calledWith(fakeMediaRequestManager.cancelRequest, 'fake receiver selected request 1');
+
+      assert.calledWith(
+        fakeMediaRequestManager.addRequest,
+        sinon.match({
+          policyInfo: sinon.match({
+            policy: 'receiver-selected',
+            csi: 1234,
+          }),
+          receiveSlots: expectedReceiverSelectedSlots,
+          codecInfo: sinon.match({
+            codec: 'h264',
+            maxFs: 3600,
+          }),
+        })
+      );
+      assert.notCalled(fakeMediaRequestManager.commit);
+    });
+
+    it('checks setActiveSpeakerCsis with array of remoteMedia to pin and unpin', () => {
+      const PINNED_INDEX = 2;
+      const PINNED_INDEX2 = 0;
+      const CSI = 11111;
+      const CSI2 = 12345;
+
+      const group = new RemoteMediaGroup(fakeMediaRequestManager, fakeReceiveSlots, 255, true, {
+        resolution: 'medium',
+        preferLiveVideo: true,
+      });
+
+      // initially nothing should be pinned
+      assert.strictEqual(group.getRemoteMedia().length, NUM_SLOTS); // by default should return 'all'
+      assert.strictEqual(group.getRemoteMedia('all').length, NUM_SLOTS);
+      assert.strictEqual(group.getRemoteMedia('unpinned').length, NUM_SLOTS);
+      assert.strictEqual(group.getRemoteMedia('pinned').length, 0);
+
+      const remoteMedia = group.getRemoteMedia('all')[PINNED_INDEX];
+
+      const remoteMedia2 = group.getRemoteMedia('all')[PINNED_INDEX2];
+
+      const remoteMedisCsis = [{remoteMedia, csi: CSI}, {remoteMedia: remoteMedia2, csi: CSI2}];
+
+      group.setActiveSpeakerCsis(remoteMedisCsis, false);
+
+     assert.strictEqual(group.getRemoteMedia().length, NUM_SLOTS);
+     assert.strictEqual(group.getRemoteMedia('all').length, NUM_SLOTS);
+     assert.strictEqual(group.getRemoteMedia('unpinned').length, NUM_SLOTS - 2);
+     assert.strictEqual(group.getRemoteMedia('pinned').length, 2);
+
+     assert.strictEqual(group.isPinned(remoteMedia), true);
+     assert.strictEqual(group.isPinned(remoteMedia2), true);
+
+     resetHistory();
+
+     group.setActiveSpeakerCsis([{remoteMedia}], false);
+
+     // one pane should still remain pinned
+     assert.strictEqual(group.getRemoteMedia().length, NUM_SLOTS);
+     assert.strictEqual(group.getRemoteMedia('all').length, NUM_SLOTS);
+     assert.strictEqual(group.getRemoteMedia('unpinned').length, NUM_SLOTS - 1);
+     assert.strictEqual(group.getRemoteMedia('pinned').length, 1);
+     assert.strictEqual(group.isPinned(remoteMedia), false);
+     assert.strictEqual(group.isPinned(remoteMedia2), true);
+
+     assert.calledTwice(fakeMediaRequestManager.cancelRequest);
+     assert.calledWith(fakeMediaRequestManager.cancelRequest, 'fake receiver selected request 1');
+     assert.notCalled(fakeMediaRequestManager.commit);
+    });
+
+    it('check commit is only called once', () => {
+      const PINNED_INDEX = 2;
+      const PINNED_INDEX2 = 0;
+      const CSI = 11111;
+      const CSI2 = 12345;
+
+      const group = new RemoteMediaGroup(fakeMediaRequestManager, fakeReceiveSlots, 255, true, {
+        resolution: 'medium',
+        preferLiveVideo: true,
+      });
+
+      const remoteMedia = group.getRemoteMedia('all')[PINNED_INDEX];
+
+      resetHistory();
+
+      const remoteMedia2 = group.getRemoteMedia('all')[PINNED_INDEX2];
+
+      const remoteMedisCsis = [{remoteMedia, csi: CSI}, {remoteMedia: remoteMedia2, csi: CSI2}, {remoteMedia}];
+
+      group.setActiveSpeakerCsis(remoteMedisCsis, true);
+
+      assert.calledOnce(fakeMediaRequestManager.commit);
+    });
+
+    it('throws when remoteMedia id is not in unpinned and pinned array - csi is there', () => {
+      const group = new RemoteMediaGroup(fakeMediaRequestManager, fakeReceiveSlots, 255, true, {
+        resolution: 'medium',
+        preferLiveVideo: true,
+      });
+      assert.throws(() => group.setActiveSpeakerCsis([{remoteMedia: {id: 'r1'} as any, csi: 123}], false), 'failed to pin a remote media object r1, because it is not found in this remote media group');
+    });
+
+    it('throws when remoteMedia id is not in unpinned and pinned array - csi is not there', () => {
+      const group = new RemoteMediaGroup(fakeMediaRequestManager, fakeReceiveSlots, 255, true, {
+        resolution: 'medium',
+        preferLiveVideo: true,
+      });
+      assert.throws(() => group.setActiveSpeakerCsis([{remoteMedia: {id: 'r1'} as any}], false), 'failed to unpin a remote media object r1, because it is not found in this remote media group');
+    });
+  });
+
   describe('pinning', () => {
     it('works as expected', () => {
       const PINNED_INDEX = 2;

package/test/unit/spec/multistream/remoteMediaManager.ts

@@ -679,7 +679,6 @@ describe('RemoteMediaManager', () => {
       );
 
       remoteMediaManager.on(Event.VideoLayoutChanged, (layoutInfo: VideoLayoutChangedEventData) => {
-        console.log(layoutInfo.activeSpeakerVideoPanes);
         Object.values(layoutInfo.activeSpeakerVideoPanes).forEach((group) => stubs.push(sinon.stub(group, 'setPreferLiveVideo')));
       });
 
@@ -1725,6 +1724,94 @@ describe('RemoteMediaManager', () => {
     });
   });
 
+  describe('setActiveSpeakerCsis', () => {
+    it('calls setActiveSpeakerCsis on the correct remote media group', async () => {
+      let currentLayoutInfo: VideoLayoutChangedEventData | null = null;
+      let setCsisStub;
+
+      remoteMediaManager.on(Event.VideoLayoutChanged, (layoutInfo: VideoLayoutChangedEventData) => {
+        currentLayoutInfo = layoutInfo;
+        setCsisStub = sinon.stub(layoutInfo.activeSpeakerVideoPanes.main, 'setActiveSpeakerCsis');
+      });
+
+      await remoteMediaManager.start();
+      resetHistory();
+
+      assert.isNotNull(currentLayoutInfo);
+
+      if (currentLayoutInfo) {
+        const remoteVideo = currentLayoutInfo.activeSpeakerVideoPanes.main.getRemoteMedia()[0];
+
+        remoteMediaManager.setActiveSpeakerCsis([{remoteMedia: remoteVideo}]);
+
+        assert.calledOnce(setCsisStub);
+        assert.calledWith(setCsisStub, [{remoteMedia: remoteVideo}], false);
+        assert.calledOnce(fakeMediaRequestManagers.video.commit);
+      }
+    });
+
+    it('does not call setActiveSpeakerCsis on the incorrect media group', async () => {
+      let currentLayoutInfo: VideoLayoutChangedEventData | null = null;
+      let setCsisStub;
+
+      remoteMediaManager.on(Event.VideoLayoutChanged, (layoutInfo: VideoLayoutChangedEventData) => {
+        currentLayoutInfo = layoutInfo;
+        setCsisStub = sinon.stub(layoutInfo.activeSpeakerVideoPanes.main, 'setActiveSpeakerCsis');
+      });
+
+      await remoteMediaManager.start();
+      resetHistory();
+
+      assert.isNotNull(currentLayoutInfo);
+
+      if (currentLayoutInfo) {
+        remoteMediaManager.setActiveSpeakerCsis([{remoteMedia: {}}]);
+
+        assert.notCalled(setCsisStub);
+        assert.calledOnce(fakeMediaRequestManagers.video.commit);
+      }
+    });
+
+    it('checking when there is more than one group', async () => {
+      let currentLayoutInfo: VideoLayoutChangedEventData | null = null;
+      const config = cloneDeep(DefaultTestConfiguration);
+      let stubs = [];
+
+      config.video.initialLayoutId = 'OnePlusFive';
+
+      remoteMediaManager = new RemoteMediaManager(
+        fakeReceiveSlotManager,
+        fakeMediaRequestManagers,
+        config
+      );
+
+      remoteMediaManager.on(Event.VideoLayoutChanged, (layoutInfo: VideoLayoutChangedEventData) => {
+        currentLayoutInfo = layoutInfo;
+        Object.values(layoutInfo.activeSpeakerVideoPanes).forEach((group) => stubs.push(sinon.stub(group, 'setActiveSpeakerCsis')));
+      });
+
+      await remoteMediaManager.start();
+      resetHistory();
+
+      assert.isNotNull(currentLayoutInfo);
+
+      if (currentLayoutInfo) {
+
+        const remoteMedia1 = currentLayoutInfo.activeSpeakerVideoPanes.mainBigOne.getRemoteMedia()[0];
+        const remoteMedia2 = currentLayoutInfo.activeSpeakerVideoPanes.secondarySetOfSmallPanes.getRemoteMedia()[0];
+
+        const remoteMediaCsis = [{remoteMedia: remoteMedia1}, {remoteMedia: remoteMedia2}];
+
+        remoteMediaManager.setActiveSpeakerCsis([{remoteMedia: remoteMedia1}, {remoteMedia: remoteMedia2}]);
+
+        stubs.forEach((stub, index) => {
+          assert.calledWith(stub, [remoteMediaCsis[index]], false)
+        });
+        assert.calledOnce(fakeMediaRequestManagers.video.commit);
+      }
+    });
+  });
+
   describe('pinActiveSpeakerVideoPane() and isPinned()', () => {
     it('throws if called on a pane not belonging to an active speaker group', async () => {
       let currentLayoutInfo: VideoLayoutChangedEventData | null = null;