Also use CallFooter for lobby

src/room/InCallView.test.tsx

@@ -44,7 +44,7 @@ import { type MediaDevices as ECMediaDevices } from "../state/MediaDevices";
 import { constant } from "../state/Behavior";
 import { AppBar } from "../AppBar";
 import { initializeWidget } from "../widget";
-import inCallFooterStyles from "../components/InCallFooter.module.css";
+import callFooterStyles from "../components/CallFooter.module.css";
 
 initializeWidget();
 vi.hoisted(
@@ -211,9 +211,9 @@ describe("InCallView", () => {
       // Their visibility uses @media css queries, which cannot be tested in JSDOM,
       // but we can at least check that both buttons are rendered and have the correct classes.
       expect(btnA).toBeInTheDocument();
-      expect(btnA).toHaveClass(inCallFooterStyles.settingsOnlyShowWide);
+      expect(btnA).toHaveClass(callFooterStyles.settingsOnlyShowWide);
       expect(btnB).toBeInTheDocument();
-      expect(btnB).toHaveClass(inCallFooterStyles.settingsOnlyShowNarrow);
+      expect(btnB).toHaveClass(callFooterStyles.settingsOnlyShowNarrow);
     });
 
     it("is accessible when showHeader is true", () => {

src/room/InCallView.tsx

@@ -90,7 +90,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";
+import { CallFooter } from "../components/CallFooter.tsx";
 
 const logger = rootLogger.getChild("[InCallView]");
 
@@ -562,30 +562,29 @@ export const InCallView: FC<InCallViewProps> = ({
     matrixRoom.roomId,
   );
 
+  // Only hide the settings button if we have an AppBar header and we are showing the header
+  const hideSettings = headerStyle === HeaderStyle.AppBar && showHeader;
   const footer = (
-    <InCallFooter
+    <CallFooter
       ref={footerRef}
       asOverlay={windowMode === "flat"}
-      showFooter={showFooter}
-      showControls={showControls}
+      hidden={!showFooter}
+      hideControls={!showControls}
       // Hide the logo for both embedded solutions. mobile: HeaderStyle.AppBar and desktop: HeaderStyle.None.
       hideLogo={headerStyle !== HeaderStyle.Standard}
-      // Only hide the settings button if we have an AppBar header and we are showing the header
-      hideSettingsButton={headerStyle === HeaderStyle.AppBar && showHeader}
       asPip={layout.type === "pip"}
-      gridMode={gridMode}
-      setGridMode={setGridMode}
-      openSettings={openSettings}
+      layoutMode={gridMode}
+      setLayoutMode={setGridMode}
+      openSettings={hideSettings ? undefined : 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}
+      reactionData={supportsReactions ? vm : undefined}
+      audioOutputSwitcher={audioOutputSwitcher ?? undefined}
       hangup={vm.hangup}
       debugTileLayout={debugTileLayout}
       tileStoreGeneration={tileStoreGeneration}

src/room/LobbyView.tsx

@@ -33,12 +33,6 @@ import { Header, LeftNav, RightNav, RoomHeaderInfo } from "../Header";
 import { type MatrixInfo, VideoPreview } from "./VideoPreview";
 import { type MuteStates } from "../state/MuteStates";
 import { InviteButton } from "../button/InviteButton";
-import {
-  EndCallButton,
-  MicButton,
-  SettingsButton,
-  VideoButton,
-} from "../button/Button";
 import { SettingsModal, defaultSettingsTab } from "../settings/SettingsModal";
 import { useMediaQuery } from "../useMediaQuery";
 import { E2eeType } from "../e2ee/e2eeType";
@@ -52,6 +46,7 @@ import {
 import { usePageTitle } from "../usePageTitle";
 import { getValue } from "../utils/observable";
 import { useBehavior } from "../useBehavior";
+import { CallFooter } from "../components/CallFooter";
 
 interface Props {
   client: MatrixClient;
@@ -226,23 +221,14 @@ export const LobbyView: FC<Props> = ({
           </VideoPreview>
           {!recentsButtonInFooter && recentsButton}
         </div>
-        <div className={inCallStyles.footer}>
+        <CallFooter
+          toggleAudio={toggleAudio ?? undefined}
+          toggleVideo={toggleVideo ?? undefined}
+          openSettings={openSettings}
+          hangup={!confineToRoom ? onLeaveClick : undefined}
+        >
           {recentsButtonInFooter && recentsButton}
-          <SettingsButton onClick={openSettings} />
-          <div className={inCallStyles.buttons}>
-            <MicButton
-              enabled={audioEnabled}
-              onClick={toggleAudio ?? undefined}
-              disabled={toggleAudio === null}
-            />
-            <VideoButton
-              enabled={videoEnabled}
-              onClick={toggleVideo ?? undefined}
-              disabled={toggleVideo === null}
-            />
-            {!confineToRoom && <EndCallButton onClick={onLeaveClick} />}
-          </div>
-        </div>
+        </CallFooter>
       </div>
       {client && (
         <SettingsModal