From f4493d412fcd64395218afce95149f728d72ad62 Mon Sep 17 00:00:00 2001
From: lebaudantoine <lebaud.antoine131@gmail.com>
Date: Tue, 14 Jul 2026 18:33:50 +0200
Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F(frontend)=20turn=20Connectio?=
 =?UTF-8?q?nObserver=20hook=20into=20a=20leaf=20component?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Refactor the connection observer, previously a hook consumed inside
the Videoconference component, into a dedicated leaf component in
the tree.

This avoids re-rendering the whole Videoconference component every
time the connection state changes; only the leaf reacts to it.
---
 .../ConnectionObserver.tsx}                   | 28 ++++--
 .../useIsAdvancedConnectionObserverEnabled.ts | 12 ---
 .../rooms/livekit/prefabs/VideoConference.tsx | 88 ++++++++++---------
 3 files changed, 66 insertions(+), 62 deletions(-)
 rename src/frontend/src/features/rooms/livekit/{hooks/useConnectionObserver.ts => components/ConnectionObserver.tsx} (94%)
 delete mode 100644 src/frontend/src/features/rooms/livekit/hooks/useIsAdvancedConnectionObserverEnabled.ts

diff --git a/src/frontend/src/features/rooms/livekit/hooks/useConnectionObserver.ts b/src/frontend/src/features/rooms/livekit/components/ConnectionObserver.tsx
similarity index 94%
rename from src/frontend/src/features/rooms/livekit/hooks/useConnectionObserver.ts
rename to src/frontend/src/features/rooms/livekit/components/ConnectionObserver.tsx
index e6975952..83f7f1e0 100644
--- a/src/frontend/src/features/rooms/livekit/hooks/useConnectionObserver.ts
+++ b/src/frontend/src/features/rooms/livekit/components/ConnectionObserver.tsx
@@ -1,27 +1,35 @@
+import { useConfig } from '@/api/useConfig'
+import { useIsAnalyticsEnabled } from '@/features/analytics/hooks/useIsAnalyticsEnabled'
 import {
   useRemoteParticipants,
   useRoomContext,
 } from '@livekit/components-react'
 import { useEffect, useRef } from 'react'
-import { DisconnectReason, RoomEvent } from 'livekit-client'
-import { useIsAnalyticsEnabled } from '@/features/analytics/hooks/useIsAnalyticsEnabled'
-import posthog from 'posthog-js'
-import { connectionObserverStore } from '@/stores/connectionObserver'
-import { useConfig } from '@/api/useConfig'
-import { userPreferencesStore } from '@/stores/userPreferences'
 import { useSnapshot } from 'valtio'
-import { useIsAdvancedConnectionObserverEnabled } from './useIsAdvancedConnectionObserverEnabled'
+import { DisconnectReason, RoomEvent } from 'livekit-client'
+
+import { userPreferencesStore } from '@/stores/userPreferences'
+import { connectionObserverStore } from '@/stores/connectionObserver'
+
+import posthog from 'posthog-js'
+import { useFeatureFlagEnabled } from 'posthog-js/react'
+import { isMobileBrowser } from '@livekit/components-core'
+import { FeatureFlags } from '@/features/analytics/enums'
 
 const CANDIDATE_POLL_INTERVAL_MS = 5000
 
-export const useConnectionObserver = () => {
+export const ConnectionObserver = () => {
   const room = useRoomContext()
   const connectionStartTimeRef = useRef<number | null>(null)
 
   const { data } = useConfig()
   const isAnalyticsEnabled = useIsAnalyticsEnabled()
+
+  const featureEnabled = useFeatureFlagEnabled(FeatureFlags.candidatePolling)
+  const isMobile = isMobileBrowser()
+
   const isAdvancedConnectionObserverEnabled =
-    useIsAdvancedConnectionObserverEnabled()
+    !isMobile && isAnalyticsEnabled && featureEnabled
 
   const userPreferencesSnap = useSnapshot(userPreferencesStore)
 
@@ -232,4 +240,6 @@ export const useConnectionObserver = () => {
       connectionStartTimeRef.current = null
     }
   }, [])
+
+  return null
 }
diff --git a/src/frontend/src/features/rooms/livekit/hooks/useIsAdvancedConnectionObserverEnabled.ts b/src/frontend/src/features/rooms/livekit/hooks/useIsAdvancedConnectionObserverEnabled.ts
deleted file mode 100644
index 9849361d..00000000
--- a/src/frontend/src/features/rooms/livekit/hooks/useIsAdvancedConnectionObserverEnabled.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import { useFeatureFlagEnabled } from 'posthog-js/react'
-import { FeatureFlags } from '@/features/analytics/enums.ts'
-import { useIsAnalyticsEnabled } from '@/features/analytics/hooks/useIsAnalyticsEnabled.ts'
-import { isMobileBrowser } from '@livekit/components-core'
-
-export const useIsAdvancedConnectionObserverEnabled = () => {
-  const featureEnabled = useFeatureFlagEnabled(FeatureFlags.candidatePolling)
-  const isAnalyticsEnabled = useIsAnalyticsEnabled()
-
-  const isMobile = isMobileBrowser()
-  return !isMobile && isAnalyticsEnabled && featureEnabled
-}
diff --git a/src/frontend/src/features/rooms/livekit/prefabs/VideoConference.tsx b/src/frontend/src/features/rooms/livekit/prefabs/VideoConference.tsx
index 685d081b..c0ca4420 100644
--- a/src/frontend/src/features/rooms/livekit/prefabs/VideoConference.tsx
+++ b/src/frontend/src/features/rooms/livekit/prefabs/VideoConference.tsx
@@ -10,7 +10,7 @@ import { ControlBar } from './ControlBar/ControlBar'
 import { SidePanel } from '../components/SidePanel'
 import { RecordingProvider } from '@/features/recording'
 import { ScreenShareErrorModal } from '../components/ScreenShareErrorModal'
-import { useConnectionObserver } from '../hooks/useConnectionObserver'
+import { ConnectionObserver } from '../components/ConnectionObserver'
 import { useRoomPageTitle } from '../hooks/useRoomPageTitle'
 import { useNoiseReduction } from '../hooks/useNoiseReduction'
 import { useRegisterKeyboardShortcut } from '@/features/shortcuts/useRegisterKeyboardShortcut'
@@ -56,7 +56,6 @@ export interface VideoConferenceProps extends React.HTMLAttributes<HTMLDivElemen
 export function VideoConference({ ...props }: VideoConferenceProps) {
   const { toggleSettingsDialog } = useSettingsDialog()
 
-  useConnectionObserver()
   useRoomPageTitle()
   useVideoResolutionSubscription()
   useSyncLiveKitMetadata()
@@ -75,44 +74,51 @@ export function VideoConference({ ...props }: VideoConferenceProps) {
   const [isShareErrorVisible, setIsShareErrorVisible] = useState(false)
 
   return (
-    <div
-      className="lk-video-conference"
-      {...props}
-      style={{
-        overflowX: 'hidden',
-      }}
-    >
-      {isWeb() && (
-        <>
-          <ScreenShareErrorModal
-            isOpen={isShareErrorVisible}
-            onClose={() => setIsShareErrorVisible(false)}
-          />
-          <IsIdleDisconnectModal />
-          <PinAnnouncer />
-          <RoomContentArea>
-            {isPictureInPictureOpen ? <PipRoomPlaceholder /> : <StageLayout />}
-          </RoomContentArea>
-          <ControlBar
-            onDeviceError={(e) => {
-              console.error(e)
-              if (
-                e.source == Track.Source.ScreenShare &&
-                e.error.toString() ==
-                  'NotAllowedError: Permission denied by system'
-              ) {
-                setIsShareErrorVisible(true)
-              }
-            }}
-          />
-          <SidePanel />
-        </>
-      )}
-      <RoomAudioRenderer />
-      <ConnectionStateToast />
-      <RecordingProvider />
-      <SettingsDialogProvider />
-      <ReactionPortals />
-    </div>
+    <>
+      <ConnectionObserver />
+      <div
+        className="lk-video-conference"
+        {...props}
+        style={{
+          overflowX: 'hidden',
+        }}
+      >
+        {isWeb() && (
+          <>
+            <ScreenShareErrorModal
+              isOpen={isShareErrorVisible}
+              onClose={() => setIsShareErrorVisible(false)}
+            />
+            <IsIdleDisconnectModal />
+            <PinAnnouncer />
+            <RoomContentArea>
+              {isPictureInPictureOpen ? (
+                <PipRoomPlaceholder />
+              ) : (
+                <StageLayout />
+              )}
+            </RoomContentArea>
+            <ControlBar
+              onDeviceError={(e) => {
+                console.error(e)
+                if (
+                  e.source == Track.Source.ScreenShare &&
+                  e.error.toString() ==
+                    'NotAllowedError: Permission denied by system'
+                ) {
+                  setIsShareErrorVisible(true)
+                }
+              }}
+            />
+            <SidePanel />
+          </>
+        )}
+        <RoomAudioRenderer />
+        <ConnectionStateToast />
+        <RecordingProvider />
+        <SettingsDialogProvider />
+        <ReactionPortals />
+      </div>
+    </>
   )
 }