From dffcb83fffc4ca2800f2b0d20b30d86263d42e88 Mon Sep 17 00:00:00 2001
From: lebaudantoine <lebaud.antoine131@gmail.com>
Date: Tue, 11 Aug 2026 09:53:13 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B(frontend)=20display=20the=20meetin?=
 =?UTF-8?q?g=20id=20in=20the=20join=20screen=20page=20title?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Fix a minor issue on the join screen: the page title was missing the
meeting id, even though the hook's documentation stated it should be
included.

Align the actual behavior with the documented one so the meeting id
now shows up in the browser tab title.
---
 CHANGELOG.md                                  |  1 +
 .../rooms/livekit/hooks/useRoomPageTitle.ts   | 20 +++++--------------
 .../rooms/livekit/prefabs/VideoConference.tsx |  2 --
 .../src/features/rooms/routes/Room.tsx        |  3 +++
 4 files changed, 9 insertions(+), 17 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 7247e762..f62ac7a4 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -30,6 +30,7 @@ and this project adheres to
 - 🐛(frontend) drop exact deviceId constraint on dynamic track creation
 - 🐛(frontend) fix permission store regression
 - 🐛(frontend) handle missing device errors gracefully
+- 🐛(frontend) display the meeting id in the join screen page title
 
 ## [1.25.2] - 2026-08-06
 
diff --git a/src/frontend/src/features/rooms/livekit/hooks/useRoomPageTitle.ts b/src/frontend/src/features/rooms/livekit/hooks/useRoomPageTitle.ts
index c8c5d60e..7b8bfe16 100644
--- a/src/frontend/src/features/rooms/livekit/hooks/useRoomPageTitle.ts
+++ b/src/frontend/src/features/rooms/livekit/hooks/useRoomPageTitle.ts
@@ -1,28 +1,18 @@
 import { useTitle } from 'hoofd'
-import { useRoomData } from './useRoomData'
 import { useMemo } from 'react'
 
 const APP_TITLE = import.meta.env.VITE_APP_TITLE ?? ''
 
 /**
- * Updates the browser tab title with the room name to help users easily find
+ * Updates the browser tab title with the room id to help users easily find
  * the meeting tab among many open tabs. Works on both the join screen and
  * once connected.
  */
-export const useRoomPageTitle = () => {
-  const roomData = useRoomData()
-
+export const useRoomPageTitle = (roomId?: string) => {
   const pageTitle = useMemo(() => {
-    if (!roomData) {
-      return APP_TITLE
-    }
-
-    const roomLabel = roomData.name || roomData.slug || ''
-
-    if (!roomLabel) return APP_TITLE
-
-    return `${APP_TITLE} - ${roomLabel}  `
-  }, [roomData])
+    if (!roomId) return APP_TITLE
+    return `${APP_TITLE} - ${roomId}`
+  }, [roomId])
 
   useTitle(pageTitle)
 }
diff --git a/src/frontend/src/features/rooms/livekit/prefabs/VideoConference.tsx b/src/frontend/src/features/rooms/livekit/prefabs/VideoConference.tsx
index 1859fff3..55b145ce 100644
--- a/src/frontend/src/features/rooms/livekit/prefabs/VideoConference.tsx
+++ b/src/frontend/src/features/rooms/livekit/prefabs/VideoConference.tsx
@@ -14,7 +14,6 @@ import { ConnectionObserver } from '../components/ConnectionObserver'
 import { reportError } from '@/features/analytics/telemetry'
 import { MediaStateObserver } from '../components/MediaStateObserver'
 import { RoomMetadataSynchronizer } from '../components/RoomMetadataSynchronizer'
-import { useRoomPageTitle } from '../hooks/useRoomPageTitle'
 import { useNoiseReduction } from '../hooks/useNoiseReduction'
 import { VideoResolutionSubscription } from '../components/VideoResolutionSubscription'
 import { SettingsDialogProvider } from '@/features/settings/components/SettingsDialogProvider'
@@ -55,7 +54,6 @@ export interface VideoConferenceProps extends React.HTMLAttributes<HTMLDivElemen
  * @public
  */
 export function VideoConference({ ...props }: VideoConferenceProps) {
-  useRoomPageTitle()
   useNoiseReduction()
 
   const { isOpen: isPictureInPictureOpen } = usePictureInPicture()
diff --git a/src/frontend/src/features/rooms/routes/Room.tsx b/src/frontend/src/features/rooms/routes/Room.tsx
index 68e67122..2b398a68 100644
--- a/src/frontend/src/features/rooms/routes/Room.tsx
+++ b/src/frontend/src/features/rooms/routes/Room.tsx
@@ -15,6 +15,7 @@ import {
 import { useConfig } from '@/api/useConfig.ts'
 import { LogLevel, setLogLevel } from 'livekit-client'
 import { useWatchDeviceAvailability } from '@/features/rooms/hooks/useWatchDeviceAvailability'
+import { useRoomPageTitle } from '@/features/rooms/livekit/hooks/useRoomPageTitle'
 
 const BaseRoom = ({ children }: { children: ReactNode }) => {
   return (
@@ -37,6 +38,8 @@ const Room = () => {
 
   const { data } = useConfig()
 
+  useRoomPageTitle(roomId)
+
   useEffect(() => {
     const shouldSilenceLogs = data?.silence_livekit_debug_logs || false
     setLogLevel(shouldSilenceLogs ? LogLevel.silent : LogLevel.debug)