WordPress-C
/
WordPress
mirror of https://github.com/WordPress/WordPress.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

General code cleanup and improving video sizing in the admin: 

* Abstract the setting of a primary button and its callback in `wp.media.view.MediaFrame.MediaDetails`
* Account for the existence or non-existence of `$content_width` in the TinyMCE views for video
* Make sure video models always have dimensions, even if they are the defaults
* For browsers that are not Firefox, don't use a timeout when setting the `MediaElementPlayer` instance in TinyMCE views

See #27320.


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


git-svn-id: http://core.svn.wordpress.org/trunk@27498 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Scott Taylor 2014-03-22 23:26:17 +00:00
parent 290e5e5271
commit 410646fc52
5 changed files with 163 additions and 225 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

241
wp-includes/js/media-audiovideo.js
View File

@ -1,7 +1,13 @@
/* global _wpMediaViewsL10n, _wpmejsSettings, MediaElementPlayer, tinymce, WPPlaylistView */ /* global _wpMediaViewsL10n, _wpmejsSettings, MediaElementPlayer, tinymce, WPPlaylistView */
(function($, _, Backbone) { (function($, _, Backbone) {
var media = wp.media, l10n = typeof _wpMediaViewsL10n === 'undefined' ? {} : _wpMediaViewsL10n; var media = wp.media,
baseSettings = {},
l10n = typeof _wpMediaViewsL10n === 'undefined' ? {} : _wpMediaViewsL10n;
if ( ! _.isUndefined( window._wpmejsSettings ) ) {
baseSettings.pluginPath = _wpmejsSettings.pluginPath;
}
/** /**
* @mixin * @mixin
@ -44,7 +50,7 @@
passes = ua.match(/safari/gi) !== null && ua.match(/chrome/gi) === null; passes = ua.match(/safari/gi) !== null && ua.match(/chrome/gi) === null;
break; break;
case 'chrome': case 'chrome':
passes = ua.match(/safari/gi) && ua.match(/chrome/gi) !== null; passes = ua.match(/safari/gi) !== null && ua.match(/chrome/gi) !== null;
break; break;
} }
@ -219,10 +225,7 @@
frame = wp.media({ frame = wp.media({
frame: 'audio', frame: 'audio',
state: 'audio-details', state: 'audio-details',
metadata: _.defaults( metadata: _.defaults( shortcode.attrs.named, this.defaults )
shortcode.attrs.named,
wp.media.audio.defaults
)
}); });
return frame; return frame;
@ -268,12 +271,13 @@
autoplay : false, autoplay : false,
preload : 'metadata', preload : 'metadata',
content : '', content : '',
caption : '' caption : '',
width : 640,
height : 360
}, },
edit : function( data ) { edit : function( data ) {
var frame, var frame,
defaults = this.defaults,
shortcode = wp.shortcode.next( 'video', data ).shortcode, shortcode = wp.shortcode.next( 'video', data ).shortcode,
attrs; attrs;
@ -283,7 +287,7 @@
frame = wp.media({ frame = wp.media({
frame: 'video', frame: 'video',
state: 'video-details', state: 'video-details',
metadata: _.defaults( attrs, defaults ) metadata: _.defaults( attrs, this.defaults )
}); });
return frame; return frame;
@ -312,11 +316,12 @@
}; };
/** /**
* wp.media.model.PostMedia * Shared model class for audio and video. Updates the model after
* "Add Audio|Video Source" and "Replace Audio|Video" states return
* *
* @constructor * @constructor
* @augments Backbone.Model * @augments Backbone.Model
**/ */
media.model.PostMedia = Backbone.Model.extend({ media.model.PostMedia = Backbone.Model.extend({
initialize: function() { initialize: function() {
this.attachment = false; this.attachment = false;
@ -350,24 +355,22 @@
}); });
/** /**
* wp.media.controller.AudioDetails * The controller for the Audio Details state
* *
* @constructor * @constructor
* @augments wp.media.controller.State * @augments wp.media.controller.State
* @augments Backbone.Model * @augments Backbone.Model
*/ */
media.controller.AudioDetails = media.controller.State.extend({ media.controller.AudioDetails = media.controller.State.extend({
defaults: _.defaults({ defaults: {
id: 'audio-details', id: 'audio-details',
toolbar: 'audio-details', toolbar: 'audio-details',
title: l10n.audioDetailsTitle, title: l10n.audioDetailsTitle,
content: 'audio-details', content: 'audio-details',
menu: 'audio-details', menu: 'audio-details',
router: false, router: false,
attachment: false, priority: 60
priority: 60, },
editing: false
}, media.controller.Library.prototype.defaults ),
initialize: function( options ) { initialize: function( options ) {
this.media = options.media; this.media = options.media;
@ -376,24 +379,22 @@
}); });
/** /**
* wp.media.controller.VideoDetails * The controller for the Video Details state
* *
* @constructor * @constructor
* @augments wp.media.controller.State * @augments wp.media.controller.State
* @augments Backbone.Model * @augments Backbone.Model
*/ */
media.controller.VideoDetails = media.controller.State.extend({ media.controller.VideoDetails = media.controller.State.extend({
defaults: _.defaults({ defaults: {
id: 'video-details', id: 'video-details',
toolbar: 'video-details', toolbar: 'video-details',
title: l10n.videoDetailsTitle, title: l10n.videoDetailsTitle,
content: 'video-details', content: 'video-details',
menu: 'video-details', menu: 'video-details',
router: false, router: false,
attachment: false, priority: 60
priority: 60, },
editing: false
}, media.controller.Library.prototype.defaults ),
initialize: function( options ) { initialize: function( options ) {
this.media = options.media; this.media = options.media;
@ -480,23 +481,17 @@
}, },
renderDetailsToolbar: function() { setPrimaryButton: function(text, handler) {
this.toolbar.set( new media.view.Toolbar({ this.toolbar.set( new media.view.Toolbar({
controller: this, controller: this,
items: { items: {
select: { button: {
style: 'primary', style: 'primary',
text: l10n.update, text: text,
priority: 80, priority: 80,
click: function() { click: function() {
var controller = this.controller, var controller = this.controller;
state = controller.state(); handler.call( this, controller, controller.state() );
controller.close();
state.trigger( 'update', controller.media.toJSON() );
// Restore and reset the default state. // Restore and reset the default state.
controller.setState( controller.options.state ); controller.setState( controller.options.state );
controller.reset(); controller.reset();
@ -506,60 +501,27 @@
}) ); }) );
}, },
renderDetailsToolbar: function() {
this.setPrimaryButton( l10n.update, function( controller, state ) {
controller.close();
state.trigger( 'update', controller.media.toJSON() );
} );
},
renderReplaceToolbar: function() { renderReplaceToolbar: function() {
this.toolbar.set( new media.view.Toolbar({ this.setPrimaryButton( l10n.replace, function( controller, state ) {
controller: this, var attachment = state.get( 'selection' ).single();
items: {
replace: {
style: 'primary',
text: l10n.replace,
priority: 80,
click: function() {
var controller = this.controller,
state = controller.state(),
selection = state.get( 'selection' ),
attachment = selection.single();
controller.media.changeAttachment( attachment ); controller.media.changeAttachment( attachment );
state.trigger( 'replace', controller.media.toJSON() ); state.trigger( 'replace', controller.media.toJSON() );
} );
// Restore and reset the default state.
controller.setState( controller.options.state );
controller.reset();
}
}
}
}) );
}, },
renderAddSourceToolbar: function() { renderAddSourceToolbar: function() {
this.toolbar.set( new media.view.Toolbar({ this.setPrimaryButton( this.addText, function( controller, state ) {
controller: this, var attachment = state.get( 'selection' ).single();
items: {
replace: {
style: 'primary',
text: this.addText,
priority: 80,
click: function() {
var controller = this.controller,
state = controller.state(),
selection = state.get( 'selection' ),
attachment = selection.single();
controller.media.setSource( attachment ); controller.media.setSource( attachment );
state.trigger( 'add-source', controller.media.toJSON() ); state.trigger( 'add-source', controller.media.toJSON() );
} );
// Restore and reset the default state.
controller.setState( controller.options.state );
controller.reset();
}
}
}
}) );
} }
}); });
@ -606,9 +568,7 @@
createStates: function() { createStates: function() {
this.states.add([ this.states.add([
new media.controller.AudioDetails( { new media.controller.AudioDetails( {
media: this.media, media: this.media
editable: false,
menu: 'audio-details'
} ), } ),
new media.controller.MediaLibrary( { new media.controller.MediaLibrary( {
@ -677,9 +637,7 @@
createStates: function() { createStates: function() {
this.states.add([ this.states.add([
new media.controller.VideoDetails({ new media.controller.VideoDetails({
media: this.media, media: this.media
editable: false,
menu: 'video-details'
}), }),
new media.controller.MediaLibrary( { new media.controller.MediaLibrary( {
@ -721,47 +679,17 @@
}, },
renderSelectPosterImageToolbar: function() { renderSelectPosterImageToolbar: function() {
this.toolbar.set( new media.view.Toolbar({ this.setPrimaryButton( l10n.videoSelectPosterImageTitle, function( controller, state ) {
controller: this, var attachment = state.get( 'selection' ).single();
items: {
replace: {
style: 'primary',
text: l10n.videoSelectPosterImageTitle,
priority: 80,
click: function() {
var controller = this.controller,
state = controller.state(),
selection = state.get( 'selection' ),
attachment = selection.single();
controller.media.set( 'poster', attachment.get( 'url' ) ); controller.media.set( 'poster', attachment.get( 'url' ) );
state.trigger( 'set-poster-image', controller.media.toJSON() ); state.trigger( 'set-poster-image', controller.media.toJSON() );
} );
// Restore and reset the default state.
controller.setState( controller.options.state );
controller.reset();
}
}
}
}) );
}, },
renderAddTrackToolbar: function() { renderAddTrackToolbar: function() {
this.toolbar.set( new media.view.Toolbar({ this.setPrimaryButton( l10n.videoAddTrackTitle, function( controller, state ) {
controller: this, var attachment = state.get( 'selection' ).single(),
items: {
replace: {
style: 'primary',
text: l10n.videoAddTrackTitle,
priority: 80,
click: function() {
var controller = this.controller,
state = controller.state(),
selection = state.get( 'selection' ),
attachment = selection.single(),
content = controller.media.get( 'content' ); content = controller.media.get( 'content' );
if ( -1 === content.indexOf( attachment.get( 'url' ) ) ) { if ( -1 === content.indexOf( attachment.get( 'url' ) ) ) {
@ -773,16 +701,8 @@
controller.media.set( 'content', content ); controller.media.set( 'content', content );
} }
state.trigger( 'add-track', controller.media.toJSON() ); state.trigger( 'add-track', controller.media.toJSON() );
} );
// Restore and reset the default state.
controller.setState( controller.options.state );
controller.reset();
}
}
}
}) );
} }
}); });
@ -829,7 +749,6 @@
*/ */
removeSetting : function(e) { removeSetting : function(e) {
var wrap = $( e.currentTarget ).parent(), setting; var wrap = $( e.currentTarget ).parent(), setting;
setting = wrap.find( 'input' ).data( 'setting' ); setting = wrap.find( 'input' ).data( 'setting' );
if ( setting ) { if ( setting ) {
@ -884,23 +803,17 @@
}, },
/** /**
* @global _wpmejsSettings
*
* @returns {media.view.MediaDetails} Returns itself to allow chaining * @returns {media.view.MediaDetails} Returns itself to allow chaining
*/ */
render: function() { render: function() {
var self = this, settings = { var self = this;
success : this.success
};
if ( ! _.isUndefined( window._wpmejsSettings ) ) {
settings.pluginPath = _wpmejsSettings.pluginPath;
}
media.view.Settings.AttachmentDisplay.prototype.render.apply( this, arguments ); media.view.Settings.AttachmentDisplay.prototype.render.apply( this, arguments );
setTimeout( function() { self.resetFocus(); }, 10 ); setTimeout( function() { self.resetFocus(); }, 10 );
this.settings = settings; this.settings = _.defaults( {
success : this.success
}, baseSettings );
return this.setMedia(); return this.setMedia();
}, },
@ -914,12 +827,12 @@
/** /**
* When multiple players in the DOM contain the same src, things get weird. * When multiple players in the DOM contain the same src, things get weird.
* *
* @param {HTMLElement} media * @param {HTMLElement} elem
* @returns {HTMLElement} * @returns {HTMLElement}
*/ */
prepareSrc : function (media) { prepareSrc : function( elem ) {
var i = wp.media.view.MediaDetails.instances++; var i = media.view.MediaDetails.instances++;
_.each( $(media).find('source'), function (source) { _.each( $( elem ).find( 'source' ), function( source ) {
source.src = [ source.src = [
source.src, source.src,
source.src.indexOf('?') > -1 ? '&' : '?', source.src.indexOf('?') > -1 ? '&' : '?',
@ -928,7 +841,7 @@
].join(''); ].join('');
} ); } );
return media; return elem;
} }
}); });
@ -1227,7 +1140,7 @@
var self = this, var self = this,
media, media,
settings = {}, firefox = this.ua.is( 'ff' ),
className = '.wp-' + this.shortcode.tag + '-shortcode'; className = '.wp-' + this.shortcode.tag + '-shortcode';
if ( this.player ) { if ( this.player ) {
@ -1236,10 +1149,6 @@
media = $( node ).find( className ); media = $( node ).find( className );
if ( ! _.isUndefined( window._wpmejsSettings ) ) {
settings.pluginPath = _wpmejsSettings.pluginPath;
}
if ( ! this.isCompatible( media ) ) { if ( ! this.isCompatible( media ) ) {
media.closest( '.wpview-wrap' ).addClass( 'wont-play' ); media.closest( '.wpview-wrap' ).addClass( 'wont-play' );
if ( ! media.parent().hasClass( 'wpview-wrap' ) ) { if ( ! media.parent().hasClass( 'wpview-wrap' ) ) {
@ -1249,7 +1158,7 @@
return; return;
} else { } else {
media.closest( '.wpview-wrap' ).removeClass( 'wont-play' ); media.closest( '.wpview-wrap' ).removeClass( 'wont-play' );
if ( this.ua.is( 'ff' ) ) { if ( firefox ) {
media.prop( 'preload', 'metadata' ); media.prop( 'preload', 'metadata' );
} else { } else {
media.prop( 'preload', 'none' ); media.prop( 'preload', 'none' );
@ -1259,9 +1168,13 @@
media = wp.media.view.MediaDetails.prepareSrc( media.get(0) ); media = wp.media.view.MediaDetails.prepareSrc( media.get(0) );
// Thanks, Firefox! // Thanks, Firefox!
if ( firefox ) {
setTimeout( function() { setTimeout( function() {
self.player = new MediaElementPlayer( media, settings ); self.player = new MediaElementPlayer( media, baseSettings );
}, 50 ); }, 50 );
} else {
this.player = new MediaElementPlayer( media, baseSettings );
}
}, },
/** /**
@ -1270,7 +1183,10 @@
* @returns {string} * @returns {string}
*/ */
getHtml: function() { getHtml: function() {
var attrs = this.shortcode.attrs.named; var attrs = _.defaults(
this.shortcode.attrs.named,
wp.media[ this.shortcode.tag ].defaults
);
return this.template({ model: attrs }); return this.template({ model: attrs });
} }
}); });
@ -1415,7 +1331,7 @@
}; };
_.each( attachments, function( attachment ) { _.each( attachments, function( attachment ) {
var size = {}, track = { var size = {}, resize = {}, track = {
src : attachment.url, src : attachment.url,
type : attachment.mime, type : attachment.mime,
title : attachment.title, title : attachment.title,
@ -1425,15 +1341,24 @@
}; };
if ( 'video' === type ) { if ( 'video' === type ) {
size.width = attachment.width;
size.height = attachment.height;
if ( media.view.settings.contentWidth ) {
resize.width = media.view.settings.contentWidth - 22;
resize.height = Math.ceil( ( size.height * resize.width ) / size.width );
if ( ! options.width ) {
options.width = resize.width;
options.height = resize.height;
}
} else {
if ( ! options.width ) { if ( ! options.width ) {
options.width = attachment.width; options.width = attachment.width;
options.height = attachment.height; options.height = attachment.height;
} }
size.width = attachment.width; }
size.height = attachment.height;
track.dimensions = { track.dimensions = {
original : size, original : size,
resized : size resized : _.isEmpty( resize ) ? size : resize
}; };
} else { } else {
options.width = 400; options.width = 400;

2
wp-includes/js/media-audiovideo.min.js vendored
View File

File diff suppressed because one or more lines are too long

4
wp-includes/js/tinymce/skins/wordpress/wp-content.css
View File

@ -164,6 +164,10 @@ embed {
max-width: 100%; max-width: 100%;
} }
audio {
visibility: hidden;
}
/** /**
* WP Views * WP Views
*/ */

20
wp-includes/media-template.php
View File

@ -48,13 +48,19 @@ function wp_underscore_audio_template() {
function wp_underscore_video_template() { function wp_underscore_video_template() {
$video_types = wp_get_video_extensions(); $video_types = wp_get_video_extensions();
?> ?>
<# <# var w, h, settings = wp.media.view.settings,
var isYouTube = ! _.isEmpty( data.model.src ) && data.model.src.match(/youtube|youtu\.be/); isYouTube = ! _.isEmpty( data.model.src ) && data.model.src.match(/youtube|youtu\.be/);
w = ! data.model.width || data.model.width > 640 ? 640 : data.model.width,
h = ! data.model.height ? 360 : data.model.height;
if ( data.model.width && w !== data.model.width ) { if ( settings.contentWidth && data.model.width >= settings.contentWidth ) {
w = settings.contentWidth;
} else {
w = data.model.width;
}
if ( w !== data.model.width ) {
h = Math.ceil( ( h * w ) / data.model.width ); h = Math.ceil( ( h * w ) / data.model.width );
} else {
h = data.model.height;
} }
#> #>
<div style="max-width: 100%; width: {{ w }}px"> <div style="max-width: 100%; width: {{ w }}px">
@ -85,13 +91,13 @@ if ( data.model.width && w !== data.model.width ) {
if ( isYouTube ) { #> if ( isYouTube ) { #>
<source src="{{ data.model.src }}" type="video/youtube" /> <source src="{{ data.model.src }}" type="video/youtube" />
<# } else { #> <# } else { #>
<source src="{{ data.model.src }}" type="{{ wp.media.view.settings.embedMimes[ data.model.src.split('.').pop() ] }}" /> <source src="{{ data.model.src }}" type="{{ settings.embedMimes[ data.model.src.split('.').pop() ] }}" />
<# } <# }
} #> } #>
<?php foreach ( $video_types as $type ): <?php foreach ( $video_types as $type ):
?><# if ( data.model.<?php echo $type ?> ) { #> ?><# if ( data.model.<?php echo $type ?> ) { #>
<source src="{{ data.model.<?php echo $type ?> }}" type="{{ wp.media.view.settings.embedMimes[ '<?php echo $type ?>' ] }}" /> <source src="{{ data.model.<?php echo $type ?> }}" type="{{ settings.embedMimes[ '<?php echo $type ?>' ] }}" />
<# } #> <# } #>
<?php endforeach; ?> <?php endforeach; ?>
{{{ data.model.content }}} {{{ data.model.content }}}

11
wp-includes/media.php
View File

@ -1197,8 +1197,8 @@ function wp_get_playlist( $attr, $type ) {
$default_width = 640; $default_width = 640;
$default_height = 360; $default_height = 360;
$theme_width = $content_width - $outer; $theme_width = empty( $content_width ) ? $default_width : ( $content_width - $outer );
$theme_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', 'style' );
@ -1585,7 +1585,7 @@ function wp_video_shortcode( $attr, $content = '' ) {
} }
} else { } else {
// if the video is bigger than the theme // if the video is bigger than the theme
if ( $width > $content_width ) { if ( ! empty( $content_width ) && $width > $content_width ) {
$height = round( ( $height * $content_width ) / $width ); $height = round( ( $height * $content_width ) / $width );
$width = $content_width; $width = $content_width;
} }
@ -2381,6 +2381,8 @@ function wp_enqueue_media( $args = array() ) {
if ( did_action( 'wp_enqueue_media' ) ) if ( did_action( 'wp_enqueue_media' ) )
return; return;
global $content_width;
$defaults = array( $defaults = array(
'post' => null, 'post' => null,
); );
@ -2431,7 +2433,8 @@ function wp_enqueue_media( $args = array() ) {
'defaultProps' => $props, 'defaultProps' => $props,
'attachmentCounts' => wp_count_attachments(), 'attachmentCounts' => wp_count_attachments(),
'embedExts' => $exts, 'embedExts' => $exts,
'embedMimes' => $ext_mimes 'embedMimes' => $ext_mimes,
'contentWidth' => $content_width,
); );
$post = null; $post = null;