shadcn.io is not affiliated with official shadcn/ui
Music Player Command Menu Block for Solid
A music player's command menu shown open as a tall panel beside a drawn player: twelve tracks to play with Enter or queue with Shift Enter, a Queue group with a count, and a now-playing band with Play, Pause and a volume slider.
Installation
Overview
Play or queue a track from the keyboard with this music command menu for Solid with Ark UI. It opens from the player in Tunehollow, a music player, whose header holds an outline field with its ⌘ K cap, and the player is drawn under a soft scrim inside a hairline frame with a plus mark on each corner. The menu is the catalog Command as a tall panel at the end: twelve tracks with the artist and album under each title, searchable by all three. Enter plays the highlighted track and Shift Enter adds it to the queue, which becomes its own group at the top with a count in the foot; each row also has a button for the queue. A band at the foot shows the loaded track with a Play or Pause Button, a still progress bar and a Slider for the volume, and says "Nothing plays: this demo has no sound." On a phone the drawn player sits above the menu. For preview the menu is drawn open in place when the page loads; the field, or Ctrl or ⌘ K while focus is in the block, opens the real command dialog with the same tracks, queue and query. For players, radios and any app where finding a song is a search.
FAQ
Why is the menu already open, and what do I keep?
So you can see it without a click. On load the menu is the Command drawn inline over a picture of a music player, in a plain shell that is not modal, so nothing is trapped, hidden or focused and the page around the preview keeps working. The header's field opens the real command dialog, modal, with its focus trap, Escape and focus return, and the inline copy stays closed until a reload. Both show the same Palette and share the block's state, so a loaded track or a queue in the copy is in the dialog. In your app keep the dialog and drop the copy: the "in-place" state, the scrim with its shell and the Escape and blur effects.
How does the queue work?
Shift Enter on the highlighted track, or the button at the end of its row, adds it to the queue; doing it again takes it out. Queued tracks move into a Queue group above the Library, in the order they were added, with their position read out, and the foot counts them ("12 tracks · 2 queued"). Enter on a queued track plays it and removes it from the queue.
What do the Play button and the slider do?
The Play or Pause button flips the demo's state between "Playing" and "Paused", which the row, the band and the drawn player show as a word, and the status line says so. The slider changes a volume number between 0 and 100 in steps of five and is named Volume; it stays left to right in right-to-left pages. The progress bar is a still picture at a third of the track, so no timer runs and nothing loops.
Does anything play?
No. The band says so in plain words, "Nothing plays: this demo has no sound", and the status line adds it to every play. In your app load an audio element or your player's API in pick, drive the progress bar from its time and keep the volume in its volume property.
What stays local, and how do I wire it?
All of it. The twelve tracks, with made-up titles and artists, are constants with fixed lengths, and the queue, the loaded track and the volume live in the block's state. In your app fill TRACKS from your catalog, load a cover image beside the title where the drawing is, and send the queue to your player on every change.
Is it accessible from the keyboard?
Yes. Type to search, the arrow keys move through the rows, Enter plays, Shift Enter queues, and Tab reaches the Play button and the volume slider. Escape closes the menu with focus on the field, and Ctrl or ⌘ K opens the dialog while focus is inside the block, and only then. The rows are options of a combobox and the first is highlighted when it opens.