UX for Audio/Video/Playlists

[wonderboymusic]

Issues that were brought to my attention:

Issue No. 1
Hide "Create Audio|Video Playlist" until you have actually uploaded Audio/Video files. (I am on it code-wise).

Issue No. 2
"Add Audio|Video Source" is super-confusing if you don't understand why it is there. It is NOT there to create a playlist. It is there to add extra <source> tags to a lone <audio|video> tag. More sources = more native HTML5 playback across browsers. The browser wars are not over, my friends. Every browser implements their support for audio and video differently. MediaElement levels the playing field considerably, but HTML5 playback is always preferable over playback via a Flash or Silverlight bridge. The UI I have created allows you to accomplish this and edit every aspect of your shortcode in the media modal.

Is this too much power? Is it too confusing? How can we simplify this? gcorne already suggested making "Add Audio|Video Source" a button instead of a prominent nav item.

Playlists are a completely separate thing. "Insert Media" is the launching point for "Create Audio|Video Playlist". Clicking an audio|video shortcode placeholder launches "Audio|Video Details." Clicking a playlist shortcode launches the Playlist editor.

To review: "Image Details" = One Image. Gallery = many images. "Audio|Video Details" = One Audio|Video, potentially with fallback sources. Playlists = many audio or video files (no fallbacks).

Issue 3
Placeholders/previews for Audio/Video/Playlist shortcodes in TinyMCE. Working its way over on #27389 and #27320, but related to UX. What is the best experience here?

The reason I ask: some audio and video formats are better suited than others to be preview-able in the editor. Namely, all of those sources which are supported by the browser natively for playback. The Flash/Silverlight plugins used by MediaElement get weird with TinyMCE.

[wonderboymusic]

27437.diff​ hides the "Create Audio|Video Playlist" links until the user has uploaded audio and/or video files. Separates by type, so if you only have audio files, you don't see video playlist button.

I have a created a new js file, media-audiovideo.js, that houses all of the JS for audio and video. Customizer has multiple JS files by feature. I think we need the same for media. This will allow us to examine a feature wholly and find areas for abstraction, or just demonstrate the necessary bootstrapping required by any feature and alert us to areas where the Media API as a whole can use improvement/simplification.

[wonderboymusic]

In 27608:

Create a new file, media-audiovideo.js, to house all of the audio and video JS code in core.

UX Changes:

• Don't add a menu item for "Add Audio|Video Source"
• In the Audio|Video Details modal, add buttons and some suggestive text for adding alternate playback sources
• Don't show "Create Audio|Video Playlist" menu items until the user has uploaded audio or video files

See #27437.

[wonderboymusic]

In 27615:

Add MCE views for audio and video shortcodes. When the shortcode does not contain a source that supports native playback, just show the filename.

• Remove the audio/video shortcode parsing from the wpgallery plugin.
• Make mce-view a dependency of media-audiovideo
• Introduce wp.mce.video, wp.mce.audio, wp.mce.media, and wp.mce.media.View
• Rename wp.media.audio|video.shortcode() to wp.media.audio|video.update() since it is called on Update and returns a wp.shortcode object now.
• In wp.mce.View.render(), fire a ready event when the placeholder is being parsed and pass the current node to the event handler.

See #27389, #27437.

[wonderboymusic]

Everything in here has been committed. New tickets for anything else.

[ericlewis]

What was the reasoning for Issue No. 1(Hide "Create Audio|Video Playlist" until you have actually uploaded Audio/Video files?

I vaguely understand the implicit logic here - offer the user actions that make sense contextually to the media they have in their library. So if they don't have videos, don't allow them to add video playlists.

However, we contradict that rule with images - "Create Gallery" is always a menu option, whether or not you have images in your library.

This also leads to poor discoverability by users of these new features.

In a practical light, if you don't have videos in you library, pop open the media modal, and upload two videos into the modal, the option "Add Video Playlist" doesn't immediately surface.