Set the document title to the current call name. (#2928)

Co-authored-by: Hugh Nimmo-Smith <hughns@users.noreply.github.com>
Co-authored-by: Hugh Nimmo-Smith <hughns@element.io>

src/room/GroupCallView.tsx

@@ -58,6 +58,7 @@ import { Link } from "../button/Link";
 import { useAudioContext } from "../useAudioContext";
 import { callEventAudioSounds } from "./CallEventAudioRenderer";
 import { useLatest } from "../useLatest";
+import { usePageTitle } from "../usePageTitle";
 
 declare global {
   interface Window {
@@ -123,6 +124,7 @@ export const GroupCallView: FC<Props> = ({
   const roomAvatar = useRoomAvatar(rtcSession.room);
   const { perParticipantE2EE, returnToLobby } = useUrlParams();
   const e2eeSystem = useRoomEncryptionSystem(rtcSession.room.roomId);
+  usePageTitle(roomName);
 
   const matrixInfo = useMemo((): MatrixInfo => {
     return {

src/room/LobbyView.tsx

@@ -37,6 +37,7 @@ import { Link } from "../button/Link";
 import { useMediaDevices } from "../livekit/MediaDevicesContext";
 import { useInitial } from "../useInitial";
 import { useSwitchCamera } from "./useSwitchCamera";
+import { usePageTitle } from "../usePageTitle";
 
 interface Props {
   client: MatrixClient;
@@ -64,6 +65,7 @@ export const LobbyView: FC<Props> = ({
   waitingForInvite,
 }) => {
   const { t } = useTranslation();
+  usePageTitle(matrixInfo.roomName);
 
   const onAudioPress = useCallback(
     () => muteStates.audio.setEnabled?.((e) => !e),

src/usePageTitle.ts

@@ -7,7 +7,7 @@ Please see LICENSE in the repository root for full details.
 
 import { useEffect } from "react";
 
-export function usePageTitle(title: string): void {
+export function usePageTitle(title?: string): void {
   useEffect(() => {
     const productName = import.meta.env.VITE_PRODUCT_NAME || "Element Call";
     document.title = title ? `${productName} | ${title}` : productName;