Upstream/WordPress
1
0
Fork 0
mirror of https://github.com/WordPress/WordPress.git synced 2024-12-23 01:27:36 +01:00
Code Issues Projects Releases Wiki Activity

Create a new file, media-audiovideo.js, to house all of the audio and video JS code in core.

Browse Source 
UX Changes:
* Don't add a menu item for "Add Audio|Video Source"
* In the Audio|Video Details modal, add buttons and some suggestive text for adding alternate playback sources
* Don't show "Create Audio|Video Playlist" menu items until the user has uploaded audio or video files

See #27437.


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


git-svn-id: http://core.svn.wordpress.org/trunk@27451 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Scott Taylor 2014-03-19 05:31:15 +00:00
parent 5d05c757b3
commit a17dd704c4
12 changed files with 1080 additions and 932 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

985
wp-includes/js/media-audiovideo.js Normal file
View File

@ -0,0 +1,985 @@
/* global _wpMediaViewsL10n */
(function ($, _, Backbone) {
var media = wp.media, l10n = typeof _wpMediaViewsL10n === 'undefined' ? {} : _wpMediaViewsL10n;
/**
* @mixin
*/
wp.media.mixin = {
/**
* Pauses every instance of MediaElementPlayer
*/
pauseAllPlayers: function () {
var p;
if ( window.mejs && window.mejs.players ) {
for ( p in window.mejs.players ) {
window.mejs.players[p].pause();
}
}
},
/**
* Utility to identify the user's browser
*/
ua: {
is : function (browser) {
var passes = false, ua = window.navigator.userAgent;
switch ( browser ) {
case 'oldie':
passes = ua.match(/MSIE [6-8]/gi) !== null;
break;
case 'ie':
passes = ua.match(/MSIE/gi) !== null;
break;
case 'ff':
passes = ua.match(/firefox/gi) !== null;
break;
case 'opera':
passes = ua.match(/OPR/) !== null;
break;
case 'safari':
passes = ua.match(/safari/gi) !== null && ua.match(/chrome/gi) === null;
break;
case 'chrome':
passes = ua.match(/safari/gi) && ua.match(/chrome/gi) !== null;
break;
}
return passes;
}
},
/**
* Specify compatibility for native playback by browser
*/
compat :{
'opera' : {
audio: ['ogg', 'wav'],
video: ['ogg', 'webm']
},
'chrome' : {
audio: ['ogg', 'mpeg', 'x-ms-wma'],
video: ['ogg', 'webm', 'mp4', 'm4v', 'mpeg']
},
'ff' : {
audio: ['ogg', 'mpeg'],
video: ['ogg', 'webm']
},
'safari' : {
audio: ['mpeg', 'wav'],
video: ['mp4', 'm4v', 'mpeg', 'x-ms-wmv', 'quicktime']
},
'ie' : {
audio: ['mpeg'],
video: ['mp4', 'm4v', 'mpeg']
}
},
/**
* Determine if the passed media contains a <source> that provides
* native playback in the user's browser
*
* @param {jQuery} media
* @returns {Boolean}
*/
isCompatible: function ( media ) {
if ( ! media.find( 'source' ).length ) {
return false;
}
var ua = this.ua, test = false, found = false, sources;
if ( ua.is( 'oldIE' ) ) {
return false;
}
sources = media.find( 'source' );
_.find( this.compat, function (supports, browser) {
if ( ua.is( browser ) ) {
found = true;
_.each( sources, function (elem) {
var audio = new RegExp( 'audio\/(' + supports.audio.join('|') + ')', 'gi' ),
video = new RegExp( 'video\/(' + supports.video.join('|') + ')', 'gi' );
if ( elem.type.match( video ) !== null || elem.type.match( audio ) !== null ) {
test = true;
}
} );
}
return test || found;
} );
return test;
},
/**
* Override the MediaElement method for removing a player.
* MediaElement tries to pull the audio/video tag out of
* its container and re-add it to the DOM.
*/
removePlayer: function() {
var t = this.player, featureIndex, feature;
// invoke features cleanup
for ( featureIndex in t.options.features ) {
feature = t.options.features[featureIndex];
if ( t['clean' + feature] ) {
try {
t['clean' + feature](t);
} catch (e) {}
}
}
if ( ! t.isDynamic ) {
t.$node.remove();
}
if ( 'native' !== t.media.pluginType ) {
t.media.remove();
}
delete window.mejs.players[t.id];
t.container.remove();
t.globalUnbind();
delete t.node.player;
},
/**
* Allows any class that has set 'player' to a MediaElementPlayer
* instance to remove the player when listening to events.
*
* Examples: modal closes, shortcode properties are removed, etc.
*/
unsetPlayer : function() {
if ( this.player ) {
wp.media.mixin.pauseAllPlayers();
wp.media.mixin.removePlayer.apply( this );
this.player = false;
}
}
};
/**
* Autowire "collection"-type shortcodes
*/
wp.media.playlist = new wp.media.collection({
tag: 'playlist',
type : 'audio',
editTitle : l10n.editPlaylistTitle,
defaults : {
id: wp.media.view.settings.post.id,
style: 'light',
tracklist: true,
tracknumbers: true,
images: true,
artists: true
}
});
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
}
});
/**
* Shortcode modeling for audio
* `edit()` prepares the shortcode for the media modal
* `shortcode()` builds the new shortcode after update
*
* @namespace
*/
wp.media.audio = {
coerce : wp.media.coerce,
defaults : {
id : wp.media.view.settings.post.id,
src : '',
loop : false,
autoplay : false,
preload : 'none'
},
edit : function (data) {
var frame, shortcode = wp.shortcode.next( 'audio', data ).shortcode;
frame = wp.media({
frame: 'audio',
state: 'audio-details',
metadata: _.defaults(
shortcode.attrs.named,
wp.media.audio.defaults
)
});
return frame;
},
shortcode : function (shortcode) {
var self = this;
_.each( wp.media.audio.defaults, function( value, key ) {
shortcode[ key ] = self.coerce( shortcode, key );
if ( value === shortcode[ key ] ) {
delete shortcode[ key ];
}
});
return wp.shortcode.string({
tag: 'audio',
attrs: shortcode
});
}
};
/**
* Shortcode modeling for video
* `edit()` prepares the shortcode for the media modal
* `shortcode()` builds the new shortcode after update
*
* @namespace
*/
wp.media.video = {
coerce : wp.media.coerce,
defaults : {
id : wp.media.view.settings.post.id,
src : '',
poster : '',
loop : false,
autoplay : false,
preload : 'metadata',
content : ''
},
edit : function (data) {
var frame,
defaults = this.defaults,
shortcode = wp.shortcode.next( 'video', data ).shortcode,
attrs;
attrs = shortcode.attrs.named;
attrs.content = shortcode.content;
frame = wp.media({
frame: 'video',
state: 'video-details',
metadata: _.defaults( attrs, defaults )
});
return frame;
},
shortcode : function (shortcode) {
var self = this, content = shortcode.content;
delete shortcode.content;
_.each( this.defaults, function( value, key ) {
shortcode[ key ] = self.coerce( shortcode, key );
if ( value === shortcode[ key ] ) {
delete shortcode[ key ];
}
});
return wp.shortcode.string({
tag: 'video',
attrs: shortcode,
content: content
});
}
};
/**
* wp.media.model.PostMedia
*
* @constructor
* @augments Backbone.Model
**/
media.model.PostMedia = Backbone.Model.extend({
initialize: function() {
this.attachment = false;
},
setSource: function ( attachment ) {
this.attachment = attachment;
this.extension = attachment.get('filename' ).split('.').pop();
if ( this.get( 'src' ) && this.extension === this.get( 'src' ).split('.').pop() ) {
this.unset( 'src' );
}
if ( _.contains( wp.media.view.settings.embedExts, this.extension ) ) {
this.set( this.extension, this.attachment.get( 'url' ) );
} else {
this.unset( this.extension );
}
},
changeAttachment: function( attachment ) {
var self = this;
this.setSource( attachment );
this.unset( 'src' );
_.each( _.without( wp.media.view.settings.embedExts, this.extension ), function (ext) {
self.unset( ext );
} );
}
});
/**
* wp.media.controller.AudioDetails
*
* @constructor
* @augments wp.media.controller.State
* @augments Backbone.Model
*/
media.controller.AudioDetails = media.controller.State.extend({
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 ),
initialize: function( options ) {
this.media = options.media;
media.controller.State.prototype.initialize.apply( this, arguments );
}
});
/**
* wp.media.controller.VideoDetails
*
* @constructor
* @augments wp.media.controller.State
* @augments Backbone.Model
*/
media.controller.VideoDetails = media.controller.State.extend({
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 ),
initialize: function( options ) {
this.media = options.media;
media.controller.State.prototype.initialize.apply( this, arguments );
}
});
/**
* wp.media.view.MediaFrame.MediaDetails
*
* @constructor
* @augments wp.media.view.MediaFrame.Select
* @augments wp.media.view.MediaFrame
* @augments wp.media.view.Frame
* @augments wp.media.View
* @augments wp.Backbone.View
* @augments Backbone.View
* @mixes wp.media.controller.StateMachine
*/
media.view.MediaFrame.MediaDetails = media.view.MediaFrame.Select.extend({
defaults: {
id: 'media',
url: '',
menu: 'media-details',
content: 'media-details',
toolbar: 'media-details',
type: 'link',
priority: 120
},
initialize: function( options ) {
this.DetailsView = options.DetailsView;
this.cancelText = options.cancelText;
this.addText = options.addText;
this.media = new media.model.PostMedia( options.metadata );
this.options.selection = new media.model.Selection( this.media.attachment, { multiple: false } );
media.view.MediaFrame.Select.prototype.initialize.apply( this, arguments );
},
bindHandlers: function() {
var menu = this.defaults.menu;
media.view.MediaFrame.Select.prototype.bindHandlers.apply( this, arguments );
this.on( 'menu:create:' + menu, this.createMenu, this );
this.on( 'content:render:' + menu, this.renderDetailsContent, this );
this.on( 'menu:render:' + menu, this.renderMenu, this );
this.on( 'toolbar:render:' + menu, this.renderDetailsToolbar, this );
},
renderDetailsContent: function() {
var view = new this.DetailsView({
controller: this,
model: this.state().media,
attachment: this.state().media.attachment
}).render();
this.content.set( view );
},
renderMenu: function( view ) {
var lastState = this.lastState(),
previous = lastState && lastState.id,
frame = this;
view.set({
cancel: {
text: this.cancelText,
priority: 20,
click: function() {
if ( previous ) {
frame.setState( previous );
} else {
frame.close();
}
}
},
separateCancel: new media.View({
className: 'separator',
priority: 40
})
});
},
renderDetailsToolbar: function() {
this.toolbar.set( new media.view.Toolbar({
controller: this,
items: {
select: {
style: 'primary',
text: l10n.update,
priority: 80,
click: function() {
var controller = this.controller,
state = controller.state();
controller.close();
state.trigger( 'update', controller.media.toJSON() );
// Restore and reset the default state.
controller.setState( controller.options.state );
controller.reset();
}
}
}
}) );
},
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();
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();
controller.media.setSource( attachment );
state.trigger( 'add-source', controller.media.toJSON() );
// Restore and reset the default state.
controller.setState( controller.options.state );
controller.reset();
}
}
}
}) );
}
});
/**
* wp.media.view.MediaFrame.AudioDetails
*
* @constructor
* @augments wp.media.view.MediaFrame.MediaDetails
* @augments wp.media.view.MediaFrame.Select
* @augments wp.media.view.MediaFrame
* @augments wp.media.view.Frame
* @augments wp.media.View
* @augments wp.Backbone.View
* @augments Backbone.View
* @mixes wp.media.controller.StateMachine
*/
media.view.MediaFrame.AudioDetails = media.view.MediaFrame.MediaDetails.extend({
defaults: {
id: 'audio',
url: '',
menu: 'audio-details',
content: 'audio-details',
toolbar: 'audio-details',
type: 'link',
title: l10n.audioDetailsTitle,
priority: 120
},
initialize: function( options ) {
options.DetailsView = media.view.AudioDetails;
options.cancelText = l10n.audioDetailsCancel;
options.addText = l10n.audioAddSourceTitle;
media.view.MediaFrame.MediaDetails.prototype.initialize.call( this, options );
},
bindHandlers: function() {
media.view.MediaFrame.MediaDetails.prototype.bindHandlers.apply( this, arguments );
this.on( 'toolbar:render:replace-audio', this.renderReplaceToolbar, this );
this.on( 'toolbar:render:add-audio-source', this.renderAddSourceToolbar, this );
},
createStates: function() {
this.states.add([
new media.controller.AudioDetails( {
media: this.media,
editable: false,
menu: 'audio-details'
} ),
new media.controller.MediaLibrary( {
type: 'audio',
id: 'replace-audio',
title: l10n.audioReplaceTitle,
toolbar: 'replace-audio',
media: this.media,
menu: 'audio-details'
} ),
new media.controller.MediaLibrary( {
type: 'audio',
id: 'add-audio-source',
title: l10n.audioAddSourceTitle,
toolbar: 'add-audio-source',
media: this.media,
menu: false
} )
]);
}
});
/**
* wp.media.view.MediaFrame.VideoDetails
*
* @constructor
* @augments wp.media.view.MediaFrame.MediaDetails
* @augments wp.media.view.MediaFrame.Select
* @augments wp.media.view.MediaFrame
* @augments wp.media.view.Frame
* @augments wp.media.View
* @augments wp.Backbone.View
* @augments Backbone.View
* @mixes wp.media.controller.StateMachine
*/
media.view.MediaFrame.VideoDetails = media.view.MediaFrame.MediaDetails.extend({
defaults: {
id: 'video',
url: '',
menu: 'video-details',
content: 'video-details',
toolbar: 'video-details',
type: 'link',
title: l10n.videoDetailsTitle,
priority: 120
},
initialize: function( options ) {
options.DetailsView = media.view.VideoDetails;
options.cancelText = l10n.videoDetailsCancel;
options.addText = l10n.videoAddSourceTitle;
media.view.MediaFrame.MediaDetails.prototype.initialize.call( this, options );
},
bindHandlers: function() {
media.view.MediaFrame.MediaDetails.prototype.bindHandlers.apply( this, arguments );
this.on( 'toolbar:render:replace-video', this.renderReplaceToolbar, this );
this.on( 'toolbar:render:add-video-source', this.renderAddSourceToolbar, this );
this.on( 'toolbar:render:select-poster-image', this.renderSelectPosterImageToolbar, this );
this.on( 'toolbar:render:add-track', this.renderAddTrackToolbar, this );
},
createStates: function() {
this.states.add([
new media.controller.VideoDetails({
media: this.media,
editable: false,
menu: 'video-details'
}),
new media.controller.MediaLibrary( {
type: 'video',
id: 'replace-video',
title: l10n.videoReplaceTitle,
toolbar: 'replace-video',
media: this.media,
menu: 'video-details'
} ),
new media.controller.MediaLibrary( {
type: 'video',
id: 'add-video-source',
title: l10n.videoAddSourceTitle,
toolbar: 'add-video-source',
media: this.media,
menu: false
} ),
new media.controller.MediaLibrary( {
type: 'image',
id: 'select-poster-image',
title: l10n.videoSelectPosterImageTitle,
toolbar: 'select-poster-image',
media: this.media,
menu: 'video-details'
} ),
new media.controller.MediaLibrary( {
type: 'text',
id: 'add-track',
title: l10n.videoAddTrackTitle,
toolbar: 'add-track',
media: this.media,
menu: 'video-details'
} )
]);
},
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();
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(),
content = controller.media.get( 'content' );
if ( -1 === content.indexOf( attachment.get( 'url' ) ) ) {
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();
}
}
}
}) );
}
});
/**
* wp.media.view.AudioDetails
*
* @contructor
* @augments wp.media.view.MediaDetails
* @augments wp.media.view.Settings.AttachmentDisplay
* @augments wp.media.view.Settings
* @augments wp.media.View
* @augments wp.Backbone.View
* @augments Backbone.View
*/
media.view.AudioDetails = media.view.MediaDetails.extend({
className: 'audio-details',
template: media.template('audio-details'),
setMedia: function() {
var audio = this.$('.wp-audio-shortcode');
if ( audio.find( 'source' ).length ) {
if ( audio.is(':hidden') ) {
audio.show();
}
this.media = media.view.MediaDetails.prepareSrc( audio.get(0) );
} else {
audio.hide();
this.media = false;
}
return this;
}
});
/**
* wp.media.view.VideoDetails
*
* @contructor
* @augments wp.media.view.MediaDetails
* @augments wp.media.view.Settings.AttachmentDisplay
* @augments wp.media.view.Settings
* @augments wp.media.View
* @augments wp.Backbone.View
* @augments Backbone.View
*/
media.view.VideoDetails = media.view.MediaDetails.extend({
className: 'video-details',
template: media.template('video-details'),
setMedia: function() {
var video = this.$('.wp-video-shortcode');
if ( video.find( 'source' ).length ) {
if ( video.is(':hidden') ) {
video.show();
}
if ( ! video.hasClass('youtube-video') ) {
this.media = media.view.MediaDetails.prepareSrc( video.get(0) );
} else {
this.media = video.get(0);
}
} else {
video.hide();
this.media = false;
}
return this;
}
});
_.extend( wp.media.playlist, {
/**
* Determine how many audio and video files the user has uploaded
*/
counts : (function (settings) {
var counts = {};
return function () {
if ( ! _.isEmpty( counts ) ) {
return counts;
}
var a = 0, v = 0;
_.each( settings.attachmentCounts, function (total, mime) {
var type;
if ( -1 < mime.indexOf('/') ) {
type = mime.split('/')[0];
total = parseInt(total, 10);
switch ( type ) {
case 'audio':
a += total;
break;
case 'video':
v += total;
break;
}
}
} );
counts.audio = a;
counts.video = v;
return counts;
};
}(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
})
];
}
} );
function init() {
$(document.body)
.on( 'click', '.wp-switch-editor', wp.media.mixin.pauseAllPlayers )
.on( 'click', '.add-media-source', function () {
media.frame.setState('add-' + media.frame.defaults.id + '-source');
} );
}
$( init );
}(jQuery, _, Backbone));

1
wp-includes/js/media-audiovideo.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

323
wp-includes/js/media-editor.js
View File

@ -10,6 +10,26 @@
*/
var workflows = {};
/**
* A helper mixin function to avoid truthy and falsey values being
* passed as an input that expects booleans. If key is undefined in the map,
* but has a default value, set it.
*
* @param {object} attrs Map of props from a shortcode or settings.
* @param {string} key The key within the passed map to check for a value.
* @returns {mixed|undefined} The original or coerced value of key within attrs
*/
wp.media.coerce = function ( attrs, key ) {
if ( _.isUndefined( attrs[ key ] ) && ! _.isUndefined( this.defaults[ key ] ) ) {
attrs[ key ] = this.defaults[ key ];
} else if ( 'true' === attrs[ key ] ) {
attrs[ key ] = true;
} else if ( 'false' === attrs[ key ] ) {
attrs[ key ] = false;
}
return attrs[ key ];
};
/**
* wp.media.string
* @namespace
@ -274,176 +294,11 @@
}
};
/**
* @mixin
*/
wp.media.mixin = {
/**
* A helper function to avoid truthy and falsey values being
* passed as an input that expects booleans. If key is undefined in the map,
* but has a default value, set it.
*
* @param {object} attrs Map of props from a shortcode or settings.
* @param {string} key The key within the passed map to check for a value.
* @returns {mixed|undefined} The original or coerced value of key within attrs
*/
coerce: function ( attrs, key ) {
if ( _.isUndefined( attrs[ key ] ) && ! _.isUndefined( this.defaults[ key ] ) ) {
attrs[ key ] = this.defaults[ key ];
} else if ( 'true' === attrs[ key ] ) {
attrs[ key ] = true;
} else if ( 'false' === attrs[ key ] ) {
attrs[ key ] = false;
}
return attrs[ key ];
},
pauseAllPlayers: function () {
var p;
if ( window.mejs && window.mejs.players ) {
for ( p in window.mejs.players ) {
window.mejs.players[p].pause();
}
}
},
ua: {
is : function (browser) {
var passes = false, ua = window.navigator.userAgent;
switch ( browser ) {
case 'oldie':
passes = ua.match(/MSIE [6-8]/gi) !== null;
break;
case 'ie':
passes = ua.match(/MSIE/gi) !== null;
break;
case 'ff':
passes = ua.match(/firefox/gi) !== null;
break;
case 'opera':
passes = ua.match(/OPR/) !== null;
break;
case 'safari':
passes = ua.match(/safari/gi) !== null && ua.match(/chrome/gi) === null;
break;
case 'chrome':
passes = ua.match(/safari/gi) && ua.match(/chrome/gi) !== null;
break;
}
return passes;
}
},
compat :{
'opera' : {
audio: ['ogg', 'wav'],
video: ['ogg', 'webm']
},
'chrome' : {
audio: ['ogg', 'mpeg', 'x-ms-wma'],
video: ['ogg', 'webm', 'mp4', 'm4v', 'mpeg']
},
'ff' : {
audio: ['ogg', 'mpeg'],
video: ['ogg', 'webm']
},
'safari' : {
audio: ['mpeg', 'wav'],
video: ['mp4', 'm4v', 'mpeg', 'x-ms-wmv', 'quicktime']
},
'ie' : {
audio: ['mpeg'],
video: ['mp4', 'm4v', 'mpeg']
}
},
isCompatible: function ( media ) {
if ( ! media.find( 'source' ).length ) {
return false;
}
var ua = this.ua, test = false, found = false, sources;
if ( ua.is( 'oldIE' ) ) {
return false;
}
sources = media.find( 'source' );
_.find( this.compat, function (supports, browser) {
if ( ua.is( browser ) ) {
found = true;
_.each( sources, function (elem) {
var audio = new RegExp( 'audio\/(' + supports.audio.join('|') + ')', 'gi' ),
video = new RegExp( 'video\/(' + supports.video.join('|') + ')', 'gi' );
if ( elem.type.match( video ) !== null || elem.type.match( audio ) !== null ) {
test = true;
}
} );
}
return test || found;
} );
return test;
},
/**
* Override the MediaElement method for removing a player.
* MediaElement tries to pull the audio/video tag out of
* its container and re-add it to the DOM.
*/
removePlayer: function() {
var t = this.player, featureIndex, feature;
// invoke features cleanup
for ( featureIndex in t.options.features ) {
feature = t.options.features[featureIndex];
if ( t['clean' + feature] ) {
try {
t['clean' + feature](t);
} catch (e) {}
}
}
if ( ! t.isDynamic ) {
t.$node.remove();
}
if ( 'native' !== t.media.pluginType ) {
t.media.remove();
}
delete window.mejs.players[t.id];
t.container.remove();
t.globalUnbind();
delete t.node.player;
},
/**
* Allows any class that has set 'player' to a MediaElementPlayer
* instance to remove the player when listening to events.
*
* Examples: modal closes, shortcode properties are removed, etc.
*/
unsetPlayer : function() {
if ( this.player ) {
wp.media.mixin.pauseAllPlayers();
wp.media.mixin.removePlayer.apply( this );
this.player = false;
}
}
};
wp.media.collection = function(attributes) {
var collections = {};
return _.extend( attributes, {
coerce : wp.media.mixin.coerce,
coerce : wp.media.coerce,
/**
* Retrieve attachments based on the properties of the passed shortcode
*
@ -669,133 +524,6 @@
}
});
wp.media.playlist = new wp.media.collection({
tag: 'playlist',
type : 'audio',
editTitle : wp.media.view.l10n.editPlaylistTitle,
defaults : {
id: wp.media.view.settings.post.id,
style: 'light',
tracklist: true,
tracknumbers: true,
images: true,
artists: true
}
});
wp.media['video-playlist'] = new wp.media.collection({
tag: 'video-playlist',
type : 'video',
editTitle : wp.media.view.l10n.editVideoPlaylistTitle,
defaults : {
id: wp.media.view.settings.post.id,
style: 'light',
tracklist: false,
tracknumbers: false,
images: true
}
});
/**
* @namespace
*/
wp.media.audio = {
coerce : wp.media.mixin.coerce,
defaults : {
id : wp.media.view.settings.post.id,
src : '',
loop : false,
autoplay : false,
preload : 'none'
},
edit : function (data) {
var frame, shortcode = wp.shortcode.next( 'audio', data ).shortcode;
frame = wp.media({
frame: 'audio',
state: 'audio-details',
metadata: _.defaults(
shortcode.attrs.named,
wp.media.audio.defaults
)
});
return frame;
},
shortcode : function (shortcode) {
var self = this;
_.each( wp.media.audio.defaults, function( value, key ) {
shortcode[ key ] = self.coerce( shortcode, key );
if ( value === shortcode[ key ] ) {
delete shortcode[ key ];
}
});
return wp.shortcode.string({
tag: 'audio',
attrs: shortcode
});
}
};
/**
* @namespace
*/
wp.media.video = {
coerce : wp.media.mixin.coerce,
defaults : {
id : wp.media.view.settings.post.id,
src : '',
poster : '',
loop : false,
autoplay : false,
preload : 'metadata',
content : ''
},
edit : function (data) {
var frame,
defaults = this.defaults,
shortcode = wp.shortcode.next( 'video', data ).shortcode,
attrs;
attrs = shortcode.attrs.named;
attrs.content = shortcode.content;
frame = wp.media({
frame: 'video',
state: 'video-details',
metadata: _.defaults( attrs, defaults )
});
return frame;
},
shortcode : function (shortcode) {
var self = this, content = shortcode.content;
delete shortcode.content;
_.each( this.defaults, function( value, key ) {
shortcode[ key ] = self.coerce( shortcode, key );
if ( value === shortcode[ key ] ) {
delete shortcode[ key ];
}
});
return wp.shortcode.string({
tag: 'video',
attrs: shortcode,
content: content
});
}
};
/**
* wp.media.featuredImage
* @namespace
@ -1279,17 +1007,10 @@
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 );
})
.on( 'click', '.wp-switch-editor', wp.media.mixin.pauseAllPlayers );
});
// Initialize and render the Editor drag-and-drop uploader.
new wp.media.view.EditorUploader().render();

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

File diff suppressed because one or more lines are too long

40
wp-includes/js/media-models.js
View File

@ -40,6 +40,8 @@ window.wp = window.wp || {};
delete attributes.frame;
media.frame = frame;
return frame;
};
@ -452,44 +454,6 @@ window.wp = window.wp || {};
}
});
/**
* wp.media.model.PostMedia
*
* @constructor
* @augments Backbone.Model
**/
media.model.PostMedia = Backbone.Model.extend({
initialize: function() {
this.attachment = false;
},
setSource: function ( attachment ) {
this.attachment = attachment;
this.extension = attachment.get('filename' ).split('.').pop();
if ( this.get( 'src' ) && this.extension === this.get( 'src' ).split('.').pop() ) {
this.unset( 'src' );
}
if ( _.contains( wp.media.view.settings.embedExts, this.extension ) ) {
this.set( this.extension, this.attachment.get( 'url' ) );
} else {
this.unset( this.extension );
}
},
changeAttachment: function( attachment ) {
var self = this;
this.setSource( attachment );
this.unset( 'src' );
_.each( _.without( wp.media.view.settings.embedExts, this.extension ), function (ext) {
self.unset( ext );
} );
}
});
/**
* wp.media.model.Attachments
*

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

File diff suppressed because one or more lines are too long

583
wp-includes/js/media-views.js
View File

@ -765,58 +765,6 @@
}
});
/**
* wp.media.controller.AudioDetails
*
* @constructor
* @augments wp.media.controller.State
* @augments Backbone.Model
*/
media.controller.AudioDetails = media.controller.State.extend({
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 ),
initialize: function( options ) {
this.media = options.media;
media.controller.State.prototype.initialize.apply( this, arguments );
}
});
/**
* wp.media.controller.VideoDetails
*
* @constructor
* @augments wp.media.controller.State
* @augments Backbone.Model
*/
media.controller.VideoDetails = media.controller.State.extend({
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 ),
initialize: function( options ) {
this.media = options.media;
media.controller.State.prototype.initialize.apply( this, arguments );
}
});
/**
* wp.media.controller.CollectionEdit
*
@ -1930,7 +1878,7 @@
},
createStates: function() {
var options = this.options;
var options = this.options, counts;
// Add the default states.
this.states.add([
@ -1990,75 +1938,18 @@
type: 'image',
collectionType: 'gallery',
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 ) )
}),
// 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
})
]);
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 ) {
this.states.add( new media.controller.FeaturedImage() );
@ -2745,391 +2636,6 @@
});
/**
* wp.media.view.MediaFrame.MediaDetails
*
* @constructor
* @augments wp.media.view.MediaFrame.Select
* @augments wp.media.view.MediaFrame
* @augments wp.media.view.Frame
* @augments wp.media.View
* @augments wp.Backbone.View
* @augments Backbone.View
* @mixes wp.media.controller.StateMachine
*/
media.view.MediaFrame.MediaDetails = media.view.MediaFrame.Select.extend({
defaults: {
id: 'media',
url: '',
menu: 'media-details',
content: 'media-details',
toolbar: 'media-details',
type: 'link',
priority: 120
},
initialize: function( options ) {
this.DetailsView = options.DetailsView;
this.cancelText = options.cancelText;
this.addText = options.addText;
this.media = new media.model.PostMedia( options.metadata );
this.options.selection = new media.model.Selection( this.media.attachment, { multiple: false } );
media.view.MediaFrame.Select.prototype.initialize.apply( this, arguments );
},
bindHandlers: function() {
var menu = this.defaults.menu;
media.view.MediaFrame.Select.prototype.bindHandlers.apply( this, arguments );
this.on( 'menu:create:' + menu, this.createMenu, this );
this.on( 'content:render:' + menu, this.renderDetailsContent, this );
this.on( 'menu:render:' + menu, this.renderMenu, this );
this.on( 'toolbar:render:' + menu, this.renderDetailsToolbar, this );
},
renderDetailsContent: function() {
var view = new this.DetailsView({
controller: this,
model: this.state().media,
attachment: this.state().media.attachment
}).render();
this.content.set( view );
},
renderMenu: function( view ) {
var lastState = this.lastState(),
previous = lastState && lastState.id,
frame = this;
view.set({
cancel: {
text: this.cancelText,
priority: 20,
click: function() {
if ( previous ) {
frame.setState( previous );
} else {
frame.close();
}
}
},
separateCancel: new media.View({
className: 'separator',
priority: 40
})
});
},
renderDetailsToolbar: function() {
this.toolbar.set( new media.view.Toolbar({
controller: this,
items: {
select: {
style: 'primary',
text: l10n.update,
priority: 80,
click: function() {
var controller = this.controller,
state = controller.state();
controller.close();
state.trigger( 'update', controller.media.toJSON() );
// Restore and reset the default state.
controller.setState( controller.options.state );
controller.reset();
}
}
}
}) );
},
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();
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();
controller.media.setSource( attachment );
state.trigger( 'add-source', controller.media.toJSON() );
// Restore and reset the default state.
controller.setState( controller.options.state );
controller.reset();
}
}
}
}) );
}
});
/**
* wp.media.view.MediaFrame.AudioDetails
*
* @constructor
* @augments wp.media.view.MediaFrame.MediaDetails
* @augments wp.media.view.MediaFrame.Select
* @augments wp.media.view.MediaFrame
* @augments wp.media.view.Frame
* @augments wp.media.View
* @augments wp.Backbone.View
* @augments Backbone.View
* @mixes wp.media.controller.StateMachine
*/
media.view.MediaFrame.AudioDetails = media.view.MediaFrame.MediaDetails.extend({
defaults: {
id: 'audio',
url: '',
menu: 'audio-details',
content: 'audio-details',
toolbar: 'audio-details',
type: 'link',
title: l10n.audioDetailsTitle,
priority: 120
},
initialize: function( options ) {
options.DetailsView = media.view.AudioDetails;
options.cancelText = l10n.audioDetailsCancel;
options.addText = l10n.audioAddSourceTitle;
media.view.MediaFrame.MediaDetails.prototype.initialize.call( this, options );
},
bindHandlers: function() {
media.view.MediaFrame.MediaDetails.prototype.bindHandlers.apply( this, arguments );
this.on( 'toolbar:render:replace-audio', this.renderReplaceToolbar, this );
this.on( 'toolbar:render:add-audio-source', this.renderAddSourceToolbar, this );
},
createStates: function() {
this.states.add([
new media.controller.AudioDetails( {
media: this.media,
editable: false,
menu: 'audio-details'
} ),
new media.controller.MediaLibrary( {
type: 'audio',
id: 'replace-audio',
title: l10n.audioReplaceTitle,
toolbar: 'replace-audio',
media: this.media,
menu: 'audio-details'
} ),
new media.controller.MediaLibrary( {
type: 'audio',
id: 'add-audio-source',
title: l10n.audioAddSourceTitle,
toolbar: 'add-audio-source',
media: this.media,
menu: 'audio-details'
} )
]);
}
});
/**
* wp.media.view.MediaFrame.VideoDetails
*
* @constructor
* @augments wp.media.view.MediaFrame.MediaDetails
* @augments wp.media.view.MediaFrame.Select
* @augments wp.media.view.MediaFrame
* @augments wp.media.view.Frame
* @augments wp.media.View
* @augments wp.Backbone.View
* @augments Backbone.View
* @mixes wp.media.controller.StateMachine
*/
media.view.MediaFrame.VideoDetails = media.view.MediaFrame.MediaDetails.extend({
defaults: {
id: 'video',
url: '',
menu: 'video-details',
content: 'video-details',
toolbar: 'video-details',
type: 'link',
title: l10n.videoDetailsTitle,
priority: 120
},
initialize: function( options ) {
options.DetailsView = media.view.VideoDetails;
options.cancelText = l10n.videoDetailsCancel;
options.addText = l10n.videoAddSourceTitle;
media.view.MediaFrame.MediaDetails.prototype.initialize.call( this, options );
},
bindHandlers: function() {
media.view.MediaFrame.MediaDetails.prototype.bindHandlers.apply( this, arguments );
this.on( 'toolbar:render:replace-video', this.renderReplaceToolbar, this );
this.on( 'toolbar:render:add-video-source', this.renderAddSourceToolbar, this );
this.on( 'toolbar:render:select-poster-image', this.renderSelectPosterImageToolbar, this );
this.on( 'toolbar:render:add-track', this.renderAddTrackToolbar, this );
},
createStates: function() {
this.states.add([
new media.controller.VideoDetails({
media: this.media,
editable: false,
menu: 'video-details'
}),
new media.controller.MediaLibrary( {
type: 'video',
id: 'replace-video',
title: l10n.videoReplaceTitle,
toolbar: 'replace-video',
media: this.media,
menu: 'video-details'
} ),
new media.controller.MediaLibrary( {
type: 'video',
id: 'add-video-source',
title: l10n.videoAddSourceTitle,
toolbar: 'add-video-source',
media: this.media,
menu: 'video-details'
} ),
new media.controller.MediaLibrary( {
type: 'image',
id: 'select-poster-image',
title: l10n.videoSelectPosterImageTitle,
toolbar: 'select-poster-image',
media: this.media,
menu: 'video-details'
} ),
new media.controller.MediaLibrary( {
type: 'text',
id: 'add-track',
title: l10n.videoAddTrackTitle,
toolbar: 'add-track',
media: this.media,
menu: 'video-details'
} )
]);
},
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();
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(),
content = controller.media.get( 'content' );
if ( -1 === content.indexOf( attachment.get( 'url' ) ) ) {
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();
}
}
}
}) );
}
});
/**
* wp.media.view.Modal
*
@ -6662,75 +6168,6 @@
}
});
/**
* wp.media.view.AudioDetails
*
* @contructor
* @augments wp.media.view.MediaDetails
* @augments wp.media.view.Settings.AttachmentDisplay
* @augments wp.media.view.Settings
* @augments wp.media.View
* @augments wp.Backbone.View
* @augments Backbone.View
*/
media.view.AudioDetails = media.view.MediaDetails.extend({
className: 'audio-details',
template: media.template('audio-details'),
setMedia: function() {
var audio = this.$('.wp-audio-shortcode');
if ( audio.find( 'source' ).length ) {
if ( audio.is(':hidden') ) {
audio.show();
}
this.media = media.view.MediaDetails.prepareSrc( audio.get(0) );
} else {
audio.hide();
this.media = false;
}
return this;
}
});
/**
* wp.media.view.VideoDetails
*
* @contructor
* @augments wp.media.view.MediaDetails
* @augments wp.media.view.Settings.AttachmentDisplay
* @augments wp.media.view.Settings
* @augments wp.media.View
* @augments wp.Backbone.View
* @augments Backbone.View
*/
media.view.VideoDetails = media.view.MediaDetails.extend({
className: 'video-details',
template: media.template('video-details'),
setMedia: function() {
var video = this.$('.wp-video-shortcode');
if ( video.find( 'source' ).length ) {
if ( video.is(':hidden') ) {
video.show();
}
if ( ! video.hasClass('youtube-video') ) {
this.media = media.view.MediaDetails.prepareSrc( video.get(0) );
} else {
this.media = video.get(0);
}
} else {
video.hide();
this.media = false;
}
return this;
}
});
/**
* wp.media.view.Spinner
*

6
wp-includes/js/media-views.min.js vendored
View File

File diff suppressed because one or more lines are too long

5
wp-includes/js/mediaelement/wp-mediaelement.css
View File

@ -26,6 +26,7 @@
.media-embed-details .embed-media-settings {
padding-top: 0;
top: 28px;
}
.media-embed-details .instructions {
@ -44,10 +45,6 @@
color: #f00;
}
.media-embed-details .embed-media-settings {
top: 0;
}
.media-embed-details .embed-media-settings .checkbox-setting {
width: 100px;
clear: none;

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

@ -765,14 +765,19 @@ function wp_print_media_templates() {
</script>
<script type="text/html" id="tmpl-audio-details">
<# var ext, html5types = { mp3: true, ogg: true }; #>
<?php $audio_types = wp_get_audio_extensions(); ?>
<div class="media-embed media-embed-details">
<div class="embed-media-settings embed-audio-settings">
<div class="instructions media-instructions">{{{ wp.media.view.l10n.audioDetailsText }}}</div>
<?php wp_underscore_audio_template() ?>
<# if ( ! _.isEmpty( data.model.src ) ) { #>
<# if ( ! _.isEmpty( data.model.src ) ) {
ext = data.model.src.split('.').pop();
if ( html5types[ ext ] ) {
delete html5types[ ext ];
}
#>
<label class="setting">
<span>SRC</span>
<input type="text" disabled="disabled" data-setting="src" value="{{ data.model.src }}" />
@ -782,7 +787,11 @@ function wp_print_media_templates() {
<?php
foreach ( $audio_types as $type ):
?><# if ( ! _.isEmpty( data.model.<?php echo $type ?> ) ) { #>
?><# if ( ! _.isEmpty( data.model.<?php echo $type ?> ) ) {
if ( ! _.isUndefined( html5types.<?php echo $type ?> ) ) {
delete html5types.<?php echo $type ?>;
}
#>
<label class="setting">
<span><?php echo strtoupper( $type ) ?></span>
<input type="text" disabled="disabled" data-setting="<?php echo $type ?>" value="{{ data.model.<?php echo $type ?> }}" />
@ -791,6 +800,17 @@ function wp_print_media_templates() {
<# } #>
<?php endforeach ?>
<# if ( ! _.isEmpty( html5types ) ) { #>
<div class="setting">
<span>{{{ wp.media.view.l10n.mediaHTML5Text }}}</span>
<div class="button-large">
<# _.each( html5types, function (value, type) { #>
<button class="button add-media-source">{{ type }}</button>
<# } ) #>
</div>
</div>
<# } #>
<div class="setting preload">
<span><?php _e( 'Preload' ); ?></span>
<div class="button-group button-large" data-setting="preload">
@ -815,10 +835,11 @@ function wp_print_media_templates() {
</script>
<script type="text/html" id="tmpl-video-details">
<# var ext, html5types = { mp4: true, ogv: true, webm: true }; #>
<?php $video_types = wp_get_video_extensions(); ?>
<div class="media-embed media-embed-details">
<div class="embed-media-settings embed-video-settings">
<div class="instructions media-instructions">{{{ wp.media.view.l10n.videoDetailsText }}}</div>
<div class="wp-video-holder">
<#
var isYouTube = ! _.isEmpty( data.model.src ) && data.model.src.match(/youtube|youtu\.be/);
@ -832,7 +853,12 @@ function wp_print_media_templates() {
<?php wp_underscore_video_template() ?>
<# if ( ! _.isEmpty( data.model.src ) ) { #>
<# if ( ! _.isEmpty( data.model.src ) ) {
ext = data.model.src.split('.').pop();
if ( html5types[ ext ] ) {
delete html5types[ ext ];
}
#>
<label class="setting">
<span>SRC</span>
<input type="text" disabled="disabled" data-setting="src" value="{{ data.model.src }}" />
@ -840,7 +866,11 @@ function wp_print_media_templates() {
</label>
<# } #>
<?php foreach ( $video_types as $type ):
?><# if ( ! _.isEmpty( data.model.<?php echo $type ?> ) ) { #>
?><# if ( ! _.isEmpty( data.model.<?php echo $type ?> ) ) {
if ( ! _.isUndefined( html5types.<?php echo $type ?> ) ) {
delete html5types.<?php echo $type ?>;
}
#>
<label class="setting">
<span><?php echo strtoupper( $type ) ?></span>
<input type="text" disabled="disabled" data-setting="<?php echo $type ?>" value="{{ data.model.<?php echo $type ?> }}" />
@ -849,6 +879,18 @@ function wp_print_media_templates() {
<# } #>
<?php endforeach ?>
</div>
<# if ( ! _.isEmpty( html5types ) ) { #>
<div class="setting">
<span>{{{ wp.media.view.l10n.mediaHTML5Text }}}</span>
<div class="button-large">
<# _.each( html5types, function (value, type) { #>
<button class="button add-media-source">{{ type }}</button>
<# } ) #>
</div>
</div>
<# } #>
<# if ( ! _.isEmpty( data.model.poster ) ) { #>
<label class="setting">
<span><?php _e( 'Poster Image' ); ?></span>

8
wp-includes/media.php
View File

@ -2400,6 +2400,7 @@ function wp_enqueue_media( $args = array() ) {
'id' => 0,
),
'defaultProps' => $props,
'attachmentCounts' => wp_count_attachments(),
'embedExts' => $exts,
'embedMimes' => $ext_mimes
);
@ -2495,21 +2496,19 @@ function wp_enqueue_media( $args = array() ) {
/* translators: suggested height of header image in pixels */
'suggestedHeight' => __( 'Suggested height is %d pixels.' ),
'mediaHTML5Text' => __( 'Add alternate sources for maximum HTML5 playback:' ),
// Edit Audio
'audioDetailsTitle' => __( 'Audio Details' ),
'audioReplaceTitle' => __( 'Replace Audio' ),
'audioAddSourceTitle' => __( 'Add Audio Source' ),
'audioDetailsCancel' => __( 'Cancel Edit' ),
'audioDetailsText' => __( '"Replace Audio" will remove all associated source files when you update. ' .
'"Add Audio Source" allows you to specify alternate sources for maximum native HTML5 audio playback.' ),
// Edit Video
'videoDetailsTitle' => __( 'Video Details' ),
'videoReplaceTitle' => __( 'Replace Video' ),
'videoAddSourceTitle' => __( 'Add Video Source' ),
'videoDetailsCancel' => __( 'Cancel Edit' ),
'videoDetailsText' => __( '"Replace Video" will remove all associated source files when you update. ' .
'"Add Video Source" allows you to specify alternate sources for maximum native HTML5 video playback.' ),
'videoSelectPosterImageTitle' => _( 'Select Poster Image' ),
'videoAddTrackTitle' => __( 'Add Subtitles' ),
@ -2542,6 +2541,7 @@ function wp_enqueue_media( $args = array() ) {
wp_localize_script( 'media-views', '_wpMediaViewsL10n', $strings );
wp_enqueue_script( 'media-editor' );
wp_enqueue_script( 'media-audiovideo' );
wp_enqueue_style( 'media-views' );
wp_enqueue_style( 'imgareaselect' );
wp_plupload_default_settings();

1
wp-includes/script-loader.php
View File

@ -396,6 +396,7 @@ function wp_default_scripts( &$scripts ) {
// Both rely on numerous settings, styles, and templates to operate correctly.
$scripts->add( 'media-views', "/wp-includes/js/media-views$suffix.js", array( 'utils', 'media-models', 'wp-plupload', 'jquery-ui-sortable', 'wp-mediaelement', 'image-edit' ), false, 1 );
$scripts->add( 'media-editor', "/wp-includes/js/media-editor$suffix.js", array( 'shortcode', 'media-views' ), false, 1 );
$scripts->add( 'media-audiovideo', "/wp-includes/js/media-audiovideo$suffix.js", array( 'media-editor' ), false, 1 );
$scripts->add( 'mce-view', "/wp-includes/js/mce-view$suffix.js", array( 'shortcode', 'media-models' ), false, 1 );
if ( is_admin() ) {