Blueprint - Live Host Dashboard
Plan a React host workspace with a stage, participant tools, requests, messages, and an optional recording control.
This page is a product blueprint, not a copy/paste tutorial. It explains how the parts fit together. Use the linked operation guides for complete, checked code.
This guide uses mediasfu-reactjs@4.3.7.
Prerequisites
- Complete the React room lifecycle.
- Define host and participant authority on your backend.
- Decide whether to use a custom component or a headless shell with the UI ownership ladder.
- Define recording consent and storage policy before showing a recording control.
Dashboard regions
| Region | React surface | Your application owns |
|---|---|---|
| Live stage | Current participant and media state | Selection, pinning, layout, labels |
| People | launchParticipants | Product-specific grouping and filters |
| Waiting and requests | launchWaiting, launchRequests | Who may see controls and surrounding workflow copy |
| Co-hosts | launchCoHost | Backend role policy and audit trail |
| Messages | launchMessages | Notification treatment and external moderation |
| Recording | launchRecording | Consent, retention, access, and stored-artifact confirmation |
The launch functions open supplied control surfaces. They do not themselves approve a request, assign a co-host, deliver a message, or prove a recording was saved.
Build sequence
- Prove secure host create and participant join with the supplied room.
- Render the stage from current room state.
- Add participant workspace controls from the participant guide.
- Apply app role policy before exposing host controls.
- Add recording only through the recording boundary.
Recovery
- Show empty waiting and request states intentionally.
- Remove a disconnected participant from app-owned stage selection.
- Keep host controls disabled while room role or connection state is uncertain.
- Distinguish recording request, active, paused, stopping, saved, and failed states.
Validation and teardown
Use separate host and participant sessions. Verify participant changes, request visibility, messages, media in both directions, screen sharing, role restrictions, reconnect, and recording UI states you expose. End through the host semantic action and confirm every participant observes the end state. Clear stage selection, cached queues, drafts, and recording UI state.
Use the React capability catalog to choose the supplied control surfaces for your host dashboard.