WordPress/wp-includes/js/media-audiovideo.js

1419 lines
34 KiB
JavaScript
Raw Normal View History

/* global _wpMediaViewsL10n, _wpmejsSettings, MediaElementPlayer, tinymce, WPPlaylistView */
(function($, _, Backbone) {
var media = wp.media,
baseSettings = {},
l10n = typeof _wpMediaViewsL10n === 'undefined' ? {} : _wpMediaViewsL10n;
if ( ! _.isUndefined( window._wpmejsSettings ) ) {
baseSettings.pluginPath = _wpmejsSettings.pluginPath;
}
/**
* @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) !== null && 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'],
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',
caption : ''
},
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, this.defaults )
});
return frame;
},
shortcode : function( model ) {
var self = this, content;
_.each( this.defaults, function( value, key ) {
model[ key ] = self.coerce( model, key );
if ( value === model[ key ] ) {
delete model[ key ];
}
});
content = model.content;
delete model.content;
return new wp.shortcode({
tag: 'audio',
attrs: model,
content: content
});
}
};
/**
* 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 : '',
caption : '',
width : 640,
height : 360
},
edit : function( data ) {
var frame,
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, this.defaults )
});
return frame;
},
shortcode : function( model ) {
var self = this, content;
_.each( this.defaults, function( value, key ) {
model[ key ] = self.coerce( model, key );
if ( value === model[ key ] ) {
delete model[ key ];
}
});
content = model.content;
delete model.content;
return new wp.shortcode({
tag: 'video',
attrs: model,
content: content
});
}
};
/**
* 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;
},
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 );
} );
}
});
/**
* The controller for the Audio Details state
*
* @constructor
* @augments wp.media.controller.State
* @augments Backbone.Model
*/
media.controller.AudioDetails = media.controller.State.extend({
defaults: {
id: 'audio-details',
toolbar: 'audio-details',
title: l10n.audioDetailsTitle,
content: 'audio-details',
menu: 'audio-details',
router: false,
priority: 60
},
initialize: function( options ) {
this.media = options.media;
media.controller.State.prototype.initialize.apply( this, arguments );
}
});
/**
* The controller for the Video Details state
*
* @constructor
* @augments wp.media.controller.State
* @augments Backbone.Model
*/
media.controller.VideoDetails = media.controller.State.extend({
defaults: {
id: 'video-details',
toolbar: 'video-details',
title: l10n.videoDetailsTitle,
content: 'video-details',
menu: 'video-details',
router: false,
priority: 60
},
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
})
});
},
setPrimaryButton: function(text, handler) {
this.toolbar.set( new media.view.Toolbar({
controller: this,
items: {
button: {
style: 'primary',
text: text,
priority: 80,
click: function() {
var controller = this.controller;
handler.call( this, controller, controller.state() );
// Restore and reset the default state.
controller.setState( controller.options.state );
controller.reset();
}
}
}
}) );
},
renderDetailsToolbar: function() {
this.setPrimaryButton( l10n.update, function( controller, state ) {
controller.close();
state.trigger( 'update', controller.media.toJSON() );
} );
},
renderReplaceToolbar: function() {
this.setPrimaryButton( l10n.replace, function( controller, state ) {
var attachment = state.get( 'selection' ).single();
controller.media.changeAttachment( attachment );
state.trigger( 'replace', controller.media.toJSON() );
} );
},
renderAddSourceToolbar: function() {
this.setPrimaryButton( this.addText, function( controller, state ) {
var attachment = state.get( 'selection' ).single();
controller.media.setSource( attachment );
state.trigger( 'add-source', controller.media.toJSON() );
} );
}
});
/**
* 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
} ),
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
}),
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.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() );
} );
},
renderAddTrackToolbar: function() {
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' ) ) ) {
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() );
} );
}
});
/**
* wp.media.view.MediaDetails
*
* @contructor
* @augments wp.media.view.Settings.AttachmentDisplay
* @augments wp.media.view.Settings
* @augments wp.media.View
* @augments wp.Backbone.View
* @augments Backbone.View
*/
media.view.MediaDetails = media.view.Settings.AttachmentDisplay.extend({
initialize: function() {
_.bindAll(this, 'success');
this.listenTo( this.controller, 'close', media.mixin.unsetPlayer );
this.on( 'ready', this.setPlayer );
this.on( 'media:setting:remove', media.mixin.unsetPlayer, this );
this.on( 'media:setting:remove', this.render );
this.on( 'media:setting:remove', this.setPlayer );
this.events = _.extend( this.events, {
'click .remove-setting' : 'removeSetting',
'change .content-track' : 'setTracks',
'click .remove-track' : 'setTracks'
} );
media.view.Settings.AttachmentDisplay.prototype.initialize.apply( this, arguments );
},
prepare: function() {
return _.defaults({
model: this.model.toJSON()
}, this.options );
},
/**
* Remove a setting's UI when the model unsets it
*
* @fires wp.media.view.MediaDetails#media:setting:remove
*
* @param {Event} e
*/
removeSetting : function(e) {
var wrap = $( e.currentTarget ).parent(), setting;
setting = wrap.find( 'input' ).data( 'setting' );
if ( setting ) {
this.model.unset( setting );
this.trigger( 'media:setting:remove', this );
}
wrap.remove();
},
/**
*
* @fires wp.media.view.MediaDetails#media:setting:remove
*/
setTracks : function() {
var tracks = '';
_.each( this.$('.content-track'), function(track) {
tracks += $( track ).val();
} );
this.model.set( 'content', tracks );
this.trigger( 'media:setting:remove', this );
},
/**
* @global MediaElementPlayer
*/
setPlayer : function() {
if ( ! this.player && this.media ) {
this.player = new MediaElementPlayer( this.media, this.settings );
}
},
/**
* @abstract
*/
setMedia : function() {
return this;
},
success : function(mejs) {
var autoplay = mejs.attributes.autoplay && 'false' !== mejs.attributes.autoplay;
if ( 'flash' === mejs.pluginType && autoplay ) {
mejs.addEventListener( 'canplay', function() {
mejs.play();
}, false );
}
this.mejs = mejs;
},
/**
* @returns {media.view.MediaDetails} Returns itself to allow chaining
*/
render: function() {
var self = this;
media.view.Settings.AttachmentDisplay.prototype.render.apply( this, arguments );
setTimeout( function() { self.resetFocus(); }, 10 );
this.settings = _.defaults( {
success : this.success
}, baseSettings );
return this.setMedia();
},
resetFocus: function() {
this.$( '.embed-media-settings' ).scrollTop( 0 );
}
}, {
instances : 0,
/**
* When multiple players in the DOM contain the same src, things get weird.
*
* @param {HTMLElement} elem
* @returns {HTMLElement}
*/
prepareSrc : function( elem ) {
var i = media.view.MediaDetails.instances++;
_.each( $( elem ).find( 'source' ), function( source ) {
source.src = [
source.src,
source.src.indexOf('?') > -1 ? '&' : '?',
'_=',
i
].join('');
} );
return elem;
}
});
/**
* 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
*
* @global wp.media.view.settings
*
* @param {Object} settings
* @returns {Object}
*/
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
})
];
}
} );
/**
* Tiny MCE Views
*
*/
/**
* These are base methods that are shared by each shortcode's MCE controller
*
* @mixin
*/
wp.mce.media = {
/**
* @global wp.shortcode
*
* @param {string} content
* @returns {Object}
*/
toView: function( content ) {
var match = wp.shortcode.next( this.shortcode, content );
if ( ! match ) {
return;
}
return {
index: match.index,
content: match.content,
options: {
shortcode: match.shortcode
}
};
},
/**
* Called when a TinyMCE view is clicked for editing.
* - Parses the shortcode out of the element's data attribute
* - Calls the `edit` method on the shortcode model
* - Launches the model window
* - Bind's an `update` callback which updates the element's data attribute
* re-renders the view
*
* @param {HTMLElement} node
*/
edit: function( node ) {
var media = wp.media[ this.shortcode ],
self = this,
frame, data;
wp.media.mixin.pauseAllPlayers();
data = window.decodeURIComponent( $( node ).attr('data-wpview-text') );
frame = media.edit( data );
frame.on( 'close', function() {
frame.detach();
} );
frame.state( self.state ).on( 'update', function( selection ) {
var shortcode = wp.media[ self.shortcode ].shortcode( selection ).string();
$( node ).attr( 'data-wpview-text', window.encodeURIComponent( shortcode ) );
wp.mce.views.refreshView( self, shortcode );
frame.detach();
} );
frame.open();
}
};
/**
* Base View class for audio and video shortcodes
*
* @constructor
* @augments wp.mce.View
* @mixes wp.media.mixin
*/
wp.mce.media.View = wp.mce.View.extend({
initialize: function( options ) {
this.shortcode = options.shortcode;
_.bindAll( this, 'setPlayer' );
$(this).on( 'ready', this.setPlayer );
},
/**
* Creates the player instance for the current node
*
* @global MediaElementPlayer
* @global _wpmejsSettings
*
* @param {Event} e
* @param {HTMLElement} node
*/
setPlayer: function(e, node) {
// if the ready event fires on an empty node
if ( ! node ) {
return;
}
var self = this,
media,
firefox = this.ua.is( 'ff' ),
className = '.wp-' + this.shortcode.tag + '-shortcode';
if ( this.player ) {
this.unsetPlayer();
}
media = $( node ).find( className );
if ( ! this.isCompatible( media ) ) {
media.closest( '.wpview-wrap' ).addClass( 'wont-play' );
if ( ! media.parent().hasClass( 'wpview-wrap' ) ) {
media.parent().replaceWith( media );
}
media.replaceWith( '<p>' + media.find( 'source' ).eq(0).prop( 'src' ) + '</p>' );
return;
} else {
media.closest( '.wpview-wrap' ).removeClass( 'wont-play' );
if ( firefox ) {
media.prop( 'preload', 'metadata' );
} else {
media.prop( 'preload', 'none' );
}
}
media = wp.media.view.MediaDetails.prepareSrc( media.get(0) );
// Thanks, Firefox!
if ( firefox ) {
setTimeout( function() {
self.player = new MediaElementPlayer( media, baseSettings );
}, 50 );
} else {
this.player = new MediaElementPlayer( media, baseSettings );
}
},
/**
* Pass data to the View's Underscore template and return the compiled output
*
* @returns {string}
*/
getHtml: function() {
var attrs = _.defaults(
this.shortcode.attrs.named,
wp.media[ this.shortcode.tag ].defaults
);
return this.template({ model: attrs });
}
});
_.extend( wp.mce.media.View.prototype, wp.media.mixin );
/**
* TinyMCE handler for the video shortcode
*
* @mixes wp.mce.media
*/
wp.mce.video = _.extend( {}, wp.mce.media, {
shortcode: 'video',
state: 'video-details',
View: wp.mce.media.View.extend({
className: 'editor-video',
template: media.template('editor-video')
})
} );
wp.mce.views.register( 'video', wp.mce.video );
/**
* TinyMCE handler for the audio shortcode
*
* @mixes wp.mce.media
*/
wp.mce.audio = _.extend( {}, wp.mce.media, {
shortcode: 'audio',
state: 'audio-details',
View: wp.mce.media.View.extend({
className: 'editor-audio',
template: media.template('editor-audio')
})
} );
wp.mce.views.register( 'audio', wp.mce.audio );
/**
* Base View class for playlist shortcodes
*
* @constructor
* @augments wp.mce.View
* @mixes wp.media.mixin
*/
wp.mce.media.PlaylistView = wp.mce.View.extend({
className: 'editor-playlist',
template: media.template('editor-playlist'),
initialize: function( options ) {
this.data = {};
this.attachments = [];
this.shortcode = options.shortcode;
_.bindAll( this, 'setPlayer' );
$(this).on('ready', this.setNode);
},
/**
* Set the element context for the view, and then fetch the playlist's
* associated attachments.
*
* @param {Event} e
* @param {HTMLElement} node
*/
setNode: function(e, node) {
this.node = node;
this.fetch();
},
/**
* Asynchronously fetch the shortcode's attachments
*/
fetch: function() {
this.attachments = wp.media[ this.shortcode.tag ].attachments( this.shortcode );
this.attachments.more().done( this.setPlayer );
},
/**
* Get the HTML for the view (which also set's the data), replace the
* current HTML, and then invoke the WPPlaylistView instance to render
* the playlist in the editor
*
* @global WPPlaylistView
* @global tinymce.editors
*/
setPlayer: function() {
var p,
html = this.getHtml(),
t = this.encodedText,
self = this;
this.unsetPlayer();
_.each( tinymce.editors, function( editor ) {
var doc;
if ( editor.plugins.wpview ) {
doc = editor.getDoc();
$( doc ).find( '[data-wpview-text="' + t + '"]' ).each(function(i, elem) {
var node = $( elem );
node.html( html );
self.node = elem;
});
}
}, this );
p = new WPPlaylistView({
el: $( self.node ).find( '.wp-playlist' ).get(0),
metadata: this.data
});
this.player = p._player;
},
/**
* Set the data that will be used to compile the Underscore template,
* compile the template, and then return it.
*
* @returns {string}
*/
getHtml: function() {
var data = this.shortcode.attrs.named,
model = wp.media[ this.shortcode.tag ],
type = 'playlist' === this.shortcode.tag ? 'audio' : 'video',
options,
attachments,
tracks = [];
if ( ! this.attachments.length ) {
return;
}
_.each( model.defaults, function( value, key ) {
data[ key ] = model.coerce( data, key );
});
attachments = this.attachments.toJSON();
options = {
type: type,
style: data.style,
tracklist: data.tracklist,
tracknumbers: data.tracknumbers,
images: data.images,
artists: data.artists
};
_.each( attachments, function( attachment ) {
var size = {}, resize = {}, track = {
src : attachment.url,
type : attachment.mime,
title : attachment.title,
caption : attachment.caption,
description : attachment.description,
meta : attachment.meta
};
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;
}
}
track.dimensions = {
original : size,
resized : _.isEmpty( resize ) ? size : resize
};
} else {
options.width = 400;
}
track.image = attachment.image;
track.thumb = attachment.thumb;
tracks.push( track );
} );
options.tracks = tracks;
this.data = options;
return this.template( options );
}
});
_.extend( wp.mce.media.PlaylistView.prototype, wp.media.mixin );
/**
* TinyMCE handler for the playlist shortcode
*
* @mixes wp.mce.media
*/
wp.mce.playlist = _.extend( {}, wp.mce.media, {
shortcode: 'playlist',
state: 'playlist-edit',
View: wp.mce.media.PlaylistView
} );
wp.mce.views.register( 'playlist', wp.mce.playlist );
/**
* TinyMCE handler for the video-playlist shortcode
*
* @mixes wp.mce.media
*/
wp.mce['video-playlist'] = _.extend( {}, wp.mce.media, {
shortcode: 'video-playlist',
state: 'video-playlist-edit',
View: wp.mce.media.PlaylistView
} );
wp.mce.views.register( 'video-playlist', wp.mce['video-playlist'] );
/**
* Event binding
*/
function init() {
$(document.body)
.on( 'click', '.wp-switch-editor', wp.media.mixin.pauseAllPlayers )
.on( 'click', '.add-media-source', function( e ) {
media.frame.lastMime = $( e.currentTarget ).data( 'mime' );
media.frame.setState( 'add-' + media.frame.defaults.id + '-source' );
} );
}
$( init );
}(jQuery, _, Backbone));