shadcn.io is not affiliated with official shadcn/ui
Karaoke Queue Music Block for Svelte
A karaoke queue with the singer on stage, a wait worked out for every place, your own turns with move up, move down, move to end and leave, a form to join with one of twelve songs and an Undo for each change.
Installation
Overview
Let a bar run its sing-along fairly, with this karaoke queue for Svelte with Ark UI. It holds Hummingbar's Thursday in a hairline frame with a plus mark on each corner, in four parts. The first shows the singer on stage with a bar for how far into the song they are, and a Next singer Button for the host. The second is the queue as an ordered list; every place shows a wait worked out from what is left of the song on stage, the typed length of every song ahead and a minute to swap over, such as "in about 8 min". Your own turns say You and can move up, move down, jump to the end or leave. The third is a form with a name Input, a song from a Native Select of twelve and a Join the queue Shine Button. An Empty state fills the list when nobody is waiting. Every change leaves an Undo. For bars, parties and rehearsal rooms.
FAQ
How is the wait worked out?
For the first place it is the rest of the song on stage plus a minute to swap over; each place after adds the length of the song before it and another minute. The lengths are the typed length in seconds of each song in SONGS, and the text is rounded to whole minutes, never under one. Move a turn, leave or press Next singer and every wait is worked out again from the new order.
How do the move buttons work from the keyboard?
Your own rows have Up, Down and To the end buttons, each named for the turn, such as "Move Sam's turn, Porch Light Blues up". At the top or the end of the queue a button stays focusable and says it is already first or last instead of vanishing. After a move, focus stays on the button you pressed even though its row has moved.
What does Undo do?
Leaving, a move, Join and Next singer each keep a copy of the stage and the queue first, and Undo puts that copy back. It holds one step, which is the one you most likely regret. After Leave or Next singer, focus goes to Undo so a single key press can take it back. The Undo button holds its place in the status line, hidden when there is nothing to undo, so the line never changes height.
What does the form check?
It asks for a name and a song, refuses a second copy of the same song from the same visitor and a ninth place, and says which field to fix in a line under the form that is reserved from the start, so the button never moves. A problem moves focus to the name field when it is the name that is missing.
What stays local, and where does the audio come from?
The queue, the stage and the waits live in the page and reset on a reload; no audio plays and nothing is sent to a bar. To make it real, call your karaoke software from join, leave and advance, and replace the stage's typed elapsed time with the player's own clock.
How does it look on a phone?
The singer on stage keeps its bar and time, the queue rows keep position, singer, song and wait, and your own rows put their buttons on a second line. The list is a scroll region of one height, so the page doesn't grow as people join, and the form fields stack above the Join button.