matchMedia

Reads the same breakpoint and motion preference the stylesheet uses.

Now Playing on a wide screen: the Song and Video switch at the top, the cover on the left, the Up next list on the right, and the player bar along the bottom — At 900px and wider the bar stays interactive beside the open dialog.

How Riff uses it

Two queries are read from script. prefers-reduced-motion skips the frame loops and the close transition. (hover: none) stands in for a touch screen before vibrating. Where the layout's own line falls (whether the bar stays live beside Now Playing, and whether a panel such as Up next stands beside the page, covers it or opens in a turntable's strip) is not asked again in script: the stylesheet's media queries set a custom property, --riff-np-covers and --riff-side-place, which the script reads, so the line is written once.

Why

The phone and desktop layouts differ in ways the script has to know about, and reading the stylesheet's answer keeps the two from drifting apart.

Where

plugins/riff/assets/player/state.js, line 48

window.matchMedia( '(prefers-reduced-motion: reduce)' ).matches,

plugins/riff/assets/player/playback.js, line 86

if ( window.matchMedia( '(hover: none)' ).matches ) {

Links open the source at the commit this page was published from.

Specification: CSSOM View Module. Reference: matchMedia on MDN.