Make WordPress Core

Opened 12 years ago

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

Download all attachments as: .zip

Change History (16)

#1 @SergeyBiryukov
12 years ago

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

Related: #23282

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

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

+1 for falling back to a link.

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

iOS Chrome webM

@davidjlaietta
12 years ago

iOS Safari webM

#8 @davidjlaietta
12 years ago

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

@davidjlaietta
12 years ago

remove hardcoded height and width from me-cannotplay element

#9 @nacin
12 years ago

  • Resolution fixed deleted
  • Status changed from closed to reopened

Re-opening for review.

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