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
parent
290e5e5271
commit
410646fc52
|
|
@ -1,7 +1,13 @@
|
|||
/* global _wpMediaViewsL10n, _wpmejsSettings, MediaElementPlayer, tinymce, WPPlaylistView */
|
||||
|
||||
(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
|
||||
|
|
@ -44,7 +50,7 @@
|
|||
passes = ua.match(/safari/gi) !== null && ua.match(/chrome/gi) === null;
|
||||
break;
|
||||
case 'chrome':
|
||||
passes = ua.match(/safari/gi) && ua.match(/chrome/gi) !== null;
|
||||
passes = ua.match(/safari/gi) !== null && ua.match(/chrome/gi) !== null;
|
||||
break;
|
||||
}
|
||||
|
||||
|
|
@ -219,10 +225,7 @@
|
|||
frame = wp.media({
|
||||
frame: 'audio',
|
||||
state: 'audio-details',
|
||||
metadata: _.defaults(
|
||||
shortcode.attrs.named,
|
||||
wp.media.audio.defaults
|
||||
)
|
||||
metadata: _.defaults( shortcode.attrs.named, this.defaults )
|
||||
});
|
||||
|
||||
return frame;
|
||||
|
|
@ -268,12 +271,13 @@
|
|||
autoplay : false,
|
||||
preload : 'metadata',
|
||||
content : '',
|
||||
caption : ''
|
||||
caption : '',
|
||||
width : 640,
|
||||
height : 360
|
||||
},
|
||||
|
||||
edit : function( data ) {
|
||||
var frame,
|
||||
defaults = this.defaults,
|
||||
shortcode = wp.shortcode.next( 'video', data ).shortcode,
|
||||
attrs;
|
||||
|
||||
|
|
@ -283,7 +287,7 @@
|
|||
frame = wp.media({
|
||||
frame: 'video',
|
||||
state: 'video-details',
|
||||
metadata: _.defaults( attrs, defaults )
|
||||
metadata: _.defaults( attrs, this.defaults )
|
||||
});
|
||||
|
||||
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
|
||||
* @augments Backbone.Model
|
||||
**/
|
||||
*/
|
||||
media.model.PostMedia = Backbone.Model.extend({
|
||||
initialize: function() {
|
||||
this.attachment = false;
|
||||
|
|
@ -350,24 +355,22 @@
|
|||
});
|
||||
|
||||
/**
|
||||
* wp.media.controller.AudioDetails
|
||||
* The controller for the Audio Details state
|
||||
*
|
||||
* @constructor
|
||||
* @augments wp.media.controller.State
|
||||
* @augments Backbone.Model
|
||||
*/
|
||||
media.controller.AudioDetails = media.controller.State.extend({
|
||||
defaults: _.defaults({
|
||||
defaults: {
|
||||
id: 'audio-details',
|
||||
toolbar: 'audio-details',
|
||||
title: l10n.audioDetailsTitle,
|
||||
content: 'audio-details',
|
||||
menu: 'audio-details',
|
||||
router: false,
|
||||
attachment: false,
|
||||
priority: 60,
|
||||
editing: false
|
||||
}, media.controller.Library.prototype.defaults ),
|
||||
priority: 60
|
||||
},
|
||||
|
||||
initialize: function( options ) {
|
||||
this.media = options.media;
|
||||
|
|
@ -376,24 +379,22 @@
|
|||
});
|
||||
|
||||
/**
|
||||
* wp.media.controller.VideoDetails
|
||||
* The controller for the Video Details state
|
||||
*
|
||||
* @constructor
|
||||
* @augments wp.media.controller.State
|
||||
* @augments Backbone.Model
|
||||
*/
|
||||
media.controller.VideoDetails = media.controller.State.extend({
|
||||
defaults: _.defaults({
|
||||
defaults: {
|
||||
id: 'video-details',
|
||||
toolbar: 'video-details',
|
||||
title: l10n.videoDetailsTitle,
|
||||
content: 'video-details',
|
||||
menu: 'video-details',
|
||||
router: false,
|
||||
attachment: false,
|
||||
priority: 60,
|
||||
editing: false
|
||||
}, media.controller.Library.prototype.defaults ),
|
||||
priority: 60
|
||||
},
|
||||
|
||||
initialize: function( options ) {
|
||||
this.media = options.media;
|
||||
|
|
@ -480,23 +481,17 @@
|
|||
|
||||
},
|
||||
|
||||
renderDetailsToolbar: function() {
|
||||
setPrimaryButton: function(text, handler) {
|
||||
this.toolbar.set( new media.view.Toolbar({
|
||||
controller: this,
|
||||
items: {
|
||||
select: {
|
||||
button: {
|
||||
style: 'primary',
|
||||
text: l10n.update,
|
||||
text: text,
|
||||
priority: 80,
|
||||
|
||||
click: function() {
|
||||
var controller = this.controller,
|
||||
state = controller.state();
|
||||
|
||||
controller.close();
|
||||
|
||||
state.trigger( 'update', controller.media.toJSON() );
|
||||
|
||||
var controller = this.controller;
|
||||
handler.call( this, controller, controller.state() );
|
||||
// Restore and reset the default state.
|
||||
controller.setState( controller.options.state );
|
||||
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() {
|
||||
this.toolbar.set( new media.view.Toolbar({
|
||||
controller: this,
|
||||
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();
|
||||
|
||||
this.setPrimaryButton( l10n.replace, function( controller, state ) {
|
||||
var attachment = state.get( 'selection' ).single();
|
||||
controller.media.changeAttachment( attachment );
|
||||
|
||||
state.trigger( 'replace', controller.media.toJSON() );
|
||||
|
||||
// Restore and reset the default state.
|
||||
controller.setState( controller.options.state );
|
||||
controller.reset();
|
||||
}
|
||||
}
|
||||
}
|
||||
}) );
|
||||
} );
|
||||
},
|
||||
|
||||
renderAddSourceToolbar: function() {
|
||||
this.toolbar.set( new media.view.Toolbar({
|
||||
controller: this,
|
||||
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();
|
||||
|
||||
this.setPrimaryButton( this.addText, function( controller, state ) {
|
||||
var attachment = state.get( 'selection' ).single();
|
||||
controller.media.setSource( attachment );
|
||||
|
||||
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() {
|
||||
this.states.add([
|
||||
new media.controller.AudioDetails( {
|
||||
media: this.media,
|
||||
editable: false,
|
||||
menu: 'audio-details'
|
||||
media: this.media
|
||||
} ),
|
||||
|
||||
new media.controller.MediaLibrary( {
|
||||
|
|
@ -677,9 +637,7 @@
|
|||
createStates: function() {
|
||||
this.states.add([
|
||||
new media.controller.VideoDetails({
|
||||
media: this.media,
|
||||
editable: false,
|
||||
menu: 'video-details'
|
||||
media: this.media
|
||||
}),
|
||||
|
||||
new media.controller.MediaLibrary( {
|
||||
|
|
@ -721,47 +679,17 @@
|
|||
},
|
||||
|
||||
renderSelectPosterImageToolbar: function() {
|
||||
this.toolbar.set( new media.view.Toolbar({
|
||||
controller: this,
|
||||
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();
|
||||
this.setPrimaryButton( l10n.videoSelectPosterImageTitle, function( controller, state ) {
|
||||
var attachment = state.get( 'selection' ).single();
|
||||
|
||||
controller.media.set( 'poster', attachment.get( 'url' ) );
|
||||
|
||||
state.trigger( 'set-poster-image', controller.media.toJSON() );
|
||||
|
||||
// Restore and reset the default state.
|
||||
controller.setState( controller.options.state );
|
||||
controller.reset();
|
||||
}
|
||||
}
|
||||
}
|
||||
}) );
|
||||
} );
|
||||
},
|
||||
|
||||
renderAddTrackToolbar: function() {
|
||||
this.toolbar.set( new media.view.Toolbar({
|
||||
controller: this,
|
||||
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(),
|
||||
this.setPrimaryButton( l10n.videoAddTrackTitle, function( controller, state ) {
|
||||
var attachment = state.get( 'selection' ).single(),
|
||||
content = controller.media.get( 'content' );
|
||||
|
||||
if ( -1 === content.indexOf( attachment.get( 'url' ) ) ) {
|
||||
|
|
@ -773,16 +701,8 @@
|
|||
|
||||
controller.media.set( 'content', content );
|
||||
}
|
||||
|
||||
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) {
|
||||
var wrap = $( e.currentTarget ).parent(), setting;
|
||||
|
||||
setting = wrap.find( 'input' ).data( 'setting' );
|
||||
|
||||
if ( setting ) {
|
||||
|
|
@ -884,23 +803,17 @@
|
|||
},
|
||||
|
||||
/**
|
||||
* @global _wpmejsSettings
|
||||
*
|
||||
* @returns {media.view.MediaDetails} Returns itself to allow chaining
|
||||
*/
|
||||
render: function() {
|
||||
var self = this, settings = {
|
||||
success : this.success
|
||||
};
|
||||
|
||||
if ( ! _.isUndefined( window._wpmejsSettings ) ) {
|
||||
settings.pluginPath = _wpmejsSettings.pluginPath;
|
||||
}
|
||||
var self = this;
|
||||
|
||||
media.view.Settings.AttachmentDisplay.prototype.render.apply( this, arguments );
|
||||
setTimeout( function() { self.resetFocus(); }, 10 );
|
||||
|
||||
this.settings = settings;
|
||||
this.settings = _.defaults( {
|
||||
success : this.success
|
||||
}, baseSettings );
|
||||
|
||||
return this.setMedia();
|
||||
},
|
||||
|
|
@ -914,12 +827,12 @@
|
|||
/**
|
||||
* When multiple players in the DOM contain the same src, things get weird.
|
||||
*
|
||||
* @param {HTMLElement} media
|
||||
* @param {HTMLElement} elem
|
||||
* @returns {HTMLElement}
|
||||
*/
|
||||
prepareSrc : function (media) {
|
||||
var i = wp.media.view.MediaDetails.instances++;
|
||||
_.each( $(media).find('source'), function (source) {
|
||||
prepareSrc : function( elem ) {
|
||||
var i = media.view.MediaDetails.instances++;
|
||||
_.each( $( elem ).find( 'source' ), function( source ) {
|
||||
source.src = [
|
||||
source.src,
|
||||
source.src.indexOf('?') > -1 ? '&' : '?',
|
||||
|
|
@ -928,7 +841,7 @@
|
|||
].join('');
|
||||
} );
|
||||
|
||||
return media;
|
||||
return elem;
|
||||
}
|
||||
});
|
||||
|
||||
|
|
@ -1227,7 +1140,7 @@
|
|||
|
||||
var self = this,
|
||||
media,
|
||||
settings = {},
|
||||
firefox = this.ua.is( 'ff' ),
|
||||
className = '.wp-' + this.shortcode.tag + '-shortcode';
|
||||
|
||||
if ( this.player ) {
|
||||
|
|
@ -1236,10 +1149,6 @@
|
|||
|
||||
media = $( node ).find( className );
|
||||
|
||||
if ( ! _.isUndefined( window._wpmejsSettings ) ) {
|
||||
settings.pluginPath = _wpmejsSettings.pluginPath;
|
||||
}
|
||||
|
||||
if ( ! this.isCompatible( media ) ) {
|
||||
media.closest( '.wpview-wrap' ).addClass( 'wont-play' );
|
||||
if ( ! media.parent().hasClass( 'wpview-wrap' ) ) {
|
||||
|
|
@ -1249,7 +1158,7 @@
|
|||
return;
|
||||
} else {
|
||||
media.closest( '.wpview-wrap' ).removeClass( 'wont-play' );
|
||||
if ( this.ua.is( 'ff' ) ) {
|
||||
if ( firefox ) {
|
||||
media.prop( 'preload', 'metadata' );
|
||||
} else {
|
||||
media.prop( 'preload', 'none' );
|
||||
|
|
@ -1259,9 +1168,13 @@
|
|||
media = wp.media.view.MediaDetails.prepareSrc( media.get(0) );
|
||||
|
||||
// Thanks, Firefox!
|
||||
if ( firefox ) {
|
||||
setTimeout( function() {
|
||||
self.player = new MediaElementPlayer( media, settings );
|
||||
self.player = new MediaElementPlayer( media, baseSettings );
|
||||
}, 50 );
|
||||
} else {
|
||||
this.player = new MediaElementPlayer( media, baseSettings );
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
|
|
@ -1270,7 +1183,10 @@
|
|||
* @returns {string}
|
||||
*/
|
||||
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 });
|
||||
}
|
||||
});
|
||||
|
|
@ -1415,7 +1331,7 @@
|
|||
};
|
||||
|
||||
_.each( attachments, function( attachment ) {
|
||||
var size = {}, track = {
|
||||
var size = {}, resize = {}, track = {
|
||||
src : attachment.url,
|
||||
type : attachment.mime,
|
||||
title : attachment.title,
|
||||
|
|
@ -1425,15 +1341,24 @@
|
|||
};
|
||||
|
||||
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 ) {
|
||||
options.width = attachment.width;
|
||||
options.height = attachment.height;
|
||||
}
|
||||
size.width = attachment.width;
|
||||
size.height = attachment.height;
|
||||
}
|
||||
track.dimensions = {
|
||||
original : size,
|
||||
resized : size
|
||||
resized : _.isEmpty( resize ) ? size : resize
|
||||
};
|
||||
} else {
|
||||
options.width = 400;
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -164,6 +164,10 @@ embed {
|
|||
max-width: 100%;
|
||||
}
|
||||
|
||||
audio {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
/**
|
||||
* WP Views
|
||||
*/
|
||||
|
|
|
|||
|
|
@ -48,13 +48,19 @@ function wp_underscore_audio_template() {
|
|||
function wp_underscore_video_template() {
|
||||
$video_types = wp_get_video_extensions();
|
||||
?>
|
||||
<#
|
||||
var 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;
|
||||
<# var w, h, settings = wp.media.view.settings,
|
||||
isYouTube = ! _.isEmpty( data.model.src ) && data.model.src.match(/youtube|youtu\.be/);
|
||||
|
||||
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 );
|
||||
} else {
|
||||
h = data.model.height;
|
||||
}
|
||||
#>
|
||||
<div style="max-width: 100%; width: {{ w }}px">
|
||||
|
|
@ -85,13 +91,13 @@ if ( data.model.width && w !== data.model.width ) {
|
|||
if ( isYouTube ) { #>
|
||||
<source src="{{ data.model.src }}" type="video/youtube" />
|
||||
<# } 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 ):
|
||||
?><# 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; ?>
|
||||
{{{ data.model.content }}}
|
||||
|
|
|
|||
|
|
@ -1197,8 +1197,8 @@ function wp_get_playlist( $attr, $type ) {
|
|||
$default_width = 640;
|
||||
$default_height = 360;
|
||||
|
||||
$theme_width = $content_width - $outer;
|
||||
$theme_height = round( ( $default_height * $theme_width ) / $default_width );
|
||||
$theme_width = empty( $content_width ) ? $default_width : ( $content_width - $outer );
|
||||
$theme_height = empty( $content_width ) ? $default_height : round( ( $default_height * $theme_width ) / $default_width );
|
||||
|
||||
$data = compact( 'type', 'style' );
|
||||
|
||||
|
|
@ -1585,7 +1585,7 @@ function wp_video_shortcode( $attr, $content = '' ) {
|
|||
}
|
||||
} else {
|
||||
// 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 );
|
||||
$width = $content_width;
|
||||
}
|
||||
|
|
@ -2381,6 +2381,8 @@ function wp_enqueue_media( $args = array() ) {
|
|||
if ( did_action( 'wp_enqueue_media' ) )
|
||||
return;
|
||||
|
||||
global $content_width;
|
||||
|
||||
$defaults = array(
|
||||
'post' => null,
|
||||
);
|
||||
|
|
@ -2431,7 +2433,8 @@ function wp_enqueue_media( $args = array() ) {
|
|||
'defaultProps' => $props,
|
||||
'attachmentCounts' => wp_count_attachments(),
|
||||
'embedExts' => $exts,
|
||||
'embedMimes' => $ext_mimes
|
||||
'embedMimes' => $ext_mimes,
|
||||
'contentWidth' => $content_width,
|
||||
);
|
||||
|
||||
$post = null;
|
||||
|
|
|
|||
Loading…
Reference in New Issue