components / playhead
playhead.
playback scrubber with elapsed / total times, drag-and-key seeking, and a clock of its own — give it startedAt and it extrapolates between polls, so a remotely-sourced position moves smoothly instead of stepping. progress covers a bare determinate bar; this one knows about time.
live — extrapolating between polls
0:47-2:47
seekable, buffered, size md
1:223:34
drag the bar, or focus it and use the arrow keys.
read-only, no times
installation
bunx @justin06lee/chrome@latest add playheadprops
| name | type | default | description |
|---|---|---|---|
| position * | number | - | last known position in seconds. |
| duration * | number | - | track length in seconds. |
| startedAt | number | Date | - | wall-clock ms at which position was true. supply it and the bar advances on its own between updates. |
| playing | boolean | true | advance only while true. |
| buffered | number | - | seconds buffered ahead, drawn as a fainter fill under the played one. |
| onSeek | (seconds: number) => void | - | makes the bar seekable — click, drag, arrows (±5s), page keys (±30s), home/end. |
| size | 'sm' | 'md' | 'sm' | track height. |
| showTimes | boolean | true | |
| remaining | boolean | false | count the right label down (-1:23) instead of showing the total. |
| accent | string | '#fff' | css color of the played portion. |
| ariaLabel | string | 'seek' | |
| className | string | - |