♻️(frontend) use OneToOneFocusLayout in PiP stage

Replace PipFocusLayout with the shared focus layout.

src/frontend/src/features/pip/components/layout/PipFocusLayout.tsx

@@ -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/participantTile/components/ParticipantTile'
-import { getTrackKey } from '@/features/layout/utils/trackSelection'
-
-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 (
-      <FocusContainer>
-        {mainTrack && (
-          <MainSlot>
-            <ParticipantTile
-              key={getTrackKey(mainTrack)}
-              trackRef={mainTrack}
-              disableTileControls
-            />
-          </MainSlot>
-        )}
-        {thumbnailTrack && (
-          <Thumbnail>
-            <ParticipantTile
-              key={getTrackKey(thumbnailTrack)}
-              trackRef={thumbnailTrack}
-              disableTileControls
-            />
-          </Thumbnail>
-        )}
-      </FocusContainer>
-    )
-  }
-)
-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,
-  },
-})

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 (
         <StageFrame>
-          <PipFocusLayout
+          <OneToOneFocusLayout
             mainTrack={screenShareTrack}
             thumbnailTrack={cameraTracks[0]}
+            disableTileControls
+            context="pip"
           />
         </StageFrame>
       )
@@ -99,7 +101,12 @@ export const PipStage = () => {
 
   return (
     <StageFrame>
-      <PipFocusLayout mainTrack={mainTrack} thumbnailTrack={thumbnailTrack} />
+      <OneToOneFocusLayout
+        mainTrack={mainTrack}
+        thumbnailTrack={thumbnailTrack}
+        disableTileControls
+        context="pip"
+      />
     </StageFrame>
   )
 }