Unifying media controls and supporting playlists in the editor:

* Support a `caption` attribute for audio and video shortcodes
* In `wp.media.audio|video`, rename `update` to `shortcode` to allow these models to share the same mixins as `wp.media.collection` subclasses
* When sending an audio or video shortcode to the editor, create a default caption if the user hasn't entered one. This currently only displays in the editor, not on the front end. Captions aren't tied to a specific attachment here because external sources are supported.
* In the `wp.mce.media` mixin, in the `edit` method, read `attr` instead of `data` when attempting to parse the encoded shortcode. `data` does not automatically update when the attribute changes. This was a blessing to debug.
* Add `wp.mce.media.PlaylistView` to support playlist views in TinyMCE
* Expose `WPPlaylistView` to global scope and suppress auto-parsing of playlist nodes when in the admin. Allow `WPPlaylistView` to be passed `metadata` on creation instead of requiring a JSON blob to be parsed.
* Remove all of the playlist logic from the `wpgallery` TinyMCE plugin.
* In `wp_prepare_attachment_for_js()` return more data for audio/video so that playlists can have parity in the admin/front end.

See #27320.



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

1 files changed, 145 insertions, 9 deletions

diff --git a/src/wp-includes/js/media-audiovideo.js b/src/wp-includes/js/media-audiovideo.js
index 182cc158da..261be871bc 100644
--- a/src/wp-includes/js/media-audiovideo.js
+++ b/src/wp-includes/js/media-audiovideo.js
@@ -207,10 +207,11 @@
 
 		defaults : {
 			id : wp.media.view.settings.post.id,
-			src      : '',
-			loop     : false,
+			src : '',
+			loop : false,
 			autoplay : false,
-			preload  : 'none'
+			preload : 'none',
+			caption : ''
 		},
 
 		edit : function (data) {
@@ -227,7 +228,7 @@
 			return frame;
 		},
 
-		update : function (model) {
+		shortcode : function (model) {
 			var self = this, content;
 
 			_.each( this.defaults, function( value, key ) {
@@ -266,7 +267,8 @@
 			loop : false,
 			autoplay : false,
 			preload : 'metadata',
-			content : ''
+			content : '',
+			caption : ''
 		},
 
 		edit : function (data) {
@@ -287,7 +289,7 @@
 			return frame;
 		},
 
-		update : function (model) {
+		shortcode : function (model) {
 			var self = this, content;
 
 			_.each( this.defaults, function( value, key ) {
@@ -1129,13 +1131,13 @@
 
 			wp.media.mixin.pauseAllPlayers();
 
-			data = window.decodeURIComponent( $( node ).data('wpview-text') );
+			data = window.decodeURIComponent( $( node ).attr('data-wpview-text') );
 			frame = media.edit( data );
 			frame.on( 'close', function () {
 				frame.detach();
 			} );
-			frame.state( self.shortcode + '-details' ).on( 'update', function( selection ) {
-				var shortcode = wp.media[ self.shortcode ].update( selection ).string();
+			frame.state( self.state ).on( 'update', function( selection ) {
+				var shortcode = wp.media[ self.shortcode ].shortcode( selection ).string();
 				$( node ).attr( 'data-wpview-text', window.encodeURIComponent( shortcode ) );
 				wp.mce.views.refreshView( self, shortcode );
 				frame.detach();
@@ -1205,6 +1207,7 @@
 
 	wp.mce.video = _.extend( {}, wp.mce.media, {
 		shortcode: 'video',
+		state: 'video-details',
 		View: wp.mce.media.View.extend({
 			className: 'editor-video',
 			template:  media.template('editor-video')
@@ -1215,6 +1218,7 @@
 
 	wp.mce.audio = _.extend( {}, wp.mce.media, {
 		shortcode: 'audio',
+		state: 'audio-details',
 		View: wp.mce.media.View.extend({
 			className: 'editor-audio',
 			template:  media.template('editor-audio')
@@ -1223,6 +1227,138 @@
 
 	wp.mce.views.register( 'audio', wp.mce.audio );
 
+	wp.mce.media.PlaylistView = wp.mce.View.extend({
+		className: 'editor-playlist',
+		template:  media.template('editor-playlist'),
+
+		initialize: function( options ) {
+			this.data = {};
+			this.attachments = [];
+			this.shortcode = options.shortcode;
+			_.bindAll( this, 'setPlayer' );
+			$(this).on('ready', this.setNode);
+		},
+
+		setNode: function (e, node) {
+			this.node = node;
+			this.fetch();
+		},
+
+		fetch: function() {
+			this.attachments = wp.media[ this.shortcode.tag ].attachments( this.shortcode );
+			this.attachments.more().done( this.setPlayer );
+		},
+
+		setPlayer: function () {
+			var p,
+				html = this.getHtml(),
+				t = this.encodedText,
+				self = this;
+
+			this.unsetPlayer();
+
+			_.each( tinymce.editors, function( editor ) {
+				var doc;
+				if ( editor.plugins.wpview ) {
+					doc = editor.getDoc();
+					$( doc ).find( '[data-wpview-text="' + t + '"]' ).each(function (i, elem) {
+						var node = $( elem );
+						node.html( html );
+						self.node = elem;
+					});
+				}
+			}, this );
+
+			p = new WPPlaylistView({
+				el: $( self.node ).find( '.wp-playlist' ).get(0),
+				metadata: this.data
+			});
+
+			this.player = p._player;
+		},
+
+		getHtml: function() {
+			var data = this.shortcode.attrs.named,
+				model = wp.media[ this.shortcode.tag ],
+				type = 'playlist' === this.shortcode.tag ? 'audio' : 'video',
+				options,
+				attachments,
+				tracks = [];
+
+			if ( ! this.attachments.length ) {
+				return;
+			}
+
+			_.each( model.defaults, function( value, key ) {
+				data[ key ] = model.coerce( data, key );
+			});
+
+			attachments = this.attachments.toJSON();
+
+			options = {
+				type: type,
+				style: data.style,
+				tracklist: data.tracklist,
+				tracknumbers: data.tracknumbers,
+				images: data.images,
+				artists: data.artists
+			};
+
+			_.each( attachments, function (attachment) {
+				var size = {}, track = {
+					src : attachment.url,
+					type : attachment.mime,
+					title : attachment.title,
+					caption : attachment.caption,
+					description : attachment.description,
+					meta : attachment.meta
+				};
+
+				if ( 'video' === type ) {
+					if ( ! options.width ) {
+						options.width = attachment.width;
+						options.height = attachment.height;
+					}
+					size.width = attachment.width;
+					size.height = attachment.height;
+					track.dimensions = {
+						original : size,
+						resized : size
+					};
+				} else {
+					options.width = 400;
+				}
+
+				track.image = attachment.image;
+				track.thumb = attachment.thumb;
+
+				tracks.push( track );
+			} );
+
+			options.tracks = tracks;
+			this.data = options;
+
+			return this.template( options );
+		}
+	});
+	_.extend( wp.mce.media.PlaylistView.prototype, wp.media.mixin );
+
+	wp.mce.playlist = _.extend( {}, wp.mce.media, {
+		shortcode: 'playlist',
+		state: 'playlist-edit',
+		View: wp.mce.media.PlaylistView
+	} );
+
+	wp.mce.views.register( 'playlist', wp.mce.playlist );
+
+	wp.mce['video-playlist'] = _.extend( {}, wp.mce.media, {
+		shortcode: 'video-playlist',
+		state: 'video-playlist-edit',
+		View: wp.mce.media.PlaylistView
+	} );
+
+	wp.mce.views.register( 'video-playlist', wp.mce['video-playlist'] );
+
 	function init() {
 		$(document.body)
 			.on( 'click', '.wp-switch-editor', wp.media.mixin.pauseAllPlayers )