Add core support for Playlists and Video Playlists.

* Playlists operate like galleries in the admin. 
* Provide default UI and JS support in themes using MediaElement and Backbone. 
* The shortcodes are clickable, editable, and configurable using the media modal. 
* Playlists support images for each item, whether or not the current theme supports images for `attachment:audio` and `attachment:video`
* Playlists respond to `$content_width` and resize videos accordingly.
* All playlist data is included inline, using a script tag with `type="application/json"`, allowing anyone to unenqueue the WP playlist JS and roll their own.
* Playlist styles are minimal and work out of the box in the last 5 default themes. They inherit and adapt to the current theme's font styles, and their rules are easily overrideable.

See #26631.



git-svn-id: https://develop.svn.wordpress.org/trunk@27239 602fd350-edb4-49c9-b593-d223f7449a82

src/wp-includes/js/tinymce/langs/wp-langs-en.js

@@ -478,6 +478,8 @@
 		add_audio: "Add Audio",
 		editgallery: "Edit Gallery",
 		delgallery: "Delete Gallery",
+		editplaylist: "Edit Playlist",
+		delplaylist: "Delete Playlist",
 		wp_fullscreen_desc: "Distraction Free Writing mode (Alt + Shift + W)"
 	});
 

src/wp-includes/js/tinymce/plugins/wpgallery/plugin.js

@@ -25,8 +25,8 @@ tinymce.PluginManager.add('wpgallery', function( editor ) {
 	}
 
 	function replaceAVShortcodes( content ) {
-		var testRegex = /\[(audio|video)[^\]]*\]/,
-			replaceRegex = /\[(audio|video)[^\]]*\]([\s\S]*?\[\/\1\])?/;
+		var testRegex = /\[(video-playlist|audio|video|playlist)[^\]]*\]/,
+			replaceRegex = /\[(video-playlist|audio|video|playlist)[^\]]*\]([\s\S]*?\[\/\1\])?/;
 
 		while ( testRegex.test( content ) ) {
 			content = content.replace( replaceRegex, replaceCallback );
@@ -60,12 +60,12 @@ tinymce.PluginManager.add('wpgallery', function( editor ) {
 		}
 
 		// Check if the `wp.media.gallery` API exists.
-		if ( typeof wp === 'undefined' || ! wp.media || ! wp.media.gallery ) {
+		if ( typeof wp === 'undefined' || ! wp.media ) {
 			return;
 		}
 
 		// Make sure we've selected a gallery node.
-		if ( editor.dom.hasClass( node, 'wp-gallery' ) ) {
+		if ( editor.dom.hasClass( node, 'wp-gallery' ) && wp.media.gallery ) {
 			gallery = wp.media.gallery;
 			data = window.decodeURIComponent( editor.dom.getAttrib( node, 'data-wp-media' ) );
 			frame = gallery.edit( data );
@@ -74,6 +74,22 @@ tinymce.PluginManager.add('wpgallery', function( editor ) {
 				var shortcode = gallery.shortcode( selection ).string();
 				editor.dom.setAttrib( node, 'data-wp-media', window.encodeURIComponent( shortcode ) );
 			});
+		} else if ( editor.dom.hasClass( node, 'wp-playlist' ) && wp.media.playlist ) {
+			data = window.decodeURIComponent( editor.dom.getAttrib( node, 'data-wp-media' ) );
+			frame = wp.media.playlist.edit( data );
+
+			frame.state('playlist-edit').on( 'update', function( selection ) {
+				var shortcode = wp.media.playlist.shortcode( selection ).string();
+				editor.dom.setAttrib( node, 'data-wp-media', window.encodeURIComponent( shortcode ) );
+			});
+		} else if ( editor.dom.hasClass( node, 'wp-video-playlist' ) && wp.media['video-playlist'] ) {
+			data = window.decodeURIComponent( editor.dom.getAttrib( node, 'data-wp-media' ) );
+			frame = wp.media['video-playlist'].edit( data );
+
+			frame.state('video-playlist-edit').on( 'update', function( selection ) {
+				var shortcode = wp.media['video-playlist'].shortcode( selection ).string();
+				editor.dom.setAttrib( node, 'data-wp-media', window.encodeURIComponent( shortcode ) );
+			});
 		} else {
 			// temp
 			window.console && window.console.log( 'Edit AV shortcode ' + window.decodeURIComponent( editor.dom.getAttrib( node, 'data-wp-media' ) ) );
@@ -138,6 +154,10 @@ tinymce.PluginManager.add('wpgallery', function( editor ) {
 				event.name = 'video';
 			} else if ( dom.hasClass( node, 'wp-audio' ) ) {
 				event.name = 'audio';
+			} else if ( dom.hasClass( node, 'wp-playlist' ) ) {
+				event.name = 'playlist';
+			} else if ( dom.hasClass( node, 'wp-video-playlist' ) ) {
+				event.name = 'video-playlist';
 			}
 		}
 	});

src/wp-includes/js/tinymce/skins/wordpress/wp-content.css

@@ -143,6 +143,14 @@ img::selection {
 	background-image: url("images/audio.png");
 }
 
+.mce-content-body img.wp-media.wp-playlist {
+	background-image: url("images/playlist-audio.png");
+}
+
+.mce-content-body img.wp-media.wp-video-playlist {
+	background-image: url("images/playlist-video.png");
+}
+
 #wp-image-toolbar {
 	position: absolute;
 }