gsadmin/meet
1
0
Fork 0
mirror of https://github.com/suitenumerique/meet.git synced 2026-07-26 11:58:53 +00:00
Code Issues Packages Projects Releases Wiki Activity

♻️(refactor) extract pip control bar component

Browse Source 
centralize pip controls in reusable component
This commit is contained in:
Cyril
2026-01-21 13:02:26 +01:00
parent 5863b4495a
commit fcfcb3eff3
2 changed files with 47 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/frontend/src/features/rooms/livekit/components/PipControlBar.tsx
+44
View File
@@ -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)',
},
})
src/frontend/src/features/rooms/livekit/components/PipView.tsx
+3 -44
View File
@@ -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>
)