Video Call Hand-Raise Queue — Free Moderator Queue Panel HTML CSS JS

Once a video call passes a handful of participants, "unmute yourself when you want to talk" breaks down — people talk over each other, or the loudest voice wins by default. A hand-raise queue fixes that by giving the moderator an ordered, first-raised-first-served list with clear per-person actions. This snippet builds that panel in plain HTML, CSS, and vanilla JavaScript.

Ordered by raise time, not name or role

The queue is a plain array of { id, name, raisedAt } objects, and its array order *is* the display order — the person who raised their hand first sits at position one and gets a highlighted gold badge, distinguishing them as next up. There's no separate sort step because entries are pushed onto the array in the order hands go up, which is exactly the ordering a moderator needs.

Live "time since raised" without re-rendering everything

Each row's timestamp is stored as raw raisedAt data on the element (data-raised) and a lightweight setInterval updates just the text content of every .hrq-time element once a second — deliberately *not* calling the full render() function, which would rebuild every row's HTML including the buttons, just to update a clock. This separation keeps the always-running ticker cheap regardless of queue size.

Two actions, one outcome, different intent

Both "Let them speak" and "Lower hand" remove the person from the queue — the difference is what a real integration does *before* removing them: "Let them speak" would unmute and spotlight the participant, while "Lower hand" simply dismisses the request. Keeping both wired to the same filter()-based removal in the demo keeps the queue logic simple while leaving the natural extension point clearly commented.

New entries animate in

Each <li> carries a short hrqIn keyframe animation (a slight rise-and-fade) so a newly raised hand doesn't just pop into the list — useful feedback for a moderator glancing at the panel between other tasks, signaling "something changed here" without a loud notification.

Overflow-safe names, initials avatars

As with other roster-style widgets in this library, names truncate cleanly with an ellipsis and each row gets a colored initials avatar — no image dependency, so it works immediately with any real participant list.

Customizing it

Wire "Let them speak" to your video SDK's unmute/spotlight call, "Lower hand" to a dismissal-only event, and replace the simulate button with your platform's real hand-raise event. Pair it with video call grid for the main call layout.