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

347
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
@ -11,7 +17,7 @@
/** /**
* Pauses every instance of MediaElementPlayer * Pauses every instance of MediaElementPlayer
*/ */
pauseAllPlayers: function () { pauseAllPlayers: function() {
var p; var p;
if ( window.mejs && window.mejs.players ) { if ( window.mejs && window.mejs.players ) {
for ( p in window.mejs.players ) { for ( p in window.mejs.players ) {
@ -24,7 +30,7 @@
* Utility to identify the user's browser * Utility to identify the user's browser
*/ */
ua: { ua: {
is : function (browser) { is : function( browser ) {
var passes = false, ua = window.navigator.userAgent; var passes = false, ua = window.navigator.userAgent;
switch ( browser ) { switch ( browser ) {
@ -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;
} }
@ -85,7 +91,7 @@
* @param {jQuery} media * @param {jQuery} media
* @returns {Boolean} * @returns {Boolean}
*/ */
isCompatible: function ( media ) { isCompatible: function( media ) {
if ( ! media.find( 'source' ).length ) { if ( ! media.find( 'source' ).length ) {
return false; return false;
} }
@ -98,10 +104,10 @@
sources = media.find( 'source' ); sources = media.find( 'source' );
_.find( this.compat, function (supports, browser) { _.find( this.compat, function( supports, browser ) {
if ( ua.is( browser ) ) { if ( ua.is( browser ) ) {
found = true; found = true;
_.each( sources, function (elem) { _.each( sources, function( elem ) {
var audio = new RegExp( 'audio\/(' + supports.audio.join('|') + ')', 'gi' ), var audio = new RegExp( 'audio\/(' + supports.audio.join('|') + ')', 'gi' ),
video = new RegExp( 'video\/(' + supports.video.join('|') + ')', 'gi' ); video = new RegExp( 'video\/(' + supports.video.join('|') + ')', 'gi' );
@ -214,21 +220,18 @@
caption : '' caption : ''
}, },
edit : function (data) { edit : function( data ) {
var frame, shortcode = wp.shortcode.next( 'audio', data ).shortcode; var frame, shortcode = wp.shortcode.next( 'audio', data ).shortcode;
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;
}, },
shortcode : function (model) { shortcode : function( model ) {
var self = this, content; var self = this, content;
_.each( this.defaults, function( value, key ) { _.each( this.defaults, function( value, key ) {
@ -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,13 +287,13 @@
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;
}, },
shortcode : function (model) { shortcode : function( model ) {
var self = this, content; var self = this, content;
_.each( this.defaults, function( value, key ) { _.each( this.defaults, function( value, key ) {
@ -312,19 +316,20 @@
}; };
/** /**
* 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;
}, },
setSource: function ( attachment ) { setSource: function( attachment ) {
this.attachment = attachment; this.attachment = attachment;
this.extension = attachment.get('filename' ).split('.').pop(); this.extension = attachment.get( 'filename' ).split('.').pop();
if ( this.get( 'src' ) && this.extension === this.get( 'src' ).split('.').pop() ) { if ( this.get( 'src' ) && this.extension === this.get( 'src' ).split('.').pop() ) {
this.unset( 'src' ); this.unset( 'src' );
@ -343,31 +348,29 @@
this.setSource( attachment ); this.setSource( attachment );
this.unset( 'src' ); this.unset( 'src' );
_.each( _.without( wp.media.view.settings.embedExts, this.extension ), function (ext) { _.each( _.without( wp.media.view.settings.embedExts, this.extension ), function( ext ) {
self.unset( ext ); self.unset( ext );
} ); } );
} }
}); });
/** /**
* 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, handler.call( this, controller, controller.state() );
state = 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: { controller.media.changeAttachment( attachment );
replace: { state.trigger( 'replace', controller.media.toJSON() );
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 );
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: { controller.media.setSource( attachment );
replace: { state.trigger( 'add-source', controller.media.toJSON() );
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 );
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,68 +679,30 @@
}, },
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() { controller.media.set( 'poster', attachment.get( 'url' ) );
var controller = this.controller, state.trigger( 'set-poster-image', controller.media.toJSON() );
state = controller.state(), } );
selection = state.get( 'selection' ),
attachment = 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() { 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: { content = controller.media.get( 'content' );
replace: {
style: 'primary',
text: l10n.videoAddTrackTitle,
priority: 80,
click: function() { if ( -1 === content.indexOf( attachment.get( 'url' ) ) ) {
var controller = this.controller, content += [
state = controller.state(), '<track srclang="en" label="English"kind="subtitles" src="',
selection = state.get( 'selection' ), attachment.get( 'url' ),
attachment = selection.single(), '" />'
content = controller.media.get( 'content' ); ].join('');
if ( -1 === content.indexOf( attachment.get( 'url' ) ) ) { controller.media.set( 'content', content );
content += [
'<track srclang="en" label="English"kind="subtitles" src="',
attachment.get( 'url' ),
'" />'
].join('');
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();
}
}
} }
}) ); state.trigger( 'add-track', controller.media.toJSON() );
} );
} }
}); });
@ -827,9 +747,8 @@
* *
* @param {Event} e * @param {Event} e
*/ */
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 ) {
@ -844,10 +763,10 @@
* *
* @fires wp.media.view.MediaDetails#media:setting:remove * @fires wp.media.view.MediaDetails#media:setting:remove
*/ */
setTracks : function () { setTracks : function() {
var tracks = ''; var tracks = '';
_.each( this.$('.content-track'), function (track) { _.each( this.$('.content-track'), function(track) {
tracks += $( track ).val(); tracks += $( track ).val();
} ); } );
@ -858,7 +777,7 @@
/** /**
* @global MediaElementPlayer * @global MediaElementPlayer
*/ */
setPlayer : function () { setPlayer : function() {
if ( ! this.player && this.media ) { if ( ! this.player && this.media ) {
this.player = new MediaElementPlayer( this.media, this.settings ); this.player = new MediaElementPlayer( this.media, this.settings );
} }
@ -867,15 +786,15 @@
/** /**
* @abstract * @abstract
*/ */
setMedia : function () { setMedia : function() {
return this; return this;
}, },
success : function (mejs) { success : function(mejs) {
var autoplay = mejs.attributes.autoplay && 'false' !== mejs.attributes.autoplay; var autoplay = mejs.attributes.autoplay && 'false' !== mejs.attributes.autoplay;
if ( 'flash' === mejs.pluginType && autoplay ) { if ( 'flash' === mejs.pluginType && autoplay ) {
mejs.addEventListener( 'canplay', function () { mejs.addEventListener( 'canplay', function() {
mejs.play(); mejs.play();
}, false ); }, false );
} }
@ -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,21 +827,21 @@
/** /**
* 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 ? '&' : '?',
'_=', '_=',
i i
].join(''); ].join('');
}); } );
return media; return elem;
} }
}); });
@ -1010,16 +923,16 @@
* @param {Object} settings * @param {Object} settings
* @returns {Object} * @returns {Object}
*/ */
counts : (function (settings) { counts : (function(settings) {
var counts = {}; var counts = {};
return function () { return function() {
if ( ! _.isEmpty( counts ) ) { if ( ! _.isEmpty( counts ) ) {
return counts; return counts;
} }
var a = 0, v = 0; var a = 0, v = 0;
_.each( settings.attachmentCounts, function (total, mime) { _.each( settings.attachmentCounts, function(total, mime) {
var type; var type;
if ( -1 < mime.indexOf('/') ) { if ( -1 < mime.indexOf('/') ) {
type = mime.split('/')[0]; type = mime.split('/')[0];
@ -1050,7 +963,7 @@
* @param {Object} options * @param {Object} options
* @returns {Array} * @returns {Array}
*/ */
states : function (options) { states : function(options) {
return [ return [
new media.controller.Library({ new media.controller.Library({
id: 'playlist', id: 'playlist',
@ -1093,7 +1006,7 @@
* @param {Object} options * @param {Object} options
* @returns {Array} * @returns {Array}
*/ */
videoStates : function (options) { videoStates : function(options) {
return [ return [
new media.controller.Library({ new media.controller.Library({
id: 'video-playlist', id: 'video-playlist',
@ -1183,7 +1096,7 @@
data = window.decodeURIComponent( $( node ).attr('data-wpview-text') ); data = window.decodeURIComponent( $( node ).attr('data-wpview-text') );
frame = media.edit( data ); frame = media.edit( data );
frame.on( 'close', function () { frame.on( 'close', function() {
frame.detach(); frame.detach();
} ); } );
frame.state( self.state ).on( 'update', function( selection ) { frame.state( self.state ).on( 'update', function( selection ) {
@ -1219,7 +1132,7 @@
* @param {Event} e * @param {Event} e
* @param {HTMLElement} node * @param {HTMLElement} node
*/ */
setPlayer: function (e, node) { setPlayer: function(e, node) {
// if the ready event fires on an empty node // if the ready event fires on an empty node
if ( ! node ) { if ( ! node ) {
return; return;
@ -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!
setTimeout(function () { if ( firefox ) {
self.player = new MediaElementPlayer( media, settings ); setTimeout( function() {
}, 50); self.player = new MediaElementPlayer( media, baseSettings );
}, 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 });
} }
}); });
@ -1332,7 +1248,7 @@
* @param {Event} e * @param {Event} e
* @param {HTMLElement} node * @param {HTMLElement} node
*/ */
setNode: function (e, node) { setNode: function(e, node) {
this.node = node; this.node = node;
this.fetch(); this.fetch();
}, },
@ -1353,7 +1269,7 @@
* @global WPPlaylistView * @global WPPlaylistView
* @global tinymce.editors * @global tinymce.editors
*/ */
setPlayer: function () { setPlayer: function() {
var p, var p,
html = this.getHtml(), html = this.getHtml(),
t = this.encodedText, t = this.encodedText,
@ -1365,7 +1281,7 @@
var doc; var doc;
if ( editor.plugins.wpview ) { if ( editor.plugins.wpview ) {
doc = editor.getDoc(); doc = editor.getDoc();
$( doc ).find( '[data-wpview-text="' + t + '"]' ).each(function (i, elem) { $( doc ).find( '[data-wpview-text="' + t + '"]' ).each(function(i, elem) {
var node = $( elem ); var node = $( elem );
node.html( html ); node.html( html );
self.node = elem; self.node = elem;
@ -1414,8 +1330,8 @@
artists: data.artists artists: data.artists
}; };
_.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 ) {
if ( ! options.width ) {
options.width = attachment.width;
options.height = attachment.height;
}
size.width = attachment.width; size.width = attachment.width;
size.height = attachment.height; 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;
}
}
track.dimensions = { track.dimensions = {
original : size, original : size,
resized : size resized : _.isEmpty( resize ) ? size : resize
}; };
} else { } else {
options.width = 400; options.width = 400;
@ -1483,7 +1408,7 @@
function init() { function init() {
$(document.body) $(document.body)
.on( 'click', '.wp-switch-editor', wp.media.mixin.pauseAllPlayers ) .on( 'click', '.wp-switch-editor', wp.media.mixin.pauseAllPlayers )
.on( 'click', '.add-media-source', function () { .on( 'click', '.add-media-source', function() {
media.frame.setState('add-' + media.frame.defaults.id + '-source'); media.frame.setState('add-' + media.frame.defaults.id + '-source');
} ); } );
} }

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
*/ */

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

@ -48,14 +48,20 @@ 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 ) {
h = Math.ceil( ( h * w ) / data.model.width ); 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"> <div style="max-width: 100%; width: {{ w }}px">
<video controls <video controls
@ -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;