From 183d2d9050ad9cac4ffc48588253c20ae8cd4158 Mon Sep 17 00:00:00 2001 From: Robin Date: Fri, 7 Jun 2024 11:48:58 -0400 Subject: [PATCH 1/2] Show speaker in the spotlight in large grids --- src/state/CallViewModel.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/state/CallViewModel.ts b/src/state/CallViewModel.ts index 31a1fdb3..3d48da22 100644 --- a/src/state/CallViewModel.ts +++ b/src/state/CallViewModel.ts @@ -504,7 +504,9 @@ export class CallViewModel extends ViewModel { (grid, spotlight, screenShares): Layout => ({ type: "grid", spotlight: - screenShares.length > 0 ? spotlight : undefined, + screenShares.length > 0 || grid.length > 20 + ? spotlight + : undefined, grid, }), ); From e04affe93e7e40a82fc47dcc321f95492d66dbb4 Mon Sep 17 00:00:00 2001 From: Robin Date: Thu, 18 Jul 2024 10:00:26 -0400 Subject: [PATCH 2/2] Justify the use of a participant count threshold --- src/state/CallViewModel.ts | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/src/state/CallViewModel.ts b/src/state/CallViewModel.ts index 3d48da22..c3d038df 100644 --- a/src/state/CallViewModel.ts +++ b/src/state/CallViewModel.ts @@ -74,6 +74,13 @@ import { ObservableScope } from "./ObservableScope"; // list again const POST_FOCUS_PARTICIPANT_UPDATE_DELAY_MS = 3000; +// This is the number of participants that we think constitutes a "large" grid. +// The hypothesis is that, after this many participants there's enough cognitive +// load that it makes sense to show the speaker in an easy-to-locate spotlight +// tile. We might change this to a scroll-based condition or do something else +// entirely with the spotlight tile, if we workshop this further. +const largeGridThreshold = 20; + // Represents something that should get a tile on the layout, // ie. a user's video feed or a screen share feed. // TODO: This exposes too much information to the view layer, let's keep this @@ -504,7 +511,8 @@ export class CallViewModel extends ViewModel { (grid, spotlight, screenShares): Layout => ({ type: "grid", spotlight: - screenShares.length > 0 || grid.length > 20 + screenShares.length > 0 || + grid.length > largeGridThreshold ? spotlight : undefined, grid,