From 66a36eff73158f9074e12b59659d447ad050ca4d Mon Sep 17 00:00:00 2001
From: lebaudantoine <lebaud.antoine131@gmail.com>
Date: Thu, 24 Jul 2025 14:49:49 +0200
Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F(frontend)=20refactor=20conne?=
 =?UTF-8?q?ction=20warmup=20to=20use=20LiveKit=20methods?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Replace custom connection warmup implementation with LiveKit's built-in
methods for better reliability and consistency.
---
 .../features/rooms/components/Conference.tsx  | 52 ++++++++-----------
 1 file changed, 22 insertions(+), 30 deletions(-)

diff --git a/src/frontend/src/features/rooms/components/Conference.tsx b/src/frontend/src/features/rooms/components/Conference.tsx
index d84cc6cd..27c0a303 100644
--- a/src/frontend/src/features/rooms/components/Conference.tsx
+++ b/src/frontend/src/features/rooms/components/Conference.tsx
@@ -57,36 +57,6 @@ export const Conference = ({
     },
   })
 
-  /**
-   * Warm up connection to LiveKit server before joining room
-   * This prefetch helps reduce initial connection latency by establishing
-   * an early HTTP connection to the WebRTC signaling server
-   *
-   * FIREFOX + PROXY WORKAROUND:
-   * On Firefox behind proxy configurations, WebSocket signaling fails to establish.
-   * Client receives HTTP 200 instead of expected 101 (Switching Protocols).
-   * This appears to be a certificate/security issue where the initial request
-   * is considered unsecure. By first calling the signaling server via HTTPS,
-   * subsequent WebSocket establishment works correctly in these setups.
-   * This is a temporary workaround - issue is reproducible on LiveKit's demo app.
-   */
-  useEffect(() => {
-    const warmUpLivekitConnection = async () => {
-      if (isConnectionWarmedUp || !apiConfig) return
-      try {
-        // Make HTTPS request to establish secure connection
-        // This resolves Firefox+proxy WebSocket handshake issues
-        await fetch(apiConfig.livekit.url)
-        setIsConnectionWarmedUp(true)
-      } catch (error) {
-        // Don't block room connection if warmup fails
-        console.warn('LiveKit connection warmup failed:', error)
-        setIsConnectionWarmedUp(true)
-      }
-    }
-    warmUpLivekitConnection()
-  }, [isConnectionWarmedUp, apiConfig])
-
   const {
     status: fetchStatus,
     isError: isFetchError,
@@ -127,6 +97,28 @@ export const Conference = ({
 
   const room = useMemo(() => new Room(roomOptions), [roomOptions])
 
+  useEffect(() => {
+    /**
+     * Warm up connection to LiveKit server before joining room
+     * This prefetch helps reduce initial connection latency by establishing
+     * an early HTTP connection to the WebRTC signaling server
+     *
+     * FIREFOX + PROXY WORKAROUND:
+     * On Firefox behind proxy configurations, WebSocket signaling fails to establish.
+     * Client receives HTTP 200 instead of expected 101 (Switching Protocols).
+     * This appears to be a certificate/security issue where the initial request
+     * is considered unsecure. By first calling the signaling server via HTTPS,
+     * subsequent WebSocket establishment works correctly in these setups.
+     * This is a workaround - issue is reproducible on LiveKit's demo app.
+     */
+    const prepareConnection = async () => {
+      if (!apiConfig || isConnectionWarmedUp) return
+      await room.prepareConnection(apiConfig.livekit.url)
+      setIsConnectionWarmedUp(true)
+    }
+    prepareConnection()
+  }, [room, apiConfig, isConnectionWarmedUp])
+
   const [showInviteDialog, setShowInviteDialog] = useState(mode === 'create')
   const [mediaDeviceError, setMediaDeviceError] = useState<{
     error: MediaDeviceFailure | null