back

src/state/CallViewModel.ts

@@ -379,7 +379,6 @@ export class CallViewModel extends ViewModel {
   /**
    * The raw list of RemoteParticipants as reported by LiveKit
    */
-
   private readonly rawRemoteParticipants: Observable<RemoteParticipant[]> =
     connectedParticipantsObserver(this.livekitRoom).pipe(this.scope.state());
 
@@ -573,9 +572,8 @@ export class CallViewModel extends ViewModel {
       this.scope.state(),
     );
 
-  private readonly spotlightSpeaker: Observable<
-    UserMediaViewModel | undefined
-  > = this.userMedia.pipe(
+  private readonly spotlightSpeaker: Observable<UserMediaViewModel | null> =
+    this.userMedia.pipe(
       switchMap((mediaItems) =>
         mediaItems.length === 0
           ? of([])
@@ -606,7 +604,7 @@ export class CallViewModel extends ViewModel {
         },
         null,
       ),
-    map((speaker) => speaker?.vm),
+      map((speaker) => speaker?.vm ?? null),
       this.scope.state(),
     );
 
@@ -647,7 +645,7 @@ export class CallViewModel extends ViewModel {
   );
 
   private readonly spotlightAndPip: Observable<
-    [Observable<MediaViewModel[]>, Observable<UserMediaViewModel | undefined>]
+    [Observable<MediaViewModel[]>, Observable<UserMediaViewModel | null>]
   > = this.screenShares.pipe(
     map((screenShares) =>
       screenShares.length > 0
@@ -660,7 +658,7 @@ export class CallViewModel extends ViewModel {
               switchMap((speaker) =>
                 speaker
                   ? speaker.local
-                    ? of(undefined)
+                    ? of(null)
                     : this.mediaItems.pipe(
                         switchMap((mediaItems) => {
                           const localUserMedia = mediaItems.find(
@@ -671,11 +669,11 @@ export class CallViewModel extends ViewModel {
                               map((alwaysShow) =>
                                 alwaysShow ? localUserMedia : undefined,
                               ),
-                            ) ?? of(undefined)
+                            ) ?? of(null)
                           );
                         }),
                       )
-                  : of(undefined),
+                  : of(null),
               ),
             ),
           ] as const),
@@ -689,12 +687,14 @@ export class CallViewModel extends ViewModel {
     );
 
   private readonly hasRemoteScreenShares: Observable<boolean> =
-    this.screenShares.pipe(
-      map((ms) => ms.some((m) => !m.vm.local)),
+    this.spotlight.pipe(
+      map((spotlight) =>
+        spotlight.some((vm) => !vm.local && vm instanceof ScreenShareViewModel),
+      ),
       distinctUntilChanged(),
     );
 
-  private readonly pip: Observable<UserMediaViewModel | undefined> =
+  private readonly pip: Observable<UserMediaViewModel | null> =
     this.spotlightAndPip.pipe(switchMap(([, pip]) => pip));
 
   private readonly pipEnabled: Observable<boolean> = setPipEnabled.pipe(
@@ -780,8 +780,7 @@ export class CallViewModel extends ViewModel {
       type: "spotlight-landscape",
       spotlight,
       grid,
-    }),
-  );
+    }));
 
   private readonly spotlightPortraitLayoutMedia: Observable<SpotlightPortraitLayoutMedia> =
     combineLatest([this.grid, this.spotlight], (grid, spotlight) => ({