Make WordPress Core

Opened 10 years ago

Closed 10 years ago

#23798 closed defect (bug) (fixed)

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

Reported by: mfields's profile mfields Owned by: nacin's profile 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 10 years ago.
23798.2.diff (425 bytes) - added by kovshenin 10 years ago.
2013-07-28 18.02.02.png (46.5 KB) - added by davidjlaietta 10 years ago.
iOS Chrome webM
2013-07-28 18.02.28.png (54.9 KB) - added by davidjlaietta 10 years ago.
iOS Safari webM
23798.3.diff (4.3 KB) - added by davidjlaietta 10 years ago.
remove hardcoded height and width from me-cannotplay element

Download all attachments as: .zip

Change History (16)

#1 @SergeyBiryukov
10 years ago

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

Related: #23282

#2 @wonderboymusic
10 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
10 years ago

#3 @kovshenin
10 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
10 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
10 years ago

+1 for falling back to a link.

#6 @nacin
10 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
10 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
10 years ago

iOS Chrome webM

@davidjlaietta
10 years ago

iOS Safari webM

#8 @davidjlaietta
10 years ago

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

@davidjlaietta
10 years ago

remove hardcoded height and width from me-cannotplay element

#9 @nacin
10 years ago

  • Resolution fixed deleted
  • Status changed from closed to reopened

Re-opening for review.

#10 @nacin
10 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
10 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.