<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>[27640] trunk/src/wp-includes: Unifying media controls and supporting playlists in the editor:</title>
</head>
<body>
<style type="text/css"><!--
#msg dl.meta { border: 1px #006 solid; background: #369; padding: 6px; color: #fff; }
#msg dl.meta dt { float: left; width: 6em; font-weight: bold; }
#msg dt:after { content:':';}
#msg dl, #msg dt, #msg ul, #msg li, #header, #footer, #logmsg { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; }
#msg dl a { font-weight: bold}
#msg dl a:link { color:#fc3; }
#msg dl a:active { color:#ff0; }
#msg dl a:visited { color:#cc6; }
h3 { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; font-weight: bold; }
#msg pre { overflow: auto; background: #ffc; border: 1px #fa0 solid; padding: 6px; }
#logmsg { background: #ffc; border: 1px #fa0 solid; padding: 1em 1em 0 1em; }
#logmsg p, #logmsg pre, #logmsg blockquote { margin: 0 0 1em 0; }
#logmsg p, #logmsg li, #logmsg dt, #logmsg dd { line-height: 14pt; }
#logmsg h1, #logmsg h2, #logmsg h3, #logmsg h4, #logmsg h5, #logmsg h6 { margin: .5em 0; }
#logmsg h1:first-child, #logmsg h2:first-child, #logmsg h3:first-child, #logmsg h4:first-child, #logmsg h5:first-child, #logmsg h6:first-child { margin-top: 0; }
#logmsg ul, #logmsg ol { padding: 0; list-style-position: inside; margin: 0 0 0 1em; }
#logmsg ul { text-indent: -1em; padding-left: 1em; }#logmsg ol { text-indent: -1.5em; padding-left: 1.5em; }
#logmsg > ul, #logmsg > ol { margin: 0 0 1em 0; }
#logmsg pre { background: #eee; padding: 1em; }
#logmsg blockquote { border: 1px solid #fa0; border-left-width: 10px; padding: 1em 1em 0 1em; background: white;}
#logmsg dl { margin: 0; }
#logmsg dt { font-weight: bold; }
#logmsg dd { margin: 0; padding: 0 0 0.5em 0; }
#logmsg dd:before { content:'\00bb';}
#logmsg table { border-spacing: 0px; border-collapse: collapse; border-top: 4px solid #fa0; border-bottom: 1px solid #fa0; background: #fff; }
#logmsg table th { text-align: left; font-weight: normal; padding: 0.2em 0.5em; border-top: 1px dotted #fa0; }
#logmsg table td { text-align: right; border-top: 1px dotted #fa0; padding: 0.2em 0.5em; }
#logmsg table thead th { text-align: center; border-bottom: 1px solid #fa0; }
#logmsg table th.Corner { text-align: left; }
#logmsg hr { border: none 0; border-top: 2px dashed #fa0; height: 1px; }
#header, #footer { color: #fff; background: #636; border: 1px #300 solid; padding: 6px; }
#patch { width: 100%; }
#patch h4 {font-family: verdana,arial,helvetica,sans-serif;font-size:10pt;padding:8px;background:#369;color:#fff;margin:0;}
#patch .propset h4, #patch .binary h4 {margin:0;}
#patch pre {padding:0;line-height:1.2em;margin:0;}
#patch .diff {width:100%;background:#eee;padding: 0 0 10px 0;overflow:auto;}
#patch .propset .diff, #patch .binary .diff {padding:10px 0;}
#patch span {display:block;padding:0 10px;}
#patch .modfile, #patch .addfile, #patch .delfile, #patch .propset, #patch .binary, #patch .copfile {border:1px solid #ccc;margin:10px 0;}
#patch ins {background:#dfd;text-decoration:none;display:block;padding:0 10px;}
#patch del {background:#fdd;text-decoration:none;display:block;padding:0 10px;}
#patch .lines, .info {color:#888;background:#fff;}
--></style>
<div id="msg">
<dl class="meta">
<dt>Revision</dt> <dd><a href="http://core.trac.wordpress.org/changeset/27640">27640</a></dd>
<dt>Author</dt> <dd>wonderboymusic</dd>
<dt>Date</dt> <dd>2014-03-20 13:33:00 +0000 (Thu, 20 Mar 2014)</dd>
</dl>
<h3>Log Message</h3>
<pre>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 <a href="http://core.trac.wordpress.org/ticket/27320">#27320</a>.</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunksrcwpincludesjsmediaaudiovideojs">trunk/src/wp-includes/js/media-audiovideo.js</a></li>
<li><a href="#trunksrcwpincludesjsmediaeditorjs">trunk/src/wp-includes/js/media-editor.js</a></li>
<li><a href="#trunksrcwpincludesjsmediaelementwpplaylistjs">trunk/src/wp-includes/js/mediaelement/wp-playlist.js</a></li>
<li><a href="#trunksrcwpincludesjstinymcepluginswpgallerypluginjs">trunk/src/wp-includes/js/tinymce/plugins/wpgallery/plugin.js</a></li>
<li><a href="#trunksrcwpincludesjstinymceskinswordpresswpcontentcss">trunk/src/wp-includes/js/tinymce/skins/wordpress/wp-content.css</a></li>
<li><a href="#trunksrcwpincludesmediatemplatephp">trunk/src/wp-includes/media-template.php</a></li>
<li><a href="#trunksrcwpincludesmediaphp">trunk/src/wp-includes/media.php</a></li>
<li><a href="#trunksrcwpincludesscriptloaderphp">trunk/src/wp-includes/script-loader.php</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunksrcwpincludesjsmediaaudiovideojs"></a>
<div class="modfile"><h4>Modified: trunk/src/wp-includes/js/media-audiovideo.js (27639 => 27640)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/src/wp-includes/js/media-audiovideo.js 2014-03-20 04:42:44 UTC (rev 27639)
+++ trunk/src/wp-includes/js/media-audiovideo.js 2014-03-20 13:33:00 UTC (rev 27640)
</span><span class="lines">@@ -207,10 +207,11 @@
</span><span class="cx">
</span><span class="cx"> defaults : {
</span><span class="cx"> id : wp.media.view.settings.post.id,
</span><del>- src : '',
- loop : false,
</del><ins>+ src : '',
+ loop : false,
</ins><span class="cx"> autoplay : false,
</span><del>- preload : 'none'
</del><ins>+ preload : 'none',
+ caption : ''
</ins><span class="cx"> },
</span><span class="cx">
</span><span class="cx"> edit : function (data) {
</span><span class="lines">@@ -227,7 +228,7 @@
</span><span class="cx"> return frame;
</span><span class="cx"> },
</span><span class="cx">
</span><del>- update : function (model) {
</del><ins>+ shortcode : function (model) {
</ins><span class="cx"> var self = this, content;
</span><span class="cx">
</span><span class="cx"> _.each( this.defaults, function( value, key ) {
</span><span class="lines">@@ -266,7 +267,8 @@
</span><span class="cx"> loop : false,
</span><span class="cx"> autoplay : false,
</span><span class="cx"> preload : 'metadata',
</span><del>- content : ''
</del><ins>+ content : '',
+ caption : ''
</ins><span class="cx"> },
</span><span class="cx">
</span><span class="cx"> edit : function (data) {
</span><span class="lines">@@ -287,7 +289,7 @@
</span><span class="cx"> return frame;
</span><span class="cx"> },
</span><span class="cx">
</span><del>- update : function (model) {
</del><ins>+ shortcode : function (model) {
</ins><span class="cx"> var self = this, content;
</span><span class="cx">
</span><span class="cx"> _.each( this.defaults, function( value, key ) {
</span><span class="lines">@@ -1129,13 +1131,13 @@
</span><span class="cx">
</span><span class="cx"> wp.media.mixin.pauseAllPlayers();
</span><span class="cx">
</span><del>- data = window.decodeURIComponent( $( node ).data('wpview-text') );
</del><ins>+ data = window.decodeURIComponent( $( node ).attr('data-wpview-text') );
</ins><span class="cx"> frame = media.edit( data );
</span><span class="cx"> frame.on( 'close', function () {
</span><span class="cx"> frame.detach();
</span><span class="cx"> } );
</span><del>- frame.state( self.shortcode + '-details' ).on( 'update', function( selection ) {
- var shortcode = wp.media[ self.shortcode ].update( selection ).string();
</del><ins>+ frame.state( self.state ).on( 'update', function( selection ) {
+ var shortcode = wp.media[ self.shortcode ].shortcode( selection ).string();
</ins><span class="cx"> $( node ).attr( 'data-wpview-text', window.encodeURIComponent( shortcode ) );
</span><span class="cx"> wp.mce.views.refreshView( self, shortcode );
</span><span class="cx"> frame.detach();
</span><span class="lines">@@ -1205,6 +1207,7 @@
</span><span class="cx">
</span><span class="cx"> wp.mce.video = _.extend( {}, wp.mce.media, {
</span><span class="cx"> shortcode: 'video',
</span><ins>+ state: 'video-details',
</ins><span class="cx"> View: wp.mce.media.View.extend({
</span><span class="cx"> className: 'editor-video',
</span><span class="cx"> template: media.template('editor-video')
</span><span class="lines">@@ -1215,6 +1218,7 @@
</span><span class="cx">
</span><span class="cx"> wp.mce.audio = _.extend( {}, wp.mce.media, {
</span><span class="cx"> shortcode: 'audio',
</span><ins>+ state: 'audio-details',
</ins><span class="cx"> View: wp.mce.media.View.extend({
</span><span class="cx"> className: 'editor-audio',
</span><span class="cx"> template: media.template('editor-audio')
</span><span class="lines">@@ -1223,6 +1227,138 @@
</span><span class="cx">
</span><span class="cx"> wp.mce.views.register( 'audio', wp.mce.audio );
</span><span class="cx">
</span><ins>+ 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'] );
+
</ins><span class="cx"> function init() {
</span><span class="cx"> $(document.body)
</span><span class="cx"> .on( 'click', '.wp-switch-editor', wp.media.mixin.pauseAllPlayers )
</span></span></pre></div>
<a id="trunksrcwpincludesjsmediaeditorjs"></a>
<div class="modfile"><h4>Modified: trunk/src/wp-includes/js/media-editor.js (27639 => 27640)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/src/wp-includes/js/media-editor.js 2014-03-20 04:42:44 UTC (rev 27639)
+++ trunk/src/wp-includes/js/media-editor.js 2014-03-20 13:33:00 UTC (rev 27640)
</span><span class="lines">@@ -198,6 +198,23 @@
</span><span class="cx"> }
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+ if ( ! _.isEmpty( attachment.caption ) ) {
+ shortcode.caption = attachment.caption;
+ } else if ( attachment.meta && attachment.meta.title ) {
+ shortcode.caption = '“' + attachment.meta.title + '”';
+ if ( attachment.meta.album ) {
+ shortcode.caption += ' from ' + attachment.meta.album;
+ }
+
+ if ( attachment.meta.artist ) {
+ shortcode.caption += ' by ' + attachment.meta.artist;
+ }
+ } else if ( ! _.isEmpty( attachment.description ) ) {
+ shortcode.caption = attachment.description;
+ } else {
+ shortcode.caption = attachment.title;
+ }
+
</ins><span class="cx"> extension = attachment.filename.split('.').pop();
</span><span class="cx">
</span><span class="cx"> if ( _.contains( wp.media.view.settings.embedExts, extension ) ) {
</span><span class="lines">@@ -387,6 +404,7 @@
</span><span class="cx"> if ( attachments[this.tag] ) {
</span><span class="cx"> _.extend( attrs, attachments[this.tag].toJSON() );
</span><span class="cx"> }
</span><ins>+
</ins><span class="cx"> // Convert all gallery shortcodes to use the `ids` property.
</span><span class="cx"> // Ignore `post__in` and `post__not_in`; the attachments in
</span><span class="cx"> // the collection will already reflect those properties.
</span></span></pre></div>
<a id="trunksrcwpincludesjsmediaelementwpplaylistjs"></a>
<div class="modfile"><h4>Modified: trunk/src/wp-includes/js/mediaelement/wp-playlist.js (27639 => 27640)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/src/wp-includes/js/mediaelement/wp-playlist.js 2014-03-20 04:42:44 UTC (rev 27639)
+++ trunk/src/wp-includes/js/mediaelement/wp-playlist.js 2014-03-20 13:33:00 UTC (rev 27640)
</span><span class="lines">@@ -8,10 +8,10 @@
</span><span class="cx">
</span><span class="cx"> itemTemplate : wp.template('wp-playlist-item'),
</span><span class="cx">
</span><del>- initialize : function () {
</del><ins>+ initialize : function (options) {
</ins><span class="cx"> var settings = {};
</span><span class="cx">
</span><del>- this.data = $.parseJSON( this.$('script').html() );
</del><ins>+ this.data = options.metadata || $.parseJSON( this.$('script').html() );
</ins><span class="cx"> this.playerNode = this.$( this.data.type );
</span><span class="cx">
</span><span class="cx"> this.tracks = new Backbone.Collection( this.data.tracks );
</span><span class="lines">@@ -38,7 +38,7 @@
</span><span class="cx"> }
</span><span class="cx"> settings.success = this.bindPlayer;
</span><span class="cx">
</span><del>- new MediaElementPlayer( this.playerNode.get(0), settings );
</del><ins>+ this._player = new MediaElementPlayer( this.playerNode.get(0), settings );
</ins><span class="cx"> },
</span><span class="cx">
</span><span class="cx"> renderCurrent : function () {
</span><span class="lines">@@ -132,9 +132,13 @@
</span><span class="cx"> });
</span><span class="cx">
</span><span class="cx"> $(document).ready(function () {
</span><del>- $('.wp-playlist').each(function () {
- return new WPPlaylistView({ el: this });
- });
</del><ins>+ if ( ! $( 'body' ).hasClass('wp-admin') ) {
+ $('.wp-playlist').each(function () {
+ return new WPPlaylistView({ el: this });
+ });
+ }
</ins><span class="cx"> });
</span><span class="cx">
</span><ins>+ window.WPPlaylistView = WPPlaylistView;
+
</ins><span class="cx"> }(jQuery, _, Backbone));
</span><span class="cx">\ No newline at end of file
</span></span></pre></div>
<a id="trunksrcwpincludesjstinymcepluginswpgallerypluginjs"></a>
<div class="modfile"><h4>Modified: trunk/src/wp-includes/js/tinymce/plugins/wpgallery/plugin.js (27639 => 27640)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/src/wp-includes/js/tinymce/plugins/wpgallery/plugin.js 2014-03-20 04:42:44 UTC (rev 27639)
+++ trunk/src/wp-includes/js/tinymce/plugins/wpgallery/plugin.js 2014-03-20 13:33:00 UTC (rev 27640)
</span><span class="lines">@@ -13,28 +13,6 @@
</span><span class="cx"> 'data-wp-media="' + data + '" data-mce-resize="false" data-mce-placeholder="1" />';
</span><span class="cx"> }
</span><span class="cx">
</span><del>- function replaceCallback( match, type, close ) {
- var index;
-
- if ( close && close.indexOf( '[' + type ) > -1 ) {
- index = match.length - close.length;
- return html( 'wp-' + type, match.substring( 0, index ) ) + match.substring( index );
- }
-
- return html( 'wp-' + type, match );
- }
-
- function replaceAVShortcodes( content ) {
- var testRegex = /\[(video-playlist|playlist)[^\]]*\]/,
- replaceRegex = /\[(video-playlist|playlist)[^\]]*\]([\s\S]*?\[\/\1\])?/;
-
- while ( testRegex.test( content ) ) {
- content = content.replace( replaceRegex, replaceCallback );
- }
-
- return content;
- }
-
</del><span class="cx"> function restoreMediaShortcodes( content ) {
</span><span class="cx"> function getAttr( str, name ) {
</span><span class="cx"> name = new RegExp( name + '=\"([^\"]+)\"' ).exec( str );
</span><span class="lines">@@ -76,25 +54,6 @@
</span><span class="cx"> editor.dom.setAttrib( node, 'data-wp-media', window.encodeURIComponent( shortcode ) );
</span><span class="cx"> frame.detach();
</span><span class="cx"> });
</span><del>- } else if ( editor.dom.hasClass( node, 'wp-playlist' ) && wp.media.playlist ) {
- 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 ) );
- frame.detach();
- });
- } else if ( editor.dom.hasClass( node, 'wp-video-playlist' ) && wp.media['video-playlist'] ) {
- 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 ) );
- frame.detach();
- });
- } else {
- // temp
- window.console && window.console.log( 'Edit AV shortcode ' + data );
</del><span class="cx"> }
</span><span class="cx"> }
</span><span class="cx">
</span><span class="lines">@@ -152,10 +111,6 @@
</span><span class="cx"> if ( node.nodeName === 'IMG' && dom.getAttrib( node, 'data-wp-media' ) ) {
</span><span class="cx"> if ( dom.hasClass( node, 'wp-gallery' ) ) {
</span><span class="cx"> event.name = 'gallery';
</span><del>- } else if ( dom.hasClass( node, 'wp-playlist' ) ) {
- event.name = 'playlist';
- } else if ( dom.hasClass( node, 'wp-video-playlist' ) ) {
- event.name = 'video-playlist';
</del><span class="cx"> }
</span><span class="cx"> }
</span><span class="cx"> });
</span><span class="lines">@@ -165,8 +120,6 @@
</span><span class="cx"> if ( ! editor.plugins.wpview ) {
</span><span class="cx"> event.content = replaceGalleryShortcodes( event.content );
</span><span class="cx"> }
</span><del>-
- event.content = replaceAVShortcodes( event.content );
</del><span class="cx"> });
</span><span class="cx">
</span><span class="cx"> editor.on( 'PostProcess', function( event ) {
</span></span></pre></div>
<a id="trunksrcwpincludesjstinymceskinswordpresswpcontentcss"></a>
<div class="modfile"><h4>Modified: trunk/src/wp-includes/js/tinymce/skins/wordpress/wp-content.css (27639 => 27640)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/src/wp-includes/js/tinymce/skins/wordpress/wp-content.css 2014-03-20 04:42:44 UTC (rev 27639)
+++ trunk/src/wp-includes/js/tinymce/skins/wordpress/wp-content.css 2014-03-20 13:33:00 UTC (rev 27640)
</span><span class="lines">@@ -141,14 +141,6 @@
</span><span class="cx"> background-image: url(images/gallery.png);
</span><span class="cx"> }
</span><span class="cx">
</span><del>-.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");
-}
-
</del><span class="cx"> /* Image resize handles */
</span><span class="cx"> .mce-content-body div.mce-resizehandle {
</span><span class="cx"> border-color: #777;
</span><span class="lines">@@ -299,6 +291,16 @@
</span><span class="cx"> border-color: rgba(0,0,0,0.3);
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+.wpview-type-audio .track-details {
+ position: absolute;
+ top: 0;
+ left: 5px;
+ width: 85%;
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+}
+
</ins><span class="cx"> .gallery img[data-mce-selected]:focus {
</span><span class="cx"> outline: none;
</span><span class="cx"> }
</span></span></pre></div>
<a id="trunksrcwpincludesmediatemplatephp"></a>
<div class="modfile"><h4>Modified: trunk/src/wp-includes/media-template.php (27639 => 27640)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/src/wp-includes/media-template.php 2014-03-20 04:42:44 UTC (rev 27639)
+++ trunk/src/wp-includes/media-template.php 2014-03-20 13:33:00 UTC (rev 27640)
</span><span class="lines">@@ -814,7 +814,7 @@
</span><span class="cx"> <div class="setting preload">
</span><span class="cx"> <span><?php _e( 'Preload' ); ?></span>
</span><span class="cx"> <div class="button-group button-large" data-setting="preload">
</span><del>- <button class="button" value="auto"><?php _ex( 'Auto', 'auto preload video' ); ?></button>
</del><ins>+ <button class="button" value="auto"><?php _ex( 'Auto', 'auto preload audio' ); ?></button>
</ins><span class="cx"> <button class="button" value="metadata"><?php _e( 'Metadata' ); ?></button>
</span><span class="cx"> <button class="button active" value="none"><?php _e( 'None' ); ?></button>
</span><span class="cx"> </div>
</span><span class="lines">@@ -829,6 +829,12 @@
</span><span class="cx"> <span><?php _e( 'Loop' ); ?></span>
</span><span class="cx"> <input type="checkbox" data-setting="loop" />
</span><span class="cx"> </label>
</span><ins>+
+ <label class="setting">
+ <span><?php _e( 'Caption' ); ?></span>
+ <input type="text" data-setting="caption" value="{{ data.model.caption }}" />
+ </label>
+
</ins><span class="cx"> <div class="clear"></div>
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="lines">@@ -901,7 +907,7 @@
</span><span class="cx"> <div class="setting preload">
</span><span class="cx"> <span><?php _e( 'Preload' ); ?></span>
</span><span class="cx"> <div class="button-group button-large" data-setting="preload">
</span><del>- <button class="button" value="auto"><?php _e( 'Auto' ); ?></button>
</del><ins>+ <button class="button" value="auto"><?php _ex( 'Auto', 'auto preload video' ); ?></button>
</ins><span class="cx"> <button class="button" value="metadata"><?php _e( 'Metadata' ); ?></button>
</span><span class="cx"> <button class="button active" value="none"><?php _e( 'None' ); ?></button>
</span><span class="cx"> </div>
</span><span class="lines">@@ -936,6 +942,11 @@
</span><span class="cx"> <# } #>
</span><span class="cx"> <textarea class="hidden content-setting">{{ content }}</textarea>
</span><span class="cx"> </label>
</span><ins>+
+ <label class="setting">
+ <span><?php _e( 'Caption' ); ?></span>
+ <input type="text" data-setting="caption" value="{{ data.model.caption }}" />
+ </label>
</ins><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx"> </script>
</span><span class="lines">@@ -966,6 +977,9 @@
</span><span class="cx"> <div class="dashicons dashicons-edit edit"></div>
</span><span class="cx"> <div class="dashicons dashicons-no-alt remove"></div>
</span><span class="cx"> </div>
</span><ins>+ <# if ( ! _.isEmpty( data.model.caption ) ) { #>
+ <div class="track-details">{{{ data.model.caption }}}</div>
+ <# } #>
</ins><span class="cx"> <?php wp_underscore_audio_template() ?>
</span><span class="cx"> </script>
</span><span class="cx">
</span><span class="lines">@@ -974,9 +988,31 @@
</span><span class="cx"> <div class="dashicons dashicons-edit edit"></div>
</span><span class="cx"> <div class="dashicons dashicons-no-alt remove"></div>
</span><span class="cx"> </div>
</span><ins>+ <# if ( ! _.isEmpty( data.model.caption ) ) { #>
+ <div class="track-details">{{{ data.model.caption }}}</div>
+ <# } #>
</ins><span class="cx"> <?php wp_underscore_video_template() ?>
</span><span class="cx"> </script>
</span><span class="cx">
</span><ins>+ <?php wp_underscore_playlist_templates() ?>
+
+ <script type="text/html" id="tmpl-editor-playlist">
+ <div class="toolbar">
+ <div class="dashicons dashicons-edit edit"></div>
+ <div class="dashicons dashicons-no-alt remove"></div>
+ </div>
+ <div class="wp-playlist wp-{{ data.type }}-playlist wp-playlist-{{ data.style }}">
+ <# if ( 'audio' === data.type ){ #>
+ <div class="wp-playlist-current-item"></div>
+ <# } #>
+ <{{ data.type }} controls="controls" preload="none" <#
+ if ( data.width ) { #> width="{{ data.width }}"<# }
+ #><# if ( data.height ) { #> height="{{ data.height }}"<# } #>></{{ data.type }}>
+ <div class="wp-playlist-next"></div>
+ <div class="wp-playlist-prev"></div>
+ </div>
+ </script>
+
</ins><span class="cx"> <?php
</span><span class="cx">
</span><span class="cx"> /**
</span></span></pre></div>
<a id="trunksrcwpincludesmediaphp"></a>
<div class="modfile"><h4>Modified: trunk/src/wp-includes/media.php (27639 => 27640)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/src/wp-includes/media.php 2014-03-20 04:42:44 UTC (rev 27639)
+++ trunk/src/wp-includes/media.php 2014-03-20 13:33:00 UTC (rev 27640)
</span><span class="lines">@@ -999,17 +999,12 @@
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> /**
</span><del>- * Output and enqueue default scripts and styles for playlists.
</del><ins>+ * Output the templates used by playlists
</ins><span class="cx"> *
</span><span class="cx"> * @since 3.9.0
</span><del>- *
- * @param string $type Type of playlist: "audio" or "video."
</del><span class="cx"> */
</span><del>-function wp_playlist_scripts( $type ) {
- wp_enqueue_style( 'wp-mediaelement' );
- wp_enqueue_script( 'wp-playlist' );
</del><ins>+function wp_underscore_playlist_templates() {
</ins><span class="cx"> ?>
</span><del>-<!--[if lt IE 9]><script>document.createElement('<?php echo esc_js( $type ) ?>');</script><![endif]-->
</del><span class="cx"> <script type="text/html" id="tmpl-wp-playlist-current-item">
</span><span class="cx"> <# if ( data.image ) { #>
</span><span class="cx"> <img src="{{{ data.thumb.src }}}"/>
</span><span class="lines">@@ -1045,6 +1040,22 @@
</span><span class="cx"> </script>
</span><span class="cx"> <?php
</span><span class="cx"> }
</span><ins>+
+/**
+ * Output and enqueue default scripts and styles for playlists.
+ *
+ * @since 3.9.0
+ *
+ * @param string $type Type of playlist: "audio" or "video."
+ */
+function wp_playlist_scripts( $type ) {
+ wp_enqueue_style( 'wp-mediaelement' );
+ wp_enqueue_script( 'wp-playlist' );
+?>
+<!--[if lt IE 9]><script>document.createElement('<?php echo esc_js( $type ) ?>');</script><![endif]-->
+<?php
+ wp_underscore_playlist_templates();
+}
</ins><span class="cx"> add_action( 'wp_playlist_scripts', 'wp_playlist_scripts' );
</span><span class="cx">
</span><span class="cx"> /**
</span><span class="lines">@@ -1390,6 +1401,7 @@
</span><span class="cx">
</span><span class="cx"> $default_types = wp_get_audio_extensions();
</span><span class="cx"> $defaults_atts = array(
</span><ins>+ 'caption' => '',
</ins><span class="cx"> 'src' => '',
</span><span class="cx"> 'loop' => '',
</span><span class="cx"> 'autoplay' => '',
</span><span class="lines">@@ -1549,6 +1561,7 @@
</span><span class="cx">
</span><span class="cx"> $default_types = wp_get_video_extensions();
</span><span class="cx"> $defaults_atts = array(
</span><ins>+ 'caption' => '',
</ins><span class="cx"> 'src' => '',
</span><span class="cx"> 'poster' => '',
</span><span class="cx"> 'loop' => '',
</span><span class="lines">@@ -2332,6 +2345,22 @@
</span><span class="cx"> if ( $meta && ( 'audio' === $type || 'video' === $type ) ) {
</span><span class="cx"> if ( isset( $meta['length_formatted'] ) )
</span><span class="cx"> $response['fileLength'] = $meta['length_formatted'];
</span><ins>+
+ $response['meta'] = array();
+ $keys = array( 'title', 'artist', 'band', 'album', 'genre', 'year', 'length', 'length_formatted' );
+ foreach ( $keys as $key ) {
+ if ( ! empty( $meta[ $key ] ) ) {
+ $response['meta'][ $key ] = $meta[ $key ];
+ }
+ }
+
+ $id = get_post_thumbnail_id( $attachment->ID );
+ if ( ! empty( $id ) ) {
+ list( $src, $width, $height ) = wp_get_attachment_image_src( $id, 'full' );
+ $response['image'] = compact( 'src', 'width', 'height' );
+ list( $src, $width, $height ) = wp_get_attachment_image_src( $id, 'thumbnail' );
+ $response['thumb'] = compact( 'src', 'width', 'height' );
+ }
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> if ( function_exists('get_compat_media_markup') )
</span></span></pre></div>
<a id="trunksrcwpincludesscriptloaderphp"></a>
<div class="modfile"><h4>Modified: trunk/src/wp-includes/script-loader.php (27639 => 27640)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/src/wp-includes/script-loader.php 2014-03-20 04:42:44 UTC (rev 27639)
+++ trunk/src/wp-includes/script-loader.php 2014-03-20 13:33:00 UTC (rev 27640)
</span><span class="lines">@@ -396,7 +396,7 @@
</span><span class="cx"> // Both rely on numerous settings, styles, and templates to operate correctly.
</span><span class="cx"> $scripts->add( 'media-views', "/wp-includes/js/media-views$suffix.js", array( 'utils', 'media-models', 'wp-plupload', 'jquery-ui-sortable', 'wp-mediaelement' ), false, 1 );
</span><span class="cx"> $scripts->add( 'media-editor', "/wp-includes/js/media-editor$suffix.js", array( 'shortcode', 'media-views' ), false, 1 );
</span><del>- $scripts->add( 'media-audiovideo', "/wp-includes/js/media-audiovideo$suffix.js", array( 'media-editor', 'mce-view' ), false, 1 );
</del><ins>+ $scripts->add( 'media-audiovideo', "/wp-includes/js/media-audiovideo$suffix.js", array( 'media-editor', 'mce-view', 'wp-playlist' ), false, 1 );
</ins><span class="cx"> $scripts->add( 'mce-view', "/wp-includes/js/mce-view$suffix.js", array( 'shortcode', 'media-models' ), false, 1 );
</span><span class="cx">
</span><span class="cx"> if ( is_admin() ) {
</span></span></pre>
</div>
</div>
</body>
</html>