simplifications docs and tests

src/components/CallFooter.stories.tsx

@@ -13,7 +13,7 @@ import { Link } from "@vector-im/compound-web";
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import { CallFooter, type FooterSnapshot } from "./CallFooter";
 import inCallViewStyles from "../room/InCallView.module.css";
-import { createMockedViewModel } from "../state/ViewModel";
+import { createStaticViewModel } from "../state/ViewModel";
 import { ReactionsSenderContext } from "../reactions/useReactionsSender";
 import { type ReactionOption } from "../reactions";
 import { type GridMode } from "../state/CallViewModel/CallViewModel";
@@ -38,7 +38,7 @@ function CallFooterStoryWrapper({
 }: FooterSnapshot & {
   children?: false | JSX.Element | JSX.Element[] | undefined;
 }): ReactNode {
-  const vm = createMockedViewModel(vmSnapshot);
+  const vm = createStaticViewModel(vmSnapshot);
   return (
     <div className={inCallViewStyles.inRoom}>
       <ReactionsSenderContext
@@ -70,6 +70,7 @@ const fnArgType = {
 export const Default: Story = {
   args: {
     showLogo: false,
+    showSettingsButton: true,
     layoutMode: "grid",
     audioEnabled: true,
     videoEnabled: true,

src/components/CallFooter.tsx

@@ -59,7 +59,6 @@ export interface FooterSnapshot {
   buttonSize: "md" | "lg";
   showSettingsButton?: boolean;
   showLayoutSwitcher?: boolean;
-  showLogoDebugContainer?: boolean;
   showLogo?: boolean;
 
   layoutMode?: GridMode;
@@ -127,7 +126,6 @@ export const CallFooter: FC<FooterProps> = ({ ref, children, vm }) => {
     videoToggles,
     buttonSize,
     showSettingsButton,
-    showLogoDebugContainer,
     showLogo,
   } = useViewModel(vm);
 
@@ -285,10 +283,10 @@ export const CallFooter: FC<FooterProps> = ({ ref, children, vm }) => {
           />
         )}
         {children}
-        {showLogoDebugContainer && logoDebugContainer}
+        {(showLogo || debugTileLayout) && logoDebugContainer}
       </div>
       {!hideControls && <div className={styles.buttons}>{buttons}</div>}
-      {setLayoutMode && layoutMode && (
+      {!hideControls && setLayoutMode && layoutMode && (
         <Switch<"spotlight", "grid">
           name="layoutMode"
           aria-label={t("layout_switch_label")}

src/components/CallFooterViewModel.test.ts

@@ -104,30 +104,30 @@ describe("createCallFooterViewModel", () => {
     }
     it("are empty when both the platform is iOS", () => {
       checkEmptyFor("ios", gridLayout);
-      it("are empty when both the layout is pip", () => {
-        checkEmptyFor("desktop", pipLayout);
-      });
+    });
+    it("are empty when both the layout is pip", () => {
+      checkEmptyFor("desktop", pipLayout);
+    });
 
-      it("are populated when the platform is desktop and the layout is not PiP", () => {
-        platformMock.mockReturnValue("desktop");
+    it("are populated when the platform is desktop and the layout is not PiP", () => {
+      platformMock.mockReturnValue("desktop");
 
-        const vm = createCallFooterViewModel(
-          testScope(),
-          buildMinimalCallViewModel(gridLayout),
-          mockMuteStates(),
-          twoMicsAndOneCamMediaDevices,
-          /* openSettings */ undefined,
-          /* reactionIdentifier */ undefined,
-        );
+      const vm = createCallFooterViewModel(
+        testScope(),
+        buildMinimalCallViewModel(gridLayout),
+        mockMuteStates(),
+        twoMicsAndOneCamMediaDevices,
+        /* openSettings */ undefined,
+        /* reactionIdentifier */ undefined,
+      );
 
-        expect(vm.audioOptions$?.value).toEqual([
-          { id: "mic1", label: "Microphone 1" },
-          { id: "mic2", label: "Microphone 2" },
-        ]);
-        expect(vm.videoOptions$?.value).toEqual([
-          { id: "cam1", label: "Camera 1" },
-        ]);
-      });
+      expect(vm.audioOptions$?.value).toEqual([
+        { id: "mic1", label: "Microphone 1" },
+        { id: "mic2", label: "Microphone 2" },
+      ]);
+      expect(vm.videoOptions$?.value).toEqual([
+        { id: "cam1", label: "Camera 1" },
+      ]);
     });
   });
 });

src/components/CallFooterViewModel.tsx

@@ -22,7 +22,7 @@ import {
 import { type Behavior, constant } from "../state/Behavior";
 import type { ObservableScope } from "../state/ObservableScope";
 import { type MuteStates } from "../state/MuteStates";
-import { type ViewModel } from "../state/ViewModel";
+import { createStaticViewModel, type ViewModel } from "../state/ViewModel";
 import { getUrlParams, HeaderStyle } from "../UrlParams";
 import { platform } from "../Platform";
 import { type FooterSnapshot } from "./CallFooter";
@@ -173,8 +173,8 @@ export function createCallFooterViewModel(
   reactionIdentifier: string | undefined,
 ): ViewModel<FooterSnapshot> {
   const { showControls, header: headerStyle } = getUrlParams();
+  const showLogo = headerStyle === HeaderStyle.Standard;
 
-  const hideLogo = headerStyle !== HeaderStyle.Standard;
   const isPip$ = scope.behavior(
     callModel.layout$.pipe(map((l) => l.type === "pip")),
   );
@@ -206,12 +206,7 @@ export function createCallFooterViewModel(
     showLayoutSwitcher$: scope.behavior(
       isPip$.pipe(map((l) => !isPip$ && showControls)),
     ),
-    showLogoDebugContainer$: scope.behavior(
-      combineLatest([isPip$, debugTileLayoutSetting.value$]).pipe(
-        map(([isPip, debugTile]) => !isPip || (!hideLogo && !debugTile)),
-      ),
-    ),
-    showLogo$: scope.behavior(isPip$.pipe(map((l) => !hideLogo && !isPip$))),
+    showLogo$: scope.behavior(isPip$.pipe(map((isPip) => showLogo && !isPip))),
 
     layoutMode$: callModel.gridMode$,
     setLayoutMode$: constant(callModel.setGridMode),
@@ -272,31 +267,22 @@ export function createLobbyFooterViewModel(
   showLogo: boolean,
 ): ViewModel<FooterSnapshot> {
   return {
+    ...createStaticViewModel({
+      // we can safly skip any props that we do not need.
+      // The view model will then have less keys.
+      // But as soon as we call `useViewModel` and convert back to a snapshot the missing props will
+      // be correcty matching the snapshot type.
+      showLogo,
+      hideControls: false,
+      asOverlay: false,
+      buttonSize: "lg",
+      showLayoutSwitcher: false,
+      openSettings,
+      hangup,
+      debugTileLayout: false,
+      showSettingsButton: openSettings !== undefined,
+    }),
     ...buildMuteBehaviors(scope, muteStates),
     ...buildDeviceBehaviors(scope, mediaDevices, constant(false)),
-    hideControls$: constant(false),
-    asOverlay$: constant(false),
-    buttonSize$: constant("lg"),
-    showSettingsButton$: constant(openSettings !== undefined),
-    showLayoutSwitcher$: constant(false),
-    showLogoDebugContainer$: constant(showLogo),
-    showLogo$: constant(showLogo),
-
-    layoutMode$: constant(undefined),
-    setLayoutMode$: constant(undefined),
-
-    sharingScreen$: constant(undefined),
-    toggleScreenSharing$: constant(undefined),
-
-    audioOutputSwitcher$: constant(undefined),
-
-    openSettings$: constant(openSettings),
-    hangup$: constant(hangup),
-
-    reactionIdentifier$: constant(undefined),
-    reactionData$: constant(undefined),
-
-    debugTileLayout$: constant(false),
-    tileStoreGeneration$: constant(0),
   };
 }