diff --git a/src/App.tsx b/src/App.tsx index 5d88e2d8..6d7d1e1e 100644 --- a/src/App.tsx +++ b/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 = ({ vm }) => { - {header === "app_bar" ? {content} : content} + {header === HeaderStyle.AppBar ? ( + {content} + ) : ( + content + )} diff --git a/src/UrlParams.ts b/src/UrlParams.ts index acda491c..35d19868 100644 --- a/src/UrlParams.ts +++ b/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), diff --git a/src/room/GroupCallView.tsx b/src/room/GroupCallView.tsx index e4db30a4..f6eb207b 100644 --- a/src/room/GroupCallView.tsx +++ b/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 = ({ confineToRoom, preload, skipLobby, - hideHeader, + header, rtcSession, isJoined, muteStates, @@ -423,7 +423,7 @@ export const GroupCallView: FC = ({ 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 = ({ 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 = ({ endedCallId={rtcSession.room.roomId} client={client} isPasswordlessUser={isPasswordlessUser} - hideHeader={hideHeader} + hideHeader={header === HeaderStyle.None} confineToRoom={confineToRoom} /> ); diff --git a/src/room/InCallView.tsx b/src/room/InCallView.tsx index 56c0bbc2..214aae68 100644 --- a/src/room/InCallView.tsx +++ b/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; diff --git a/src/room/RoomPage.tsx b/src/room/RoomPage.tsx index 31a5995a..b424c511 100644 --- a/src/room/RoomPage.tsx +++ b/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} /> );