(frontend) add a basic control bar to the PiP window

The PiP control bar shares state with the main window's control
bar — most importantly, the reaction toolbar and the mic/camera
toggles, which are fully stateful.

Sharing state works naturally here because the PiP content is
rendered through a portal into the same React tree, so the
controls in both windows read from and write to the same stores.

Co-authored-by: Cyril <c.gromoff@gmail.com>
This commit is contained in:
lebaudantoine
2026-05-20 16:52:29 +02:00
committed by aleb_the_flash
parent faa86b8293
commit 4456137948
9 changed files with 170 additions and 9 deletions
@@ -32,8 +32,7 @@ import { isFireFox } from '@/utils/livekit'
import { useIsMobile } from '@/utils/useIsMobile'
import { navigateTo } from '@/navigation/navigateTo'
import { connectionObserverStore } from '@/stores/connectionObserver'
import { PictureInPicturePortal } from '@/features/pip/components/PictureInPicturePortal'
import { Spinner } from '@/primitives/Spinner'
import { PictureInPictureConference } from '@/features/pip/components/PictureInPictureConference'
export const Conference = ({
roomId,
@@ -293,9 +292,7 @@ export const Conference = ({
{...mediaDeviceError}
onClose={() => setMediaDeviceError({ error: null, kind: null })}
/>
<PictureInPicturePortal>
<Spinner />
</PictureInPicturePortal>
<PictureInPictureConference />
</LiveKitRoom>
</Screen>
</QueryAware>