Add LiveKit huddle support to mobile app #219

2026-05-26T22:41:45Z

talksik commented

2026-05-26 22:41:45 +00:00

(Migrated from github.com)

Summary

Adds real-time audio/video huddle functionality to the mobile app, mirroring the desktop HuddleApp experience. Users can now join LiveKit rooms directly from stream views to collaborate with active participants.

Key Changes

New HuddleScreen component (HuddleScreen.tsx): Full-featured LiveKit room with:
- Responsive tile grid layout (1-2 columns based on participant count)
- Mic/camera toggle controls with visual state indicators
- Participant name badges with mute status
- Speaking indicator (green border highlight)
- Proper iOS audio session management for VoIP routing
useOpenHuddle hook (use-open-huddle.ts): Handles huddle initialization by:
- Fetching LiveKit token from Orion API
- Navigating to HuddleScreen with connection parameters
- Error handling with user-friendly toast notifications
StreamTopActions integration: Added huddle button that:
- Shows active participant count when huddle is live
- Displays loading state during token fetch
- Uses red highlight to indicate active huddle
StreamCard enhancement: Added huddle indicator badge showing active participant count
Navigation setup: Added Huddle route to RootStackParamList with required parameters (token, serverUrl, streamName, etc.)
LiveKit initialization: Registered WebRTC globals at app entry point via registerGlobals() to ensure proper setup before any LiveKit client construction
Dependencies & config:
- Added LiveKit packages: @livekit/react-native, livekit-client, @livekit/react-native-webrtc
- Added Expo config plugins for WebRTC native module support
- Updated app.config.ts with LiveKit plugin configuration

Implementation Details

Grid layout uses dynamic column/row calculation to keep tiles appropriately sized on phone screens
Tiles display video when available, otherwise show participant initials in a circular avatar
Audio session lifecycle properly bracketed with start/stop calls for iOS audio routing
Follows existing mobile patterns: hook-based state management, NativeWind styling, error handling with toast notifications
Mirrors desktop HuddleApp behavior but optimized for touch with larger controls and simplified UI (camera + audio only, no chat/screenshare)

https://claude.ai/code/session_01Po5tAD17MXhnqGQ9hKh6PC

## Summary Adds real-time audio/video huddle functionality to the mobile app, mirroring the desktop HuddleApp experience. Users can now join LiveKit rooms directly from stream views to collaborate with active participants. ## Key Changes - **New HuddleScreen component** (`HuddleScreen.tsx`): Full-featured LiveKit room with: - Responsive tile grid layout (1-2 columns based on participant count) - Mic/camera toggle controls with visual state indicators - Participant name badges with mute status - Speaking indicator (green border highlight) - Proper iOS audio session management for VoIP routing - **useOpenHuddle hook** (`use-open-huddle.ts`): Handles huddle initialization by: - Fetching LiveKit token from Orion API - Navigating to HuddleScreen with connection parameters - Error handling with user-friendly toast notifications - **StreamTopActions integration**: Added huddle button that: - Shows active participant count when huddle is live - Displays loading state during token fetch - Uses red highlight to indicate active huddle - **StreamCard enhancement**: Added huddle indicator badge showing active participant count - **Navigation setup**: Added Huddle route to RootStackParamList with required parameters (token, serverUrl, streamName, etc.) - **LiveKit initialization**: Registered WebRTC globals at app entry point via `registerGlobals()` to ensure proper setup before any LiveKit client construction - **Dependencies & config**: - Added LiveKit packages: `@livekit/react-native`, `livekit-client`, `@livekit/react-native-webrtc` - Added Expo config plugins for WebRTC native module support - Updated app.config.ts with LiveKit plugin configuration ## Implementation Details - Grid layout uses dynamic column/row calculation to keep tiles appropriately sized on phone screens - Tiles display video when available, otherwise show participant initials in a circular avatar - Audio session lifecycle properly bracketed with start/stop calls for iOS audio routing - Follows existing mobile patterns: hook-based state management, NativeWind styling, error handling with toast notifications - Mirrors desktop HuddleApp behavior but optimized for touch with larger controls and simplified UI (camera + audio only, no chat/screenshare) https://claude.ai/code/session_01Po5tAD17MXhnqGQ9hKh6PC

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: FlowyLabs/llink#219