diff --git a/src/state/CallViewModel.ts b/src/state/CallViewModel.ts index 0d1019371..6538dd985 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[]; @@ -648,7 +653,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) => {