Media: audio players overflow playlist containers

[celloexpressions]

This appears to have been caused by the new MediaElement.js player styles when that was recently updated (notably, with larger padding). Changing the core styling to use max-width seems to fix the issue. While the bug is partially visible at any playlist width, it's particularly noticeable at smaller widths such as in a sidebar via a plugin like Featured Audio.

I have not tested video but there may be a similar issue for video playlists now.

Audio player overflows playlist container

Prevent overflow by using max-width instead of width on the player container. Note that the width property is overridden by JS with a pixel value.

Still getting a bit of weird overflow — see Shot 2017-09-26 at 11.52.12 AM.png. Is that something core can account for, or does it have to be through the theme?

Replying to melchoyce:

Still getting a bit of weird overflow — see Shot 2017-09-26 at 11.52.12 AM.png. Is that something core can account for, or does it have to be through the theme?

I think in that case there isn't enough width for the player to visually work (the container is kept within the correct width, though). I wonder if core (or ME.js) can detect when there isn't enough space and hide the time marks and bar, keeping only play/pause and volume, so that the player still works with reduced functionality within very narrow sidebars?

Maybe we could break it onto more than one line? Have play, timestamps, and progress bar on the top, then volume on the next line?

Replying to melchoyce:

Maybe we could break it onto more than one line? Have play, timestamps, and progress bar on the top, then volume on the next line?

I'm not sure how much flexibility the new ME.js CSS offers here, but could be worth trying. Hiding at least the timestamps when the player is too small is more likely to be easier; either way that could require an upstream fix (not sure if we customize any of the JS?).

Replying to celloexpressions:

I'm not sure how much flexibility the new ME.js CSS offers here, but could be worth trying. Hiding at least the timestamps when the player is too small is more likely to be easier; either way that could require an upstream fix (not sure if we customize any of the JS?).

In that case, would you recommend merging 41844.diff​ as-is?

Replying to melchoyce:

In that case, would you recommend merging 41844.diff​ as-is?

I'm fairly confident that 41844.diff​ is an improvement in a majority of cases. We should look into improved player display when players have limited horizontal space in more detail moving forward - likely in a future release and upstream in collaboration with the ME.js team.

In 41838:

Media: Fix an issue where audio players overflow playlist containers.

Props celloexpressions.
Fixes #41844.