diff --git a/src/frontend/src/features/layout/components/StageLayout.tsx b/src/frontend/src/features/layout/components/StageLayout.tsx index a4a22e156..a6a01a001 100644 --- a/src/frontend/src/features/layout/components/StageLayout.tsx +++ b/src/frontend/src/features/layout/components/StageLayout.tsx @@ -1,12 +1,19 @@ -import { FocusLayoutContainer, useTracks } from '@livekit/components-react' +import { + FocusLayoutContainer, + useParticipantInfo, + useTracks, + VideoTrack, +} from '@livekit/components-react' import { CarouselLayout } from '@/features/layout/components/CarouselLayout' import { FocusLayout } from '@/features/layout/components/FocusLayout' import { ParticipantTile } from '@/features/participantTile/components/ParticipantTile' import { GridLayout } from '@/features/layout/components/GridLayout' +import { ScreenShareZoomableVideo } from '@/features/rooms/livekit/components/ScreenShareZoomableVideo' import { isEqualTrackRef, isTrackReference, log, + type TrackReference, type TrackReferenceOrPlaceholder, } from '@livekit/components-core' import { Track } from 'livekit-client' @@ -18,6 +25,29 @@ import { } from '@/stores/screenSharePopout' import { useEffect, useRef } from 'react' +// Only the media part of the tile: it is what the other window shows (video, +// zoom bar, fullscreen, bring-back button). The rest of the tile would stay +// hidden anyway. Hidden so a screen reader and the keyboard don't find the +// same share twice. +const DetachedScreenShare = ({ trackRef }: { trackRef: TrackReference }) => { + const hostRef = useRef(null) + const { identity, name } = useParticipantInfo({ + participant: trackRef.participant, + }) + + return ( + + ) +} + export const StageLayout = () => { const lastAutoFocusedScreenShareTrack = useRef(null) @@ -41,7 +71,7 @@ export const StageLayout = () => { // The popped-out share stays mounted below, but out of the grid and the // carousel. It comes back with the other tracks when its window closes. const visibleTracks: TrackReferenceOrPlaceholder[] = [] - let detachedTrack: TrackReferenceOrPlaceholder | undefined + let detachedTrack: TrackReference | undefined for (const track of tracks) { if (isTrackReference(track) && track.publication.trackSid === detachedSid) { detachedTrack = track @@ -122,14 +152,7 @@ export const StageLayout = () => { return ( <> - {/* The tile keeps living in the meeting, hidden, so the other window - can show it. Hidden so a screen reader and the keyboard don't find - the same share twice. */} - {detachedTrack && ( - - )} + {detachedTrack && } {!pinnedTrackRef ? (