components / track-list
track-list.
queue, history or tracklist — title / artist / duration rows with the current one marked by a live sound-bars meter in place of its number, so nothing reflows when playback moves. each row is one real control: a link with href, a button with onSelect, inert otherwise.
queue
- 5unavailable in your region—3:21
click a row to make it current; click the current row to pause its meter.
recently played
- sæglópursigur rós4m ago
- svefn-g-englarsigur rós14m ago
- flimaphex twin18m ago
empty
nothing here yet
installation
bunx @justin06lee/chrome@latest add track-listprops
| name | type | default | description |
|---|---|---|---|
| tracks * | Track[] | - | { id, title, artist?, duration?, art?, href?, meta?, unavailable? }[] — duration in seconds. |
| activeId | string | - | the current track; gets the meter in place of its index. |
| playing | boolean | true | whether the active track is actually sounding. |
| onSelect | (track: Track) => void | - | |
| art | boolean | false | show a cover thumbnail per row instead of a position number. |
| numbered | boolean | true | number the rows; ignored when art is on. |
| linkComponent | React.ElementType | - | anchor component for internal hrefs (e.g. next/link). |
| label | ReactNode | - | mono uppercase caption above the list. |
| empty | ReactNode | - | rendered in place of the rows when tracks is empty. |
| className | string | - |