Commit 1d035ac9 authored by Scott Taylor's avatar Scott Taylor
Browse files

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.


Built from https://develop.svn.wordpress.org/trunk@27239


git-svn-id: https://core.svn.wordpress.org/trunk@27096 1a063a9b-81f0-0310-95a4-ce76da25c4cd
parent 62b850e5

wp-includes/css/media-views-rtl.css

+2 −6
Original line number Diff line number Diff line
@@ -595,10 +595,6 @@ 
	box-shadow: 0 4px 4px -4px rgba( 0, 0, 0, 0.1 );

}



.media-frame .media-toolbar .add-to-gallery {

	display: none;

}



.media-frame-title h1 {

	padding: 0 16px;

	font-size: 22px;
@@ -1427,7 +1423,7 @@ 
	margin: 1.4em 0 0.4em;

}



.gallery-settings {

.collection-settings {

	overflow: hidden;

}
@@ -1886,7 +1882,7 @@ 
		border-top: none;

	}



	.gallery-settings h3 {

	.collection-settings h3 {

		margin-top: 45px;

	}

wp-includes/css/media-views-rtl.min.css

+1 −1

File changed.

Preview size limit exceeded, changes collapsed.

wp-includes/css/media-views.css

+2 −6
Original line number Diff line number Diff line
@@ -595,10 +595,6 @@ 
	box-shadow: 0 4px 4px -4px rgba( 0, 0, 0, 0.1 );

}



.media-frame .media-toolbar .add-to-gallery {

	display: none;

}



.media-frame-title h1 {

	padding: 0 16px;

	font-size: 22px;
@@ -1427,7 +1423,7 @@ 
	margin: 1.4em 0 0.4em;

}



.gallery-settings {

.collection-settings {

	overflow: hidden;

}
@@ -1886,7 +1882,7 @@ 
		border-top: none;

	}



	.gallery-settings h3 {

	.collection-settings h3 {

		margin-top: 45px;

	}

wp-includes/css/media-views.min.css

+1 −1

File changed.

Preview size limit exceeded, changes collapsed.

wp-includes/js/media-editor.js

+51 −2
Original line number Diff line number Diff line
@@ -319,7 +319,7 @@ 
				}



				if ( -1 !== jQuery.inArray( prop, ['playlist', 'video-playlist'] ) ) {

					_.each(['tracknumbers', 'tracklist', 'images'], function (setting) {

					_.each(['tracknumbers', 'tracklist', 'images', 'artists'], function (setting) {

						if ( 'undefined' === typeof attrs[setting] ) {

							attrs['_' + setting] = wp.media[ prop ].defaults[ setting ];

						} else if ( 'true' === attrs[setting] || true === attrs[setting] ) {
@@ -395,7 +395,7 @@ 
			}



			if ( -1 !== jQuery.inArray( prop, ['playlist', 'video-playlist'] ) ) {

				_.each(['tracknumbers', 'tracklist', 'images'], function (setting) {

				_.each(['tracknumbers', 'tracklist', 'images', 'artists'], function (setting) {

					if ( attrs['_' + setting] ) {

						attrs[setting] = true;

					} else {
@@ -558,6 +558,41 @@ 
 		}));

  	}());



	wp.media.playlist = (function() {

		var playlist = {

			defaults : {

				id: wp.media.view.settings.post.id,

				style: 'light',

				tracklist: true,

				tracknumbers: true,

				images: true,

				artists: true

			}

		};



		return _.extend(playlist, wp.media.collection.instance( 'playlist', {

			type : 'audio',

			title : wp.media.view.l10n.editPlaylistTitle

		}));

	}());



	wp.media['video-playlist'] = (function() {

		var playlist = {

			defaults : {

				id: wp.media.view.settings.post.id,

				style: 'light',

				tracklist: false,

				tracknumbers: false,

				images: false

			}

		};



		return _.extend(playlist, wp.media.collection.instance( 'video-playlist', {

			type : 'video',

			title : wp.media.view.l10n.editVideoPlaylistTitle

		}));

	}());



	/**

	 * wp.media.featuredImage

	 * @namespace
@@ -776,6 +811,14 @@ 
				this.insert( wp.media.gallery.shortcode( selection ).string() );

			}, this );



			workflow.state('playlist-edit').on( 'update', function( selection ) {

				this.insert( wp.media.playlist.shortcode( selection ).string() );

			}, this );



			workflow.state('video-playlist-edit').on( 'update', function( selection ) {

				this.insert( wp.media['video-playlist'].shortcode( selection ).string() );

			}, this );



			workflow.state('embed').on( 'select', function() {

				/**

				 * @this wp.media.editor
@@ -1015,6 +1058,12 @@ 
				if ( elem.hasClass( 'gallery' ) ) {

					options.state = 'gallery';

					options.title = wp.media.view.l10n.createGalleryTitle;

				} else if ( elem.hasClass( 'playlist' ) ) {

					options.state = 'playlist';

					options.title = wp.media.view.l10n.createPlaylistTitle;

				} else if ( elem.hasClass( 'video-playlist' ) ) {

					options.state = 'video-playlist';

					options.title = wp.media.view.l10n.createVideoPlaylistTitle;

				}



				wp.media.editor.open( editor, options );