From b4b4ff79d9b696e32da2645d9562d84bfc78be16 Mon Sep 17 00:00:00 2001
From: lebaudantoine <lebaud.antoine131@gmail.com>
Date: Sat, 1 Feb 2025 15:03:55 +0100
Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F(frontend)=20refactor=20full?=
 =?UTF-8?q?=20screen=20to=20allow=20video=20args?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

Needed to zoom a specific video track.
---
 .../controls/Options/FullScreenMenuItem.tsx   |  2 +-
 .../rooms/livekit/hooks/useFullScreen.ts      | 29 +++++++++++++++++--
 2 files changed, 27 insertions(+), 4 deletions(-)

diff --git a/src/frontend/src/features/rooms/livekit/components/controls/Options/FullScreenMenuItem.tsx b/src/frontend/src/features/rooms/livekit/components/controls/Options/FullScreenMenuItem.tsx
index 8f5f25ee..97e62416 100644
--- a/src/frontend/src/features/rooms/livekit/components/controls/Options/FullScreenMenuItem.tsx
+++ b/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
diff --git a/src/frontend/src/features/rooms/livekit/hooks/useFullScreen.ts b/src/frontend/src/features/rooms/livekit/hooks/useFullScreen.ts
index f4b5f369..802ff96e 100644
--- a/src/frontend/src/features/rooms/livekit/hooks/useFullScreen.ts
+++ b/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) {