From 942e28f3c28d83877780f1e31d353e297559ab1f Mon Sep 17 00:00:00 2001
From: Robin <robin@robin.town>
Date: Thu, 25 Jul 2024 17:52:23 -0400
Subject: [PATCH] Improve the layouts on small mobile calls

Due to an oversight of mine, 244003763953db033b5e5350142b3f00b7c8910a actually removed the ability to see the one-on-one layout on mobile. This restores mobile one-on-one calls to working order and also avoids showing the spotlight tile unless there are more than a few participants.
---
 src/state/CallViewModel.ts | 20 +++++++++++++++++++-
 1 file changed, 19 insertions(+), 1 deletion(-)

diff --git a/src/state/CallViewModel.ts b/src/state/CallViewModel.ts
index 764b4d46..982df404 100644
--- a/src/state/CallViewModel.ts
+++ b/src/state/CallViewModel.ts
@@ -46,6 +46,7 @@ import {
   shareReplay,
   skip,
   startWith,
+  switchAll,
   switchMap,
   throttleTime,
   timer,
@@ -75,6 +76,10 @@ import { duplicateTiles } from "../settings/settings";
 // list again
 const POST_FOCUS_PARTICIPANT_UPDATE_DELAY_MS = 3000;
 
+// This is the number of participants that we think constitutes a "small" call
+// on mobile. No spotlight tile should be shown below this threshold.
+const smallMobileCallThreshold = 3;
+
 export interface GridLayout {
   type: "grid";
   spotlight?: MediaViewModel[];
@@ -638,7 +643,20 @@ export class CallViewModel extends ViewModel {
             }),
           );
         case "narrow":
-          return this.spotlightPortraitLayout;
+          return this.oneOnOne.pipe(
+            switchMap((oneOnOne) =>
+              oneOnOne
+                ? this.oneOnOneLayout
+                : combineLatest(
+                    [this.grid, this.spotlight],
+                    (grid, spotlight) =>
+                      grid.length > smallMobileCallThreshold ||
+                      spotlight.some((vm) => vm instanceof ScreenShareViewModel)
+                        ? this.spotlightPortraitLayout
+                        : this.gridLayout,
+                  ).pipe(switchAll()),
+            ),
+          );
         case "flat":
           return this.gridMode.pipe(
             switchMap((gridMode) => {