diff --git a/src/frontend/src/features/pip/components/layout/PipFocusLayout.tsx b/src/frontend/src/features/pip/components/layout/PipFocusLayout.tsx deleted file mode 100644 index ff5d493f..00000000 --- a/src/frontend/src/features/pip/components/layout/PipFocusLayout.tsx +++ /dev/null @@ -1,86 +0,0 @@ -import { memo } from 'react' -import type { TrackReferenceOrPlaceholder } from '@livekit/components-core' -import { styled } from '@/styled-system/jsx' -import { ParticipantTile } from '@/features/rooms/livekit/components/ParticipantTile' -import { getTrackKey } from '../../utils/pipTrackSelection' - -type PipFocusLayoutProps = { - mainTrack?: TrackReferenceOrPlaceholder - thumbnailTrack?: TrackReferenceOrPlaceholder -} - -/** - * Focus layout used when 1-2 tracks are visible in the PiP window. - * - * The main tile is letterboxed (object-fit: contain) so the camera is - * never stretched to a non-video aspect and leaves dark padding - * above/below when the window shape doesn't match the source. - * The thumbnail keeps the usual cover fill. - */ -export const PipFocusLayout = memo( - ({ mainTrack, thumbnailTrack }: PipFocusLayoutProps) => { - return ( - - {mainTrack && ( - - - - )} - {thumbnailTrack && ( - - - - )} - - ) - } -) -PipFocusLayout.displayName = 'PipFocusLayout' - -const FocusContainer = styled('div', { - base: { - position: 'relative', - width: '100%', - height: '100%', - borderRadius: '8px', - overflow: 'hidden', - backgroundColor: 'primaryDark.100', - boxSizing: 'border-box', - }, -}) - -const MainSlot = styled('div', { - base: { - width: '100%', - height: '100%', - borderRadius: '8px', - overflow: 'hidden', - '& .lk-participant-media-video': { - objectFit: 'contain', - }, - }, -}) - -const Thumbnail = styled('div', { - base: { - position: 'absolute', - right: '1.25rem', - bottom: '1.25rem', - width: '42%', - maxWidth: '220px', - minWidth: '140px', - aspectRatio: '16 / 9', - borderRadius: '8px', - overflow: 'hidden', - boxShadow: 'md', - zIndex: 2, - }, -}) diff --git a/src/frontend/src/features/pip/components/layout/PipStage.tsx b/src/frontend/src/features/pip/components/layout/PipStage.tsx index 1102c453..91b249cf 100644 --- a/src/frontend/src/features/pip/components/layout/PipStage.tsx +++ b/src/frontend/src/features/pip/components/layout/PipStage.tsx @@ -2,7 +2,7 @@ import React, { useMemo } from 'react' import { usePagination, useTracks } from '@livekit/components-react' import { RoomEvent, Track } from 'livekit-client' import { styled } from '@/styled-system/jsx' -import { PipFocusLayout } from './PipFocusLayout' +import { OneToOneFocusLayout } from '@/features/layout/components/OneToOneFocusLayout' import { PipGridLayout } from './PipGridLayout' import { PipPagination } from './PipPagination' import { PipScreenShareLayout } from './PipScreenShareLayout' @@ -59,9 +59,11 @@ export const PipStage = () => { if (cameraTracks.length <= 1) { return ( - ) @@ -99,7 +101,12 @@ export const PipStage = () => { return ( - + ) }