4e:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 4f:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 50:T1721,import { useEffect, useState } from 'react' import { Card, RowCard } from '../surface' import { Stack, Row, Spacer } from '../layout' import { Heading, Text, Eyebrow } from '../text' import { Slider } from '../slider' import { IconButton } from '../Button' import { Icon } from '../Icon' import { Badge } from '../media' interface Track { id: string title: string artist: string /** Seconds — the scrubber and the elapsed/remaining readout both derive * from this rather than a separately-typed "3:24" string that could drift * out of sync with it. */ duration: number } const QUEUE: Track[] = [ { id: '1', title: 'Marshmallow Skies', artist: 'The Poufs', duration: 204 }, { id: '2', title: 'Pastel Dawn', artist: 'Cushion Club', duration: 241 }, { id: '3', title: 'Bounce', artist: 'Claymates', duration: 167 }, { id: '4', title: 'Soft Focus', artist: 'The Poufs', duration: 238 }, ] function formatTime(seconds: number): string { const m = Math.floor(seconds / 60) const s = Math.floor(seconds % 60) return `${m}:${String(s).padStart(2, '0')}` } /** An example music player: album art, a draggable scrubber that moves * playback position, transport controls that actually change track, and a * queue you can select from. */ export function MusicBlock() { const [queueIndex, setQueueIndex] = useState(0) // Position as a percent (0-100), like the Slider itself wants — 72 lines // up with the seeded track's 204s duration so the readout below starts at // a believable 2:27 rather than 0:00. const [pos, setPos] = useState([72]) const [vol, setVol] = useState([60]) /* Starts paused on purpose. This block is embedded in a gallery page, and a * transport that begins ticking on mount is motion nobody asked for: it * re-renders once a second forever, cycles the queue unattended, and ignores * prefers-reduced-motion. Paused also makes Play the obvious thing to press, * which demonstrates the feature better than arriving mid-song. */ const [playing, setPlaying] = useState(false) const track = QUEUE[queueIndex]! const elapsed = Math.round((pos[0]! / 100) * track.duration) function goTo(index: number) { setQueueIndex(((index % QUEUE.length) + QUEUE.length) % QUEUE.length) setPos([0]) } // Ticks the scrubber forward once a second while playing — a scrubber that // never moves on its own reads as a static progress bar, not a transport. useEffect(() => { if (!playing) return const id = setInterval(() => { setPos(([p]) => { const next = (p ?? 0) + 100 / track.duration return [Math.min(100, next)] }) }, 1000) return () => clearInterval(id) }, [playing, track.duration]) // Reaching the end advances the queue rather than just sitting at 100% — // kept separate from the ticking effect so the interval callback stays a // pure function of "add one second", not a queue-mutating one. useEffect(() => { if (pos[0]! >= 100) goTo(queueIndex + 1) // eslint-disable-next-line react-hooks/exhaustive-deps }, [pos]) return (

Now playing

{track.title} {track.artist} } label="Like" /> {formatTime(elapsed)} {formatTime(track.duration)} } label="Previous" onClick={() => goTo(queueIndex - 1)} /> } label={playing ? 'Pause' : 'Play'} tone="purple" variant="solid" onClick={() => setPlaying((p) => !p)} /> } label="Next" onClick={() => goTo(queueIndex + 1)} />

Up next {QUEUE.map((t, idx) => ( { setQueueIndex(idx) setPos([0]) setPlaying(true) }} selected={idx === queueIndex} > {t.title} {t.artist} {formatTime(t.duration)} ))}

) } 4d:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[null,["$","$L4e",null,{"namespace":"@1st-pouf","registryDependencies":["https://1st-pouf.worksonmy.dev/r/base.json","https://1st-pouf.worksonmy.dev/r/button.json","https://1st-pouf.worksonmy.dev/r/icon.json","https://1st-pouf.worksonmy.dev/r/layout.json","https://1st-pouf.worksonmy.dev/r/media.json","https://1st-pouf.worksonmy.dev/r/slider.json","https://1st-pouf.worksonmy.dev/r/surface.json","https://1st-pouf.worksonmy.dev/r/text.json"]}]]}],null]}],["$","$L4f",null,{"files":[{"path":"registry/pouf/blocks/music.tsx","content":"$50","type":"registry:block","target":"components/pouf/blocks/music.tsx"}],"className":"h-[70svh] min-h-80"}]]}]