niom-webrtc/docs/components/voice_channel_layout.md

VoiceChannelLayout Component

Overview

VoiceChannelLayout orchestrates the Discord-inspired voice channel module:

• ChannelSidebar – wraps connection management (ConnectionPanel) and StatusDisplay inside a sidebar with channel metadata.
• ChannelHeader – displays channel title/topic and view state pills.
• ParticipantsGrid – renders a responsive grid of Participant tiles. Visual states:
  • is_self highlights the current user in accent color.
  • is_speaking glows in the accent-green palette.
  • is_muted dims the avatar and shows a mute badge.
• ControlDock – sticky bottom bar that embeds CallControls with the reworked button set.

Props

VoiceChannelProps {
    channel_name: String,
    channel_topic: String,
    participants: Signal<Vec<Participant>>,
    peer_id: Signal<String>,
    remote_id: Signal<String>,
    connected: Signal<bool>,
    websocket: Signal<Option<WebSocket>>,
    responder_connection: Signal<Option<RtcPeerConnection>>,
    initiator_connection: Signal<Option<RtcPeerConnection>>,
    local_media: Signal<Option<MediaStream>>,
}

Layout Notes

• Top-level grid maps to Discord style: sidebar (320px) + stage + control dock.
• Mobile breakpoint hides sidebar; channel content becomes full width.
• Partial data (mock participants) lives in main.rs until real presence sync exists.

Next Steps

1. Replace mock participant Signal with data from signaling server (rooms/memberships).
2. Animate speaking indicator using audio levels from MediaStreamTrack.
3. Add quick actions (invite, copy link) to channel header action pills.