Respond to suggestions from code review

src/state/CallViewModel.ts

@@ -126,9 +126,9 @@ export type GridMode = "grid" | "spotlight";
 export type WindowMode = "normal" | "full screen" | "pip";
 
 /**
- * Sorting bins defining the order in which media tiles appear in the grid.
+ * Sorting bins defining the order in which media tiles appear in the layout.
  */
-enum GridBin {
+enum SortingBin {
   SelfStart,
   Presenters,
   Speakers,
@@ -235,7 +235,8 @@ export class CallViewModel extends ViewModel {
 
   // Lists of participants to "hold" on display, even if LiveKit claims that
   // they've left
-  private readonly remoteParticipantHolds = zip(
+  private readonly remoteParticipantHolds: Observable<RemoteParticipant[][]> =
+    zip(
       this.connectionState,
       this.rawRemoteParticipants.pipe(sample(this.connectionState)),
       (s, ps) => {
@@ -282,7 +283,8 @@ export class CallViewModel extends ViewModel {
       startWith([]),
     );
 
-  private readonly remoteParticipants = combineLatest(
+  private readonly remoteParticipants: Observable<RemoteParticipant[]> =
+    combineLatest(
       [this.rawRemoteParticipants, this.remoteParticipantHolds],
       (raw, holds) => {
         const result = [...raw];
@@ -302,7 +304,7 @@ export class CallViewModel extends ViewModel {
       },
     );
 
-  private readonly mediaItems = state(
+  private readonly mediaItems: StateObservable<MediaItem[]> = state(
     combineLatest([
       this.remoteParticipants,
       observeParticipantMedia(this.livekitRoom.localParticipant),
@@ -362,15 +364,17 @@ export class CallViewModel extends ViewModel {
     ),
   );
 
-  private readonly userMedia = this.mediaItems.pipe(
+  private readonly userMedia: Observable<UserMedia[]> = this.mediaItems.pipe(
     map((ms) => ms.filter((m): m is UserMedia => m instanceof UserMedia)),
   );
 
-  private readonly screenShares = this.mediaItems.pipe(
+  private readonly screenShares: Observable<ScreenShare[]> =
+    this.mediaItems.pipe(
       map((ms) => ms.filter((m): m is ScreenShare => m instanceof ScreenShare)),
     );
 
-  private readonly spotlightSpeaker = this.userMedia.pipe(
+  private readonly spotlightSpeaker: Observable<UserMedia | null> =
+    this.userMedia.pipe(
       switchMap((ms) =>
         ms.length === 0
           ? of([])
@@ -397,28 +401,22 @@ export class CallViewModel extends ViewModel {
       throttleTime(800, undefined, { leading: true, trailing: true }),
     );
 
-  private readonly grid = this.userMedia.pipe(
+  private readonly grid: Observable<UserMediaViewModel[]> = this.userMedia.pipe(
     switchMap((ms) => {
       const bins = ms.map((m) =>
         combineLatest(
           [m.speaker, m.presenter, m.vm.audioEnabled, m.vm.videoEnabled],
-          (speaker, presenter, audio, video) =>
-            [
-              m,
-              m.vm.local
-                ? GridBin.SelfStart
-                : presenter
-                  ? GridBin.Presenters
-                  : speaker
-                    ? GridBin.Speakers
-                    : video
-                      ? audio
-                        ? GridBin.VideoAndAudio
-                        : GridBin.Video
-                      : audio
-                        ? GridBin.Audio
-                        : GridBin.NoMedia,
-            ] as const,
+          (speaker, presenter, audio, video) => {
+            let bin: SortingBin;
+            if (m.vm.local) bin = SortingBin.SelfStart;
+            else if (presenter) bin = SortingBin.Presenters;
+            else if (speaker) bin = SortingBin.Speakers;
+            else if (video)
+              bin = audio ? SortingBin.VideoAndAudio : SortingBin.Video;
+            else bin = audio ? SortingBin.Audio : SortingBin.NoMedia;
+
+            return [m, bin] as const;
+          },
         ),
       );
       // Sort the media by bin order and generate a tile for each one
@@ -430,7 +428,7 @@ export class CallViewModel extends ViewModel {
     }),
   );
 
-  private readonly spotlight = combineLatest(
+  private readonly spotlight: Observable<MediaViewModel[]> = combineLatest(
     [this.screenShares, this.spotlightSpeaker],
     (screenShares, spotlightSpeaker): MediaViewModel[] =>
       screenShares.length > 0
@@ -440,6 +438,10 @@ export class CallViewModel extends ViewModel {
           : [spotlightSpeaker.vm],
   );
 
+  // TODO: Make this react to changes in window dimensions and screen
+  // orientation
+  private readonly windowMode = of<WindowMode>("normal");
+
   private readonly _gridMode = new BehaviorSubject<GridMode>("grid");
   /**
    * The layout mode of the media tile grid.
@@ -450,10 +452,6 @@ export class CallViewModel extends ViewModel {
     this._gridMode.next(value);
   }
 
-  // TODO: Make this react to changes in window dimensions and screen
-  // orientation
-  private readonly windowMode = of<WindowMode>("normal");
-
   public readonly layout: StateObservable<Layout> = state(
     combineLatest([this._gridMode, this.windowMode], (gridMode, windowMode) => {
       switch (windowMode) {
@@ -492,7 +490,8 @@ export class CallViewModel extends ViewModel {
    */
   // TODO: Get rid of this field, replacing it with the 'layout' field above
   // which keeps more details of the layout order internal to the view model
-  public readonly tiles = state(
+  public readonly tiles: StateObservable<TileDescriptor<MediaViewModel>[]> =
+    state(
       combineLatest([
         this.remoteParticipants,
         observeParticipantMedia(this.livekitRoom.localParticipant),