shadcn.io is not affiliated with official shadcn/ui
Playlist Manager CRUD Block for React Aria
A band's setlists in a window: playlists at the start, the chosen playlist's tracks at the end, a target length with a derived over or under sentence, a checked m:ss quick line, reordering and a Remove with Undo.
Installation
Overview
Plan a set against the time you have with this playlist manager for React with React Aria. It is a framed window of fixed height inside a hairline frame with a plus mark on each corner: a top bar with the title and the one Shine Button, New playlist; at the start the playlists with their length, "62 min"; at the end the chosen playlist's tracks. A Number Input sets the target length in minutes, and a bar with a tick and one sentence compare the total with it, derived, with a sign and a word: "62 of 60 min: +2 min over". The quick line adds a track from a title, an artist and a length in m:ss, and 4:75 is refused. Move earlier and Move later reorder, a title is an Editable, and Remove leaves "Removed Salt Air Encore. Undo" in the foot. New playlist opens a draft row in the list. There is no audio in this demo, only lists. Below the medium breakpoint it shows the list or the tracks with a Back button. For setlists, running orders, tour planners and any list measured against a length.
FAQ
How do I fill it with my playlists?
Edit the three line lists CLUB, FESTIVAL and ACOUSTIC and the START array. A line is "title|artist|m:ss", parsed once at the top of the file into seconds. A playlist has a name, a target in minutes and its tracks. Totals, the list's "62 min" and the sentence are derived from the tracks, never typed.
How is the length checked and the total worked out?
A length must be minutes, a colon and two digits under 60, so 4:30 passes and 4:75 does not; the field says why and keeps the line. The total is the sum of the seconds, shown in whole minutes, and the sentence says how many minutes over or under the target it is, with +, a minus sign or "on target".
How does the target field behave?
It is a number field from 1 to 240 minutes. A valid number updates the bar and the sentence as you type, and the polite line says the new verdict. Under React Aria the field commits on blur, Enter or an arrow, so the sentence updates then. A value out of range keeps the last good target and shows a reason under the bar.
What does Undo restore?
The last removed track, back to its place. Removing a track stores the playlists as they were, and any later add, rename or new playlist replaces that Undo, so it never undoes something older than what you see. Reordering is its own reversible step: press the other Move button.