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

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

@@ -1,7 +1,7 @@
 /* eslint-disable require-jsdoc */
 import EventEmitter from 'events';
 
-import {MediaConnection as MC} from '@webex/internal-media-core';
+import {MediaType} from '@webex/internal-media-core';
 import {
   Configuration,
   Event,
@@ -15,15 +15,18 @@ import {cloneDeep} from 'lodash';
 import {MediaRequest} from '@webex/plugin-meetings/src/multistream/mediaRequestManager';
 import {CSI, ReceiveSlotId} from '@webex/plugin-meetings/src/multistream/receiveSlot';
 import testUtils from '../../../utils/testUtils';
+import LoggerProxy from '@webex/plugin-meetings/src/common/logs/logger-proxy';
+import LoggerConfig from '@webex/plugin-meetings/src/common/logs/logger-config';
+import { expect } from 'chai';
 
 class FakeSlot extends EventEmitter {
-  public mediaType: MC.MediaType;
+  public mediaType: MediaType;
 
   public id: string;
 
   public csi?: number;
 
-  constructor(mediaType: MC.MediaType, id: string) {
+  constructor(mediaType: MediaType, id: string) {
     super();
     this.mediaType = mediaType;
     this.id = id;
@@ -32,11 +35,16 @@ class FakeSlot extends EventEmitter {
     // Calling setMaxListeners() fixes the warning.
     this.setMaxListeners(50);
   }
+
+  public get logString() {
+    return this.id;
+  }
 }
 
 const DefaultTestConfiguration: Configuration = {
   audio: {
     numOfActiveSpeakerStreams: 3,
+    numOfScreenShareStreams: 1,
   },
   video: {
     preferLiveVideo: true,
@@ -44,7 +52,6 @@ const DefaultTestConfiguration: Configuration = {
 
     layouts: {
       AllEqual: {
-        screenShareVideo: {size: null},
         activeSpeakerVideoPaneGroups: [
           {
             id: 'main',
@@ -55,7 +62,6 @@ const DefaultTestConfiguration: Configuration = {
         ],
       },
       OnePlusFive: {
-        screenShareVideo: {size: null},
         activeSpeakerVideoPaneGroups: [
           {
             id: 'mainBigOne',
@@ -72,7 +78,6 @@ const DefaultTestConfiguration: Configuration = {
         ],
       },
       Single: {
-        screenShareVideo: {size: null},
         activeSpeakerVideoPaneGroups: [
           {
             id: 'main',
@@ -83,7 +88,6 @@ const DefaultTestConfiguration: Configuration = {
         ],
       },
       Stage: {
-        screenShareVideo: {size: null},
         activeSpeakerVideoPaneGroups: [
           {
             id: 'thumbnails',
@@ -99,12 +103,19 @@ const DefaultTestConfiguration: Configuration = {
           {id: 'stage-4', size: 'medium', csi: undefined},
         ],
       },
+      ScreenShareView: {
+        screenShareVideo: {size: 'medium'},
+        activeSpeakerVideoPaneGroups: [
+          {
+            id: 'thumbnails',
+            numPanes: 6,
+            size: 'thumbnail',
+            priority: 255,
+          },
+        ],
+      },
     },
   },
-  screenShare: {
-    audio: true,
-    video: true,
-  },
 };
 
 describe('RemoteMediaManager', () => {
@@ -113,18 +124,50 @@ describe('RemoteMediaManager', () => {
   let fakeMediaRequestManagers;
   let fakeAudioSlot;
   let fakeVideoSlot;
+  let fakeScreenShareAudioSlot;
+  let fakeScreenShareVideoSlot;
+
+  const logger = {
+    log: sinon.fake(),
+    error: () => {},
+    warn: () => {},
+    trace: () => {},
+    debug: () => {},
+  };
+
+  afterEach(() => {
+    LoggerConfig.set({enable: false});
+    LoggerProxy.set();
+  });
 
   beforeEach(() => {
-    fakeAudioSlot = new FakeSlot(MC.MediaType.AudioMain, 'fake audio slot');
-    fakeVideoSlot = new FakeSlot(MC.MediaType.VideoMain, 'fake video slot');
+    LoggerConfig.set({enable: true});
+    LoggerProxy.set(logger);
+
+    fakeAudioSlot = new FakeSlot(MediaType.AudioMain, 'fake audio slot');
+    fakeVideoSlot = new FakeSlot(MediaType.VideoMain, 'fake video slot');
+    fakeScreenShareAudioSlot = new FakeSlot(
+      MediaType.AudioSlides,
+      'fake screen share audio slot'
+    );
+    fakeScreenShareVideoSlot = new FakeSlot(
+      MediaType.VideoSlides,
+      'fake screen share video slot'
+    );
 
     fakeReceiveSlotManager = {
       allocateSlot: sinon.stub().callsFake((mediaType) => {
-        if (mediaType === MC.MediaType.AudioMain) {
-          return Promise.resolve(fakeAudioSlot);
+        switch (mediaType) {
+          case MediaType.AudioMain:
+            return Promise.resolve(fakeAudioSlot);
+          case MediaType.VideoMain:
+            return Promise.resolve(fakeVideoSlot);
+          case MediaType.AudioSlides:
+            return Promise.resolve(fakeScreenShareAudioSlot);
+          case MediaType.VideoSlides:
+            return Promise.resolve(fakeScreenShareVideoSlot);
         }
-
-        return Promise.resolve(fakeVideoSlot);
+        throw new Error(`invalid mediaType: ${mediaType}`);
       }),
       releaseSlot: sinon.stub(),
     };
@@ -140,6 +183,16 @@ describe('RemoteMediaManager', () => {
         cancelRequest: sinon.stub(),
         commit: sinon.stub(),
       },
+      screenShareAudio: {
+        addRequest: sinon.stub(),
+        cancelRequest: sinon.stub(),
+        commit: sinon.stub(),
+      },
+      screenShareVideo: {
+        addRequest: sinon.stub(),
+        cancelRequest: sinon.stub(),
+        commit: sinon.stub(),
+      },
     };
 
     // create remote media manager with default configuration
@@ -159,6 +212,9 @@ describe('RemoteMediaManager', () => {
     fakeMediaRequestManagers.video.addRequest.resetHistory();
     fakeMediaRequestManagers.video.cancelRequest.resetHistory();
     fakeMediaRequestManagers.video.commit.resetHistory();
+    fakeMediaRequestManagers.screenShareVideo.commit.resetHistory();
+    fakeMediaRequestManagers.screenShareAudio.commit.resetHistory();
+    logger.log.resetHistory();
   };
 
   describe('start', () => {
@@ -176,8 +232,8 @@ describe('RemoteMediaManager', () => {
       await remoteMediaManager.start();
 
       // check that the 2nd start() creates slots and media requests and is not a no-op
-      assert.calledWith(fakeReceiveSlotManager.allocateSlot, MC.MediaType.AudioMain);
-      assert.calledWith(fakeReceiveSlotManager.allocateSlot, MC.MediaType.VideoMain);
+      assert.calledWith(fakeReceiveSlotManager.allocateSlot, MediaType.AudioMain);
+      assert.calledWith(fakeReceiveSlotManager.allocateSlot, MediaType.VideoMain);
 
       assert.called(fakeMediaRequestManagers.audio.addRequest);
       assert.called(fakeMediaRequestManagers.video.addRequest);
@@ -187,25 +243,18 @@ describe('RemoteMediaManager', () => {
       let createdAudioGroup: RemoteMediaGroup | null = null;
 
       // create a config with just audio, no video at all and no screen share
-      const config = {
+      const config: Configuration = {
         audio: {
           numOfActiveSpeakerStreams: 5,
+          numOfScreenShareStreams: 0,
         },
         video: {
           preferLiveVideo: false,
           initialLayoutId: 'empty',
           layouts: {
-            empty: {
-              screenShareVideo: {
-                size: null,
-              },
-            },
+            empty: {},
           },
         },
-        screenShare: {
-          audio: false,
-          video: false,
-        },
       };
 
       remoteMediaManager = new RemoteMediaManager(
@@ -223,7 +272,7 @@ describe('RemoteMediaManager', () => {
       await testUtils.flushPromises();
 
       assert.callCount(fakeReceiveSlotManager.allocateSlot, 5);
-      assert.alwaysCalledWith(fakeReceiveSlotManager.allocateSlot, MC.MediaType.AudioMain);
+      assert.alwaysCalledWith(fakeReceiveSlotManager.allocateSlot, MediaType.AudioMain);
 
       assert.isNotNull(createdAudioGroup);
       if (createdAudioGroup) {
@@ -231,7 +280,7 @@ describe('RemoteMediaManager', () => {
         assert.isTrue(
           createdAudioGroup
             .getRemoteMedia()
-            .every((remoteMedia) => remoteMedia.mediaType === MC.MediaType.AudioMain)
+            .every((remoteMedia) => remoteMedia.mediaType === MediaType.AudioMain)
         );
         assert.strictEqual(createdAudioGroup.getRemoteMedia('pinned').length, 0);
       }
@@ -255,9 +304,6 @@ describe('RemoteMediaManager', () => {
 
       config.audio.numOfActiveSpeakerStreams = 0;
       config.video.layouts.huge = {
-        screenShareVideo: {
-          size: null,
-        },
         activeSpeakerVideoPaneGroups: [
           {
             id: 'big one',
@@ -267,6 +313,8 @@ describe('RemoteMediaManager', () => {
           },
         ],
       };
+      config.audio.numOfScreenShareStreams = 0;
+      delete config.video.layouts.ScreenShareView;
 
       remoteMediaManager = new RemoteMediaManager(
         fakeReceiveSlotManager,
@@ -279,7 +327,7 @@ describe('RemoteMediaManager', () => {
       // even though our "big one" layout is not the default one, the remote media manager should still
       // preallocate enough video receive slots for it up front
       assert.callCount(fakeReceiveSlotManager.allocateSlot, 99);
-      assert.alwaysCalledWith(fakeReceiveSlotManager.allocateSlot, MC.MediaType.VideoMain);
+      assert.alwaysCalledWith(fakeReceiveSlotManager.allocateSlot, MediaType.VideoMain);
     });
 
     it('starts with the initial layout', async () => {
@@ -302,8 +350,128 @@ describe('RemoteMediaManager', () => {
           receivedLayoutInfo.activeSpeakerVideoPanes.main.getRemoteMedia().length,
           9
         );
+        assert.isUndefined(receivedLayoutInfo.screenShareVideo); // the initial layout has no screen share
       }
     });
+
+    it('creates RemoteMedia for screen share audio correctly', async () => {
+      let createdAudioGroup: RemoteMediaGroup | null = null;
+
+      const NUM_STREAMS = 2;
+
+      // create a config with just screen share audio, nothing else
+      const config: Configuration = {
+        audio: {
+          numOfActiveSpeakerStreams: 0,
+          numOfScreenShareStreams: NUM_STREAMS,
+        },
+        video: {
+          preferLiveVideo: false,
+          initialLayoutId: 'empty',
+          layouts: {
+            empty: {},
+          },
+        },
+      };
+
+      remoteMediaManager = new RemoteMediaManager(
+        fakeReceiveSlotManager,
+        fakeMediaRequestManagers,
+        config
+      );
+
+      remoteMediaManager.on(Event.ScreenShareAudioCreated, (audio: RemoteMediaGroup) => {
+        createdAudioGroup = audio;
+      });
+
+      remoteMediaManager.start();
+
+      await testUtils.flushPromises();
+
+      assert.callCount(fakeReceiveSlotManager.allocateSlot, NUM_STREAMS);
+      assert.alwaysCalledWith(fakeReceiveSlotManager.allocateSlot, MediaType.AudioSlides);
+
+      assert.isNotNull(createdAudioGroup);
+      if (createdAudioGroup) {
+        assert.strictEqual(createdAudioGroup.getRemoteMedia().length, NUM_STREAMS);
+        assert.isTrue(
+          createdAudioGroup
+            .getRemoteMedia()
+            .every((remoteMedia) => remoteMedia.mediaType === MediaType.AudioSlides)
+        );
+        assert.strictEqual(createdAudioGroup.getRemoteMedia('pinned').length, 0);
+      }
+
+      assert.calledOnce(fakeMediaRequestManagers.screenShareAudio.addRequest);
+      assert.calledWith(
+        fakeMediaRequestManagers.screenShareAudio.addRequest,
+        sinon.match({
+          policyInfo: sinon.match({
+            policy: 'active-speaker',
+            priority: 255,
+          }),
+          receiveSlots: Array(NUM_STREAMS).fill(fakeScreenShareAudioSlot),
+          codecInfo: undefined,
+        })
+      );
+    });
+
+    it('creates a single receive slot for screen share video if any layout has screen share', async () => {
+      // create a config with 2 layouts that use screen share
+      const config: Configuration = {
+        audio: {
+          numOfActiveSpeakerStreams: 0,
+          numOfScreenShareStreams: 0,
+        },
+        video: {
+          preferLiveVideo: false,
+          initialLayoutId: 'first',
+          layouts: {
+            first: {
+              screenShareVideo: { size: 'small'}
+            },
+            second: {
+              screenShareVideo: { size: 'medium'}
+            }
+          },
+        },
+      };
+
+      remoteMediaManager = new RemoteMediaManager(
+        fakeReceiveSlotManager,
+        fakeMediaRequestManagers,
+        config
+      );
+
+      await remoteMediaManager.start();
+
+      // even though 2 layouts use screen share, only 1 video screen share slot should be created
+      assert.callCount(fakeReceiveSlotManager.allocateSlot, 1);
+      assert.alwaysCalledWith(fakeReceiveSlotManager.allocateSlot, MediaType.VideoSlides);
+    });
+
+    it('does not create any receive slot for screen share video if none of the layouts have screen share', async () => {
+      const config = cloneDeep(DefaultTestConfiguration);
+
+      config.audio.numOfActiveSpeakerStreams = 0;
+      config.audio.numOfScreenShareStreams = 0;
+
+      // delete the only layout that uses screen share
+      delete config.video.layouts.ScreenShareView;
+
+      remoteMediaManager = new RemoteMediaManager(
+        fakeReceiveSlotManager,
+        fakeMediaRequestManagers,
+        config
+      );
+
+      await remoteMediaManager.start();
+
+      // we don't expect any audio and for video there should be no VideoSlides, so all the calls should be just for VideoMain
+      assert.alwaysCalledWith(fakeReceiveSlotManager.allocateSlot, MediaType.VideoMain);
+    });
+
+
   });
 
   describe('constructor', () => {
@@ -325,7 +493,6 @@ describe('RemoteMediaManager', () => {
       const config = cloneDeep(DefaultTestConfiguration);
 
       config.video.layouts.test = {
-        screenShareVideo: {size: null},
         activeSpeakerVideoPaneGroups: [
           {
             id: 'someDuplicate',
@@ -361,7 +528,6 @@ describe('RemoteMediaManager', () => {
       const config = cloneDeep(DefaultTestConfiguration);
 
       config.video.layouts.test = {
-        screenShareVideo: {size: null},
         activeSpeakerVideoPaneGroups: [
           {
             id: 'group1',
@@ -397,7 +563,6 @@ describe('RemoteMediaManager', () => {
       const config = cloneDeep(DefaultTestConfiguration);
 
       config.video.layouts.test = {
-        screenShareVideo: {size: null},
         memberVideoPanes: [
           {id: 'paneA', size: 'best', csi: 123},
           {id: 'paneB', size: 'large', csi: 222},
@@ -414,6 +579,7 @@ describe('RemoteMediaManager', () => {
         );
       }, 'invalid config: duplicate member video pane id: paneB');
     });
+
   });
 
   describe('stop', () => {
@@ -421,12 +587,17 @@ describe('RemoteMediaManager', () => {
       let audioStopStub;
       let videoActiveSpeakerGroupStopStub;
       const memberVideoPaneStopStubs: any[] = [];
+      let screenShareAudioStopStub;
+      let screenShareVideoStopStub;
 
-      // change the initial layout to one that has both active speakers and receveiver selected videos
+      // change the initial layout to one that has both active speakers and receiver selected videos
       const config = cloneDeep(DefaultTestConfiguration);
 
       config.video.initialLayoutId = 'Stage';
 
+      // and also modify it to have screen share so we can test that too
+      config.video.layouts['Stage'].screenShareVideo = {size: 'medium'};
+
       remoteMediaManager = new RemoteMediaManager(
         fakeReceiveSlotManager,
         fakeMediaRequestManagers,
@@ -437,6 +608,10 @@ describe('RemoteMediaManager', () => {
         audioStopStub = sinon.stub(audio, 'stop');
       });
 
+      remoteMediaManager.on(Event.ScreenShareAudioCreated, (audio: RemoteMediaGroup) => {
+        screenShareAudioStopStub = sinon.stub(audio, 'stop');
+      });
+
       remoteMediaManager.on(Event.VideoLayoutChanged, (layoutInfo: VideoLayoutChangedEventData) => {
         // The "Stage" layout that we're using has only 1 active speaker group called "thumbnails"
         videoActiveSpeakerGroupStopStub = sinon.stub(
@@ -447,12 +622,14 @@ describe('RemoteMediaManager', () => {
         Object.values(layoutInfo.memberVideoPanes).forEach((pane) => {
           memberVideoPaneStopStubs.push(sinon.stub(pane, 'stop'));
         });
+
+        screenShareVideoStopStub = sinon.stub(layoutInfo.screenShareVideo, 'stop');
       });
 
       await remoteMediaManager.start();
 
-      // we're using the default config that requires 3 main audio slots and 10 video slots (for Stage2x2With6ThumbnailsLayout)
-      assert.callCount(fakeReceiveSlotManager.allocateSlot, 13);
+      // we're using the default config that requires 3 main audio slots, 10 video slots (for Stage2x2With6ThumbnailsLayout), 1 screenshare audio, 1 screenshare video
+      assert.callCount(fakeReceiveSlotManager.allocateSlot, 15);
 
       // our layout has 4 member video panes, we should have a stub for each of these panes' stop methods
       assert.strictEqual(memberVideoPaneStopStubs.length, 4);
@@ -462,16 +639,20 @@ describe('RemoteMediaManager', () => {
       remoteMediaManager.stop();
 
       // check that all slots have been released
-      assert.callCount(fakeReceiveSlotManager.releaseSlot, 13);
+      assert.callCount(fakeReceiveSlotManager.releaseSlot, 15);
 
       // and that all RemoteMedia and RemoteMediaGroups have been stopped
       assert.calledOnce(audioStopStub);
       assert.calledWith(audioStopStub, true);
+      assert.calledOnce(screenShareAudioStopStub);
+      assert.calledWith(screenShareAudioStopStub, true);
       assert.calledOnce(videoActiveSpeakerGroupStopStub);
       memberVideoPaneStopStubs.forEach((stub) => {
         assert.calledOnce(stub);
       });
       assert.calledOnce(fakeMediaRequestManagers.video.commit);
+      assert.calledOnce(screenShareVideoStopStub);
+      assert.calledOnce(fakeMediaRequestManagers.screenShareVideo.commit);
     });
 
     it('can be called multiple times', async () => {
@@ -482,6 +663,41 @@ describe('RemoteMediaManager', () => {
       remoteMediaManager.stop();
     });
   });
+
+  describe('setPreferLiveVideo', () => {
+
+    it('sets preferLiveVideo', async () => {
+      const config = cloneDeep(DefaultTestConfiguration);
+      let stubs = [];
+
+      config.video.initialLayoutId = 'OnePlusFive';
+
+      remoteMediaManager = new RemoteMediaManager(
+        fakeReceiveSlotManager,
+        fakeMediaRequestManagers,
+        config
+      );
+
+      remoteMediaManager.on(Event.VideoLayoutChanged, (layoutInfo: VideoLayoutChangedEventData) => {
+        Object.values(layoutInfo.activeSpeakerVideoPanes).forEach((group) => stubs.push(sinon.stub(group, 'setPreferLiveVideo')));
+      });
+
+      await remoteMediaManager.start();
+      resetHistory();
+      assert(stubs.length > 0);
+      await remoteMediaManager.setPreferLiveVideo(true);
+
+
+      stubs.forEach((stub) => {
+        assert.calledWith(stub, true, false)
+      });
+
+      expect(config.video.preferLiveVideo).to.equal(true);
+      
+      assert.calledOnce(fakeMediaRequestManagers.video.commit);
+    });
+  });
+
   describe('setLayout', () => {
     it('rejects if called with invalid layoutId', async () => {
       await assert.isRejected(remoteMediaManager.setLayout('invalid value'));
@@ -511,9 +727,61 @@ describe('RemoteMediaManager', () => {
       await remoteMediaManager.setLayout('Stage');
 
       assert.callCount(fakeReceiveSlotManager.allocateSlot, 9);
-      assert.alwaysCalledWith(fakeReceiveSlotManager.allocateSlot, MC.MediaType.VideoMain);
+      assert.alwaysCalledWith(fakeReceiveSlotManager.allocateSlot, MediaType.VideoMain);
+    });
+
+    it('logs layout changes - receiver selected', async () => {
+      const config = cloneDeep(DefaultTestConfiguration);
+
+      remoteMediaManager = new RemoteMediaManager(
+        fakeReceiveSlotManager,
+        fakeMediaRequestManagers,
+        config
+      );
+
+      await remoteMediaManager.start();
+
+      resetHistory();
+
+      await remoteMediaManager.setLayout('Stage');
+
+      assert.calledWith(
+        logger.log,
+        'RemoteMediaManager#setLayout --> new layout selected: Stage'
+      );
+      assert.calledWith(
+        logger.log,
+        'RemoteMediaManager#logMainVideoReceiveSlots --> MAIN VIDEO receive slots: unused=0, activeSpeaker=6, receiverSelected=4\ngroup: thumbnails\nfake video slot, fake video slot, fake video slot, fake video slot, fake video slot, fake video slot\nreceiverSelected:\n stage-1: fake video slot\n stage-2: fake video slot\n stage-3: fake video slot\n stage-4: fake video slot\n'
+      );
     });
 
+    it('logs layout changes - active speaker', async () => {
+      const config = cloneDeep(DefaultTestConfiguration);
+      config.video.initialLayoutId = 'OnePlusFive'
+
+      remoteMediaManager = new RemoteMediaManager(
+        fakeReceiveSlotManager,
+        fakeMediaRequestManagers,
+        config
+      );
+
+      await remoteMediaManager.start();
+
+      resetHistory();
+
+      await remoteMediaManager.setLayout('AllEqual');
+
+      assert.calledWith(
+        logger.log,
+        'RemoteMediaManager#setLayout --> new layout selected: AllEqual'
+      );
+      assert.calledWith(
+        logger.log,
+        'RemoteMediaManager#logMainVideoReceiveSlots --> MAIN VIDEO receive slots: unused=0, activeSpeaker=9, receiverSelected=0\ngroup: main\nfake video slot, fake video slot, fake video slot, fake video slot, fake video slot, fake video slot, fake video slot, fake video slot, fake video slot\nreceiverSelected:\n'
+      );
+    });
+
+
     it('releases slots when switching to layout that requires less active speaker slots', async () => {
       // start with "AllEqual" layout that needs just 9 video slots
       const config = cloneDeep(DefaultTestConfiguration);
@@ -538,10 +806,293 @@ describe('RemoteMediaManager', () => {
       fakeReceiveSlotManager.releaseSlot.getCalls().forEach((call) => {
         const slot = call.args[0];
 
-        assert.strictEqual(slot.mediaType, MC.MediaType.VideoMain);
+        assert.strictEqual(slot.mediaType, MediaType.VideoMain);
       });
     });
 
+    it('releases slots and reallocates slots when switching to layouts in correct order', async () => {
+
+      const config = cloneDeep(DefaultTestConfiguration);
+      let count = 0;
+
+      fakeReceiveSlotManager.allocateSlot = sinon.stub().callsFake((mediaType) => {
+        switch (mediaType) {
+          case MediaType.AudioMain:
+            return Promise.resolve(fakeAudioSlot);
+          case MediaType.VideoMain:
+            return Promise.resolve(new FakeSlot(MediaType.VideoMain, `fake video ${count++}`));
+          case MediaType.AudioSlides:
+            return Promise.resolve(fakeScreenShareAudioSlot);
+          case MediaType.VideoSlides:
+            return Promise.resolve(fakeScreenShareVideoSlot);
+        }
+        throw new Error(`invalid mediaType: ${mediaType}`);
+      })
+
+      remoteMediaManager = new RemoteMediaManager(
+        fakeReceiveSlotManager,
+        fakeMediaRequestManagers,
+        config
+      );
+
+      await remoteMediaManager.start();
+
+      resetHistory();
+
+      assert.deepEqual(remoteMediaManager.slots.video.activeSpeaker.map((slot: any) => slot.id), [
+        "fake video 0",
+        "fake video 1",
+        "fake video 2",
+        "fake video 3",
+        "fake video 4",
+        "fake video 5",
+        "fake video 6",
+        "fake video 7",
+        "fake video 8",
+      ]);
+
+      assert.deepEqual(remoteMediaManager.receiveSlotAllocations.activeSpeaker["main"].slots.map((slot: any) => slot.id), [
+        "fake video 0",
+        "fake video 1",
+        "fake video 2",
+        "fake video 3",
+        "fake video 4",
+        "fake video 5",
+        "fake video 6",
+        "fake video 7",
+        "fake video 8",
+      ])
+
+      // switch to "OnePlusFive" layout that requires 3 less video slots (6)
+      await remoteMediaManager.setLayout('OnePlusFive');
+
+      assert.deepEqual(remoteMediaManager.slots.video.unused, []);
+
+      assert.deepEqual(remoteMediaManager.slots.video.activeSpeaker.map((slot: any) => slot.id), [
+        "fake video 0",
+        "fake video 1",
+        "fake video 2",
+        "fake video 3",
+        "fake video 4",
+        "fake video 5"
+      ]);
+
+      // we're checking that the slots are in the same order as in the previous layout
+      // first one goes into main
+      assert.deepEqual(remoteMediaManager.receiveSlotAllocations.activeSpeaker["mainBigOne"].slots.map((slot: any) => slot.id), [
+        "fake video 0",
+      ])
+      // and rest go in the pips
+      assert.deepEqual(remoteMediaManager.receiveSlotAllocations.activeSpeaker["secondarySetOfSmallPanes"].slots.map((slot: any) => slot.id), [
+        "fake video 1",
+        "fake video 2",
+        "fake video 3",
+        "fake video 4",
+        "fake video 5"
+      ])
+
+      // verify that 3 main video slots were released
+      assert.callCount(fakeReceiveSlotManager.releaseSlot, 3);
+      fakeReceiveSlotManager.releaseSlot.getCalls().forEach((call) => {
+        const slot = call.args[0];
+
+        assert.strictEqual(slot.mediaType, MediaType.VideoMain);
+      });
+
+      await remoteMediaManager.setLayout('AllEqual');
+
+      assert.deepEqual(remoteMediaManager.slots.video.unused, []);
+
+      // checking that slots are in the same order as in previous layout + 3 new ones
+      assert.deepEqual(remoteMediaManager.slots.video.activeSpeaker.map((slot: any) => slot.id), [
+        "fake video 0",
+        "fake video 1",
+        "fake video 2",
+        "fake video 3",
+        "fake video 4",
+        "fake video 5",
+        "fake video 10",
+        "fake video 11",
+        "fake video 12",
+      ]);
+
+      assert.deepEqual(remoteMediaManager.receiveSlotAllocations.activeSpeaker["main"].slots.map((slot: any) => slot.id), [
+        "fake video 0",
+        "fake video 1",
+        "fake video 2",
+        "fake video 3",
+        "fake video 4",
+        "fake video 5",
+        "fake video 10",
+        "fake video 11",
+        "fake video 12"
+      ])
+
+       // verify that 3 main video slots were allocated
+       assert.callCount(fakeReceiveSlotManager.allocateSlot, 3);
+       fakeReceiveSlotManager.allocateSlot.getCalls().forEach((call) => {
+         const mediaType = call.args[0];
+
+         assert.strictEqual(mediaType, MediaType.VideoMain);
+       });
+    });
+
+    it('stops all current video remoteMedia instances when switching to new layout', async () => {
+      const audioStopStubs = [];
+      const videoStopStubs = [];
+
+      const config = cloneDeep(DefaultTestConfiguration);
+
+      // start with the stage layout because it has both active speaker and receiver selected panes
+      config.video.initialLayoutId = 'Stage';
+
+      remoteMediaManager = new RemoteMediaManager(
+        fakeReceiveSlotManager,
+        fakeMediaRequestManagers,
+        config
+      );
+
+      // mock all stop() methods for all remote audio objects we get with AudioCreated event
+      remoteMediaManager.on(Event.AudioCreated, (audio: RemoteMediaGroup) => {
+        audio
+          .getRemoteMedia()
+          .forEach((remoteAudio) => audioStopStubs.push(sinon.stub(remoteAudio, 'stop')));
+      });
+
+      // mock all stop() methods for all remote video objects we get with VideoLayoutChanged event
+      remoteMediaManager.on(Event.VideoLayoutChanged, (layoutInfo: VideoLayoutChangedEventData) => {
+        Object.values(layoutInfo.activeSpeakerVideoPanes).forEach((group) =>
+          group
+            .getRemoteMedia()
+            .forEach((remoteMedia) => videoStopStubs.push(sinon.stub(remoteMedia, 'stop')))
+        );
+
+        Object.values(layoutInfo.memberVideoPanes).forEach((pane) => {
+          videoStopStubs.push(sinon.stub(pane, 'stop'));
+        });
+      });
+
+      await remoteMediaManager.start();
+
+      // sanity check that we've got all our stop() mocks setup correctly
+      assert.strictEqual(audioStopStubs.length, 3);
+      assert.strictEqual(videoStopStubs.length, 10); // 10 = 6 thumbnail panes + 4 stage panes
+
+      // next, we'll change the layout, we don't care about the new video panes from the new layout, so unregister the event listeners
+      remoteMediaManager.removeAllListeners();
+
+      await remoteMediaManager.setLayout('AllEqual');
+
+      // check that NONE of the audio RemoteMedia instances were stopped
+      audioStopStubs.forEach((audioStopStub) => {
+        assert.notCalled(audioStopStub);
+      });
+
+      // check that ALL of the video RemoteMedia instances were stopped
+      videoStopStubs.forEach((videoStopStub) => {
+        assert.calledOnce(videoStopStub);
+        assert.calledWith(videoStopStub, false);
+      });
+    });
+
+    it('emits Event.VideoLayoutChanged with correct data', async () => {
+      // setup the initial layout to be empty and a testLayout that has screen share, active speaker groups and member video panes
+      const config: Configuration = {
+        audio: {
+          numOfActiveSpeakerStreams: 0,
+          numOfScreenShareStreams: 0,
+        },
+        video: {
+          preferLiveVideo: true,
+          initialLayoutId: 'empty',
+          layouts: {
+            empty: {},
+            testLayout: {
+              screenShareVideo: {size: 'very small'},
+              activeSpeakerVideoPaneGroups: [
+                {
+                  id: 'big',
+                  numPanes: 10,
+                  priority: 255,
+                  size: 'large',
+                },
+                {
+                  id: 'small',
+                  numPanes: 3,
+                  priority: 254,
+                  size: 'medium',
+                },
+              ],
+              memberVideoPanes: [
+                {id: 'pane 1', size: 'best', csi: 555},
+                {id: 'pane 2', size: 'best', csi: undefined},
+              ],
+            },
+          },
+        },
+      };
+
+      remoteMediaManager = new RemoteMediaManager(
+        fakeReceiveSlotManager,
+        fakeMediaRequestManagers,
+        config
+      );
+
+      await remoteMediaManager.start();
+
+      resetHistory();
+
+      let receivedLayoutInfo: VideoLayoutChangedEventData | null = null;
+
+      remoteMediaManager.on(Event.VideoLayoutChanged, (layoutInfo) => {
+        receivedLayoutInfo = layoutInfo;
+      });
+
+      // switch to the test layout
+      await remoteMediaManager.setLayout('testLayout');
+
+      assert.isNotNull(receivedLayoutInfo);
+
+      if (receivedLayoutInfo) {
+        assert.strictEqual(receivedLayoutInfo.layoutId, 'testLayout');
+
+        // check screen share video
+        assert.isTrue(!!receivedLayoutInfo.screenShareVideo);
+        assert.strictEqual(receivedLayoutInfo.screenShareVideo.mediaType, MediaType.VideoSlides);
+
+        // check member videos
+        assert.strictEqual(Object.keys(receivedLayoutInfo.memberVideoPanes).length, 2);
+        Object.values(receivedLayoutInfo.memberVideoPanes).forEach((remoteMedia) =>
+          assert.strictEqual(remoteMedia.mediaType, MediaType.VideoMain)
+        );
+
+        // check the 2 active speaker groups
+        assert.strictEqual(Object.keys(receivedLayoutInfo.activeSpeakerVideoPanes).length, 2);
+
+        // "big" group
+        assert.strictEqual(
+          receivedLayoutInfo.activeSpeakerVideoPanes.big.getRemoteMedia().length,
+          10
+        );
+        receivedLayoutInfo.activeSpeakerVideoPanes.big
+          .getRemoteMedia()
+          .forEach((remoteMedia) =>
+            assert.strictEqual(remoteMedia.mediaType, MediaType.VideoMain)
+          );
+
+        // "small" group
+        assert.strictEqual(
+          receivedLayoutInfo.activeSpeakerVideoPanes.small.getRemoteMedia().length,
+          3
+        );
+        receivedLayoutInfo.activeSpeakerVideoPanes.small
+          .getRemoteMedia()
+          .forEach((remoteMedia) =>
+            assert.strictEqual(remoteMedia.mediaType, MediaType.VideoMain)
+          );
+      }
+    });
+
     describe('switching between different receiver selected layouts', () => {
       let fakeSlots: {[key: ReceiveSlotId]: FakeSlot};
       let slotCounter: number;
@@ -562,7 +1113,7 @@ describe('RemoteMediaManager', () => {
           slotCounter += 1;
           const newSlotId = `fake video slot ${slotCounter}`;
 
-          fakeSlots[newSlotId] = new FakeSlot(MC.MediaType.VideoMain, newSlotId);
+          fakeSlots[newSlotId] = new FakeSlot(MediaType.VideoMain, newSlotId);
           return fakeSlots[newSlotId];
         });
 
@@ -594,12 +1145,12 @@ describe('RemoteMediaManager', () => {
         // This test starts with a layout that has 5 receiver selected video slots
         // and switches to a different layout that has fewer slots, but 2 of them match CSIs
         // from the initial layout. We want to verify that these 2 slots get re-used correctly.
+        // There are no screen share or audio slots being used in this test.
+        delete config.video.layouts.ScreenShareView;
         config.audio.numOfActiveSpeakerStreams = 0;
-        config.screenShare.audio = false;
-        config.screenShare.video = false;
+        config.audio.numOfScreenShareStreams = 0;
         config.video.initialLayoutId = 'biggerLayout';
         config.video.layouts['biggerLayout'] = {
-          screenShareVideo: {size: null},
           memberVideoPanes: [
             {id: '1', size: 'best', csi: 100},
             {id: '2', size: 'best', csi: 200},
@@ -609,7 +1160,6 @@ describe('RemoteMediaManager', () => {
           ],
         };
         config.video.layouts['smallerLayout'] = {
-          screenShareVideo: {size: null},
           memberVideoPanes: [
             {id: '1', size: 'medium', csi: 200}, // this csi matches pane '2' from biggerLayout
             {id: '2', size: 'medium', csi: 123},
@@ -659,16 +1209,15 @@ describe('RemoteMediaManager', () => {
         // This test starts with a layout that has video slot with a specific CSI
         // and switches to a different layout that 2 panes with that same CSI.
         // We want to verify that the slot gets reused, but also that a 2nd slot is allocated.
+        // There are no screen share or audio slots being used in this test.
+        delete config.video.layouts.ScreenShareView;
         config.audio.numOfActiveSpeakerStreams = 0;
-        config.screenShare.audio = false;
-        config.screenShare.video = false;
+        config.audio.numOfScreenShareStreams = 0;
         config.video.initialLayoutId = 'initialEmptyLayout';
         config.video.layouts['initialEmptyLayout'] = {
-          screenShareVideo: {size: null},
           memberVideoPanes: [{id: '2', size: 'medium', csi: 456}],
         };
         config.video.layouts['layoutWithDuplicateCSIs'] = {
-          screenShareVideo: {size: null},
           memberVideoPanes: [
             {id: '1', size: 'medium', csi: 123},
             {id: '2', size: 'medium', csi: 456},
@@ -841,16 +1390,18 @@ describe('RemoteMediaManager', () => {
       });
 
       it('cancels all media requests for the previous layout when switching to a new one', async () => {
+        // setup the initial layout to have screen share, active speaker groups and member video panes
         const config: Configuration = {
           audio: {
             numOfActiveSpeakerStreams: 0,
+            numOfScreenShareStreams: 0,
           },
           video: {
             preferLiveVideo: true,
             initialLayoutId: 'initial',
             layouts: {
               initial: {
-                screenShareVideo: {size: null},
+                screenShareVideo: {size: 'best'},
                 activeSpeakerVideoPaneGroups: [
                   {
                     id: 'big',
@@ -870,15 +1421,9 @@ describe('RemoteMediaManager', () => {
                   {id: 'pane 2', size: 'best', csi: 234},
                 ],
               },
-              other: {
-                screenShareVideo: {size: null},
-              },
+              other: {},
             },
           },
-          screenShare: {
-            audio: false,
-            video: false,
-          },
         };
 
         remoteMediaManager = new RemoteMediaManager(
@@ -901,9 +1446,15 @@ describe('RemoteMediaManager', () => {
 
           return `receiver selected request ${receiverSelectedRequestCounter}`;
         });
+        // setup the mock for screen share addRequest - this one should be called just once
+        fakeMediaRequestManagers.screenShareVideo.addRequest.callsFake(() => {
+          return 'video screen share request id';
+        });
 
         await remoteMediaManager.start();
 
+        assert.calledOnce(fakeMediaRequestManagers.screenShareVideo.addRequest);
+
         resetHistory();
 
         // switch to "other" layout
@@ -921,11 +1472,45 @@ describe('RemoteMediaManager', () => {
           fakeMediaRequestManagers.video.cancelRequest,
           'receiver selected request 2'
         );
+        assert.calledOnce(fakeMediaRequestManagers.screenShareVideo.cancelRequest);
+        assert.calledWith(
+          fakeMediaRequestManagers.screenShareVideo.cancelRequest,
+          'video screen share request id'
+        );
 
         // new layout has no videos, so no new requests should be sent out
-        // check that 2 correct active speaker media requests were sent out
         assert.callCount(fakeMediaRequestManagers.video.addRequest, 0);
       });
+
+      it('sends media request for screen share if layout contains screen share', async () => {
+        const allEqualMediaRequestId = 'fake request id';
+
+        fakeMediaRequestManagers.video.addRequest.returns(allEqualMediaRequestId);
+
+        await remoteMediaManager.start();
+
+        resetHistory();
+
+        // switch to a layout that contains a screen share video pane
+        await remoteMediaManager.setLayout('ScreenShareView');
+
+        // check that a correct active speaker media request for screen share has been sent out
+        assert.callCount(fakeMediaRequestManagers.screenShareVideo.addRequest, 1);
+        assert.calledWith(
+          fakeMediaRequestManagers.screenShareVideo.addRequest,
+          sinon.match({
+            policyInfo: sinon.match({
+              policy: 'active-speaker',
+              priority: 255,
+            }),
+            receiveSlots: [fakeScreenShareVideoSlot],
+            codecInfo: sinon.match({
+              codec: 'h264',
+              maxFs: 3600,
+            }),
+          })
+        );
+      });
     });
   });
 
@@ -1065,7 +1650,7 @@ describe('RemoteMediaManager', () => {
 
       // new slot should be allocated
       assert.calledOnce(fakeReceiveSlotManager.allocateSlot);
-      assert.calledWith(fakeReceiveSlotManager.allocateSlot, MC.MediaType.VideoMain);
+      assert.calledWith(fakeReceiveSlotManager.allocateSlot, MediaType.VideoMain);
 
       // and a media request sent out
       assert.calledOnce(fakeMediaRequestManagers.video.addRequest);
@@ -1094,7 +1679,7 @@ describe('RemoteMediaManager', () => {
 
       // new slot should be allocated
       assert.calledOnce(fakeReceiveSlotManager.allocateSlot);
-      assert.calledWith(fakeReceiveSlotManager.allocateSlot, MC.MediaType.VideoMain);
+      assert.calledWith(fakeReceiveSlotManager.allocateSlot, MediaType.VideoMain);
 
       // but no media requests sent out
       assert.notCalled(fakeMediaRequestManagers.video.addRequest);
@@ -1123,7 +1708,7 @@ describe('RemoteMediaManager', () => {
       await remoteMediaManager.start();
       await remoteMediaManager.setLayout('Stage');
 
-      const fakeNewSlot = new FakeSlot(MC.MediaType.VideoMain, 'fake video slot');
+      const fakeNewSlot = new FakeSlot(MediaType.VideoMain, 'fake video slot');
       const fakeRequestId = 'fake request id';
 
       fakeReceiveSlotManager.allocateSlot.resolves(fakeNewSlot);
@@ -1147,6 +1732,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;