⚡️(frontend) push video resolution subscription down the tree

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

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
 }

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}