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: http://core.svn.wordpress.org/trunk@27096 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Scott Taylor 2014-02-24 18:08:16 +00:00
parent 5d15ed5202
commit 943f295d2e
23 changed files with 984 additions and 43 deletions

View File

@ -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;
}

File diff suppressed because one or more lines are too long

View File

@ -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;
}

File diff suppressed because one or more lines are too long

View File

@ -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 );

File diff suppressed because one or more lines are too long

View File

@ -941,6 +941,49 @@
title: l10n.addToGalleryTitle
}
});
// wp.media.controller.PlaylistEdit
// -------------------------------
media.controller.PlaylistEdit = media.controller.CollectionEdit( 'playlist', {
type: 'audio',
settings: 'Playlist',
dragInfoText: l10n.playlistDragInfo,
defaults: {
title: l10n.editPlaylistTitle,
dragInfo : false
}
});
// wp.media.controller.PlaylistAdd
// ---------------------------------
media.controller.PlaylistAdd = media.controller.CollectionAdd( 'playlist', {
type: 'audio',
defaults: {
title: l10n.addToPlaylistTitle
}
});
// wp.media.controller.VideoPlaylistEdit
// -------------------------------
media.controller.VideoPlaylistEdit = media.controller.CollectionEdit( 'video-playlist', {
type: 'video',
settings: 'Playlist',
dragInfoText: l10n.videoPlaylistDragInfo,
defaults: {
title: l10n.editVideoPlaylistTitle,
dragInfo : false
}
});
// wp.media.controller.VideoPlaylistAdd
// ---------------------------------
media.controller.VideoPlaylistAdd = media.controller.CollectionAdd( 'video-playlist', {
type: 'video',
defaults: {
title: l10n.addToVideoPlaylistTitle
}
});
/**
* wp.media.controller.FeaturedImage
*
@ -1767,7 +1810,53 @@
menu: 'gallery'
}),
new media.controller.GalleryAdd()
new media.controller.GalleryAdd(),
new media.controller.Library({
id: 'playlist',
title: l10n.createPlaylistTitle,
priority: 60,
toolbar: 'main-playlist',
filterable: 'uploaded',
multiple: 'add',
editable: false,
library: media.query( _.defaults({
type: 'audio'
}, options.library ) )
}),
// Playlist states.
new media.controller.PlaylistEdit({
library: options.selection,
editing: options.editing,
menu: 'playlist'
}),
new media.controller.PlaylistAdd(),
new media.controller.Library({
id: 'video-playlist',
title: l10n.createVideoPlaylistTitle,
priority: 60,
toolbar: 'main-video-playlist',
filterable: 'uploaded',
multiple: 'add',
editable: false,
library: media.query( _.defaults({
type: 'video'
}, options.library ) )
}),
// Video Playlist states.
new media.controller.VideoPlaylistEdit({
library: options.selection,
editing: options.editing,
menu: 'video-playlist'
}),
new media.controller.VideoPlaylistAdd()
]);
@ -1782,15 +1871,21 @@
*/
media.view.MediaFrame.Select.prototype.bindHandlers.apply( this, arguments );
this.on( 'menu:create:gallery', this.createMenu, this );
this.on( 'menu:create:playlist', this.createMenu, this );
this.on( 'menu:create:video-playlist', this.createMenu, this );
this.on( 'toolbar:create:main-insert', this.createToolbar, this );
this.on( 'toolbar:create:main-gallery', this.createToolbar, this );
this.on( 'toolbar:create:main-playlist', this.createToolbar, this );
this.on( 'toolbar:create:main-video-playlist', this.createToolbar, this );
this.on( 'toolbar:create:featured-image', this.featuredImageToolbar, this );
this.on( 'toolbar:create:main-embed', this.mainEmbedToolbar, this );
var handlers = {
menu: {
'default': 'mainMenu',
'gallery': 'galleryMenu'
'gallery': 'galleryMenu',
'playlist': 'playlistMenu',
'video-playlist': 'videoPlaylistMenu'
},
content: {
@ -1802,7 +1897,13 @@
'main-insert': 'mainInsertToolbar',
'main-gallery': 'mainGalleryToolbar',
'gallery-edit': 'galleryEditToolbar',
'gallery-add': 'galleryAddToolbar'
'gallery-add': 'galleryAddToolbar',
'main-playlist': 'mainPlaylistToolbar',
'playlist-edit': 'playlistEditToolbar',
'playlist-add': 'playlistAddToolbar',
'main-video-playlist': 'mainVideoPlaylistToolbar',
'video-playlist-edit': 'videoPlaylistEditToolbar',
'video-playlist-add': 'videoPlaylistAddToolbar'
}
};
@ -1852,6 +1953,52 @@
});
},
playlistMenu: function( view ) {
var lastState = this.lastState(),
previous = lastState && lastState.id,
frame = this;
view.set({
cancel: {
text: l10n.cancelPlaylistTitle,
priority: 20,
click: function() {
if ( previous )
frame.setState( previous );
else
frame.close();
}
},
separateCancel: new media.View({
className: 'separator',
priority: 60
})
});
},
videoPlaylistMenu: function( view ) {
var lastState = this.lastState(),
previous = lastState && lastState.id,
frame = this;
view.set({
cancel: {
text: l10n.cancelVideoPlaylistTitle,
priority: 20,
click: function() {
if ( previous )
frame.setState( previous );
else
frame.close();
}
},
separateCancel: new media.View({
className: 'separator',
priority: 80
})
});
},
// Content
embedContent: function() {
var view = new media.view.Embed({
@ -1970,6 +2117,58 @@
});
},
mainPlaylistToolbar: function( view ) {
var controller = this;
this.selectionStatusToolbar( view );
view.set( 'playlist', {
style: 'primary',
text: l10n.createNewPlaylist,
priority: 100,
requires: { selection: true },
click: function() {
var selection = controller.state().get('selection'),
edit = controller.state('playlist-edit'),
models = selection.where({ type: 'audio' });
edit.set( 'library', new media.model.Selection( models, {
props: selection.props.toJSON(),
multiple: true
}) );
this.controller.setState('playlist-edit');
}
});
},
mainVideoPlaylistToolbar: function( view ) {
var controller = this;
this.selectionStatusToolbar( view );
view.set( 'video-playlist', {
style: 'primary',
text: l10n.createNewVideoPlaylist,
priority: 100,
requires: { selection: true },
click: function() {
var selection = controller.state().get('selection'),
edit = controller.state('video-playlist-edit'),
models = selection.where({ type: 'video' });
edit.set( 'library', new media.model.Selection( models, {
props: selection.props.toJSON(),
multiple: true
}) );
this.controller.setState('video-playlist-edit');
}
});
},
featuredImageToolbar: function( toolbar ) {
this.createSelectToolbar( toolbar, {
text: l10n.setFeaturedImage,
@ -2038,8 +2237,115 @@
}
}
}) );
}
},
playlistEditToolbar: function() {
var editing = this.state().get('editing');
this.toolbar.set( new media.view.Toolbar({
controller: this,
items: {
insert: {
style: 'primary',
text: editing ? l10n.updatePlaylist : l10n.insertPlaylist,
priority: 80,
requires: { library: true },
/**
* @fires wp.media.controller.State#update
*/
click: function() {
var controller = this.controller,
state = controller.state();
controller.close();
state.trigger( 'update', state.get('library') );
// Restore and reset the default state.
controller.setState( controller.options.state );
controller.reset();
}
}
}
}) );
},
playlistAddToolbar: function() {
this.toolbar.set( new media.view.Toolbar({
controller: this,
items: {
insert: {
style: 'primary',
text: l10n.addToPlaylist,
priority: 80,
requires: { selection: true },
/**
* @fires wp.media.controller.State#reset
*/
click: function() {
var controller = this.controller,
state = controller.state(),
edit = controller.state('playlist-edit');
edit.get('library').add( state.get('selection').models );
state.trigger('reset');
controller.setState('playlist-edit');
}
}
}
}) );
},
videoPlaylistEditToolbar: function() {
var editing = this.state().get('editing');
this.toolbar.set( new media.view.Toolbar({
controller: this,
items: {
insert: {
style: 'primary',
text: editing ? l10n.updateVideoPlaylist : l10n.insertVideoPlaylist,
priority: 140,
requires: { library: true },
click: function() {
var controller = this.controller,
state = controller.state();
controller.close();
state.trigger( 'update', state.get('library') );
// Restore and reset the default state.
controller.setState( controller.options.state );
controller.reset();
}
}
}
}) );
},
videoPlaylistAddToolbar: function() {
this.toolbar.set( new media.view.Toolbar({
controller: this,
items: {
insert: {
style: 'primary',
text: l10n.addToVideoPlaylist,
priority: 140,
requires: { selection: true },
click: function() {
var controller = this.controller,
state = controller.state(),
edit = controller.state('video-playlist-edit');
edit.get('library').add( state.get('selection').models );
state.trigger('reset');
controller.setState('video-playlist-edit');
}
}
}
}) );
}
});
media.view.MediaFrame.ImageDetails = media.view.MediaFrame.Select.extend({
@ -4864,10 +5170,24 @@
* @augments Backbone.View
*/
media.view.Settings.Gallery = media.view.Settings.extend({
className: 'gallery-settings',
className: 'collection-settings gallery-settings',
template: media.template('gallery-settings')
});
/**
* wp.media.view.Settings.Playlist
*
* @constructor
* @augments wp.media.view.Settings
* @augments wp.media.View
* @augments wp.Backbone.View
* @augments Backbone.View
*/
media.view.Settings.Playlist = media.view.Settings.extend({
className: 'collection-settings playlist-settings',
template: media.template('playlist-settings')
});
/**
* wp.media.view.Attachment.Details
*

File diff suppressed because one or more lines are too long

View File

@ -13,3 +13,104 @@
.me-cannotplay {
width: auto !important;
}
.wp-playlist {
border: 1px solid #ccc;
padding: 10px;
margin: 12px 0 18px;
font-size: 85%;
line-height: 160%;
}
.wp-playlist audio,
.wp-playlist video {
display: inline-block;
max-width: 100%;
}
.wp-playlist .mejs-container {
margin: 0;
width: 100%;
}
.wp-playlist .mejs-controls .mejs-button button {
outline: 0;
}
.wp-playlist-light {
background: #fff;
}
.wp-playlist-dark {
color: #fff;
background: #000;
}
.wp-playlist-caption {
max-width: 85%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.wp-caption-meta {
display: block;
}
.wp-caption-title {
font-size: 100%;
}
.wp-caption-album {
font-style: italic;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.wp-caption-artist {
font-size: 85%;
text-transform: uppercase;
}
.wp-caption-by {
font-size: 65%;
font-weight: bold;
}
.wp-playlist-item-length {
position: absolute;
right: 0;
top: 0;
}
.wp-playlist-tracks {
margin-top: 10px;
border-top: 1px solid #ccc;
}
.wp-playlist-item {
position: relative;
cursor: pointer;
border-bottom: 1px solid #ccc;
}
.wp-playlist-current-item {
overflow: hidden;
margin-bottom: 10px;
height: 60px;
}
.wp-playlist-current-item img {
float: left;
max-width: 60px;
height: auto;
margin-right: 10px;
}
.wp-playlist-current-item .wp-caption-title,
.wp-playlist-current-item .wp-caption-artist {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

View File

@ -0,0 +1,130 @@
/*globals window, document, $, jQuery */
(function ($, _, Backbone) {
"use strict";
var WPPlaylistView = Backbone.View.extend({
index : 0,
itemTemplate : wp.template('wp-playlist-item'),
initialize : function () {
var settings = {};
this.data = $.parseJSON( this.$('script').html() );
this.playerNode = this.$( this.data.type );
this.tracks = new Backbone.Collection( this.data.tracks );
this.current = this.tracks.first();
if ( 'audio' === this.data.type ) {
this.currentTemplate = wp.template('wp-playlist-current-item');
this.currentNode = this.$( '.wp-playlist-current-item' );
}
this.renderCurrent();
if ( this.data.tracklist ) {
this.renderTracks();
}
this.playerNode.attr( 'src', this.current.get('src') );
_.bindAll( this, 'bindPlayer', 'ended', 'clickTrack' );
if ( typeof _wpmejsSettings !== 'undefined' ) {
settings.pluginPath = _wpmejsSettings.pluginPath;
}
settings.success = this.bindPlayer;
new MediaElementPlayer( this.playerNode.get(0), settings );
},
renderCurrent : function () {
var dimensions;
if ( 'video' === this.data.type ) {
if ( this.data.images && this.current.get( 'image' ) ) {
this.playerNode.attr( 'poster', this.current.get( 'image' ).src );
}
dimensions = this.current.get( 'dimensions' ).resized;
this.playerNode.attr( 'width', dimensions.width );
this.playerNode.attr( 'height', dimensions.height );
} else {
if ( ! this.data.images ) {
this.current.set( 'image', false );
}
this.currentNode.html( this.currentTemplate( this.current.toJSON() ) );
}
},
renderTracks : function () {
var that = this, i = 1, tracklist = $( '<div class="wp-playlist-tracks"></div>' );
this.tracks.each(function (model) {
if ( ! that.data.images ) {
model.set( 'image', false );
}
model.set( 'artists', that.data.artists );
model.set( 'index', that.data.tracknumbers ? i : false );
tracklist.append( that.itemTemplate( model.toJSON() ) );
i += 1;
});
this.$el.append( tracklist );
},
events : {
'click .wp-playlist-item' : 'clickTrack',
'click .wp-playlist-next' : 'next',
'click .wp-playlist-prev' : 'prev'
},
bindPlayer : function (mejs) {
this.player = mejs;
this.player.addEventListener( 'ended', this.ended );
},
clickTrack : function (e) {
this.index = this.$( '.wp-playlist-item' ).index( e.currentTarget );
this.setCurrent();
},
ended : function () {
if ( this.index + 1 < this.tracks.length ) {
this.next();
} else {
this.index = 0;
this.current = this.tracks.at( this.index );
this.loadCurrent();
}
},
next : function () {
this.index = this.index + 1 >= this.tracks.length ? 0 : this.index + 1;
this.setCurrent();
},
prev : function () {
this.index = this.index - 1 < 0 ? this.tracks.length - 1 : this.index - 1;
this.setCurrent();
},
loadCurrent : function () {
this.player.pause();
this.playerNode.attr( 'src', this.current.get( 'src' ) );
this.renderCurrent();
this.player.load();
},
setCurrent : function () {
this.current = this.tracks.at( this.index );
this.loadCurrent();
this.player.play();
}
});
$(document).ready(function () {
$('.wp-playlist').each(function () {
return new WPPlaylistView({ el: this });
});
});
}(jQuery, _, Backbone));

View File

@ -22,7 +22,7 @@ function fileQueued(fileObj) {
.appendTo( jQuery('#media-items' ) );
// Disable submit
jQuery('#insert-gallery').prop('disabled', true);
jQuery('#insert-gallery, #insert-playlist').prop('disabled', true);
}
function uploadStart() {
@ -64,11 +64,11 @@ function updateMediaForm() {
// Just one file, no need for collapsible part
if ( items.length == 1 ) {
items.addClass('open').find('.slidetoggle').show();
jQuery('.insert-gallery').hide();
jQuery('.insert-gallery, .insert-playlist').hide();
} else if ( items.length > 1 ) {
items.removeClass('open');
// Only show Gallery button when there are at least two files.
jQuery('.insert-gallery').show();
// Only show Gallery/Playlist buttons when there are at least two files.
jQuery('.insert-gallery, .insert-playlist').show();
}
// Only show Save buttons when there is at least one file.
@ -257,7 +257,7 @@ function deleteError() {
}
function uploadComplete() {
jQuery('#insert-gallery').prop('disabled', false);
jQuery('#insert-gallery, #insert-playlist').prop('disabled', false);
}
function switchUploader(s) {

File diff suppressed because one or more lines are too long

View File

@ -212,11 +212,12 @@ function updateMediaForm() {
else
jQuery('.savebutton').hide();
// Only show Gallery button when there are at least two files.
if ( items.length > 1 )
jQuery('.insert-gallery').show();
else
jQuery('.insert-gallery').hide();
// Only show Gallery/Playlist buttons when there are at least two files.
if ( items.length > 1 ) {
jQuery('.insert-gallery, .insert-playlist').show();
} else {
jQuery('.insert-gallery, .insert-playlist').hide();
}
}
function uploadSuccess(fileObj, serverData) {
@ -238,7 +239,7 @@ function uploadComplete(fileObj) {
// If no more uploads queued, enable the submit button
if ( swfu.getStats().files_queued == 0 ) {
jQuery('#cancel-upload').prop('disabled', true);
jQuery('#insert-gallery').prop('disabled', false);
jQuery('#insert-gallery, #insert-playlist').prop('disabled', false);
}
}

View File

@ -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)"
});

View File

@ -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';
}
}
});

View File

@ -1 +1 @@
tinymce.PluginManager.add("wpgallery",function(a){function b(a){return a.replace(/\[gallery([^\]]*)\]/g,function(a){return c("wp-gallery",a)})}function c(a,b){return b=window.encodeURIComponent(b),'<img src="'+tinymce.Env.transparentSrc+'" class="wp-media mceItem '+a+'" data-wp-media="'+b+'" data-mce-resize="false" data-mce-placeholder="1" />'}function d(a,b,d){var e;return d&&d.indexOf("["+b)>-1?(e=a.length-d.length,c("wp-"+b,a.substring(0,e))+a.substring(e)):c("wp-"+b,a)}function e(a){for(var b=/\[(audio|video)[^\]]*\]/,c=/\[(audio|video)[^\]]*\]([\s\S]*?\[\/\1\])?/;b.test(a);)a=a.replace(c,d);return a}function f(a){function b(a,b){return b=new RegExp(b+'="([^"]+)"').exec(a),b?window.decodeURIComponent(b[1]):""}return a.replace(/(?:<p(?: [^>]+)?>)*(<img [^>]+>)(?:<\/p>)*/g,function(a,c){var d=b(c,"data-wp-media");return d?"<p>"+d+"</p>":a})}function g(b){var c,d,e;"IMG"===b.nodeName&&"undefined"!=typeof wp&&wp.media&&wp.media.gallery&&(a.dom.hasClass(b,"wp-gallery")?(c=wp.media.gallery,e=window.decodeURIComponent(a.dom.getAttrib(b,"data-wp-media")),d=c.edit(e),d.state("gallery-edit").on("update",function(d){var e=c.shortcode(d).string();a.dom.setAttrib(b,"data-wp-media",window.encodeURIComponent(e))})):window.console&&window.console.log("Edit AV shortcode "+window.decodeURIComponent(a.dom.getAttrib(b,"data-wp-media"))))}a.addCommand("WP_Gallery",function(){g(a.selection.getNode())}),a.on("mouseup",function(b){function c(){d.removeClass(d.select("img.wp-media-selected"),"wp-media-selected")}var d=a.dom,e=b.target;"IMG"===e.nodeName&&d.getAttrib(e,"data-wp-media")?2!==b.button&&(d.hasClass(e,"wp-media-selected")?g(e):(c(),d.addClass(e,"wp-media-selected"))):c()}),a.on("ResolveName",function(b){var c=a.dom,d=b.target;"IMG"===d.nodeName&&c.getAttrib(d,"data-wp-media")&&(c.hasClass(d,"wp-gallery")?b.name="gallery":c.hasClass(d,"wp-video")?b.name="video":c.hasClass(d,"wp-audio")&&(b.name="audio"))}),a.on("BeforeSetContent",function(a){a.content=b(a.content),a.content=e(a.content)}),a.on("PostProcess",function(a){a.get&&(a.content=f(a.content))})});
tinymce.PluginManager.add("wpgallery",function(a){function b(a){return a.replace(/\[gallery([^\]]*)\]/g,function(a){return c("wp-gallery",a)})}function c(a,b){return b=window.encodeURIComponent(b),'<img src="'+tinymce.Env.transparentSrc+'" class="wp-media mceItem '+a+'" data-wp-media="'+b+'" data-mce-resize="false" data-mce-placeholder="1" />'}function d(a,b,d){var e;return d&&d.indexOf("["+b)>-1?(e=a.length-d.length,c("wp-"+b,a.substring(0,e))+a.substring(e)):c("wp-"+b,a)}function e(a){for(var b=/\[(video-playlist|audio|video|playlist)[^\]]*\]/,c=/\[(video-playlist|audio|video|playlist)[^\]]*\]([\s\S]*?\[\/\1\])?/;b.test(a);)a=a.replace(c,d);return a}function f(a){function b(a,b){return b=new RegExp(b+'="([^"]+)"').exec(a),b?window.decodeURIComponent(b[1]):""}return a.replace(/(?:<p(?: [^>]+)?>)*(<img [^>]+>)(?:<\/p>)*/g,function(a,c){var d=b(c,"data-wp-media");return d?"<p>"+d+"</p>":a})}function g(b){var c,d,e;"IMG"===b.nodeName&&"undefined"!=typeof wp&&wp.media&&(a.dom.hasClass(b,"wp-gallery")&&wp.media.gallery?(c=wp.media.gallery,e=window.decodeURIComponent(a.dom.getAttrib(b,"data-wp-media")),d=c.edit(e),d.state("gallery-edit").on("update",function(d){var e=c.shortcode(d).string();a.dom.setAttrib(b,"data-wp-media",window.encodeURIComponent(e))})):a.dom.hasClass(b,"wp-playlist")&&wp.media.playlist?(e=window.decodeURIComponent(a.dom.getAttrib(b,"data-wp-media")),d=wp.media.playlist.edit(e),d.state("playlist-edit").on("update",function(c){var d=wp.media.playlist.shortcode(c).string();a.dom.setAttrib(b,"data-wp-media",window.encodeURIComponent(d))})):a.dom.hasClass(b,"wp-video-playlist")&&wp.media["video-playlist"]?(e=window.decodeURIComponent(a.dom.getAttrib(b,"data-wp-media")),d=wp.media["video-playlist"].edit(e),d.state("video-playlist-edit").on("update",function(c){var d=wp.media["video-playlist"].shortcode(c).string();a.dom.setAttrib(b,"data-wp-media",window.encodeURIComponent(d))})):window.console&&window.console.log("Edit AV shortcode "+window.decodeURIComponent(a.dom.getAttrib(b,"data-wp-media"))))}a.addCommand("WP_Gallery",function(){g(a.selection.getNode())}),a.on("mouseup",function(b){function c(){d.removeClass(d.select("img.wp-media-selected"),"wp-media-selected")}var d=a.dom,e=b.target;"IMG"===e.nodeName&&d.getAttrib(e,"data-wp-media")?2!==b.button&&(d.hasClass(e,"wp-media-selected")?g(e):(c(),d.addClass(e,"wp-media-selected"))):c()}),a.on("ResolveName",function(b){var c=a.dom,d=b.target;"IMG"===d.nodeName&&c.getAttrib(d,"data-wp-media")&&(c.hasClass(d,"wp-gallery")?b.name="gallery":c.hasClass(d,"wp-video")?b.name="video":c.hasClass(d,"wp-audio")?b.name="audio":c.hasClass(d,"wp-playlist")?b.name="playlist":c.hasClass(d,"wp-video-playlist")&&(b.name="video-playlist"))}),a.on("BeforeSetContent",function(a){a.content=b(a.content),a.content=e(a.content)}),a.on("PostProcess",function(a){a.get&&(a.content=f(a.content))})});

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 KiB

View File

@ -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;
}

View File

@ -411,6 +411,47 @@ function wp_print_media_templates() {
</label>
</script>
<script type="text/html" id="tmpl-playlist-settings">
<h3><?php _e('Playlist Settings'); ?></h3>
<label class="setting">
<span><?php _e( 'Random Order' ); ?></span>
<input type="checkbox" data-setting="_orderbyRandom" />
</label>
<label class="setting">
<span><?php _e('Style'); ?></span>
<select class="style" data-setting="style">
<option value="light">
<?php esc_attr_e('Light'); ?>
</option>
<option value="dark">
<?php esc_attr_e('Dark'); ?>
</option>
</select>
</label>
<label class="setting">
<span><?php _e( 'Show Tracklist' ); ?></span>
<input type="checkbox" data-setting="_tracklist" />
</label>
<label class="setting">
<span><?php _e( 'Show Track Numbers' ); ?></span>
<input type="checkbox" data-setting="_tracknumbers" />
</label>
<label class="setting">
<span><?php _e( 'Show Artist Name in Tracklist' ); ?></span>
<input type="checkbox" data-setting="_artists" />
</label>
<label class="setting">
<span><?php _e( 'Show Images' ); ?></span>
<input type="checkbox" data-setting="_images" />
</label>
</script>
<script type="text/html" id="tmpl-embed-link-settings">
<label class="setting">
<span><?php _e('Title'); ?></span>

View File

@ -933,6 +933,258 @@ function gallery_shortcode( $attr ) {
return $output;
}
/**
* The Playlist shortcode.
*
* This implements the functionality of the Playlist Shortcode for displaying
* a collection of WordPress audio or video files in a post.
*
* @since 3.9.0
*
* @param array $attr Attributes of the shortcode.
* @return string $type Type of playlist. Defaults to audio, video is also supported
*/
function wp_get_playlist( $attr, $type ) {
global $content_width;
$post = get_post();
if ( ! in_array( $type, array( 'audio', 'video' ) ) ) {
return '';
}
static $instance = 0;
$instance++;
if ( ! empty( $attr['ids'] ) ) {
// 'ids' is explicitly ordered, unless you specify otherwise.
if ( empty( $attr['orderby'] ) ) {
$attr['orderby'] = 'post__in';
}
$attr['include'] = $attr['ids'];
}
// Allow plugins/themes to override the default gallery template.
$output = apply_filters( 'post_playlist', '', $attr, $type );
if ( $output != '' ) {
return $output;
}
// We're trusting author input, so let's at least make sure it looks like a valid orderby statement
if ( isset( $attr['orderby'] ) ) {
$attr['orderby'] = sanitize_sql_orderby( $attr['orderby'] );
if ( ! $attr['orderby'] )
unset( $attr['orderby'] );
}
extract( shortcode_atts( array(
'order' => 'ASC',
'orderby' => 'menu_order ID',
'id' => $post ? $post->ID : 0,
'include' => '',
'exclude' => '',
'style' => 'light',
'tracklist' => 'audio' === $type,
'tracknumbers' => 'audio' === $type,
'images' => true,
'artists' => true
), $attr, 'playlist' ) );
$id = intval( $id );
if ( 'RAND' == $order ) {
$orderby = 'none';
}
$args = array(
'post_status' => 'inherit',
'post_type' => 'attachment',
'post_mime_type' => $type,
'order' => $order,
'orderby' => $orderby
);
if ( ! empty( $include ) ) {
$args['include'] = $include;
$_attachments = get_posts( $args );
$attachments = array();
foreach ( $_attachments as $key => $val ) {
$attachments[$val->ID] = $_attachments[$key];
}
} elseif ( ! empty( $exclude ) ) {
$args['post_parent'] = $id;
$args['exclude'] = $exclude;
$attachments = get_children( $args );
} else {
$args['post_parent'] = $id;
$attachments = get_children( $args );
}
if ( empty( $attachments ) ) {
return '';
}
if ( is_feed() ) {
$output = "\n";
foreach ( $attachments as $att_id => $attachment ) {
$output .= wp_get_attachment_link( $att_id ) . "\n";
}
return $output;
}
$supports_thumbs = ( current_theme_supports( 'post-thumbnails', "attachment:$type" ) && post_type_supports( "attachment:$type", 'thumbnail' ) )
|| $images;
$outer = 22; // default padding and border of wrapper
$theme_width = $content_width - $outer;
$data = compact( 'type', 'style' );
// don't pass strings to JSON, will be truthy in JS
foreach ( array( 'tracklist', 'tracknumbers', 'images', 'artists' ) as $key ) {
$data[$key] = filter_var( $$key, FILTER_VALIDATE_BOOLEAN );
}
$tracks = array();
foreach ( $attachments as $attachment ) {
$url = wp_get_attachment_url( $attachment->ID );
$ftype = wp_check_filetype( $url, wp_get_mime_types() );
$track = array(
'type' => $type,
'src' => $url,
'type' => $ftype['ext'],
'title' => get_the_title( $attachment->ID ),
'caption' => wptexturize( $attachment->post_excerpt ),
'description' => wptexturize( $attachment->post_content )
);
$meta = wp_get_attachment_metadata( $attachment->ID );
if ( ! empty( $meta ) ) {
$track['meta'] = array();
$keys = array( 'title', 'artist', 'band', 'album', 'genre', 'year', 'length', 'length_formatted' );
foreach ( $keys as $key ) {
if ( ! empty( $meta[ $key ] ) ) {
$track['meta'][ $key ] = $meta[ $key ];
}
}
if ( 'video' === $type ) {
$width = empty( $meta['width'] ) ? 640 : $meta['width'];
$height = empty( $meta['height'] ) ? 360 : $meta['height'];
$theme_height = round( ( $height * $theme_width ) / $width );
$track['dimensions'] = array(
'original' => compact( 'width', 'height' ),
'resized' => array(
'width' => $theme_width,
'height' => $theme_height
)
);
}
}
if ( $supports_thumbs ) {
$id = get_post_thumbnail_id( $attachment->ID );
if ( ! empty( $id ) ) {
list( $src, $width, $height ) = wp_get_attachment_image_src( $id, 'full' );
$track['image'] = compact( 'src', 'width', 'height' );
list( $src, $width, $height ) = wp_get_attachment_image_src( $id, 'thumb' );
$track['thumb'] = compact( 'src', 'width', 'height' );
}
}
$tracks[] = $track;
}
$data['tracks'] = $tracks;
ob_start();
if ( 1 === $instance ):
wp_enqueue_style( 'wp-mediaelement' );
wp_enqueue_script( 'wp-playlist' );
?>
<!--[if lt IE 9]><script>document.createElement('<?php echo $type ?>');</script><![endif]-->
<script type="text/html" id="tmpl-wp-playlist-current-item">
<# if ( data.image ) { #>
<img src="{{{ data.thumb.src }}}"/>
<# } #>
<# if ( data.meta.title ) { #>
<div class="wp-playlist-caption">
<span class="wp-caption-meta wp-caption-title">&#8220;{{{ data.meta.title }}}&#8221;</span>
<span class="wp-caption-meta wp-caption-album">{{{ data.meta.album }}}</span>
<span class="wp-caption-meta wp-caption-artist">{{{ data.meta.artist }}}</span>
</div>
<# } else { #>
<div class="wp-playlist-caption">{{{ data.caption }}}</div>
<# } #>
</script>
<script type="text/html" id="tmpl-wp-playlist-item">
<div class="wp-playlist-item">
<# if ( ( data.title || data.meta.title ) && ( ! data.artists || data.meta.artist ) ) { #>
<div class="wp-playlist-caption">
{{{ data.index ? ( data.index + '.&nbsp;' ) : '' }}}
<span class="wp-caption-title">&#8220;{{{ data.title ? data.title : data.meta.title }}}&#8221;</span>
<# if ( data.artists ) { #>
<span class="wp-caption-by"><?php _e( 'by' ) ?></span>
<span class="wp-caption-artist">{{{ data.meta.artist }}}</span>
<# } #>
</div>
<# } else { #>
<div class="wp-playlist-caption">{{{ data.index ? ( data.index + '.' ) : '' }}} {{{ data.caption ? data.caption : data.title }}}</div>
<# } #>
<# if ( data.meta.length_formatted ) { #>
<div class="wp-playlist-item-length">{{{ data.meta.length_formatted }}}</div>
<# } #>
</div>
</script>
<?php endif ?>
<div class="wp-playlist wp-<?php echo $type ?>-playlist wp-playlist-<?php echo $style ?>">
<?php if ( 'audio' === $type ): ?>
<div class="wp-playlist-current-item"></div>
<?php endif ?>
<<?php echo $type ?> controls="controls" preload="metadata" width="<?php echo $content_width - $outer ?>"></<?php echo $type ?>>
<div class="wp-playlist-next"></div>
<div class="wp-playlist-prev"></div>
<noscript>
<?php
$output = "\n";
foreach ( $attachments as $att_id => $attachment ) {
$output .= wp_get_attachment_link( $att_id ) . "\n";
}
echo $output;
?>
</noscript>
<script type="application/json"><?php echo json_encode( $data ) ?></script>
</div>
<?php
return ob_get_clean();
}
/**
* Playlist shortcode handler
*
* @since 3.9.0
*
* @param array $attr Parsed shortcode attributes.
* @return string The resolved playlist shortcode markup.
*/
function wp_playlist_shortcode( $attr ) {
return wp_get_playlist( $attr, 'audio' );
}
add_shortcode( 'playlist', 'wp_playlist_shortcode' );
/**
* Video playlist shortcode handler
*
* @since 3.9.0
*
* @param array $attr Parsed shortcode attributes.
* @return string The resolved video playlist shortcode markup.
*/
function wp_video_playlist_shortcode( $attr ) {
return wp_get_playlist( $attr, 'video' );
}
add_shortcode( 'video-playlist', 'wp_video_playlist_shortcode' );
/**
* Provide a No-JS Flash fallback as a last resort for audio / video
*
@ -2044,6 +2296,8 @@ function wp_enqueue_media( $args = array() ) {
'mediaLibraryTitle' => __( 'Media Library' ),
'insertMediaTitle' => __( 'Insert Media' ),
'createNewGallery' => __( 'Create a new gallery' ),
'createNewPlaylist' => __( 'Create a new playlist' ),
'createNewVideoPlaylist' => __( 'Create a new video playlist' ),
'returnToLibrary' => __( '&#8592; Return to library' ),
'allMediaItems' => __( 'All media items' ),
'noItemsFound' => __( 'No items found.' ),
@ -2071,7 +2325,27 @@ function wp_enqueue_media( $args = array() ) {
// Edit Image
'imageDetailsTitle' => __( 'Image Details' ),
'imageReplaceTitle' => __( 'Replace Image' ),
'imageDetailsCancel' => __( 'Cancel Edit' )
'imageDetailsCancel' => __( 'Cancel Edit' ),
// Playlist
'playlistDragInfo' => __( 'Drag and drop to reorder tracks.' ),
'createPlaylistTitle' => __( 'Create Playlist' ),
'editPlaylistTitle' => __( 'Edit Playlist' ),
'cancelPlaylistTitle' => __( '&#8592; Cancel Playlist' ),
'insertPlaylist' => __( 'Insert playlist' ),
'updatePlaylist' => __( 'Update playlist' ),
'addToPlaylist' => __( 'Add to playlist' ),
'addToPlaylistTitle' => __( 'Add to Playlist' ),
// Video Playlist
'videoPlaylistDragInfo' => __( 'Drag and drop to reorder videos.' ),
'createVideoPlaylistTitle' => __( 'Create Video Playlist' ),
'editVideoPlaylistTitle' => __( 'Edit Video Playlist' ),
'cancelVideoPlaylistTitle' => __( '&#8592; Cancel Video Playlist' ),
'insertVideoPlaylist' => __( 'Insert video playlist' ),
'updateVideoPlaylist' => __( 'Update video playlist' ),
'addToVideoPlaylist' => __( 'Add to video playlist' ),
'addToVideoPlaylistTitle' => __( 'Add to Video Playlist' ),
);
$settings = apply_filters( 'media_view_settings', $settings, $post );

View File

@ -315,6 +315,8 @@ function wp_default_scripts( &$scripts ) {
'pluginPath' => includes_url( 'js/mediaelement/', 'relative' ),
) );
$scripts->add( 'wp-playlist', "/wp-includes/js/mediaelement/wp-playlist.js", array( 'wp-util', 'backbone', 'mediaelement' ), false, 1 );
$scripts->add( 'zxcvbn-async', "/wp-includes/js/zxcvbn-async$suffix.js", array(), '1.0' );
did_action( 'init' ) && $scripts->localize( 'zxcvbn-async', '_zxcvbnSettings', array(
'src' => empty( $guessed_url ) ? includes_url( '/js/zxcvbn.min.js' ) : $scripts->base_url . '/wp-includes/js/zxcvbn.min.js',