39 lines
1.6 KiB
Markdown
39 lines
1.6 KiB
Markdown
# 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.
|