Only show the expand button in spotlight layout (#2510)

It has no effect in any layout other than spotlight, and we've decided to hide it rather than spending effort to make it do something.

src/room/InCallView.tsx

@@ -285,11 +285,6 @@ export const InCallView: FC<InCallViewProps> = ({
     }
   }, [setGridMode]);
 
-  const toggleSpotlightExpanded = useCallback(
-    () => vm.toggleSpotlightExpanded(),
-    [vm],
-  );
-
   const Tile = useMemo(
     () =>
       forwardRef<
@@ -300,6 +295,9 @@ export const InCallView: FC<InCallViewProps> = ({
         ref,
       ) {
         const spotlightExpanded = useObservableEagerState(vm.spotlightExpanded);
+        const [onToggleExpanded] = useObservableEagerState(
+          vm.toggleSpotlightExpanded,
+        );
         const showSpeakingIndicatorsValue = useObservableEagerState(
           vm.showSpeakingIndicators,
         );
@@ -324,7 +322,7 @@ export const InCallView: FC<InCallViewProps> = ({
             vms={model.vms}
             maximised={model.maximised}
             expanded={spotlightExpanded}
-            onToggleExpanded={toggleSpotlightExpanded}
+            onToggleExpanded={onToggleExpanded}
             targetWidth={targetWidth}
             targetHeight={targetHeight}
             showIndicators={showSpotlightIndicatorsValue}
@@ -333,7 +331,7 @@ export const InCallView: FC<InCallViewProps> = ({
           />
         );
       }),
-    [vm, toggleSpotlightExpanded, openProfile],
+    [vm, openProfile],
   );
 
   const layouts = useMemo(() => {

src/state/CallViewModel.ts

@@ -526,10 +526,6 @@ export class CallViewModel extends ViewModel {
       shareReplay(1),
     );
 
-  public toggleSpotlightExpanded(): void {
-    this.spotlightExpandedToggle.next();
-  }
-
   private readonly gridModeUserSelection = new Subject<GridMode>();
   /**
    * The layout mode of the media tile grid.
@@ -665,6 +661,25 @@ export class CallViewModel extends ViewModel {
     shareReplay(1),
   );
 
+  // To work around https://github.com/crimx/observable-hooks/issues/131 we must
+  // wrap the emitted function here in a non-function wrapper type
+  public readonly toggleSpotlightExpanded: Observable<
+    readonly [(() => void) | null]
+  > = this.layout.pipe(
+    map(
+      (l) =>
+        l.type === "spotlight-landscape" || l.type === "spotlight-expanded",
+    ),
+    distinctUntilChanged(),
+    map(
+      (enabled) =>
+        [
+          enabled ? (): void => this.spotlightExpandedToggle.next() : null,
+        ] as const,
+    ),
+    shareReplay(1),
+  );
+
   public constructor(
     // A call is permanently tied to a single Matrix room and LiveKit room
     private readonly matrixRoom: MatrixRoom,