review

src/components/CallFooter.module.css

@@ -26,6 +26,10 @@ Please see LICENSE in the repository root for full details.
   );
 }
 
+.footer.hidden {
+  display: none;
+}
+
 .footer.overlay {
   /* Note that the footer is still position: sticky in this case so that certain
     tiles can move up out of the way of the footer when visible. */

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 { createStaticViewModel } from "../state/ViewModel";
+import { useStaticViewModel } from "../state/ViewModel";
 import { ReactionsSenderContext } from "../reactions/useReactionsSender";
 import { type ReactionOption } from "../reactions";
 import { type GridMode } from "../state/CallViewModel/CallViewModel";
@@ -39,7 +39,7 @@ function CallFooterStoryWrapper({
 }: FooterSnapshot & {
   children?: false | JSX.Element | JSX.Element[] | undefined;
 }): ReactNode {
-  const vm = createStaticViewModel(vmSnapshot);
+  const vm = useStaticViewModel(vmSnapshot);
   return (
     <div className={inCallViewStyles.inRoom}>
       <ReactionsSenderContext
@@ -82,6 +82,23 @@ export const Default: Story = {
     toggleScreenSharing: fn(),
     hangup: fn(),
     buttonSize: "lg",
+    showFooter: true,
+    hideControls: false,
+    asOverlay: false,
+    showLayoutSwitcher: false,
+    sharingScreen: false,
+    audioOutputSwitcher: undefined,
+    reactionIdentifier: undefined,
+    reactionData: undefined,
+    debugTileLayout: false,
+    tileStoreGeneration: undefined,
+    audioOptions: [],
+    videoOptions: [],
+    selectedAudio: undefined,
+    selectedVideo: undefined,
+    selectAudioButtonOption: undefined,
+    selectVideoButtonOption: undefined,
+    videoToggles: [],
   },
   parameters: {
     layout: "fullscreen",

src/components/CallFooter.tsx

@@ -34,63 +34,81 @@ import {
   type MenuOptions,
   type ToggleOption,
 } from "./MediaMuteAndSwitchButton";
-import { type ViewModel, useViewModel } from "../state/ViewModel";
+import { type ViewModel } from "../state/ViewModel";
+import { useBehavior } from "../useBehavior";
 
 export interface AudioOutputSwitcher {
   targetOutput: string;
   switch: () => void;
 }
 
-export interface FooterSnapshot {
-  audioEnabled: boolean;
+/**
+ * The Snapshot combines all fields required to populate the view.
+ *
+ * It is a combination of Actions and State.
+ * All Actions and State will be wrappen in behaviors.
+ * This has the advantage, that actions can mutate.
+ * (example: a device gets disconnected, the swicht action is not possible anymore, the actions becomes undefined)
+ * With it being reactive we can use the existance of the action to update the rendering without
+ * requiring additional state.
+ *
+ * Comment: It might not make sense to seperate the two interfaces. Hence the seperation
+ * just happens on the syntax level with the `type = ... & ...` notation.
+ */
+export type FooterSnapshot = FooterActions & FooterState;
+export interface FooterActions {
   /** Also controls if the audioMute button is disabled */
   toggleAudio: (() => void) | undefined;
-
-  videoEnabled: boolean;
   /** Also controls if the videoMute button is disabled */
   toggleVideo: (() => void) | undefined;
+  /** Also controls if the layout button is visible */
+  setLayoutMode: ((mode: GridMode) => void) | undefined;
+  toggleScreenSharing: (() => void) | undefined;
+  /** Also controls if the settings button is visible */
+  openSettings: (() => void) | undefined;
+  /** Also controls if the hangup button is visible */
+  hangup: (() => void) | undefined;
+}
+// we do not use any ? optional properties so that the vm type is including all fields.
+export interface FooterState {
+  audioEnabled: boolean;
+  videoEnabled: boolean;
+  showFooter: boolean;
 
   /* This is needed for WindowMode = "flat" */
-  hideControls?: boolean;
+  hideControls: boolean;
   /** The footer should be used as an overlay.
    * (Over the Call Grid) This saves spaces on small screens. */
-  asOverlay?: boolean;
+  asOverlay: boolean;
 
   buttonSize: "md" | "lg";
-  showSettingsButton?: boolean;
-  showLayoutSwitcher?: boolean;
-  showLogo?: boolean;
+  showSettingsButton: boolean;
+  showLayoutSwitcher: boolean;
+  showLogo: boolean;
 
-  layoutMode?: GridMode;
-  /** Also controls if the layout button is visible */
-  setLayoutMode?: (mode: GridMode) => void;
+  layoutMode: GridMode | undefined;
 
-  sharingScreen?: boolean;
-  toggleScreenSharing?: () => void;
+  sharingScreen: boolean;
 
   /** Also controls if the audio output button is visible */
-  audioOutputSwitcher?: AudioOutputSwitcher;
-  /** Also controls if the settings button is visible */
-  openSettings?: () => void;
-  /** Also controls if the hangup button is visible */
-  hangup?: () => void;
+  audioOutputSwitcher: AudioOutputSwitcher | undefined;
 
-  reactionIdentifier?: string;
-  reactionData?: ReactionData;
+  reactionIdentifier: string | undefined;
+  reactionData: ReactionData | undefined;
 
   // debug stuff
-  debugTileLayout?: boolean;
-  tileStoreGeneration?: number;
+  debugTileLayout: boolean;
+  tileStoreGeneration: number | undefined;
 
   /** Providing no options `[]` or `undefined` will imply that we dont have a audio fast switcher */
-  audioOptions?: MenuOptions[];
+  audioOptions: MenuOptions[];
   /** Providing no options `[]` or `undefined` will imply that we dont have a audio fast switcher */
-  videoOptions?: MenuOptions[];
-  selectedAudio?: string;
-  selectedVideo?: string;
-  selectAudioButtonOption?: (deviceId: string) => void;
-  selectVideoButtonOption?: (option: string) => void;
-  videoToggles?: ToggleOption[];
+  videoOptions: MenuOptions[];
+  selectedAudio: string | undefined;
+  selectedVideo: string | undefined;
+  selectAudioButtonOption: ((deviceId: string) => void) | undefined;
+  selectVideoButtonOption: ((option: string) => void) | undefined;
+  videoToggles: ToggleOption[];
 }
 
 export interface FooterProps {
@@ -99,35 +117,34 @@ export interface FooterProps {
   vm: ViewModel<FooterSnapshot>;
 }
 export const CallFooter: FC<FooterProps> = ({ ref, children, vm }) => {
-  const {
-    asOverlay,
-    hideControls,
-    layoutMode,
-    setLayoutMode,
-    openSettings,
-    audioEnabled,
-    videoEnabled,
-    toggleAudio,
-    toggleVideo,
-    sharingScreen,
-    toggleScreenSharing,
-    reactionIdentifier,
-    reactionData,
-    audioOutputSwitcher,
-    hangup,
-    debugTileLayout,
-    tileStoreGeneration,
-    videoOptions,
-    selectedVideo,
-    audioOptions,
-    selectedAudio,
-    selectAudioButtonOption,
-    selectVideoButtonOption,
-    videoToggles,
-    buttonSize,
-    showSettingsButton,
-    showLogo,
-  } = useViewModel(vm);
+  const asOverlay = useBehavior(vm.asOverlay$);
+  const showFooter = useBehavior(vm.showFooter$);
+  const hideControls = useBehavior(vm.hideControls$);
+  const layoutMode = useBehavior(vm.layoutMode$);
+  const setLayoutMode = useBehavior(vm.setLayoutMode$);
+  const openSettings = useBehavior(vm.openSettings$);
+  const audioEnabled = useBehavior(vm.audioEnabled$);
+  const videoEnabled = useBehavior(vm.videoEnabled$);
+  const toggleAudio = useBehavior(vm.toggleAudio$);
+  const toggleVideo = useBehavior(vm.toggleVideo$);
+  const sharingScreen = useBehavior(vm.sharingScreen$);
+  const toggleScreenSharing = useBehavior(vm.toggleScreenSharing$);
+  const reactionIdentifier = useBehavior(vm.reactionIdentifier$);
+  const reactionData = useBehavior(vm.reactionData$);
+  const audioOutputSwitcher = useBehavior(vm.audioOutputSwitcher$);
+  const hangup = useBehavior(vm.hangup$);
+  const debugTileLayout = useBehavior(vm.debugTileLayout$);
+  const tileStoreGeneration = useBehavior(vm.tileStoreGeneration$);
+  const videoOptions = useBehavior(vm.videoOptions$);
+  const selectedVideo = useBehavior(vm.selectedVideo$);
+  const audioOptions = useBehavior(vm.audioOptions$);
+  const selectedAudio = useBehavior(vm.selectedAudio$);
+  const selectAudioButtonOption = useBehavior(vm.selectAudioButtonOption$);
+  const selectVideoButtonOption = useBehavior(vm.selectVideoButtonOption$);
+  const videoToggles = useBehavior(vm.videoToggles$);
+  const buttonSize = useBehavior(vm.buttonSize$);
+  const showSettingsButton = useBehavior(vm.showSettingsButton$);
+  const showLogo = useBehavior(vm.showLogo$);
 
   const buttons: JSX.Element[] = [];
 
@@ -267,8 +284,10 @@ export const CallFooter: FC<FooterProps> = ({ ref, children, vm }) => {
   return (
     <div
       ref={ref}
+      data-testid="footer-container"
       className={classNames(styles.footer, {
         [styles.overlay]: asOverlay,
+        [styles.hidden]: !showFooter,
       })}
     >
       <div className={styles.settingsLogoContainer}>

src/components/CallFooterViewModel.test.ts

@@ -47,6 +47,9 @@ function buildMinimalCallViewModel(layout: Layout): CallViewModel {
     handsRaised$: constant({}),
     reactions$: constant({}),
     tileStoreGeneration$: constant(0),
+    showFooter$: constant(true),
+    settingsOpen$: constant(false),
+    setSettingsOpen$: constant(() => {}),
   } as unknown as CallViewModel;
 }
 
@@ -95,12 +98,11 @@ describe("createCallFooterViewModel", () => {
         buildMinimalCallViewModel(layout),
         mockMuteStates(),
         twoMicsAndOneCamMediaDevices,
-        /* openSettings */ undefined,
         /* reactionIdentifier */ undefined,
       );
 
-      expect(vm.audioOptions$?.value).toEqual([]);
-      expect(vm.videoOptions$?.value).toEqual([]);
+      expect(vm.audioOptions$.value).toEqual([]);
+      expect(vm.videoOptions$.value).toEqual([]);
     }
     it("are empty when both the platform is iOS", () => {
       checkEmptyFor("ios", gridLayout);
@@ -117,7 +119,6 @@ describe("createCallFooterViewModel", () => {
         buildMinimalCallViewModel(gridLayout),
         mockMuteStates(),
         twoMicsAndOneCamMediaDevices,
-        /* openSettings */ undefined,
         /* reactionIdentifier */ undefined,
       );
 

src/components/CallFooterViewModel.tsx

@@ -159,8 +159,6 @@ function buildDeviceBehaviors(
  * @param callModel - The root CallViewModel; provides layout, grid mode, reactions, etc.
  * @param muteStates - Audio and video mute state + toggles.
  * @param mediaDevices - Available and selected input devices.
- * @param openSettings - Callback to open the settings modal, or undefined if the
- *   settings button should be hidden (e.g. when it is already shown in an app bar).
  * @param reactionIdentifier - The local user's reaction identifier string, or
  *   undefined when reactions are not supported (hides the reaction button).
  */
@@ -169,7 +167,6 @@ export function createCallFooterViewModel(
   callModel: CallViewModel,
   muteStates: MuteStates,
   mediaDevices: MediaDevices,
-  openSettings: (() => void) | undefined,
   reactionIdentifier: string | undefined,
 ): ViewModel<FooterSnapshot> {
   const { showControls, header: headerStyle } = getUrlParams();
@@ -184,7 +181,8 @@ export function createCallFooterViewModel(
   return {
     ...buildMuteBehaviors(scope, muteStates),
     ...buildDeviceBehaviors(scope, mediaDevices, disableDeviceSwitcher$),
-
+    // candidat to move into the FooterViewModel
+    showFooter$: callModel.showFooter$,
     hideControls$: constant(!showControls),
     asOverlay$: scope.behavior(
       callModel.windowMode$.pipe(map((mode) => mode === "flat")),
@@ -193,10 +191,14 @@ export function createCallFooterViewModel(
       isPip$.pipe(map((pip) => (pip ? "md" : "lg") as "md" | "lg")),
     ),
     showSettingsButton$: scope.behavior(
-      combineLatest([isPip$, callModel.showHeader$]).pipe(
+      combineLatest([
+        isPip$,
+        callModel.showHeader$,
+        callModel.settingsOpen$,
+      ]).pipe(
         map(
-          ([isPip, showHeader]) =>
-            openSettings !== undefined &&
+          ([isPip, showHeader, settingsOpen]) =>
+            settingsOpen !== undefined &&
             !isPip &&
             showControls &&
             !(headerStyle === HeaderStyle.AppBar && showHeader),
@@ -221,11 +223,11 @@ export function createCallFooterViewModel(
     ),
 
     openSettings$: scope.behavior(
-      callModel.showHeader$.pipe(
-        map((showHeader) =>
+      combineLatest([callModel.showHeader$, callModel.setSettingsOpen$]).pipe(
+        map(([showHeader, setSettingsOpen]) =>
           headerStyle === HeaderStyle.AppBar && showHeader
             ? undefined
-            : openSettings,
+            : (): void => setSettingsOpen(true),
         ),
       ),
     ),
@@ -281,6 +283,26 @@ export function createLobbyFooterViewModel(
       hangup,
       debugTileLayout: false,
       showSettingsButton: openSettings !== undefined,
+      showFooter: true,
+      toggleAudio: undefined,
+      toggleVideo: undefined,
+      setLayoutMode: undefined,
+      toggleScreenSharing: undefined,
+      audioEnabled: undefined,
+      videoEnabled: undefined,
+      layoutMode: undefined,
+      sharingScreen: false,
+      audioOutputSwitcher: undefined,
+      reactionIdentifier: undefined,
+      reactionData: undefined,
+      tileStoreGeneration: undefined,
+      audioOptions: undefined,
+      videoOptions: undefined,
+      selectedAudio: undefined,
+      selectedVideo: undefined,
+      selectAudioButtonOption: undefined,
+      selectVideoButtonOption: undefined,
+      videoToggles: undefined,
     }),
     ...buildMuteBehaviors(scope, muteStates),
     ...buildDeviceBehaviors(scope, mediaDevices, constant(false)),