🐛(frontend) fix PiP tile corner clipping and unify 4px radius

Set a single clipping owner per PiP layout and use a consistent 4px radius.
2026-07-26 11:58:53 +00:00 · 2026-04-24 13:36:15 +02:00
parent 8b1d200740
commit 90ef4ce025
4 changed files with 253 additions and 257 deletions
@@ -54,23 +54,17 @@ const PipContainer = styled('div', {
    display: 'grid',
    gridTemplateRows: 'minmax(0, 1fr) auto auto',
    backgroundColor: 'primaryDark.50',
+    // Disable LiveKit's own border-radius on tiles so our containers
+    // (GridCell, Thumbnail, StageFrame) own the clipping exclusively.
+    '--lk-border-radius': '4px',
    '& .lk-participant-tile': {
      height: '100%',
-      overflow: 'hidden',
-      backgroundColor: 'primaryDark.100',
    },
    '& .lk-participant-media': {
      height: '100%',
-      overflow: 'hidden',
-      borderRadius: 0,
-      backgroundColor: 'primaryDark.100',
    },
    '& .lk-participant-media-video': {
-      display: 'block',
-      width: '100%',
      height: '100%',
-      borderRadius: 0,
-      backgroundColor: 'primaryDark.100',
      objectFit: 'cover',
    },
    '& .lk-grid-layout': {
@@ -1,79 +1,81 @@
-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(function PipFocusLayout({
-  mainTrack,
-  thumbnailTrack,
-}: PipFocusLayoutProps) {
-  return (
-    <FocusContainer>
-      <MainSlot>
-        <ParticipantTile
-          key={getTrackKey(mainTrack)}
-          trackRef={mainTrack}
-          disableMetadata
-        />
-      </MainSlot>
-      {thumbnailTrack && (
-        <Thumbnail>
-          <ParticipantTile
-            key={getTrackKey(thumbnailTrack)}
-            trackRef={thumbnailTrack}
-            disableMetadata
-          />
-        </Thumbnail>
-      )}
-    </FocusContainer>
-  )
-})
-
-const FocusContainer = styled('div', {
-  base: {
-    position: 'relative',
-    width: '100%',
-    height: '100%',
-    backgroundColor: 'primaryDark.100',
-  },
-})
-
-const MainSlot = styled('div', {
-  base: {
-    width: '100%',
-    height: '100%',
-    '& .lk-participant-media-video': {
-      objectFit: 'contain',
-    },
-  },
-})
-
-const Thumbnail = styled('div', {
-  base: {
-    position: 'absolute',
-    right: '1rem',
-    bottom: '1rem',
-    width: '42%',
-    maxWidth: '220px',
-    minWidth: '140px',
-    aspectRatio: '16 / 9',
-    borderRadius: 'md',
-    overflow: 'hidden',
-    boxShadow: 'md',
-    zIndex: 2,
-  },
-})
+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(function PipFocusLayout({
+  mainTrack,
+  thumbnailTrack,
+}: PipFocusLayoutProps) {
+  return (
+    <FocusContainer>
+      <MainSlot>
+        <ParticipantTile
+          key={getTrackKey(mainTrack)}
+          trackRef={mainTrack}
+          disableMetadata
+        />
+      </MainSlot>
+      {thumbnailTrack && (
+        <Thumbnail>
+          <ParticipantTile
+            key={getTrackKey(thumbnailTrack)}
+            trackRef={thumbnailTrack}
+            disableMetadata
+          />
+        </Thumbnail>
+      )}
+    </FocusContainer>
+  )
+})
+
+const FocusContainer = styled('div', {
+  base: {
+    position: 'relative',
+    width: '100%',
+    height: '100%',
+    borderRadius: '4px',
+    overflow: 'hidden',
+    backgroundColor: 'primaryDark.100',
+  },
+})
+
+const MainSlot = styled('div', {
+  base: {
+    width: '100%',
+    height: '100%',
+    '& .lk-participant-media-video': {
+      objectFit: 'contain',
+    },
+  },
+})
+
+const Thumbnail = styled('div', {
+  base: {
+    position: 'absolute',
+    right: '1rem',
+    bottom: '1rem',
+    width: '42%',
+    maxWidth: '220px',
+    minWidth: '140px',
+    aspectRatio: '16 / 9',
+    borderRadius: '4px',
+    overflow: 'hidden',
+    boxShadow: 'md',
+    zIndex: 2,
+  },
+})
@@ -1,82 +1,82 @@
-import { memo, useMemo, useRef } from 'react'
-import type { TrackReferenceOrPlaceholder } from '@livekit/components-core'
-import { styled } from '@/styled-system/jsx'
-import { ParticipantTile } from '@/features/rooms/livekit/components/ParticipantTile'
-import { usePipElementSize } from '../../hooks/usePipElementSize'
-import { usePipFlipAnimations } from '../../hooks/usePipFlipAnimations'
-import { computePipGridLayout } from '../../utils/pipGrid'
-import { getTrackKey } from '../../utils/pipTrackSelection'
-
-type PipGridLayoutProps = {
-  tracks: TrackReferenceOrPlaceholder[]
-}
-
-/**
- * Adaptive grid used when 3+ tracks are visible in the PiP window.
- *
- * All grid math (shape choice + partial-row stretching) is delegated to
- * `computePipGridLayout`. This component only measures the container,
- * applies the returned placements, and plays a FLIP animation when the
- * tile set or grid shape changes (participant joins/leaves or shape shift).
- *
- * Tiles keep a stable key so resizing never remounts <video> elements.
- */
-export const PipGridLayout = memo(function PipGridLayout({
-  tracks,
-}: PipGridLayoutProps) {
-  const containerRef = useRef<HTMLDivElement>(null)
-  const { width, height } = usePipElementSize(containerRef)
-
-  const tileKeys = useMemo(() => tracks.map(getTrackKey), [tracks])
-
-  const { rows, subColumns, placements } = useMemo(
-    () => computePipGridLayout(tracks.length, width, height),
-    [tracks.length, width, height]
-  )
-
-  const gridStyle = useMemo(
-    () => ({
-      gridTemplateColumns: `repeat(${subColumns}, minmax(0, 1fr))`,
-      gridTemplateRows: `repeat(${rows}, minmax(0, 1fr))`,
-    }),
-    [subColumns, rows]
-  )
-
-  usePipFlipAnimations(containerRef, tileKeys)
-
-  return (
-    <GridContainer ref={containerRef} style={gridStyle}>
-      {tracks.map((track, index) => (
-        <GridCell key={tileKeys[index]} style={placements[index]}>
-          <ParticipantTile trackRef={track} disableMetadata />
-        </GridCell>
-      ))}
-    </GridContainer>
-  )
-})
-
-const GridContainer = styled('div', {
-  base: {
-    width: '100%',
-    height: '100%',
-    display: 'grid',
-    gap: '0.25rem',
-  },
-})
-
-const GridCell = styled('div', {
-  base: {
-    position: 'relative',
-    minWidth: 0,
-    minHeight: 0,
-    borderRadius: 'md',
-    overflow: 'hidden',
-    backgroundColor: 'primaryDark.100',
-    // Paint on own layer so FLIP transforms don't trigger layout thrash.
-    willChange: 'transform',
-    '& .lk-participant-tile': {
-      width: '100%',
-      height: '100%',
-    },
-  },
-})
+import { memo, useMemo, useRef } from 'react'
+import type { TrackReferenceOrPlaceholder } from '@livekit/components-core'
+import { styled } from '@/styled-system/jsx'
+import { ParticipantTile } from '@/features/rooms/livekit/components/ParticipantTile'
+import { usePipElementSize } from '../../hooks/usePipElementSize'
+import { usePipFlipAnimations } from '../../hooks/usePipFlipAnimations'
+import { computePipGridLayout } from '../../utils/pipGrid'
+import { getTrackKey } from '../../utils/pipTrackSelection'
+
+type PipGridLayoutProps = {
+  tracks: TrackReferenceOrPlaceholder[]
+}
+
+/**
+ * Adaptive grid used when 3+ tracks are visible in the PiP window.
+ *
+ * All grid math (shape choice + partial-row stretching) is delegated to
+ * `computePipGridLayout`. This component only measures the container,
+ * applies the returned placements, and plays a FLIP animation when the
+ * tile set or grid shape changes (participant joins/leaves or shape shift).
+ *
+ * Tiles keep a stable key so resizing never remounts <video> elements.
+ */
+export const PipGridLayout = memo(function PipGridLayout({
+  tracks,
+}: PipGridLayoutProps) {
+  const containerRef = useRef<HTMLDivElement>(null)
+  const { width, height } = usePipElementSize(containerRef)
+
+  const tileKeys = useMemo(() => tracks.map(getTrackKey), [tracks])
+
+  const { rows, subColumns, placements } = useMemo(
+    () => computePipGridLayout(tracks.length, width, height),
+    [tracks.length, width, height]
+  )
+
+  const gridStyle = useMemo(
+    () => ({
+      gridTemplateColumns: `repeat(${subColumns}, minmax(0, 1fr))`,
+      gridTemplateRows: `repeat(${rows}, minmax(0, 1fr))`,
+    }),
+    [subColumns, rows]
+  )
+
+  usePipFlipAnimations(containerRef, tileKeys)
+
+  return (
+    <GridContainer ref={containerRef} style={gridStyle}>
+      {tracks.map((track, index) => (
+        <GridCell key={tileKeys[index]} style={placements[index]}>
+          <ParticipantTile trackRef={track} disableMetadata />
+        </GridCell>
+      ))}
+    </GridContainer>
+  )
+})
+
+const GridContainer = styled('div', {
+  base: {
+    width: '100%',
+    height: '100%',
+    display: 'grid',
+    gap: '0.25rem',
+  },
+})
+
+const GridCell = styled('div', {
+  base: {
+    position: 'relative',
+    minWidth: 0,
+    minHeight: 0,
+    borderRadius: '4px',
+    overflow: 'hidden',
+    backgroundColor: 'primaryDark.100',
+    // Paint on own layer so FLIP transforms don't trigger layout thrash.
+    willChange: 'transform',
+    '& .lk-participant-tile': {
+      width: '100%',
+      height: '100%',
+    },
+  },
+})
@@ -1,87 +1,87 @@
-import { useEffect, useMemo, useRef } from 'react'
-import { useTranslation } from 'react-i18next'
-import { useTracks } from '@livekit/components-react'
-import { Track } from 'livekit-client'
-import { styled } from '@/styled-system/jsx'
-import {
-  isCameraTrack,
-  pickLocalCameraTrack,
-  pickRemoteCameraTrack,
-  pickScreenShareTrack,
-} from '../../utils/pipTrackSelection'
-import { PipFocusLayout } from './PipFocusLayout'
-import { PipGridLayout } from './PipGridLayout'
-
-/**
- * Above this count the PiP stage switches from the focus layout
- * (main + thumbnail) to the adaptive grid layout.
- */
-const FOCUS_MAX_TILES = 2
-
-// Handles which layout to render inside the PiP stage.
-
-export const PipStage = () => {
-  const { t } = useTranslation('rooms', {
-    keyPrefix: 'options.items.pictureInPicture',
-  })
-  const tracks = useTracks(
-    [
-      { source: Track.Source.Camera, withPlaceholder: true },
-      { source: Track.Source.ScreenShare, withPlaceholder: false },
-    ],
-    { onlySubscribed: false }
-  )
-
-  const screenShareTrack = useMemo(() => pickScreenShareTrack(tracks), [tracks])
-
-  // Order the list so the "focus target" (screen share when available,
-  // otherwise a remote camera) is first. Both layouts consume this order.
-  const stageTracks = useMemo(() => {
-    const cameraTracks = tracks.filter(isCameraTrack)
-    if (!screenShareTrack) return cameraTracks
-    return [screenShareTrack, ...cameraTracks]
-  }, [tracks, screenShareTrack])
-
-  // avoid tabbing to the stage when it's not visible
-  const frameRef = useRef<HTMLDivElement>(null)
-  useEffect(() => {
-    frameRef.current?.setAttribute('inert', '')
-  }, [])
-
-  if (stageTracks.length === 0) return null
-
-  const stageLabel = t('stage')
-
-  if (stageTracks.length > FOCUS_MAX_TILES) {
-    return (
-      <StageFrame ref={frameRef} role="region" aria-label={stageLabel}>
-        <PipGridLayout tracks={stageTracks} />
-      </StageFrame>
-    )
-  }
-
-  const localCameraTrack = pickLocalCameraTrack(stageTracks)
-  const remoteCameraTrack = pickRemoteCameraTrack(stageTracks)
-  const mainTrack = screenShareTrack ?? remoteCameraTrack ?? stageTracks[0]
-  const thumbnailTrack =
-    localCameraTrack && localCameraTrack !== mainTrack
-      ? localCameraTrack
-      : stageTracks.find((track) => track !== mainTrack)
-
-  return (
-    <StageFrame ref={frameRef} role="region" aria-label={stageLabel}>
-      <PipFocusLayout mainTrack={mainTrack} thumbnailTrack={thumbnailTrack} />
-    </StageFrame>
-  )
-}
-
-const StageFrame = styled('div', {
-  base: {
-    position: 'relative',
-    minWidth: 0,
-    minHeight: 0,
-    margin: '0.5rem',
-    borderRadius: 'lg',
-    overflow: 'hidden',
-  },
-})
+import { useEffect, useMemo, useRef } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useTracks } from '@livekit/components-react'
+import { Track } from 'livekit-client'
+import { styled } from '@/styled-system/jsx'
+import {
+  isCameraTrack,
+  pickLocalCameraTrack,
+  pickRemoteCameraTrack,
+  pickScreenShareTrack,
+} from '../../utils/pipTrackSelection'
+import { PipFocusLayout } from './PipFocusLayout'
+import { PipGridLayout } from './PipGridLayout'
+
+/**
+ * Above this count the PiP stage switches from the focus layout
+ * (main + thumbnail) to the adaptive grid layout.
+ */
+const FOCUS_MAX_TILES = 2
+
+// Handles which layout to render inside the PiP stage.
+
+export const PipStage = () => {
+  const { t } = useTranslation('rooms', {
+    keyPrefix: 'options.items.pictureInPicture',
+  })
+  const tracks = useTracks(
+    [
+      { source: Track.Source.Camera, withPlaceholder: true },
+      { source: Track.Source.ScreenShare, withPlaceholder: false },
+    ],
+    { onlySubscribed: false }
+  )
+
+  const screenShareTrack = useMemo(() => pickScreenShareTrack(tracks), [tracks])
+
+  // Order the list so the "focus target" (screen share when available,
+  // otherwise a remote camera) is first. Both layouts consume this order.
+  const stageTracks = useMemo(() => {
+    const cameraTracks = tracks.filter(isCameraTrack)
+    if (!screenShareTrack) return cameraTracks
+    return [screenShareTrack, ...cameraTracks]
+  }, [tracks, screenShareTrack])
+
+  // avoid tabbing to the stage when it's not visible
+  const frameRef = useRef<HTMLDivElement>(null)
+  useEffect(() => {
+    frameRef.current?.setAttribute('inert', '')
+  }, [])
+
+  if (stageTracks.length === 0) return null
+
+  const stageLabel = t('stage')
+
+  if (stageTracks.length > FOCUS_MAX_TILES) {
+    return (
+      <StageFrame ref={frameRef} role="region" aria-label={stageLabel}>
+        <PipGridLayout tracks={stageTracks} />
+      </StageFrame>
+    )
+  }
+
+  const localCameraTrack = pickLocalCameraTrack(stageTracks)
+  const remoteCameraTrack = pickRemoteCameraTrack(stageTracks)
+  const mainTrack = screenShareTrack ?? remoteCameraTrack ?? stageTracks[0]
+  const thumbnailTrack =
+    localCameraTrack && localCameraTrack !== mainTrack
+      ? localCameraTrack
+      : stageTracks.find((track) => track !== mainTrack)
+
+  return (
+    <StageFrame ref={frameRef} role="region" aria-label={stageLabel}>
+      <PipFocusLayout mainTrack={mainTrack} thumbnailTrack={thumbnailTrack} />
+    </StageFrame>
+  )
+}
+
+const StageFrame = styled('div', {
+  base: {
+    position: 'relative',
+    minWidth: 0,
+    minHeight: 0,
+    margin: '0.5rem',
+    borderRadius: '4px',
+    overflow: 'hidden',
+  },
+})