Merge branch 'livekit' into voip-team/rebased-multiSFU

src/state/CallViewModel.test.ts

@@ -204,7 +204,6 @@ function summarizeLayout$(l$: Observable<Layout>): Observable<LayoutSummary> {
               l.spotlight?.media$ ?? constant(undefined),
               ...l.grid.map((vm) => vm.media$),
             ],
-            // eslint-disable-next-line rxjs/finnish -- false positive
             (spotlight, ...grid) => ({
               type: l.type,
               spotlight: spotlight?.map((vm) => vm.id),
@@ -224,7 +223,6 @@ function summarizeLayout$(l$: Observable<Layout>): Observable<LayoutSummary> {
         case "spotlight-expanded":
           return combineLatest(
             [l.spotlight.media$, l.pip?.media$ ?? constant(undefined)],
-            // eslint-disable-next-line rxjs/finnish -- false positive
             (spotlight, pip) => ({
               type: l.type,
               spotlight: spotlight.map((vm) => vm.id),
@@ -785,6 +783,21 @@ test("spotlight speakers swap places", () => {
             },
           },
         );
+
+        // While we expect the media on tiles to change, layout$ itself should
+        // *never* meaningfully change. That is, we expect there to be no layout
+        // shifts as the spotlight speaker changes; instead, the same tiles
+        // should be reused for the whole duration of the test and simply have
+        // their media swapped out. This is meaningful for keeping the interface
+        // not too visually distracting during back-and-forth conversations,
+        // while still animating tiles to express people joining, leaving, etc.
+        expectObservable(
+          vm.layout$.pipe(
+            distinctUntilChanged(deepCompare),
+            debounceTime(0),
+            map(() => "x"),
+          ),
+        ).toBe("x"); // Expect just one emission
       },
     );
   });
@@ -827,6 +840,84 @@ test("layout enters picture-in-picture mode when requested", () => {
   });
 });
 
+test("PiP tile in expanded spotlight layout switches speakers without layout shifts", () => {
+  withTestScheduler(({ behavior, schedule, expectObservable }) => {
+    // Switch to spotlight immediately
+    const modeInputMarbles = "     s";
+    // And expand the spotlight immediately
+    const expandInputMarbles = "   a";
+    // First Bob speaks, then Dave, then Bob again
+    const bSpeakingInputMarbles = "n-yn--yn";
+    const dSpeakingInputMarbles = "n---yn";
+    // Should show Alice (presenter) in the PiP, then Bob, then Dave, then Bob
+    // again
+    const expectedLayoutMarbles = "a-b-c-b";
+
+    withCallViewModel(
+      {
+        remoteParticipants$: constant([
+          aliceSharingScreen,
+          bobParticipant,
+          daveParticipant,
+        ]),
+        rtcMembers$: constant([
+          localRtcMember,
+          aliceRtcMember,
+          bobRtcMember,
+          daveRtcMember,
+        ]),
+        speaking: new Map([
+          [bobParticipant, behavior(bSpeakingInputMarbles, yesNo)],
+          [daveParticipant, behavior(dSpeakingInputMarbles, yesNo)],
+        ]),
+      },
+      (vm) => {
+        schedule(modeInputMarbles, {
+          s: () => vm.setGridMode("spotlight"),
+        });
+        schedule(expandInputMarbles, {
+          a: () => vm.toggleSpotlightExpanded$.value!(),
+        });
+
+        expectObservable(summarizeLayout$(vm.layout$)).toBe(
+          expectedLayoutMarbles,
+          {
+            a: {
+              type: "spotlight-expanded",
+              spotlight: [`${aliceId}:0:screen-share`],
+              pip: `${aliceId}:0`,
+            },
+            b: {
+              type: "spotlight-expanded",
+              spotlight: [`${aliceId}:0:screen-share`],
+              pip: `${bobId}:0`,
+            },
+            c: {
+              type: "spotlight-expanded",
+              spotlight: [`${aliceId}:0:screen-share`],
+              pip: `${daveId}:0`,
+            },
+          },
+        );
+
+        // While we expect the media on the PiP tile to change, layout$ itself
+        // should *never* meaningfully change. That is, we expect the same PiP
+        // tile to exist throughout the test and just have its media swapped out
+        // when the speaker changes, rather than for tiles to animate in/out.
+        // This is meaningful for keeping the interface not too visually
+        // distracting during back-and-forth conversations.
+        expectObservable(
+          vm.layout$.pipe(
+            distinctUntilChanged(deepCompare),
+            debounceTime(0),
+            map(() => "x"),
+          ),
+        ).toBe("x"); // Expect just one emission
+      },
+    );
+  });
+});
+
 test("spotlight remembers whether it's expanded", () => {
   withTestScheduler(({ schedule, expectObservable }) => {
     // Start in spotlight mode, then switch to grid and back to spotlight a
@@ -849,11 +940,7 @@ test("spotlight remembers whether it's expanded", () => {
           g: () => vm.setGridMode("grid"),
         });
         schedule(expandInputMarbles, {
-          a: () => {
-            let toggle: () => void;
-            vm.toggleSpotlightExpanded$.subscribe((val) => (toggle = val!));
-            toggle!();
-          },
+          a: () => vm.toggleSpotlightExpanded$.value!(),
         });
 
         expectObservable(summarizeLayout$(vm.layout$)).toBe(