WordPress.org

Make WordPress Core

Opened 2 months ago

Closed 6 weeks ago

#41844 closed defect (bug) (fixed)

Media: audio players overflow playlist containers

Reported by: celloexpressions Owned by: melchoyce
Milestone: 4.9 Priority: normal
Severity: normal Version: 4.9
Component: Media Keywords: has-patch has-screenshots needs-testing
Focuses: ui Cc:

Description

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.

Attachments (3)

41844.png (12.0 KB) - added by celloexpressions 2 months ago.
Audio player overflows playlist container
41844.diff (433 bytes) - added by celloexpressions 2 months ago.
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.
Screen Shot 2017-09-26 at 11.52.12 AM.png (43.7 KB) - added by melchoyce 8 weeks ago.

Download all attachments as: .zip

Change History (14)

@celloexpressions
2 months ago

Audio player overflows playlist container

@celloexpressions
2 months ago

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.

This ticket was mentioned in Slack in #core-media by joemcgill. View the logs.


2 months ago

#2 follow-up: @melchoyce
8 weeks ago

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?

#3 in reply to: ↑ 2 @celloexpressions
7 weeks ago

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?

#4 follow-up: @melchoyce
7 weeks ago

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?

This ticket was mentioned in Slack in #core-media by joemcgill. View the logs.


7 weeks ago

#6 in reply to: ↑ 4 ; follow-up: @celloexpressions
7 weeks ago

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?).

This ticket was mentioned in Slack in #core-media by joemcgill. View the logs.


6 weeks ago

This ticket was mentioned in Slack in #core-media by joemcgill. View the logs.


6 weeks ago

#9 in reply to: ↑ 6 ; follow-up: @melchoyce
6 weeks ago

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?

#10 in reply to: ↑ 9 @celloexpressions
6 weeks ago

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.

#11 @melchoyce
6 weeks ago

  • Owner set to melchoyce
  • Resolution set to fixed
  • Status changed from new to closed

In 41838:

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

Props celloexpressions.
Fixes #41844.

Note: See TracTickets for help on using tickets.