Make layout reactivity a little more fine-grained

src/state/CallViewModel.ts

@@ -45,7 +45,6 @@ import {
   scan,
   shareReplay,
   startWith,
-  switchAll,
   switchMap,
   throttleTime,
   timer,
@@ -488,22 +487,24 @@ export class CallViewModel extends ViewModel {
     this.gridModeUserSelection.next(value);
   }
 
-  public readonly layout: Observable<Layout> = combineLatest(
+  public readonly layout: Observable<Layout> = this.windowMode.pipe(
-    [this.gridMode, this.windowMode],
+    switchMap((windowMode) => {
-    (gridMode, windowMode) => {
       switch (windowMode) {
         case "full screen":
           throw new Error("unimplemented");
         case "pip":
           throw new Error("unimplemented");
-        case "normal": {
+        case "normal":
+          return this.gridMode.pipe(
+            switchMap((gridMode) => {
               switch (gridMode) {
                 case "grid":
                   return combineLatest(
                     [this.grid, this.spotlight, this.screenShares],
                     (grid, spotlight, screenShares): Layout => ({
                       type: "grid",
-                  spotlight: screenShares.length > 0 ? spotlight : undefined,
+                      spotlight:
+                        screenShares.length > 0 ? spotlight : undefined,
                       grid,
                     }),
                   );
@@ -517,10 +518,12 @@ export class CallViewModel extends ViewModel {
                     }),
                   );
               }
+            }),
+          );
       }
-      }
+    }),
-    },
+    shareReplay(1),
-  ).pipe(switchAll(), shareReplay(1));
+  );
 
   /**
    * The media tiles to be displayed in the call view.