Add a URL parameter for hiding the room header

src/room/GroupCallView.tsx

@@ -30,20 +30,24 @@ import { useSentryGroupCallHandler } from "./useSentryGroupCallHandler";
 import { useLocationNavigation } from "../useLocationNavigation";
 declare global {
   interface Window {
-    groupCall: GroupCall;
+    groupCall?: GroupCall;
   }
 }
+
 interface Props {
   client: MatrixClient;
   isPasswordlessUser: boolean;
   isEmbedded: boolean;
+  hideHeader: boolean;
   roomIdOrAlias: string;
   groupCall: GroupCall;
 }
+
 export function GroupCallView({
   client,
   isPasswordlessUser,
   isEmbedded,
+  hideHeader,
   roomIdOrAlias,
   groupCall,
 }: Props) {
@@ -109,6 +113,7 @@ export function GroupCallView({
           userMediaFeeds={userMediaFeeds}
           onLeave={onLeave}
           isEmbedded={isEmbedded}
+          hideHeader={hideHeader}
         />
       );
     } else {
@@ -131,6 +136,7 @@ export function GroupCallView({
           screenshareFeeds={screenshareFeeds}
           roomIdOrAlias={roomIdOrAlias}
           unencryptedEventsFromUsers={unencryptedEventsFromUsers}
+          hideHeader={hideHeader}
         />
       );
     }
@@ -166,6 +172,7 @@ export function GroupCallView({
           toggleMicrophoneMuted={toggleMicrophoneMuted}
           roomIdOrAlias={roomIdOrAlias}
           isEmbedded={isEmbedded}
+          hideHeader={hideHeader}
         />
       );
     }

src/room/InCallView.tsx

@@ -77,6 +77,7 @@ interface Props {
   localScreenshareFeed: CallFeed;
   roomIdOrAlias: string;
   unencryptedEventsFromUsers: Set<string>;
+  hideHeader: boolean;
 }
 
 export interface Participant {
@@ -105,6 +106,7 @@ export function InCallView({
   localScreenshareFeed,
   roomIdOrAlias,
   unencryptedEventsFromUsers,
+  hideHeader,
 }: Props) {
   usePreventScroll();
   const elementRef = useRef<HTMLDivElement>();
@@ -246,7 +248,7 @@ export function InCallView({
           audioDestination={audioDestination}
         />
       )}
-      {!fullscreenParticipant && (
+      {!hideHeader && !fullscreenParticipant && (
         <Header>
           <LeftNav>
             <RoomHeaderInfo roomName={roomName} avatarUrl={avatarUrl} />

src/room/LobbyView.tsx

@@ -47,6 +47,7 @@ interface Props {
   localVideoMuted: boolean;
   roomIdOrAlias: string;
   isEmbedded: boolean;
+  hideHeader: boolean;
 }
 export function LobbyView({
   client,
@@ -63,6 +64,7 @@ export function LobbyView({
   toggleMicrophoneMuted,
   roomIdOrAlias,
   isEmbedded,
+  hideHeader,
 }: Props) {
   const { stream } = useCallFeed(localCallFeed);
   const {
@@ -90,14 +92,16 @@ export function LobbyView({
 
   return (
     <div className={styles.room}>
-      <Header>
+      {!hideHeader && (
-        <LeftNav>
+        <Header>
-          <RoomHeaderInfo roomName={roomName} avatarUrl={avatarUrl} />
+          <LeftNav>
-        </LeftNav>
+            <RoomHeaderInfo roomName={roomName} avatarUrl={avatarUrl} />
-        <RightNav>
+          </LeftNav>
-          <UserMenuContainer />
+          <RightNav>
-        </RightNav>
+            <UserMenuContainer />
-      </Header>
+          </RightNav>
+        </Header>
+      )}
       <div className={styles.joinRoom}>
         <div className={styles.joinRoomContent}>
           {groupCall.isPtt ? (

src/room/PTTCallView.tsx

@@ -97,6 +97,7 @@ interface Props {
   userMediaFeeds: CallFeed[];
   onLeave: () => void;
   isEmbedded: boolean;
+  hideHeader: boolean;
 }
 
 export const PTTCallView: React.FC<Props> = ({
@@ -109,6 +110,7 @@ export const PTTCallView: React.FC<Props> = ({
   userMediaFeeds,
   onLeave,
   isEmbedded,
+  hideHeader,
 }) => {
   const { modalState: inviteModalState, modalProps: inviteModalProps } =
     useModalTriggerState();
@@ -176,7 +178,7 @@ export const PTTCallView: React.FC<Props> = ({
         // https://github.com/vector-im/element-call/issues/328
         show={false}
       />
-      {showControls && (
+      {!hideHeader && showControls && (
         <Header className={styles.header}>
           <LeftNav>
             <RoomSetupHeaderInfo

src/room/RoomPage.tsx

@@ -29,8 +29,15 @@ export const RoomPage: FC = () => {
   const { loading, isAuthenticated, error, client, isPasswordlessUser } =
     useClient();
 
-  const { roomAlias, roomId, viaServers, isEmbedded, isPtt, displayName } =
+  const {
-    useRoomParams();
+    roomAlias,
+    roomId,
+    viaServers,
+    isEmbedded,
+    hideHeader,
+    isPtt,
+    displayName,
+  } = useRoomParams();
   const roomIdOrAlias = roomId ?? roomAlias;
   if (!roomIdOrAlias) throw new Error("No room specified");
 
@@ -53,6 +60,20 @@ export const RoomPage: FC = () => {
     registerPasswordlessUser,
   ]);
 
+  const groupCallView = useCallback(
+    (groupCall: GroupCall) => (
+      <GroupCallView
+        client={client}
+        roomIdOrAlias={roomIdOrAlias}
+        groupCall={groupCall}
+        isPasswordlessUser={isPasswordlessUser}
+        isEmbedded={isEmbedded}
+        hideHeader={hideHeader}
+      />
+    ),
+    [client, roomIdOrAlias, isPasswordlessUser, isEmbedded, hideHeader]
+  );
+
   if (loading || isRegistering) {
     return <LoadingView />;
   }
@@ -73,15 +94,7 @@ export const RoomPage: FC = () => {
         viaServers={viaServers}
         createPtt={isPtt}
       >
-        {(groupCall) => (
+        {groupCallView}
-          <GroupCallView
-            client={client}
-            roomIdOrAlias={roomIdOrAlias}
-            groupCall={groupCall}
-            isPasswordlessUser={isPasswordlessUser}
-            isEmbedded={isEmbedded}
-          />
-        )}
       </GroupCallLoader>
     </MediaHandlerProvider>
   );

src/room/useRoomParams.ts

@@ -24,6 +24,8 @@ export interface RoomParams {
   // Whether the app is running in embedded mode, and should keep the user
   // confined to the current room
   isEmbedded: boolean;
+  // Whether to hide the room header when in a call
+  hideHeader: boolean;
   // Whether to start a walkie-talkie call instead of a video call
   isPtt: boolean;
   // Whether to use end-to-end encryption
@@ -75,6 +77,7 @@ export const getRoomParams = (
     roomId: getParam("roomId"),
     viaServers: getAllParams("via"),
     isEmbedded: hasParam("embed"),
+    hideHeader: hasParam("hideHeader"),
     isPtt: hasParam("ptt"),
     e2eEnabled: getParam("enableE2e") !== "false", // Defaults to true
     userId: getParam("userId"),