From fcfcb3eff30f7ad81f95fa16a5fc78b838afb1e4 Mon Sep 17 00:00:00 2001
From: Cyril <c.gromoff@gmail.com>
Date: Wed, 21 Jan 2026 13:02:26 +0100
Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F(refactor)=20extract=20pip=20?=
 =?UTF-8?q?control=20bar=20component?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

centralize pip controls in reusable component
---
 .../livekit/components/PipControlBar.tsx      | 44 +++++++++++++++++
 .../rooms/livekit/components/PipView.tsx      | 47 ++-----------------
 2 files changed, 47 insertions(+), 44 deletions(-)
 create mode 100644 src/frontend/src/features/rooms/livekit/components/PipControlBar.tsx

diff --git a/src/frontend/src/features/rooms/livekit/components/PipControlBar.tsx b/src/frontend/src/features/rooms/livekit/components/PipControlBar.tsx
new file mode 100644
index 00000000..39389a37
--- /dev/null
+++ b/src/frontend/src/features/rooms/livekit/components/PipControlBar.tsx
@@ -0,0 +1,44 @@
+import { styled } from '@/styled-system/jsx'
+import { AudioDevicesControl } from './controls/Device/AudioDevicesControl'
+import { VideoDeviceControl } from './controls/Device/VideoDeviceControl'
+import { ScreenShareToggle } from './controls/ScreenShareToggle'
+import { LeaveButton } from './controls/LeaveButton'
+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'
+
+// Compact PiP toolbar; keep all PiP-specific controls in one place.
+export const PipControlBar = ({
+  showScreenShare,
+}: {
+  showScreenShare: boolean
+}) => (
+  <PipControls>
+    <AudioDevicesControl hideMenu />
+    <VideoDeviceControl hideMenu />
+    <ReactionsToggle />
+    {showScreenShare && <ScreenShareToggle />}
+    <SubtitlesToggle />
+    <HandToggle />
+    <OptionsButton />
+    <LeaveButton />
+    <StartMediaButton />
+  </PipControls>
+)
+
+const PipControls = styled('div', {
+  base: {
+    flex: '0 0 auto',
+    display: 'flex',
+    flexWrap: 'wrap',
+    justifyContent: 'center',
+    gap: '0.4rem',
+    padding: '0.5rem 0.75rem',
+    backgroundColor: 'var(--lk-controlbar-bg)',
+    borderTop: '1px solid',
+    borderColor: 'var(--lk-control-border-color)',
+  },
+})
+
diff --git a/src/frontend/src/features/rooms/livekit/components/PipView.tsx b/src/frontend/src/features/rooms/livekit/components/PipView.tsx
index 9a3b1209..9e28a0f9 100644
--- a/src/frontend/src/features/rooms/livekit/components/PipView.tsx
+++ b/src/frontend/src/features/rooms/livekit/components/PipView.tsx
@@ -6,18 +6,10 @@ import {
 } from '@livekit/components-core'
 import { useTracks } from '@livekit/components-react'
 import { Track } from 'livekit-client'
-import { AudioDevicesControl } from './controls/Device/AudioDevicesControl'
-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'
+import { PipControlBar } from './PipControlBar'
 
 const pickTrackForPip = (
   tracks: TrackReferenceOrPlaceholder[]
@@ -31,6 +23,7 @@ const pickTrackForPip = (
   return tracks[0]
 }
 
+// Renders the PiP viewport and a compact control bar inside the PiP window.
 export const PipView = () => {
   const tracks = useTracks(
     [
@@ -59,9 +52,7 @@ export const PipView = () => {
         )}
       </PipStage>
       {/* Compact control bar for PiP; extend here when adding more actions. */}
-      <PipControlsBar
-        showScreenShare={browserSupportsScreenSharing}
-      />
+      <PipControlBar showScreenShare={browserSupportsScreenSharing} />
       {/* Side panel (effects, settings, etc.) opens within PiP window. */}
       <SidePanel />
     </PipContainer>
@@ -99,35 +90,3 @@ const PipStage = styled('div', {
   },
 })
 
-const PipControls = styled('div', {
-  base: {
-    flex: '0 0 auto',
-    display: 'flex',
-    flexWrap: 'wrap',
-    justifyContent: 'center',
-    gap: '0.4rem',
-    padding: '0.5rem 0.75rem',
-    backgroundColor: 'var(--lk-controlbar-bg)',
-    borderTop: '1px solid',
-    borderColor: 'var(--lk-control-border-color)',
-  },
-})
-
-const PipControlsBar = ({
-  showScreenShare,
-}: {
-  showScreenShare: boolean
-}) => (
-  <PipControls>
-    <AudioDevicesControl hideMenu />
-    <VideoDeviceControl hideMenu />
-    <ReactionsToggle />
-    {showScreenShare && <ScreenShareToggle />}
-    <SubtitlesToggle />
-    <HandToggle />
-    <OptionsButton />
-    <LeaveButton />
-    <StartMediaButton />
-  </PipControls>
-)
-