Avoid duplicating the video of someone in the spotlight

We've gotten feedback that it's distracting whenever the same video is shown in two places on screen. This fixes the spotlight case by showing only the avatar of anyone who is already visible in the spotlight. It also makes sense to hide the speaking indicators in spotlight layouts, I think, because this information is redundant to the spotlight tile.

src/room/InCallView.tsx

@@ -35,7 +35,7 @@ import {
 import useMeasure from "react-use-measure";
 import { MatrixRTCSession } from "matrix-js-sdk/src/matrixrtc/MatrixRTCSession";
 import classNames from "classnames";
-import { BehaviorSubject } from "rxjs";
+import { BehaviorSubject, of } from "rxjs";
 import { useObservableEagerState } from "observable-hooks";
 
 import LogoMark from "../icons/LogoMark.svg?react";
@@ -298,6 +298,13 @@ export const InCallView: FC<InCallViewProps> = ({
         const onToggleExpanded = useObservableEagerState(
           vm.toggleSpotlightExpanded,
         );
+        const showVideo = useObservableEagerState(
+          useMemo(
+            () =>
+              model.type === "grid" ? vm.showGridVideo(model.vm) : of(true),
+            [model],
+          ),
+        );
         const showSpeakingIndicatorsValue = useObservableEagerState(
           vm.showSpeakingIndicators,
         );
@@ -314,6 +321,7 @@ export const InCallView: FC<InCallViewProps> = ({
             targetHeight={targetHeight}
             className={classNames(className, styles.tile)}
             style={style}
+            showVideo={showVideo}
             showSpeakingIndicators={showSpeakingIndicatorsValue}
           />
         ) : (

src/state/CallViewModel.ts

@@ -691,8 +691,27 @@ export class CallViewModel extends ViewModel {
     shareReplay(1),
   );
 
+  /**
+   * Determines whether video should be shown for a certain piece of media
+   * appearing in the grid.
+   */
+  public showGridVideo(vm: MediaViewModel): Observable<boolean> {
+    return this.layout.pipe(
+      map(
+        (l) =>
+          !(
+            (l.type === "spotlight-landscape" ||
+              l.type === "spotlight-portrait") &&
+            // This media is already visible in the spotlight; avoid duplication
+            l.spotlight.some((spotlightVm) => spotlightVm === vm)
+          ),
+      ),
+      distinctUntilChanged(),
+    );
+  }
+
   public showSpeakingIndicators: Observable<boolean> = this.layout.pipe(
-    map((l) => l.type !== "one-on-one" && l.type !== "spotlight-expanded"),
+    map((l) => l.type !== "one-on-one" && !l.type.startsWith("spotlight-")),
     distinctUntilChanged(),
     shareReplay(1),
   );

src/tile/GridTile.tsx

@@ -60,6 +60,7 @@ interface TileProps {
   targetWidth: number;
   targetHeight: number;
   displayName: string;
+  showVideo: boolean;
   showSpeakingIndicators: boolean;
 }
 
@@ -74,6 +75,7 @@ const UserMediaTile = forwardRef<HTMLDivElement, UserMediaTileProps>(
   (
     {
       vm,
+      showVideo,
       showSpeakingIndicators,
       menuStart,
       menuEnd,
@@ -120,7 +122,7 @@ const UserMediaTile = forwardRef<HTMLDivElement, UserMediaTileProps>(
         video={video}
         member={vm.member}
         unencryptedWarning={unencryptedWarning}
-        videoEnabled={videoEnabled}
+        videoEnabled={videoEnabled && showVideo}
         videoFit={cropVideo ? "cover" : "contain"}
         className={classNames(className, styles.tile, {
           [styles.speaking]: showSpeakingIndicators && speaking,
@@ -279,6 +281,7 @@ interface GridTileProps {
   targetHeight: number;
   className?: string;
   style?: ComponentProps<typeof animated.div>["style"];
+  showVideo: boolean;
   showSpeakingIndicators: boolean;
 }