Musician Discography Profile Block for React

Edit ALBUMS in the Ark file: each album has a title, a year, a cover look (slate, dusk, paper or night, which sets its greys and its one shape) and its tracks as [title, seconds, streams] rows. The album's length and stream total, the most streamed track, the stream bars and the track counts are all worked out from the rows. PERSON holds the name, the instruments and the monthly listeners.

Each cover is a few spans in the cover's own greys, a title set in container-relative text and one drawn shape, all hidden from assistive technology; the strip and the small cover in each row are the same component at two sizes. They are a printed object, so they keep the same greys in a dark theme. In your app swap Cover for an img of the real artwork (with empty alt text, since the album's title is beside it) and keep the rest.

One album is open at a time and one is always open, so the panel never collapses and its height holds. Pressing a row opens it and says so in the status line ("Opened Harbour Arithmetic: 9 tracks, 38:20."). Tab moves between the album rows; the arrow keys don't. To allow several open at once, switch the accordion to its multiple mode and drop the unseen copy's single-panel sizing.

Each bar is that track's streams over the album's most streamed track's, so the longest bar is always full, and the figure beside it is the same number in compact form. The star marks that most streamed track (and a screen reader hears ", most streamed"); the line under the list says what the star means. The bars are decoration that repeats the numbers, so they are hidden from assistive technology and dropped on phones.

The albums are a real list of accordion rows, each trigger inside a heading, and the tracks are an ordered list named for the album. The covers are decoration. The status line is a polite live region present from the start, the star has a spoken equivalent, and the entrance is a CSS fade that stops under reduced motion. Numbers and lengths stay left to right in a right-to-left layout and names are isolated.

Everything: opening an album only changes the page and the status line, and there is no player, no streaming link and no audio. To wire it up, pass your releases and track stats into ALBUMS (a server component can do it), keep the helpers that sum and scale, and add real links or players to the rows in your own app.