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
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
## 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
Blocking a user prevents them from interacting with repositories, such as opening or commenting on pull requests or issues. Learn more about blocking a user.
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:useOpenHuddle hook (
use-open-huddle.ts): Handles huddle initialization by:StreamTopActions integration: Added huddle button that:
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 constructionDependencies & config:
@livekit/react-native,livekit-client,@livekit/react-native-webrtcImplementation Details
https://claude.ai/code/session_01Po5tAD17MXhnqGQ9hKh6PC