From 3fd265f29105d1704d8303b942e26b67fabad2c3 Mon Sep 17 00:00:00 2001
From: Cyril <c.gromoff@gmail.com>
Date: Wed, 21 Jan 2026 12:25:22 +0100
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8(refactor)=20stabilize=20pip=20layout?=
 =?UTF-8?q?=20and=20controls?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

avoid layout jumps and prepare for more buttons
---
 .../rooms/livekit/components/PipView.tsx      | 38 ++++++++++++++++---
 1 file changed, 32 insertions(+), 6 deletions(-)

diff --git a/src/frontend/src/features/rooms/livekit/components/PipView.tsx b/src/frontend/src/features/rooms/livekit/components/PipView.tsx
index 05610b6f..9a3b1209 100644
--- a/src/frontend/src/features/rooms/livekit/components/PipView.tsx
+++ b/src/frontend/src/features/rooms/livekit/components/PipView.tsx
@@ -11,6 +11,13 @@ import { VideoDeviceControl } from './controls/Device/VideoDeviceControl'
 import { ScreenShareToggle } from './controls/ScreenShareToggle'
 import { LeaveButton } from './controls/LeaveButton'
 import { ParticipantTile } from './ParticipantTile'
+import { GridLayout } from './layout/GridLayout'
+import { ReactionsToggle } from './controls/ReactionsToggle'
+import { SubtitlesToggle } from './controls/SubtitlesToggle'
+import { HandToggle } from './controls/HandToggle'
+import { OptionsButton } from './controls/Options/OptionsButton'
+import { StartMediaButton } from './controls/StartMediaButton'
+import { SidePanel } from './SidePanel'
 
 const pickTrackForPip = (
   tracks: TrackReferenceOrPlaceholder[]
@@ -35,19 +42,28 @@ export const PipView = () => {
 
   const trackRef = pickTrackForPip(tracks)
   const browserSupportsScreenSharing = supportsScreenSharing()
+  const hasMultipleTiles = tracks.length > 1
 
-  if (!trackRef) return null
+  if (!trackRef && !hasMultipleTiles) return null
 
   return (
     <PipContainer>
       {/* Keep stage height stable to avoid layout shifting on track changes. */}
       <PipStage>
-        <ParticipantTile trackRef={trackRef} disableMetadata />
+        {hasMultipleTiles ? (
+          <GridLayout tracks={tracks} style={{ height: '100%' }}>
+            <ParticipantTile disableMetadata />
+          </GridLayout>
+        ) : (
+          <ParticipantTile trackRef={trackRef} disableMetadata />
+        )}
       </PipStage>
       {/* Compact control bar for PiP; extend here when adding more actions. */}
       <PipControlsBar
         showScreenShare={browserSupportsScreenSharing}
       />
+      {/* Side panel (effects, settings, etc.) opens within PiP window. */}
+      <SidePanel />
     </PipContainer>
   )
 }
@@ -69,6 +85,10 @@ const PipContainer = styled('div', {
       height: '100%',
       objectFit: 'cover',
     },
+    '& .lk-grid-layout': {
+      height: '100%',
+      width: '100%',
+    },
   },
 })
 
@@ -83,12 +103,13 @@ const PipControls = styled('div', {
   base: {
     flex: '0 0 auto',
     display: 'flex',
+    flexWrap: 'wrap',
     justifyContent: 'center',
-    gap: '0.5rem',
-    padding: '0.5rem',
-    backgroundColor: 'primaryDark.100',
+    gap: '0.4rem',
+    padding: '0.5rem 0.75rem',
+    backgroundColor: 'var(--lk-controlbar-bg)',
     borderTop: '1px solid',
-    borderColor: 'primaryDark.200',
+    borderColor: 'var(--lk-control-border-color)',
   },
 })
 
@@ -100,8 +121,13 @@ const PipControlsBar = ({
   <PipControls>
     <AudioDevicesControl hideMenu />
     <VideoDeviceControl hideMenu />
+    <ReactionsToggle />
     {showScreenShare && <ScreenShareToggle />}
+    <SubtitlesToggle />
+    <HandToggle />
+    <OptionsButton />
     <LeaveButton />
+    <StartMediaButton />
   </PipControls>
 )