There is no more `video-playlist` shortcode. To use video, it is now `[playlist type="video" ....]`. Also deleting core playlist styles. The `style` attribute is still supported, defaulting to `light`. Our core style support was 4-5 CSS rules.

See #27552. Leaving open for comments and potential bugs.


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


git-svn-id: http://core.svn.wordpress.org/trunk@27621 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Scott Taylor 2014-03-27 17:58:15 +00:00
parent 999183669c
commit 4f868ad882
11 changed files with 131 additions and 233 deletions

View File

@ -364,7 +364,7 @@ window.wp = window.wp || {};
edit: function( node ) { edit: function( node ) {
var media = wp.media[ this.shortcode ], var media = wp.media[ this.shortcode ],
self = this, self = this,
frame, data; frame, data, callback;
wp.media.mixin.pauseAllPlayers(); wp.media.mixin.pauseAllPlayers();
@ -373,12 +373,20 @@ window.wp = window.wp || {};
frame.on( 'close', function() { frame.on( 'close', function() {
frame.detach(); frame.detach();
} ); } );
frame.state( self.state ).on( 'update', function( selection ) {
callback = function( selection ) {
var shortcode = wp.media[ self.shortcode ].shortcode( selection ).string(); var shortcode = wp.media[ self.shortcode ].shortcode( selection ).string();
$( node ).attr( 'data-wpview-text', window.encodeURIComponent( shortcode ) ); $( node ).attr( 'data-wpview-text', window.encodeURIComponent( shortcode ) );
wp.mce.views.refreshView( self, shortcode ); wp.mce.views.refreshView( self, shortcode );
frame.detach(); frame.detach();
};
if ( _.isArray( self.state ) ) {
_.each( self.state, function (state) {
frame.state( state ).on( 'update', callback );
} ); } );
} else {
frame.state( self.state ).on( 'update', callback );
}
frame.open(); frame.open();
} }
}; };
@ -531,7 +539,7 @@ window.wp = window.wp || {};
* Asynchronously fetch the shortcode's attachments * Asynchronously fetch the shortcode's attachments
*/ */
fetch: function() { fetch: function() {
this.attachments = wp.media[ this.shortcode.tag ].attachments( this.shortcode ); this.attachments = wp.media.playlist.attachments( this.shortcode );
this.attachments.more().done( this.setPlayer ); this.attachments.more().done( this.setPlayer );
}, },
@ -579,8 +587,7 @@ window.wp = window.wp || {};
*/ */
getHtml: function() { getHtml: function() {
var data = this.shortcode.attrs.named, var data = this.shortcode.attrs.named,
model = wp.media[ this.shortcode.tag ], model = wp.media.playlist,
type = 'playlist' === this.shortcode.tag ? 'audio' : 'video',
options, options,
attachments, attachments,
tracks = []; tracks = [];
@ -596,7 +603,7 @@ window.wp = window.wp || {};
attachments = this.attachments.toJSON(); attachments = this.attachments.toJSON();
options = { options = {
type: type, type: data.type,
style: data.style, style: data.style,
tracklist: data.tracklist, tracklist: data.tracklist,
tracknumbers: data.tracknumbers, tracknumbers: data.tracknumbers,
@ -614,7 +621,7 @@ window.wp = window.wp || {};
meta : attachment.meta meta : attachment.meta
}; };
if ( 'video' === type ) { if ( 'video' === data.type ) {
size.width = attachment.width; size.width = attachment.width;
size.height = attachment.height; size.height = attachment.height;
if ( media.view.settings.contentWidth ) { if ( media.view.settings.contentWidth ) {
@ -659,20 +666,8 @@ window.wp = window.wp || {};
*/ */
wp.mce.playlist = _.extend( {}, wp.mce.media, { wp.mce.playlist = _.extend( {}, wp.mce.media, {
shortcode: 'playlist', shortcode: 'playlist',
state: 'playlist-edit', state: ['playlist-edit', 'video-playlist-edit'],
View: wp.mce.media.PlaylistView View: wp.mce.media.PlaylistView
} ); } );
wp.mce.views.register( 'playlist', wp.mce.playlist ); wp.mce.views.register( 'playlist', wp.mce.playlist );
/**
* TinyMCE handler for the video-playlist shortcode
*
* @mixes wp.mce.media
*/
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'] );
}(jQuery)); }(jQuery));

File diff suppressed because one or more lines are too long

View File

@ -176,7 +176,6 @@
*/ */
wp.media.playlist = new wp.media.collection({ wp.media.playlist = new wp.media.collection({
tag: 'playlist', tag: 'playlist',
type : 'audio',
editTitle : l10n.editPlaylistTitle, editTitle : l10n.editPlaylistTitle,
defaults : { defaults : {
id: wp.media.view.settings.post.id, id: wp.media.view.settings.post.id,
@ -184,20 +183,8 @@
tracklist: true, tracklist: true,
tracknumbers: true, tracknumbers: true,
images: true, images: true,
artists: true artists: true,
} type: 'audio'
});
wp.media['video-playlist'] = new wp.media.collection({
tag: 'video-playlist',
type : 'video',
editTitle : l10n.editVideoPlaylistTitle,
defaults : {
id: wp.media.view.settings.post.id,
style: 'light',
tracklist: false,
tracknumbers: false,
images: true
} }
}); });
@ -956,93 +943,7 @@
return counts; return counts;
}; };
}(media.view.settings)), }(media.view.settings))
/**
* Return the playlist states for MediaFrame.Post
*
* @param {Object} options
* @returns {Array}
*/
states : function(options) {
return [
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.CollectionEdit({
type: 'audio',
collectionType: 'playlist',
title: l10n.editPlaylistTitle,
SettingsView: media.view.Settings.Playlist,
library: options.selection,
editing: options.editing,
menu: 'playlist',
dragInfoText: l10n.playlistDragInfo,
dragInfo: false
}),
new media.controller.CollectionAdd({
type: 'audio',
collectionType: 'playlist',
title: l10n.addToPlaylistTitle
})
];
},
/**
* Return the video-playlist states for MediaFrame.Post
*
* @param {Object} options
* @returns {Array}
*/
videoStates : function(options) {
return [
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.CollectionEdit({
type: 'video',
collectionType: 'video-playlist',
title: l10n.editVideoPlaylistTitle,
SettingsView: media.view.Settings.Playlist,
library: options.selection,
editing: options.editing,
menu: 'video-playlist',
dragInfoText: l10n.videoPlaylistDragInfo,
dragInfo: false
}),
new media.controller.CollectionAdd({
type: 'video',
collectionType: 'video-playlist',
title: l10n.addToVideoPlaylistTitle
})
];
}
} ); } );
/** /**

File diff suppressed because one or more lines are too long

View File

@ -405,6 +405,11 @@
attrs = _.pick( props, 'orderby', 'order' ), attrs = _.pick( props, 'orderby', 'order' ),
shortcode, clone, self = this; shortcode, clone, self = this;
if ( attachments.type ) {
attrs.type = attachments.type;
delete attachments.type;
}
if ( attachments[this.tag] ) { if ( attachments[this.tag] ) {
_.extend( attrs, attachments[this.tag].toJSON() ); _.extend( attrs, attachments[this.tag].toJSON() );
} }
@ -477,7 +482,7 @@
edit: function( content ) { edit: function( content ) {
var shortcode = wp.shortcode.next( this.tag, content ), var shortcode = wp.shortcode.next( this.tag, content ),
defaultPostId = this.defaults.id, defaultPostId = this.defaults.id,
attachments, selection; attachments, selection, state;
// Bail if we didn't match the shortcode or all of the content. // Bail if we didn't match the shortcode or all of the content.
if ( ! shortcode || shortcode.content !== content ) { if ( ! shortcode || shortcode.content !== content ) {
@ -514,10 +519,16 @@
this.frame.dispose(); this.frame.dispose();
} }
// Store the current gallery frame. if ( shortcode.attrs.named.type && 'video' === shortcode.attrs.named.type ) {
state = 'video-' + this.tag + '-edit';
} else {
state = this.tag + '-edit';
}
// Store the current frame.
this.frame = wp.media({ this.frame = wp.media({
frame: 'post', frame: 'post',
state: this.tag + '-edit', state: state,
title: this.editTitle, title: this.editTitle,
editing: true, editing: true,
multiple: true, multiple: true,
@ -786,7 +797,7 @@
/** /**
* @this wp.media.editor * @this wp.media.editor
*/ */
this.insert( wp.media['video-playlist'].shortcode( selection ).string() ); this.insert( wp.media.playlist.shortcode( selection ).string() );
}, this ); }, this );
workflow.state('embed').on( 'select', function() { workflow.state('embed').on( 'select', function() {

File diff suppressed because one or more lines are too long

View File

@ -793,6 +793,10 @@
initialize: function() { initialize: function() {
var collectionType = this.get('collectionType'); var collectionType = this.get('collectionType');
if ( 'video' === this.get( 'type' ) ) {
collectionType = 'video-' + collectionType;
}
this.set( 'id', collectionType + '-edit' ); this.set( 'id', collectionType + '-edit' );
this.set( 'toolbar', collectionType + '-edit' ); this.set( 'toolbar', collectionType + '-edit' );
@ -1886,7 +1890,7 @@
}, },
createStates: function() { createStates: function() {
var options = this.options, counts; var options = this.options;
// Add the default states. // Add the default states.
this.states.add([ this.states.add([
@ -1946,19 +1950,74 @@
type: 'image', type: 'image',
collectionType: 'gallery', collectionType: 'gallery',
title: l10n.addToGalleryTitle title: l10n.addToGalleryTitle
}),
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.CollectionEdit({
type: 'audio',
collectionType: 'playlist',
title: l10n.editPlaylistTitle,
SettingsView: media.view.Settings.Playlist,
library: options.selection,
editing: options.editing,
menu: 'playlist',
dragInfoText: l10n.playlistDragInfo,
dragInfo: false
}),
new media.controller.CollectionAdd({
type: 'audio',
collectionType: 'playlist',
title: l10n.addToPlaylistTitle
}),
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 ) )
}),
new media.controller.CollectionEdit({
type: 'video',
collectionType: 'playlist',
title: l10n.editVideoPlaylistTitle,
SettingsView: media.view.Settings.Playlist,
library: options.selection,
editing: options.editing,
menu: 'video-playlist',
dragInfoText: l10n.playlistDragInfo,
dragInfo: false
}),
new media.controller.CollectionAdd({
type: 'video',
collectionType: 'playlist',
title: l10n.addToVideoPlaylistTitle
}) })
]); ]);
counts = media.playlist.counts();
if ( counts.audio ) {
this.states.add( media.playlist.states(options) );
}
if ( counts.video ) {
this.states.add( media.playlist.videoStates(options) );
}
if ( media.view.settings.post.featuredImageId ) { if ( media.view.settings.post.featuredImageId ) {
this.states.add( new media.controller.FeaturedImage() ); this.states.add( new media.controller.FeaturedImage() );
} }
@ -2422,10 +2481,13 @@
click: function() { click: function() {
var controller = this.controller, var controller = this.controller,
state = controller.state(); state = controller.state(),
library = state.get('library');
library.type = 'video';
controller.close(); controller.close();
state.trigger( 'update', state.get('library') ); state.trigger( 'update', library );
// Restore and reset the default state. // Restore and reset the default state.
controller.setState( controller.options.state ); controller.setState( controller.options.state );

File diff suppressed because one or more lines are too long

View File

@ -7,6 +7,10 @@
$(function () { $(function () {
var settings = {}; var settings = {};
if ( $( document.body ).hasClass( 'mce-content-body' ) ) {
return;
}
if ( typeof _wpmejsSettings !== 'undefined' ) { if ( typeof _wpmejsSettings !== 'undefined' ) {
settings.pluginPath = _wpmejsSettings.pluginPath; settings.pluginPath = _wpmejsSettings.pluginPath;
} }

View File

@ -517,53 +517,25 @@ function wp_print_media_templates() {
<script type="text/html" id="tmpl-playlist-settings"> <script type="text/html" id="tmpl-playlist-settings">
<h3><?php _e( 'Playlist Settings' ); ?></h3> <h3><?php _e( 'Playlist Settings' ); ?></h3>
<?php <# var emptyModel = _.isEmpty( data.model ); #>
$playlist_styles = array(
'light' => _x( 'Light', 'playlist theme' ),
'dark' => _x( 'Dark', 'playlist theme' )
);
/** This filter is documented in wp-includes/media.php */
$styles = apply_filters( 'playlist_styles', $playlist_styles );
if ( ! empty( $styles ) ): ?>
<label class="setting">
<span><?php _e( 'Style' ); ?></span>
<select class="style" data-setting="style">
<?php foreach ( $styles as $slug => $label ): ?>
<option value="<?php echo esc_attr( $slug ) ?>">
<?php echo $label ?>
</option>
<?php endforeach ?>
</select>
</label>
<?php endif; ?>
<#
var playlist = 'playlist-edit' === data.controller.id, emptyModel = _.isEmpty(data.model);
#>
<label class="setting">
<input type="checkbox" data-setting="_orderbyRandom" />
<span><?php _e( 'Random Order' ); ?></span>
</label>
<label class="setting"> <label class="setting">
<input type="checkbox" data-setting="tracklist" <# if ( playlist && emptyModel ) { #> <input type="checkbox" data-setting="tracklist" <# if ( emptyModel ) { #>
checked="checked" checked="checked"
<# } #> /> <# } #> />
<span><?php _e( 'Show Tracklist' ); ?></span> <span><?php _e( 'Show Tracklist' ); ?></span>
</label> </label>
<label class="setting"> <label class="setting">
<input type="checkbox" data-setting="tracknumbers" <# if ( playlist && emptyModel ) { #> <input type="checkbox" data-setting="tracknumbers" <# if ( emptyModel ) { #>
checked="checked" checked="checked"
<# } #> /> <# } #> />
<span><?php _e( 'Show Track Numbers' ); ?></span> <span><?php _e( 'Show Track Numbers' ); ?></span>
</label> </label>
<# if ( playlist ) { #> <# if ( 'audio' === data.model.type ) { #>
<label class="setting"> <label class="setting">
<input type="checkbox" data-setting="artists" <# if ( playlist && emptyModel ) { #> <input type="checkbox" data-setting="artists" <# if ( emptyModel ) { #>
checked="checked" checked="checked"
<# } #> /> <# } #> />
<span><?php _e( 'Show Artist Name in Tracklist' ); ?></span> <span><?php _e( 'Show Artist Name in Tracklist' ); ?></span>

View File

@ -1072,17 +1072,12 @@ add_action( 'wp_playlist_scripts', 'wp_playlist_scripts' );
* @since 3.9.0 * @since 3.9.0
* *
* @param array $attr Attributes of the shortcode. * @param array $attr Attributes of the shortcode.
* @param string $type Type of playlist. Accepts 'audio' and 'video'.
* @return string Playlist output. Empty string if the passed type is unsupported. * @return string Playlist output. Empty string if the passed type is unsupported.
*/ */
function wp_get_playlist( $attr, $type ) { function wp_playlist_shortcode( $attr ) {
global $content_width; global $content_width;
$post = get_post(); $post = get_post();
if ( ! in_array( $type, array( 'audio', 'video' ) ) ) {
return '';
}
static $instance = 0; static $instance = 0;
$instance++; $instance++;
@ -1106,7 +1101,7 @@ function wp_get_playlist( $attr, $type ) {
* @param array $attr Array of shortcode attributes. * @param array $attr Array of shortcode attributes.
* @param string $type Type of playlist to generate output for. * @param string $type Type of playlist to generate output for.
*/ */
$output = apply_filters( 'post_playlist', '', $attr, $type ); $output = apply_filters( 'post_playlist', '', $attr );
if ( $output != '' ) { if ( $output != '' ) {
return $output; return $output;
} }
@ -1122,14 +1117,15 @@ function wp_get_playlist( $attr, $type ) {
} }
extract( shortcode_atts( array( extract( shortcode_atts( array(
'type' => 'audio',
'order' => 'ASC', 'order' => 'ASC',
'orderby' => 'menu_order ID', 'orderby' => 'menu_order ID',
'id' => $post ? $post->ID : 0, 'id' => $post ? $post->ID : 0,
'include' => '', 'include' => '',
'exclude' => '', 'exclude' => '',
'style' => 'light', 'style' => 'light',
'tracklist' => 'audio' === $type, 'tracklist' => true,
'tracknumbers' => 'audio' === $type, 'tracknumbers' => true,
'images' => true, 'images' => true,
'artists' => true 'artists' => true
), $attr, 'playlist' ) ); ), $attr, 'playlist' ) );
@ -1139,24 +1135,6 @@ function wp_get_playlist( $attr, $type ) {
$orderby = 'none'; $orderby = 'none';
} }
$playlist_styles = array(
'light' => _x( 'Light', 'playlist theme' ),
'dark' => _x( 'Dark', 'playlist theme' )
);
/**
* Filter the available playlist styles.
*
* @since 3.9.0
*
* @param array $playlist_styles Array of playlist styles. Defaults are 'light' and 'dark'.
*/
$styles = apply_filters( 'playlist_styles', $playlist_styles );
if ( ! in_array( $style, array_keys( $styles ), true ) ) {
$style = 'light';
}
$args = array( $args = array(
'post_status' => 'inherit', 'post_status' => 'inherit',
'post_type' => 'attachment', 'post_type' => 'attachment',
@ -1202,7 +1180,7 @@ function wp_get_playlist( $attr, $type ) {
$theme_width = empty( $content_width ) ? $default_width : ( $content_width - $outer ); $theme_width = empty( $content_width ) ? $default_width : ( $content_width - $outer );
$theme_height = empty( $content_width ) ? $default_height : round( ( $default_height * $theme_width ) / $default_width ); $theme_height = empty( $content_width ) ? $default_height : round( ( $default_height * $theme_width ) / $default_width );
$data = compact( 'type', 'style' ); $data = compact( 'type' );
// don't pass strings to JSON, will be truthy in JS // don't pass strings to JSON, will be truthy in JS
foreach ( array( 'tracklist', 'tracknumbers', 'images', 'artists' ) as $key ) { foreach ( array( 'tracklist', 'tracknumbers', 'images', 'artists' ) as $key ) {
@ -1311,33 +1289,8 @@ function wp_get_playlist( $attr, $type ) {
<?php <?php
return ob_get_clean(); 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' ); 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 * Provide a No-JS Flash fallback as a last resort for audio / video
* *