Docs draft
PlayerControls
Component storyFigma (PlayerControls + blocks) ↗React component ↗DSDS entity ↗
When to use it
useThe bottom control bar (the old CR layout): play cluster left, settings/fullscreen right, progress row beneath, on an upward legibility gradient. AdControls is the reduced strip during ads.
Anatomy
.PlayerButton — 40px on-video icon button; hover/active = currentColor state layers at 0.16/0.24 (the Button mechanism).
.PlayerCenter — rewind-10 / play-pause / forward-10 cluster for touch layouts; the genuine numeral glyphs.
.VolumeFlyout — bg.elevated flyout: volume icon + accent slider.
gradient — bottom-up black 0.8 to transparent, legibility over any art.
Design specifications
| bar-padding | space.16 (bottom space.24) |
| buttons-gap | space.8 |
| ad-bar | color.ink.900, caption label centered |
Accessibility
Every button carries an aria-label; play/pause flips icon and label together. Times are plain text beside the slider.