diff --git a/src/room/GroupCallView.tsx b/src/room/GroupCallView.tsx index 78e3c74..cf0b401 100644 --- a/src/room/GroupCallView.tsx +++ b/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} /> ); } diff --git a/src/room/InCallView.tsx b/src/room/InCallView.tsx index e78636a..347cb5d 100644 --- a/src/room/InCallView.tsx +++ b/src/room/InCallView.tsx @@ -77,6 +77,7 @@ interface Props { localScreenshareFeed: CallFeed; roomIdOrAlias: string; unencryptedEventsFromUsers: Set; + hideHeader: boolean; } export interface Participant { @@ -105,6 +106,7 @@ export function InCallView({ localScreenshareFeed, roomIdOrAlias, unencryptedEventsFromUsers, + hideHeader, }: Props) { usePreventScroll(); const elementRef = useRef(); @@ -246,7 +248,7 @@ export function InCallView({ audioDestination={audioDestination} /> )} - {!fullscreenParticipant && ( + {!hideHeader && !fullscreenParticipant && (
diff --git a/src/room/LobbyView.tsx b/src/room/LobbyView.tsx index 9075aac..72a0c04 100644 --- a/src/room/LobbyView.tsx +++ b/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 (
-
- - - - - - -
+ {!hideHeader && ( +
+ + + + + + +
+ )}
{groupCall.isPtt ? ( diff --git a/src/room/PTTCallView.tsx b/src/room/PTTCallView.tsx index 5f669b1..eed2277 100644 --- a/src/room/PTTCallView.tsx +++ b/src/room/PTTCallView.tsx @@ -97,6 +97,7 @@ interface Props { userMediaFeeds: CallFeed[]; onLeave: () => void; isEmbedded: boolean; + hideHeader: boolean; } export const PTTCallView: React.FC = ({ @@ -109,6 +110,7 @@ export const PTTCallView: React.FC = ({ userMediaFeeds, onLeave, isEmbedded, + hideHeader, }) => { const { modalState: inviteModalState, modalProps: inviteModalProps } = useModalTriggerState(); @@ -176,7 +178,7 @@ export const PTTCallView: React.FC = ({ // https://github.com/vector-im/element-call/issues/328 show={false} /> - {showControls && ( + {!hideHeader && showControls && (
{ const { loading, isAuthenticated, error, client, isPasswordlessUser } = useClient(); - const { roomAlias, roomId, viaServers, isEmbedded, isPtt, displayName } = - useRoomParams(); + const { + 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) => ( + + ), + [client, roomIdOrAlias, isPasswordlessUser, isEmbedded, hideHeader] + ); + if (loading || isRegistering) { return ; } @@ -73,15 +94,7 @@ export const RoomPage: FC = () => { viaServers={viaServers} createPtt={isPtt} > - {(groupCall) => ( - - )} + {groupCallView} ); diff --git a/src/room/useRoomParams.ts b/src/room/useRoomParams.ts index 070137d..5edfe4e 100644 --- a/src/room/useRoomParams.ts +++ b/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"),