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) {