shadcn.io is not affiliated with official shadcn/ui
Music Playlist Timeline Block for Radix UI
A listening diary with twelve plays grouped on one rail into sessions or days, drawn album tiles, session lengths worked out from the gaps, and a play button that sets Now playing without sound.
Installation
Overview
Look back at what you listened to and when with this listening diary for React with Radix UI. It is written for Spinlog, a fictional listening log. A hairline frame with plus marks holds twelve plays over two days. A "By session / By day" Toggle Group regroups them: a gap of more than 30 minutes between the end of one play and the start of the next begins a new session, so five sessions are worked out from the times, each with its length; by day shows the plays, sessions and minutes of music. Each play has a drawn greyscale tile made from its title, the artist, the time and the length. The play button on a row makes it Now playing: its node rings and pulses three times, then rests. There is no audio in this demo. The panel keeps its height in both groupings. Titles and artists are made up.
FAQ
How do I change the plays?
Edit LINES at the top of the file: a start time, a title, an artist and a length in seconds, oldest first. Sessions, days and tiles are derived.
How is a session decided?
sessionsOf() starts a new session when the gap between a play's start and the previous play's end is more than GAP minutes. Change GAP to loosen or tighten it.
Does it play sound?
No. Pressing play only marks a row as Now playing and says so in the status line. To play audio, start your player in play().
Does the panel move when I regroup?
No. The other grouping is drawn unseen in the same space, so the taller of the two sets the height.