# Media shelf

Media shelf: a free component, built on your design tokens, to use on the home screen of a video, music or course app, for picking up where people left off. Two swipeable rows for a streaming home: Continue watching, with stills, a progress bar and the time left, and Because you watched, with posters and New season labels.

Prompt: Add the OpenDesigner component media-shelf to this project: https://opendesigner.dev/library/r/media-shelf.html. Keep its markup and states; map its --ds-* variables to my tokens.

States: hover, focus, in progress, new, scrolled to start, scrolled to end.

Accessibility: Each row is a labelled list that scrolls inside itself (swipe, shift-scroll or the arrow buttons, which turn off at each end); every title is one button whose name says the episode and time left.

File: https://opendesigner.dev/library/r/media-shelf.html