Merge pull request #4129 from element-hq/landscape-default-grid

Prefer grid mode in landscape on mobile

src/state/CallViewModel/CallViewModel.test.ts

@@ -568,14 +568,14 @@ describe.each([
                 pipSize: "sm",
               },
               b: {
-                type: "spotlight-expanded",
+                type: "spotlight-landscape",
                 spotlight: [`${aliceId}:0:screen-share`],
-                pip: `${aliceId}:0`,
+                grid: [`${localId}:0`, `${aliceId}:0`],
               },
               c: {
-                type: "spotlight-expanded",
+                type: "spotlight-landscape",
                 spotlight: [`${aliceId}:0`],
-                pip: undefined,
+                grid: [`${localId}:0`, `${bobId}:0`],
               },
             },
           );

src/state/CallViewModel/LayoutSwitch.test.ts

@@ -39,15 +39,16 @@ function testLayoutSwitch({
 }
 
 describe("default mode", () => {
-  test("uses grid layout by default", () =>
+  test("uses grid layout in normal window", () =>
     testLayoutSwitch({
+      windowMode: "      n",
       expectedGridMode: "g",
     }));
 
-  test("uses spotlight mode when window mode is flat", () =>
+  test("uses grid layout in flat window", () =>
     testLayoutSwitch({
       windowMode: "      f",
-      expectedGridMode: "s",
+      expectedGridMode: "g",
     }));
 });
 
@@ -101,32 +102,25 @@ test("switches manually to grid after screen share while manually in spotlight",
     expectedGridMode: "gs-g",
   }));
 
-test("auto-switches to spotlight when in flat window mode", () =>
-  testLayoutSwitch({
-    // First normal, then narrow, then flat.
-    windowMode: "      nNf",
-    expectedGridMode: "g-s",
-  }));
-
 test("allows switching modes manually when in flat window mode", () =>
   testLayoutSwitch({
-    // Window becomes flat, then user switches to grid and back.
+    // Window becomes flat, then user switches to spotlight and back.
     // Finally the window returns to a normal shape.
     windowMode: "      nf--n",
-    userSelection: "   --gs",
-    expectedGridMode: "gsgsg",
+    userSelection: "   --sg",
+    expectedGridMode: "g-sg",
   }));
 
-test("stays in spotlight while there are screen shares even when window mode changes", () =>
+test("switches to grid when in flat window mode even when there are screen shares", () =>
   testLayoutSwitch({
-    windowMode: "      nfn",
+    windowMode: "      nf",
     hasScreenShares: " y",
-    expectedGridMode: "s",
+    expectedGridMode: "sg",
   }));
 
-test("ignores end of screen share until window mode returns to normal", () =>
+test("ignores screen share until window mode returns to normal", () =>
   testLayoutSwitch({
-    windowMode: "      nf-n",
-    hasScreenShares: " y-n",
-    expectedGridMode: "s--g",
+    windowMode: "      f-n",
+    hasScreenShares: " ny-n",
+    expectedGridMode: "g-sg",
   }));

src/state/CallViewModel/LayoutSwitch.ts

@@ -48,13 +48,15 @@ export function createLayoutModeSwitch(
   const naturalGridMode$ = scope.behavior<GridMode>(
     combineLatest(
       [hasRemoteScreenShares$, windowMode$],
-      (hasRemoteScreenShares, windowMode) =>
-        // When there are screen shares or the window is flat (as with a phone
-        // in landscape orientation), spotlight is a better experience.
-        // We want screen shares to be big and readable, and we want flipping
-        // your phone into landscape to be a quick way of maximising the
-        // spotlight tile.
-        hasRemoteScreenShares || windowMode === "flat" ? "spotlight" : "grid",
+      (hasRemoteScreenShares, windowMode) => {
+        // When the window is flat (as with a phone in landscape orientation),
+        // grid mode is preferable as there's usually more than enough
+        // horizontal space to fit in some grid tiles on the side.
+        if (windowMode === "flat") return "grid";
+        // When there are screen shares, spotlight is a better experience. We
+        // want them to be big and readable.
+        return hasRemoteScreenShares ? "spotlight" : "grid";
+      },
     ),
   );