Blueprint - Live Guest Queue
Plan a React host screen that shows incoming requests and a guest spotlight without presenting local placeholder state as a room operation.
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
- A working host and guest room flow from React room lifecycle operations.
- Backend policy for host, guest, and audience authority.
- A product rule for how many guests can appear on stage.
- Target-device permission testing for every guest who may publish media.
Operation map
| Experience | React surface | Your application owns |
|---|---|---|
| View requests | launchRequests | Queue placement, labels, notifications |
| View participants | launchParticipants | Spotlight and layout decisions |
| Publish guest media | Supplied media controls or clickAudio and clickVideo | Permission guidance and stage policy |
| Exchange messages | launchMessages | Moderation presentation and external policy |
| Leave or end | Supplied semantic exit flow | Post-session navigation and app cleanup |
launchRequests opens the request workspace. It is not an admit or promote operation. Keep the supplied request workflow until the exact admission action used by your room has been separately implemented and tested.
Build sequence
- Prove host and guest media with the supplied room.
- Add a queue panel that reads current request state without fabricated entries.
- Open the supplied request workspace for request handling.
- Derive spotlight layout from current participants and media state.
- Remove a guest from app-owned spotlight state when they leave or disconnect.
Recovery
- Handle duplicate, withdrawn, and stale requests.
- Show the difference between admitted, connected, and publishing.
- Fall back to host-only layout when a guest loses media or disconnects.
- Re-check role and room state after reconnect before enabling host controls.
Validation and teardown
Run separate host and guest sessions on target devices. Verify request appearance and withdrawal, permission denial, guest media in both directions, disconnect/reconnect, and host-only fallback. Guest leave must remove queue and spotlight residue. Host end must close the experience for all users and clear app-owned queue state.
Continue with React participant workspaces.