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,39 +487,43 @@ 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":
-          switch (gridMode) {
+          return this.gridMode.pipe(
-            case "grid":
+            switchMap((gridMode) => {
-              return combineLatest(
+              switch (gridMode) {
-                [this.grid, this.spotlight, this.screenShares],
+                case "grid":
-                (grid, spotlight, screenShares): Layout => ({
+                  return combineLatest(
-                  type: "grid",
+                    [this.grid, this.spotlight, this.screenShares],
-                  spotlight: screenShares.length > 0 ? spotlight : undefined,
+                    (grid, spotlight, screenShares): Layout => ({
-                  grid,
+                      type: "grid",
-                }),
+                      spotlight:
-              );
+                        screenShares.length > 0 ? spotlight : undefined,
-            case "spotlight":
+                      grid,
-              return combineLatest(
+                    }),
-                [this.grid, this.spotlight],
+                  );
-                (grid, spotlight): Layout => ({
+                case "spotlight":
-                  type: "spotlight",
+                  return combineLatest(
-                  spotlight,
+                    [this.grid, this.spotlight],
-                  grid,
+                    (grid, spotlight): Layout => ({
-                }),
+                      type: "spotlight",
-              );
+                      spotlight,
-          }
+                      grid,
-        }
+                    }),
+                  );
+              }
+            }),
+          );
       }
-    },
+    }),
-  ).pipe(switchAll(), shareReplay(1));
+    shareReplay(1),
+  );
 
   /**
    * The media tiles to be displayed in the call view.