Website
Music
Featured recordings, track rows and playlist collections.
Usage
When to reach for it
Ships from@misoto22/folio/website
import { MediaListRow } from '@misoto22/folio/website'Notes
A ranked recording or artist, controlled by the host's one media player.
Best practices
Do
- Supply localized labels, descriptive links and meaningful image alternatives.
Don’t
- Do not put service credentials, routing logic or backend models inside presentation components.
Examples
recording and preview state
Recording information and preview state arrive as props from the host player. This example toggles the visible state without loading or playing audio.
Artwork unavailable
Morning light
The Field Ensemble
Parts
Composed at the call site rather than configured through props, so a layout this component did not anticipate is still expressible.
MusicFeature
The same media feature geometry for playing, recent and unavailable recordings.
| Prop | Type | Default | Description |
|---|---|---|---|
| artworkFallbackrequired | string | — | |
| labelrequired | string | — | |
| titlerequired | ReactNode | — | |
| action | ReactNode | — | |
| artwork | ReactNode | — | |
| description | ReactNode | — | |
| live | boolean | false | — |
| notice | string | — | |
| progress | { label: string; value: number; max: number; currentLabel: string; endLabel: string } | — |
Also accepts everything in Omit<HTMLAttributes<HTMLElement>, 'title'>. Those are forwarded to the underlying element and are not listed row by row.
MediaCollectionCard
A playlist, album or other media collection with one explicit preview action.
| Prop | Type | Default | Description |
|---|---|---|---|
| previewrequired | MediaPreviewAction | — | |
| titlerequired | ReactNode | — | |
| artwork | ReactNode | — | |
| description | string | null | — | |
| metadata | ReactNode | — | |
| tag | string | null | — |
Also accepts everything in Omit<HTMLAttributes<HTMLElement>, 'title'>. Those are forwarded to the underlying element and are not listed row by row.
MusicSection
A media list's heading, caption and collection layout.
| Prop | Type | Default | Description |
|---|---|---|---|
| childrenrequired | ReactNode | — | |
| titlerequired | string | — | |
| caption | string | — | |
| layout | 'list' | 'collections' | 'list' | — |
Also accepts everything in HTMLAttributes<HTMLElement>. Those are forwarded to the underlying element and are not listed row by row.