feat: Add Picture-in-Picture floating video + fix local track visibility

- New PictureInPicture component: draggable floating window that shows
  active stream when navigating away from voice channel, with LIVE badge,
  snap-to-edge, click-to-navigate-back
- Fix VoiceUser to check actual track presence instead of boolean flags
  for video rendering
- Add LocalTrackPublished/LocalTrackUnpublished events to useLiveKit
  so local screen share and camera show immediately in VoiceGrid
- Add pipCollapsed state to uiStore
This commit is contained in:
Jannis Braun
2026-02-19 05:26:06 +01:00
parent d88c72aa62
commit 2e309bf959
10 changed files with 546 additions and 3 deletions
+4
View File
@@ -36,9 +36,11 @@ interface UIState {
closeUserProfile: () => void;
voiceChatOpen: boolean;
voiceFullscreen: boolean;
pipCollapsed: boolean;
toggleVoiceChat: () => void;
toggleVoiceFullscreen: () => void;
setVoiceFullscreen: (fullscreen: boolean) => void;
setPipCollapsed: (collapsed: boolean) => void;
}
export const useUIStore = create<UIState>((set) => ({
@@ -80,7 +82,9 @@ export const useUIStore = create<UIState>((set) => ({
voiceChatOpen: false,
voiceFullscreen: false,
pipCollapsed: false,
toggleVoiceChat: () => set((state) => ({ voiceChatOpen: !state.voiceChatOpen })),
toggleVoiceFullscreen: () => set((state) => ({ voiceFullscreen: !state.voiceFullscreen })),
setVoiceFullscreen: (fullscreen) => set({ voiceFullscreen: fullscreen }),
setPipCollapsed: (collapsed) => set({ pipCollapsed: collapsed }),
}));