shadcn.io is not affiliated with official shadcn/ui
Sleep Timer Music Block for React
A sleep timer that knows the queue: six presets, a fade-out switch and length, the queue drawn as one bar of six tracks with a stop marker and the fade zone, a clock time worked out from 23:03, and a demo clock with Pause.
Installation
Overview
Let people fall asleep to a queue that stops by itself, with this sleep timer for React with Base UI. It shows Nightshelf, a bedtime-listening app, with six presets (15, 30, 45 and 60 minutes, End of track, After 2 tracks), a Fade out Switch and a length Native Select of 10, 20 or 30 seconds. The queue is one bar of six tracks in proportion, the first already 1:20 in, with a vertical marker where the timer would end and the fade zone shaded just before it, and a list of the six tracks underneath. From a typed now of 23:03 the reading says "Stops about 23:48" and which track it lands in, and how far in. Start timer runs a demo clock, a minute of timer a second, and the bar shades as it passes, with a visible Pause; Cancel puts everything back. It's built from Switch, Native Select, Button, Shine Button and Guides, with native radio buttons for the presets and a CSS entrance only. For music, podcast, audiobook and meditation apps.
FAQ
How do I use my own queue?
Edit TRACKS: each has a title, an artist, its length in seconds and, for the first, how far in it is. The bar, the clock times and the list are all worked out from those lengths, and NOW_MINUTES is the time the timer is set (23:03 is 1,383). The presets are in STOPS: a number of minutes, or a number of tracks to play.
How is the stop worked out?
A minutes preset adds that many minutes to now. End of track stops at the end of the first track, and After 2 tracks at the end of the second, counting what is still to play. The marker sits at that point on the bar, the clock time adds it to 23:03, and the line under it names the track it falls in and how many minutes and seconds in, or says it is at the end of the track. If the fade is on, the shaded zone is the last 10, 20 or 30 seconds before it.
What does the demo clock do?
After Start timer, the clock moves a minute of timer every second, in at most 64 steps, and the bar shades from the start as it goes. Pause stops it and Resume carries on. When it reaches the stop it halts and says playback would stop there. Under reduced motion nothing runs by itself: the button becomes Add 1 min and moves the clock one minute a press. Nothing is stopped and no audio plays in this demo.
What stays local, and how do I make it real?
All of it. To make it real, start a timeout in your player for the number of seconds to the stop, lower the volume over the fade length before it, and pause playback at the end; save the stop on the server if the timer should survive a closed tab.