Leave the page title to the page

The call and the lobby each set `document.title`, so a component
embedded in a host renamed the host's tab to "Element Call | <room>".
The title belongs to whoever owns the page: the standalone app's
RoomPage now sets it, for whichever room it has got as far as knowing
about, and the call itself no longer touches it.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>

src/room/GroupCallView.tsx

@@ -57,7 +57,6 @@ import {
   type CallEventSounds,
 } from "./CallEventAudioRenderer";
 import { useLatest } from "../useLatest";
-import { usePageTitle } from "../usePageTitle";
 import {
   ConnectionLostError,
   E2EENotSupportedError,
@@ -208,7 +207,6 @@ export const GroupCallView: FC<Props> = ({
     if (passwordFromUrl) saveKeyForRoom(room.roomId, passwordFromUrl);
   }, [passwordFromUrl, room.roomId]);
 
-  usePageTitle(roomName);
   useAppBarTitle(roomName);
 
   const matrixInfo = useMemo((): MatrixInfo => {

src/room/LobbyView.tsx

@@ -44,7 +44,6 @@ import {
   useTrackProcessor,
   useTrackProcessorSync,
 } from "../livekit/TrackProcessorContext";
-import { usePageTitle } from "../usePageTitle";
 import { getValue } from "../utils/observable";
 import { useBehavior } from "../useBehavior";
 import { CallFooter, type FooterSnapshot } from "../components/CallFooter";
@@ -87,7 +86,6 @@ export const LobbyView: FC<Props> = ({
 
   const { t } = useTranslation();
 
-  usePageTitle(matrixInfo.roomName);
   useAppBarPrimaryButtonIconKind("back");
   const audioEnabled = useBehavior(muteStates.audio.enabled$);
   const videoEnabled = useBehavior(muteStates.video.enabled$);

src/room/RoomPage.tsx

@@ -25,6 +25,8 @@ import { useProfile } from "../profile/useProfile";
 import { useOptInAnalytics } from "../settings/settings";
 import { Link } from "../button/Link";
 import { ErrorView } from "../ErrorView";
+import { usePageTitle } from "../usePageTitle";
+import { useRoomName } from "./useRoomName";
 
 export const RoomPage: FC = (): ReactNode => {
   const urlParams = useUrlParams();
@@ -46,6 +48,20 @@ export const RoomPage: FC = (): ReactNode => {
 
   const groupCallState = useLoadGroupCall(client, roomIdOrAlias, viaServers);
 
+  // The page title is the page's to set, not the call's: a host embedding the
+  // call has a title of its own. So it is set here, for whichever room we have
+  // got as far as knowing about.
+  const roomName = useRoomName(
+    groupCallState.kind === "loaded" ? groupCallState.rtcSession.room : null,
+  );
+  usePageTitle(
+    roomName ??
+      (groupCallState.kind === "canKnock" ||
+      groupCallState.kind === "waitForInvite"
+        ? groupCallState.roomSummary.name
+        : undefined),
+  );
+
   useEffect(() => {
     // If we've finished loading, are not already authed and we've been given a display name as
     // a URL param, automatically register a passwordless user

src/room/useRoomName.ts

@@ -6,14 +6,27 @@ Please see LICENSE in the repository root for full details.
 */
 
 import { type Room, RoomEvent } from "matrix-js-sdk";
-import { useCallback } from "react";
+import { useCallback, useSyncExternalStore } from "react";
 
-import { useTypedEventEmitterState } from "../useEvents";
+/**
-
+ * The room's name, kept up to date. Null when there is no room yet, for a
-export function useRoomName(room: Room): string {
+ * caller that only sometimes has one.
-  return useTypedEventEmitterState(
+ */
-    room,
+export function useRoomName(room: Room): string;
-    RoomEvent.Name,
+export function useRoomName(room: Room | null): string | null;
-    useCallback(() => room.name, [room]),
+export function useRoomName(room: Room | null): string | null {
+  const subscribe = useCallback(
+    (onChange: () => void) => {
+      if (room === null) return (): void => {};
+      room.on(RoomEvent.Name, onChange);
+      return (): void => {
+        room.off(RoomEvent.Name, onChange);
+      };
+    },
+    [room],
+  );
+  return useSyncExternalStore(
+    subscribe,
+    useCallback(() => room?.name ?? null, [room]),
   );
 }