Move footer to storybook

src/button/Button.tsx

@@ -18,6 +18,7 @@ import {
   ShareScreenSolidIcon,
   OverflowHorizontalIcon,
   OverflowVerticalIcon,
+  VolumeOnSolidIcon,
 } from "@vector-im/compound-design-tokens/assets/web/icons";
 
 import styles from "./Button.module.css";
@@ -126,6 +127,36 @@ export const EndCallButton: FC<EndCallButtonProps> = ({
   );
 };
 
+interface LoudspeakerButtonProps extends ComponentPropsWithoutRef<"button"> {
+  size?: "sm" | "lg";
+  /** The button will be rendered:
+   * true: currently in loudspeaker mode, pressing will switch to earpiece (rendered as enabled)
+   * false: currently in earpiece mode, pressing will switch to loudspeaker (rendered as disabled)
+   */
+  isEarpieceTarget: boolean;
+}
+
+export const LoudspeakerButton: FC<LoudspeakerButtonProps> = (props) => {
+  const { t } = useTranslation();
+  const label = props.isEarpieceTarget
+    ? t("settings.devices.handset")
+    : t("settings.devices.loudspeaker");
+  // if the target is the earpice, we are currently in loudspeaker mode.
+  const enabled = props.isEarpieceTarget;
+  return (
+    <Tooltip label={label}>
+      <CpdButton
+        iconOnly
+        Icon={VolumeOnSolidIcon}
+        {...props}
+        kind={enabled ? "primary" : "secondary"}
+        role="switch"
+        aria-checked={enabled}
+      />
+    </Tooltip>
+  );
+};
+
 interface SettingsButtonProps extends ComponentPropsWithoutRef<"button"> {
   size?: "sm" | "lg";
 }

src/button/ReactionToggleButton.tsx

@@ -165,13 +165,13 @@ export function ReactionPopupMenu({
 
 interface ReactionToggleButtonProps extends ComponentPropsWithoutRef<"button"> {
   identifier: string;
-  vm: CallViewModel;
+  reactionData: Pick<CallViewModel, "handsRaised$" | "reactions$">;
   size?: "sm" | "lg";
 }
 
 export function ReactionToggleButton({
   identifier,
-  vm,
+  reactionData,
   ...props
 }: ReactionToggleButtonProps): ReactNode {
   const { t } = useTranslation();
@@ -180,8 +180,8 @@ export function ReactionToggleButton({
   const [showReactionsMenu, setShowReactionsMenu] = useState(false);
   const [errorText, setErrorText] = useState<string>();
 
-  const isHandRaised = !!useBehavior(vm.handsRaised$)[identifier];
-  const canReact = !useBehavior(vm.reactions$)[identifier];
+  const isHandRaised = !!useBehavior(reactionData.handsRaised$)[identifier];
+  const canReact = !useBehavior(reactionData.reactions$)[identifier];
 
   useEffect(() => {
     // Clear whenever the reactions menu state changes.

src/components/InCallFooter.stories.tsx

@@ -0,0 +1,132 @@
+/*
+Copyright 2025 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE in the repository root for full details.
+*/
+
+import { fn } from "storybook/test";
+import { BehaviorSubject } from "rxjs";
+import { type ReactNode } from "react";
+
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { InCallFooter, type InCallFooterProps } from "./InCallFooter";
+import inCallViewStyles from "../room/InCallView.module.css";
+
+function InCallFooterWrapper(props: InCallFooterProps): ReactNode {
+  return (
+    <div className={inCallViewStyles.inRoom}>
+      <InCallFooter {...props} />
+    </div>
+  );
+}
+
+const meta = {
+  component: InCallFooterWrapper,
+} satisfies Meta<typeof InCallFooterWrapper>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    asOverlay: false,
+    showFooter: true,
+    showControls: true,
+    showSettingsButton: true,
+    showLogo: false,
+    asPip: false,
+    gridMode: "grid",
+    audioEnabled: true,
+    videoEnabled: true,
+    sharingScreen: false,
+    supportsReactions: false,
+    audioOutputSwitcher: null,
+    debugTileLayout: false,
+    tileStoreGeneration: 0,
+    reactionData: {
+      handsRaised$: new BehaviorSubject({}),
+      reactions$: new BehaviorSubject({}),
+    },
+    reactionIdentifier: "@user:example.com:DEVICE",
+    setGridMode: fn(),
+    openSettings: fn(),
+    toggleAudio: fn(),
+    toggleVideo: fn(),
+    toggleScreenSharing: fn(),
+    hangup: fn(),
+  },
+  parameters: {
+    layout: "fullscreen",
+  },
+  argTypes: {
+    gridMode: { control: "radio", options: ["grid", "spotlight"] },
+    audioOutputSwitcher: {
+      control: "radio",
+      options: ["noOutputSwitcher", "earpiece", "speaker"],
+      mapping: {
+        noOutputSwitcher: null,
+        // This is inverersed (speaker<->earpice) because the switcher object stores the target output, not the current one.
+        earpiece: { targetOutput: "speaker", switch: fn() },
+        speaker: { targetOutput: "earpiece", switch: fn() },
+      },
+    },
+  },
+};
+
+export const WithLogo: Story = {
+  ...Default,
+  args: {
+    ...Default.args,
+    showLogo: true,
+  },
+};
+export const WithAudioOutput: Story = {
+  ...Default,
+  args: {
+    ...Default.args,
+    audioOutputSwitcher: { targetOutput: "speaker", switch: fn() },
+  },
+};
+export const Pip: Story = {
+  ...Default,
+  args: {
+    ...Default.args,
+    asPip: true,
+  },
+};
+
+export const NoControlsWithLogo: Story = {
+  ...Default,
+  args: {
+    ...Default.args,
+    showControls: false,
+    showLogo: true,
+  },
+};
+
+export const DebugData: Story = {
+  ...Default,
+  args: {
+    ...Default.args,
+    debugTileLayout: true,
+    tileStoreGeneration: 74,
+    audioOutputSwitcher: null,
+  },
+};
+export const MobileLayout: Story = {
+  ...Default,
+  args: {
+    ...Default.args,
+    showLogo: true,
+    debugTileLayout: true,
+    tileStoreGeneration: 74,
+    audioOutputSwitcher: null,
+  },
+  globals: {
+    viewport: { value: "mobile2", isRotated: false },
+  },
+  parameters: {
+    ...Default.parameters,
+  },
+};

src/components/InCallFooter.tsx

@@ -0,0 +1,202 @@
+/*
+Copyright 2025 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE in the repository root for full details.
+*/
+
+import { type FC, type JSX, type Ref, useMemo } from "react";
+import classNames from "classnames";
+
+import LogoMark from "../icons/LogoMark.svg?react";
+import LogoType from "../icons/LogoType.svg?react";
+import {
+  EndCallButton,
+  MicButton,
+  VideoButton,
+  ShareScreenButton,
+  SettingsButton,
+  ReactionToggleButton,
+  LoudspeakerButton,
+} from "../button";
+import styles from "../room/InCallView.module.css";
+import { LayoutToggle } from "../room/LayoutToggle";
+import {
+  type CallViewModel,
+  type GridMode,
+} from "../state/CallViewModel/CallViewModel";
+import { useAppBarSecondaryButton } from "../AppBar";
+
+export interface AudioOutputSwitcher {
+  targetOutput: string;
+  switch: () => void;
+}
+
+export interface InCallFooterProps {
+  ref?: Ref<HTMLDivElement>;
+  /* This is needed for WindowMode = "flat" */
+  asOverlay: boolean;
+  showFooter: boolean;
+  showControls: boolean;
+  showSettingsButton: boolean;
+  showLogo: boolean;
+  asPip: boolean;
+  gridMode: GridMode;
+  setGridMode: (mode: GridMode) => void;
+  openSettings: () => void;
+  audioEnabled: boolean;
+  videoEnabled: boolean;
+  toggleAudio?: () => void;
+  toggleVideo?: () => void;
+  sharingScreen: boolean;
+  toggleScreenSharing?: () => void;
+  supportsReactions: boolean;
+  reactionIdentifier: string;
+  reactionData: Pick<CallViewModel, "handsRaised$" | "reactions$">;
+  audioOutputSwitcher: AudioOutputSwitcher | null;
+  hangup: () => void;
+  debugTileLayout: boolean;
+  tileStoreGeneration: number;
+}
+
+export const InCallFooter: FC<InCallFooterProps> = ({
+  ref,
+  asOverlay,
+  showFooter,
+  showControls,
+  showSettingsButton,
+  showLogo,
+  asPip,
+  gridMode,
+  setGridMode,
+  openSettings,
+  audioEnabled,
+  videoEnabled,
+  toggleAudio,
+  toggleVideo,
+  sharingScreen,
+  toggleScreenSharing,
+  supportsReactions,
+  reactionIdentifier,
+  reactionData,
+  audioOutputSwitcher,
+  hangup,
+  debugTileLayout,
+  tileStoreGeneration,
+}) => {
+  const buttons: JSX.Element[] = [];
+  const buttonSize = asPip ? "sm" : "lg";
+
+  buttons.push(
+    <MicButton
+      size={buttonSize}
+      key="audio"
+      enabled={audioEnabled}
+      onClick={toggleAudio ?? undefined}
+      disabled={toggleAudio === null}
+      data-testid="incall_mute"
+    />,
+    <VideoButton
+      size={buttonSize}
+      key="video"
+      enabled={videoEnabled}
+      onClick={toggleVideo ?? undefined}
+      disabled={toggleVideo === null}
+      data-testid="incall_videomute"
+    />,
+  );
+
+  if (toggleScreenSharing !== null) {
+    buttons.push(
+      <ShareScreenButton
+        size={buttonSize}
+        key="share_screen"
+        className={styles.shareScreen}
+        enabled={sharingScreen}
+        onClick={toggleScreenSharing}
+        data-testid="incall_screenshare"
+      />,
+    );
+  }
+
+  if (supportsReactions) {
+    buttons.push(
+      <ReactionToggleButton
+        size={buttonSize}
+        reactionData={reactionData}
+        key="raise_hand"
+        className={styles.raiseHand}
+        identifier={reactionIdentifier}
+      />,
+    );
+  }
+
+  // In this PR we just move the button to the bottom bar. We do not yet update its appearance
+  const audioOutputButton = useMemo(() => {
+    if (audioOutputSwitcher === null) return null;
+    return (
+      <LoudspeakerButton
+        size={buttonSize}
+        isEarpieceTarget={audioOutputSwitcher.targetOutput === "earpiece"}
+      />
+    );
+  }, [audioOutputSwitcher, buttonSize]);
+
+  if (audioOutputButton) buttons.push(audioOutputButton);
+
+  useAppBarSecondaryButton(
+    <SettingsButton key="settings" onClick={openSettings} />,
+  );
+
+  buttons.push(
+    <EndCallButton
+      size={buttonSize}
+      key="end_call"
+      onClick={hangup}
+      data-testid="incall_leave"
+    />,
+  );
+
+  const logo = (
+    <div className={styles.logo}>
+      {showLogo && (
+        <>
+          <LogoMark width={24} height={24} aria-hidden />
+          <LogoType
+            width={80}
+            height={11}
+            aria-label={import.meta.env.VITE_PRODUCT_NAME || "Element Call"}
+          />
+        </>
+      )}
+      {debugTileLayout ? `Tiles generation: ${tileStoreGeneration}` : undefined}
+    </div>
+  );
+
+  return (
+    <div
+      ref={ref}
+      className={classNames(styles.footer, {
+        [styles.overlay]: asOverlay,
+        [styles.hidden]: !showFooter,
+      })}
+    >
+      <div className={styles.settingsLogoContainer}>
+        {showControls && showSettingsButton && !asPip && (
+          <SettingsButton key="settings" onClick={openSettings} />
+        )}
+
+        {(!asPip || (!showLogo && !debugTileLayout)) && logo}
+      </div>
+
+      {showControls && <div className={styles.buttons}>{buttons}</div>}
+      {showControls && !asPip && (
+        <LayoutToggle
+          className={styles.layout}
+          layout={gridMode}
+          setLayout={setGridMode}
+        />
+      )}
+    </div>
+  );
+};

src/room/InCallView.tsx

@@ -5,7 +5,6 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */
 
-import { IconButton, Tooltip } from "@vector-im/compound-web";
 import { type MatrixClient, type Room as MatrixRoom } from "matrix-js-sdk";
 import {
   type FC,
@@ -25,22 +24,9 @@ import classNames from "classnames";
 import { BehaviorSubject, map } from "rxjs";
 import { useObservable } from "observable-hooks";
 import { logger as rootLogger } from "matrix-js-sdk/lib/logger";
-import {
-  VoiceCallSolidIcon,
-  VolumeOnSolidIcon,
-} from "@vector-im/compound-design-tokens/assets/web/icons";
 import { useTranslation } from "react-i18next";
 
-import LogoMark from "../icons/LogoMark.svg?react";
-import LogoType from "../icons/LogoType.svg?react";
-import {
-  EndCallButton,
-  MicButton,
-  VideoButton,
-  ShareScreenButton,
-  SettingsButton,
-  ReactionToggleButton,
-} from "../button";
+import { SettingsButton } from "../button";
 import { Header, LeftNav, RightNav, RoomHeaderInfo } from "../Header";
 import { HeaderStyle, useUrlParams } from "../UrlParams";
 import { useCallViewKeyboardShortcuts } from "../useCallViewKeyboardShortcuts";
@@ -55,7 +41,6 @@ import { useMergedRefs } from "../useMergedRefs";
 import { type MuteStates } from "../state/MuteStates";
 import { type MatrixInfo } from "./VideoPreview";
 import { InviteButton } from "../button/InviteButton";
-import { LayoutToggle } from "./LayoutToggle";
 import {
   type CallViewModel,
   createCallViewModel$,
@@ -106,6 +91,7 @@ import { useTrackProcessorObservable$ } from "../livekit/TrackProcessorContext.t
 import { type Layout } from "../state/layout-types.ts";
 import { ObservableScope } from "../state/ObservableScope.ts";
 import { useLatest } from "../useLatest.ts";
+import { InCallFooter } from "../components/InCallFooter.tsx";
 
 const logger = rootLogger.getChild("[InCallView]");
 
@@ -575,133 +561,38 @@ export const InCallView: FC<InCallViewProps> = ({
     matrixRoom.roomId,
   );
 
-  const buttons: JSX.Element[] = [];
-
-  const buttonSize = layout.type === "pip" ? "sm" : "lg";
-  buttons.push(
-    <MicButton
-      size={buttonSize}
-      key="audio"
-      enabled={audioEnabled}
-      onClick={toggleAudio ?? undefined}
-      disabled={toggleAudio === null}
-      data-testid="incall_mute"
-    />,
-    <VideoButton
-      size={buttonSize}
-      key="video"
-      enabled={videoEnabled}
-      onClick={toggleVideo ?? undefined}
-      disabled={toggleVideo === null}
-      data-testid="incall_videomute"
-    />,
-  );
-  if (vm.toggleScreenSharing !== null) {
-    buttons.push(
-      <ShareScreenButton
-        size={buttonSize}
-        key="share_screen"
-        className={styles.shareScreen}
-        enabled={sharingScreen}
-        onClick={vm.toggleScreenSharing}
-        data-testid="incall_screenshare"
-      />,
-    );
-  }
-  if (supportsReactions) {
-    buttons.push(
-      <ReactionToggleButton
-        size={buttonSize}
-        vm={vm}
-        key="raise_hand"
-        className={styles.raiseHand}
-        identifier={`${client.getUserId()}:${client.getDeviceId()}`}
-      />,
-    );
-  }
-
-  // In this PR we just move the button ot the bottom bar. We do not yet update its apperance
-  const audioOutputButton = useMemo(() => {
-    if (audioOutputSwitcher === null) return null;
-    const isEarpieceTarget = audioOutputSwitcher.targetOutput === "earpiece";
-    const Icon = isEarpieceTarget ? VoiceCallSolidIcon : VolumeOnSolidIcon;
-    const label = isEarpieceTarget
-      ? t("settings.devices.handset")
-      : t("settings.devices.loudspeaker");
-
-    return (
-      <Tooltip label={label}>
-        <IconButton
-          key="audio_output_switcher"
-          onClick={(e) => {
-            audioOutputSwitcher.switch();
-          }}
-        >
-          <Icon />
-        </IconButton>
-      </Tooltip>
-    );
-  }, [t, audioOutputSwitcher]);
-  if (audioOutputButton) buttons.push(audioOutputButton);
-
   useAppBarSecondaryButton(
     <SettingsButton key="settings" onClick={openSettings} />,
   );
 
-  buttons.push(
-    <EndCallButton
-      size={buttonSize}
-      key="end_call"
-      onClick={function (): void {
-        vm.hangup();
-      }}
-      data-testid="incall_leave"
-    />,
-  );
-
-  const logo = (
-    <div className={styles.logo}>
-      <LogoMark width={24} height={24} aria-hidden />
-      <LogoType
-        width={80}
-        height={11}
-        aria-label={import.meta.env.VITE_PRODUCT_NAME || "Element Call"}
-      />
-      {/* Don't mind this odd placement, it's just a little debug label */}
-      {debugTileLayout ? `Tiles generation: ${tileStoreGeneration}` : undefined}
-    </div>
-  );
-
   const footer = (
-    <div
+    <InCallFooter
       ref={footerRef}
-      className={classNames(styles.footer, {
-        [styles.overlay]: windowMode === "flat",
-        [styles.hidden]:
-          !showFooter || (!showControls && headerStyle === "none"),
-      })}
-    >
-      <div className={styles.settingsLogoContainer}>
-        {showControls &&
-          headerStyle !== HeaderStyle.AppBar &&
-          layout.type !== "pip" && (
-            <SettingsButton key="settings" onClick={openSettings} />
-          )}
-
-        {headerStyle !== "none" && logo}
-      </div>
-
-      {showControls && <div className={styles.buttons}>{buttons}</div>}
-      {showControls && (
-        <LayoutToggle
-          className={styles.layout}
-          layout={gridMode}
-          setLayout={setGridMode}
-        />
-      )}
-    </div>
+      asOverlay={windowMode === "flat"}
+      // TODO this should be computed in the view model!
+      showFooter={!showFooter || (!showControls && headerStyle === "none")}
+      showControls={showControls}
+      showLogo={headerStyle !== HeaderStyle.None}
+      showSettingsButton={headerStyle !== HeaderStyle.AppBar}
+      asPip={layout.type === "pip"}
+      gridMode={gridMode}
+      setGridMode={setGridMode}
+      openSettings={openSettings}
+      audioEnabled={audioEnabled}
+      videoEnabled={videoEnabled}
+      toggleAudio={toggleAudio ?? undefined}
+      toggleVideo={toggleVideo ?? undefined}
+      sharingScreen={sharingScreen}
+      toggleScreenSharing={vm.toggleScreenSharing ?? undefined}
+      supportsReactions={supportsReactions}
+      reactionIdentifier={`${client.getUserId()}:${client.getDeviceId()}`}
+      reactionData={vm}
+      audioOutputSwitcher={audioOutputSwitcher}
+      hangup={vm.hangup}
+      debugTileLayout={debugTileLayout}
+      tileStoreGeneration={tileStoreGeneration}
+    />
   );
-
   const allConnections = useBehavior(vm.allConnections$);
 
   return (