From d2e13cc82657a625e6b2078cc699a53a11a0e95b Mon Sep 17 00:00:00 2001
From: lebaudantoine <lebaud.antoine131@gmail.com>
Date: Thu, 16 Jul 2026 10:48:29 +0200
Subject: [PATCH] =?UTF-8?q?=E2=9A=A1=EF=B8=8F(frontend)=20push=20video=20r?=
 =?UTF-8?q?esolution=20subscription=20down=20the=20tree?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Move the video resolution subscription down into a lower component
so it no longer re-renders the whole Videoconference component on
every resolution change.

The overall approach still needs validation, but this already avoids
the top-level re-render and is a clear improvement over the current
behavior.i
---
 .../VideoResolutionSubscription.tsx}                     | 9 +++++----
 .../features/rooms/livekit/prefabs/VideoConference.tsx   | 4 ++--
 2 files changed, 7 insertions(+), 6 deletions(-)
 rename src/frontend/src/features/rooms/livekit/{hooks/useVideoResolutionSubscription.ts => components/VideoResolutionSubscription.tsx} (90%)

diff --git a/src/frontend/src/features/rooms/livekit/hooks/useVideoResolutionSubscription.ts b/src/frontend/src/features/rooms/livekit/components/VideoResolutionSubscription.tsx
similarity index 90%
rename from src/frontend/src/features/rooms/livekit/hooks/useVideoResolutionSubscription.ts
rename to src/frontend/src/features/rooms/livekit/components/VideoResolutionSubscription.tsx
index 38a39c1c..b045140a 100644
--- a/src/frontend/src/features/rooms/livekit/hooks/useVideoResolutionSubscription.ts
+++ b/src/frontend/src/features/rooms/livekit/components/VideoResolutionSubscription.tsx
@@ -11,16 +11,16 @@ import { useSnapshot } from 'valtio'
 import { userChoicesStore } from '@/stores/userChoices'
 
 /**
- * This hook sets initial video quality for new participants as they join.
+ * Sets initial video quality for new participants as they join.
  * LiveKit doesn't allow handling video quality preferences at the room level.
  */
-export const useVideoResolutionSubscription = () => {
+export const VideoResolutionSubscription = () => {
   const { videoSubscribeQuality } = useSnapshot(userChoicesStore)
-
   const room = useRoomContext()
 
   useEffect(() => {
     if (!room) return
+
     const handleTrackPublished = (
       publication: RemoteTrackPublication,
       _participant: RemoteParticipant
@@ -41,9 +41,10 @@ export const useVideoResolutionSubscription = () => {
     }
 
     room.on(RoomEvent.TrackPublished, handleTrackPublished)
-
     return () => {
       room.off(RoomEvent.TrackPublished, handleTrackPublished)
     }
   }, [room, videoSubscribeQuality])
+
+  return null
 }
diff --git a/src/frontend/src/features/rooms/livekit/prefabs/VideoConference.tsx b/src/frontend/src/features/rooms/livekit/prefabs/VideoConference.tsx
index 954f0857..e595e7b8 100644
--- a/src/frontend/src/features/rooms/livekit/prefabs/VideoConference.tsx
+++ b/src/frontend/src/features/rooms/livekit/prefabs/VideoConference.tsx
@@ -13,8 +13,8 @@ import { ScreenShareErrorModal } from '../components/ScreenShareErrorModal'
 import { ConnectionObserver } from '../components/ConnectionObserver'
 import { useRoomPageTitle } from '../hooks/useRoomPageTitle'
 import { useNoiseReduction } from '../hooks/useNoiseReduction'
-import { useVideoResolutionSubscription } from '../hooks/useVideoResolutionSubscription'
 import { useSyncLiveKitMetadata } from '../hooks/useSyncLiveKitMetadata'
+import { VideoResolutionSubscription } from '../components/VideoResolutionSubscription'
 import { SettingsDialogProvider } from '@/features/settings/components/SettingsDialogProvider'
 import { IsIdleDisconnectModal } from '../components/IsIdleDisconnectModal'
 import { ReactionPortals } from '@/features/reactions/components/ReactionPortals'
@@ -52,7 +52,6 @@ export interface VideoConferenceProps extends React.HTMLAttributes<HTMLDivElemen
  */
 export function VideoConference({ ...props }: VideoConferenceProps) {
   useRoomPageTitle()
-  useVideoResolutionSubscription()
   useSyncLiveKitMetadata()
   useNoiseReduction()
 
@@ -63,6 +62,7 @@ export function VideoConference({ ...props }: VideoConferenceProps) {
   return (
     <>
       <ConnectionObserver />
+      <VideoResolutionSubscription />
       <div
         className="lk-video-conference"
         {...props}