♻️(frontend) refactor full screen to allow video args

useFullScreen hook is now generic, it allows passing a specific
video element to zoom in.

Needed to zoom a specific video track.

src/frontend/src/features/rooms/livekit/components/controls/Options/FullScreenMenuItem.tsx

@@ -7,7 +7,7 @@ import { useFullScreen } from '../../../hooks/useFullScreen'
 export const FullScreenMenuItem = () => {
   const { t } = useTranslation('rooms', { keyPrefix: 'options.items' })
   const { toggleFullScreen, isCurrentlyFullscreen, isFullscreenAvailable } =
-    useFullScreen()
+    useFullScreen({})
 
   if (!isFullscreenAvailable) {
     return null

src/frontend/src/features/rooms/livekit/hooks/useFullScreen.ts

@@ -2,9 +2,32 @@
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-nocheck
 
-import { useState } from 'react'
+import { useMemo, useState } from 'react'
+import { TrackReferenceOrPlaceholder } from '@livekit/components-core'
+
+export function useFullScreen({
+  trackRef,
+}: {
+  trackRef?: TrackReferenceOrPlaceholder
+}) {
+  const videoElement = useMemo(() => {
+    const elements = trackRef?.publication?.track?.attachedElements
+
+    if (!elements) return
+
+    // Find the visible video element
+    const likeKitElement = elements.find((el) =>
+      el.classList.contains('lk-participant-media-video')
+    )
+
+    if (!likeKitElement) {
+      console.warn('Could not find LiveKit-managed video element')
+      return elements[0] || null
+    }
+
+    return likeKitElement
+  }, [trackRef])
 
-export function useFullScreen() {
   const getIsFullscreen = () => {
     return !!(
       document.fullscreenElement ||
@@ -24,7 +47,7 @@ export function useFullScreen() {
 
   const enterFullscreen = async () => {
     try {
-      const docEl = document.documentElement
+      const docEl = videoElement || document.documentElement
       if (docEl.requestFullscreen) {
         await docEl.requestFullscreen()
       } else if (docEl.webkitRequestFullscreen) {