Riff / Built on the open web / Interface

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

Three 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. (min-width: 900px) decides whether the bar sits beside the dialog and stays live, or under it and goes inert.

Why

The phone and desktop layouts differ in ways CSS alone cannot express, and the script has to agree with the stylesheet about where the line is.

Where

plugins/riff/assets/riff.js, line 68

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

plugins/riff/assets/riff.js, line 292

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

plugins/riff/assets/riff.js, line 1046

const covered = window.matchMedia( '(min-width: 900px)' ).matches

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

Reference: matchMedia on MDN.