Fix header

The header needs to be passed forward as a string to some components and as a bool (hideHeader) to others.
Also use a enum instead of string options.

src/App.tsx

@@ -31,7 +31,7 @@ import { useTheme } from "./useTheme";
 import { ProcessorProvider } from "./livekit/TrackProcessorContext";
 import { type AppViewModel } from "./state/AppViewModel";
 import { MediaDevicesContext } from "./MediaDevicesContext";
-import { getUrlParams } from "./UrlParams";
+import { getUrlParams, HeaderStyle } from "./UrlParams";
 import { AppBar } from "./AppBar";
 
 const SentryRoute = Sentry.withSentryReactRouterV7Routing(Route);
@@ -107,7 +107,11 @@ export const App: FC<Props> = ({ vm }) => {
         <ThemeProvider>
           <TooltipProvider>
             <Suspense fallback={null}>
-              {header === "app_bar" ? <AppBar>{content}</AppBar> : content}
+              {header === HeaderStyle.AppBar ? (
+                <AppBar>{content}</AppBar>
+              ) : (
+                content
+              )}
             </Suspense>
           </TooltipProvider>
         </ThemeProvider>

src/UrlParams.ts

@@ -25,6 +25,12 @@ export enum UserIntent {
   Unknown = "unknown",
 }
 
+export enum HeaderStyle {
+  None = "none",
+  Standard = "standard",
+  AppBar = "app_bar",
+}
+
 // If you need to add a new flag to this interface, prefer a name that describes
 // a specific behavior (such as 'confineToRoom'), rather than one that describes
 // the situations that call for this behavior ('isEmbedded'). This makes it
@@ -64,7 +70,7 @@ export interface UrlParams {
    * button like you might see in mobile apps. The callback for the back button
    * is window.controls.onBackButtonPressed.
    */
-  header: "none" | "standard" | "app_bar";
+  header: HeaderStyle;
   /**
    * Whether the controls should be shown. For screen recording no controls can be desired.
    */
@@ -263,9 +269,10 @@ export const getUrlParams = (
 
   // Check hideHeader for backwards compatibility
   let header = parser.getFlagParam("hideHeader")
-    ? "none"
+    ? HeaderStyle.None
     : parser.getParam("header");
-  if (header !== "none" && header !== "app_bar") header = "standard";
+  if (header !== HeaderStyle.None && header !== HeaderStyle.AppBar)
+    header = HeaderStyle.Standard;
 
   const widgetId = parser.getParam("widgetId");
   const parentUrl = parser.getParam("parentUrl");
@@ -285,7 +292,7 @@ export const getUrlParams = (
       parser.getFlagParam("confineToRoom") || parser.getFlagParam("embed"),
     appPrompt: parser.getFlagParam("appPrompt", true),
     preload: isWidget ? parser.getFlagParam("preload") : false,
-    header: header as "none" | "standard" | "app_bar",
+    header: header as HeaderStyle,
     showControls: parser.getFlagParam("showControls", true),
     hideScreensharing: parser.getFlagParam("hideScreensharing"),
     e2eEnabled: parser.getFlagParam("enableE2EE", true),

src/room/GroupCallView.tsx

@@ -51,7 +51,7 @@ import { useRoomAvatar } from "./useRoomAvatar";
 import { useRoomName } from "./useRoomName";
 import { useJoinRule } from "./useJoinRule";
 import { InviteModal } from "./InviteModal";
-import { useUrlParams } from "../UrlParams";
+import { HeaderStyle, useUrlParams } from "../UrlParams";
 import { E2eeType } from "../e2ee/e2eeType";
 import { useAudioContext } from "../useAudioContext";
 import { callEventAudioSounds } from "./CallEventAudioRenderer";
@@ -86,7 +86,7 @@ interface Props {
   confineToRoom: boolean;
   preload: boolean;
   skipLobby: boolean;
-  hideHeader: boolean;
+  header: HeaderStyle;
   rtcSession: MatrixRTCSession;
   isJoined: boolean;
   muteStates: MuteStates;
@@ -99,7 +99,7 @@ export const GroupCallView: FC<Props> = ({
   confineToRoom,
   preload,
   skipLobby,
-  hideHeader,
+  header,
   rtcSession,
   isJoined,
   muteStates,
@@ -423,7 +423,7 @@ export const GroupCallView: FC<Props> = ({
         muteStates={muteStates}
         onEnter={() => void enterRTCSessionOrError(rtcSession)}
         confineToRoom={confineToRoom}
-        hideHeader={hideHeader}
+        hideHeader={header === HeaderStyle.None}
         participantCount={participantCount}
         onShareClick={onShareClick}
       />
@@ -449,7 +449,7 @@ export const GroupCallView: FC<Props> = ({
           rtcSession={rtcSession as MatrixRTCSession}
           participantCount={participantCount}
           onLeave={onLeave}
-          hideHeader={hideHeader}
+          header={header}
           muteStates={muteStates}
           e2eeSystem={e2eeSystem}
           //otelGroupCallMembership={otelGroupCallMembership}
@@ -475,7 +475,7 @@ export const GroupCallView: FC<Props> = ({
           endedCallId={rtcSession.room.roomId}
           client={client}
           isPasswordlessUser={isPasswordlessUser}
-          hideHeader={hideHeader}
+          hideHeader={header === HeaderStyle.None}
           confineToRoom={confineToRoom}
         />
       );

src/room/InCallView.tsx

@@ -34,6 +34,7 @@ import {
   EarpieceIcon,
   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";
@@ -48,7 +49,7 @@ import {
   SwitchCameraButton,
 } from "../button";
 import { Header, LeftNav, RightNav, RoomHeaderInfo } from "../Header";
-import { useUrlParams } from "../UrlParams";
+import { type HeaderStyle, useUrlParams } from "../UrlParams";
 import { useCallViewKeyboardShortcuts } from "../useCallViewKeyboardShortcuts";
 import { ElementWidgetActions, widget } from "../widget";
 import styles from "./InCallView.module.css";
@@ -113,7 +114,6 @@ import { useMatrixRTCSessionMemberships } from "../useMatrixRTCSessionMembership
 import { useMediaDevices } from "../MediaDevicesContext.ts";
 import { EarpieceOverlay } from "./EarpieceOverlay.tsx";
 import { useAppBarSecondaryButton } from "../AppBar.tsx";
-import { useTranslation } from "react-i18next";
 
 const canScreenshare = "getDisplayMedia" in (navigator.mediaDevices ?? {});
 
@@ -212,7 +212,7 @@ export interface InCallViewProps {
   participantCount: number;
   /** Function to call when the user explicitly ends the call */
   onLeave: () => void;
-  header: "none" | "standard" | "app_bar";
+  header: HeaderStyle;
   otelGroupCallMembership?: OTelGroupCallMembership;
   connState: ECConnectionState;
   onShareClick: (() => void) | null;

src/room/RoomPage.tsx

@@ -114,7 +114,7 @@ export const RoomPage: FC = () => {
             confineToRoom={confineToRoom}
             preload={preload}
             skipLobby={skipLobby || wasInWaitForInviteState.current}
-            hideHeader={header !== "standard"}
+            header={header}
             muteStates={muteStates}
           />
         );