WordPress.org

Make WordPress Core

Opened 8 years ago

Closed 7 years ago

#23798 closed defect (bug) (fixed)

Audio: Fallback link gets cropped by fixed-height container.

Reported by: mfields Owned by: nacin
Milestone: 3.6 Priority: normal
Severity: normal Version: 3.6
Component: Media Keywords: has-patch commit
Focuses: Cc:

Description

The "Download File" fallback for the audio shortcode is hard to read in all of my tests. Here are some screenshots:

I tested with a WMA file. It appears that the .me-cannotplay element is given a height greater than .wp-audio-shortcode. I've observed this in Both Chrome and Firefox.

A possible solution is to display a simple text link in a paragraph that would inherit style already provided by the theme. This would also ensure that the text is always readable in cases where the user's fontsize is bumped to a large value which would be cut-off by the hardcoded 30px height of .wp-audio-shortcode.

Attachments (5)

23798.diff (1.2 KB) - added by wonderboymusic 8 years ago.
23798.2.diff (425 bytes) - added by kovshenin 8 years ago.
2013-07-28 18.02.02.png (46.5 KB) - added by davidjlaietta 7 years ago.
iOS Chrome webM
2013-07-28 18.02.28.png (54.9 KB) - added by davidjlaietta 7 years ago.
iOS Safari webM
23798.3.diff (4.3 KB) - added by davidjlaietta 7 years ago.
remove hardcoded height and width from me-cannotplay element

Download all attachments as: .zip

Change History (16)

#1 @SergeyBiryukov
8 years ago

  • Milestone changed from Awaiting Review to 3.6
  • Version set to trunk

Related: #23282

@wonderboymusic
8 years ago

#2 @wonderboymusic
8 years ago

I have attached what we in the business call a "HACK" that makes the error state contort into a plain old link. MediaElement allows you to hook into the error, but the custom code runs after that player is rendered in its own error state. If anyone else wants to take a look at this, have at it!

@kovshenin
8 years ago

#3 @kovshenin
8 years ago

  • Keywords has-patch added

I think MediaElement should not be trying to handle files it does not support. 23798.2.diff falls back to a regular link for unsupported audio. Also related: #24076

#4 @wonderboymusic
7 years ago

  • Component changed from Shortcodes to Media
  • Keywords commit added
  • Summary changed from Audio Shortcode: Fallback link gets cropped by fixed-height container. to Audio: Fallback link gets cropped by fixed-height container.

#5 @markjaquith
7 years ago

+1 for falling back to a link.

#6 @nacin
7 years ago

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

In 24519:

Media: Render unsupported audio files as links instead of mediaelement. props kovshenin, fixes #23798.

#7 @davidjlaietta
7 years ago

Testing today at WCSF dev day, noticed that on iOS mobile browsers, fallback me-cannotplay div breaks site layout because it has hardcoded height and width values. See attached screenshots for iOS Chrome and Safari. Any default theme has this issue.

@davidjlaietta
7 years ago

iOS Chrome webM

@davidjlaietta
7 years ago

iOS Safari webM

#8 @davidjlaietta
7 years ago

If we change the hardcoded height and width of the me-cannotplay element to auto, issue is resolved.

@davidjlaietta
7 years ago

remove hardcoded height and width from me-cannotplay element

#9 @nacin
7 years ago

  • Resolution fixed deleted
  • Status changed from closed to reopened

Re-opening for review.

#10 @nacin
7 years ago

wonderboymusic has looked at this, and asked John Dyer (ME.js developer) to weigh in. I don't think this is terribly severe, and if it waits until 3.6.1, then it waits until 3.6.1.

#11 @nacin
7 years ago

  • Resolution set to fixed
  • Status changed from reopened to closed

Closing this one out in favor of #24896, as this ticket should be closed on the 3.6 milestone, but #24896 may need to wait for 3.6.1.

Note: See TracTickets for help on using tickets.