shadcn.io is not affiliated with official shadcn/ui
Episode Controls Podcast Navbar Block for Svelte
A navbar for a podcast network: links, then Back 15 seconds, Forward 30 seconds and a speed button cycling 1x, 1.25x and 1.5x in cells on shared hairlines, the current chapter, and a fill on the top rule.
Installation
Overview
A navbar for a podcast site in Svelte with Ark UI. The wordmark of Earbloom leads, Shows, Charts and Studio follow, and then episode controls sit in cells on shared hairlines that meet the top rule with a plus: Back 15 seconds, Forward 30 seconds and a speed button that cycles 1x, 1.25x and 1.5x. Beside them one truncated line names the chapter at the current position ("What a worm bin teaches about soil") with the time remaining at the current speed, and a thin fill on the bar's top rule shows how far through the episode you are. The skips really move the position (held between the start and the end), the chapter follows it and the time remaining shrinks as the speed goes up. Nothing plays: the position is a number in state, and a hidden status says what each press did. Create podcast is the Shine Button. Below the md breakpoint the controls move into a drawer from the bottom, with the chapter, the links and the button. It's built from Button, Drawer, Shine Button and Guides. For audio sites that want the episode's controls in the page's chrome.
FAQ
Does anything play?
No: this is the bar, not a player. The position is position in state, in seconds, starting at 12:40 of a 42:10 episode (START and LENGTH). Back and Forward change it by 15 and 30 seconds and hold it between 0 and the end; wire them to an audio element by seeking it from skip.
How are the chapter and the time remaining worked out?
chapterAt returns the last chapter in CHAPTERS whose start has passed, so the line changes as you skip across a boundary. The time remaining is (LENGTH - position) / speed, rounded up, so choosing 1.5x really shows less time. The line is a truncate paragraph; its full text is in the status when it changes.
How does the speed button announce itself?
The button's name is "Playback speed 1.25x. Change speed", so it always says the current value. Pressing it goes to the next speed (round to 1x), and a hidden status region, empty until your first press, says "Speed 1.5x" politely. The skip buttons use the same region: "Back 15 seconds, now at 12:25, What a worm bin teaches about soil".
What is the fill on the top rule?
A 2-pixel bar over the spine's top rule, as wide as the share of the episode behind you. It is decoration (aria-hidden): the same position is in the chapter line's time. It has no transition, so there is nothing to disable under reduced motion.
How does it work on a phone?
Below md the control cells are replaced by a menu button that opens a drawer from the bottom. Its first block is the chapter, the position and three equal buttons for the same controls (they share the bar's state, so the speed you pick is the speed in the bar); then the links and, below sm, the Create podcast button. Choosing a link closes the drawer.
Drag the drawer's bar down, or press Escape, to close it.