WordPress/wp-includes/js/media/views/media-details.js

167 lines
3.8 KiB
JavaScript

/*global wp, jQuery, _, MediaElementPlayer */
/**
* wp.media.view.MediaDetails
*
* @class
* @augments wp.media.view.Settings.AttachmentDisplay
* @augments wp.media.view.Settings
* @augments wp.media.View
* @augments wp.Backbone.View
* @augments Backbone.View
*/
var AttachmentDisplay = wp.media.view.Settings.AttachmentDisplay,
$ = jQuery,
MediaDetails;
MediaDetails = AttachmentDisplay.extend({
initialize: function() {
_.bindAll(this, 'success');
this.players = [];
this.listenTo( this.controller, 'close', wp.media.mixin.unsetPlayers );
this.on( 'ready', this.setPlayer );
this.on( 'media:setting:remove', wp.media.mixin.unsetPlayers, 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',
'click .add-media-source' : 'addSource'
} );
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 );
},
addSource : function( e ) {
this.controller.lastMime = $( e.currentTarget ).data( 'mime' );
this.controller.setState( 'add-' + this.controller.defaults.id + '-source' );
},
loadPlayer: function () {
this.players.push( new MediaElementPlayer( this.media, this.settings ) );
this.scriptXhr = false;
},
/**
* @global MediaElementPlayer
*/
setPlayer : function() {
var baseSettings;
if ( this.players.length || ! this.media || this.scriptXhr ) {
return;
}
if ( this.model.get( 'src' ).indexOf( 'vimeo' ) > -1 && ! ( 'Froogaloop' in window ) ) {
baseSettings = wp.media.mixin.mejsSettings;
this.scriptXhr = $.getScript( baseSettings.pluginPath + 'froogaloop.min.js', _.bind( this.loadPlayer, this ) );
} else {
this.loadPlayer();
}
},
/**
* @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() {
AttachmentDisplay.prototype.render.apply( this, arguments );
setTimeout( _.bind( function() {
this.resetFocus();
}, this ), 10 );
this.settings = _.defaults( {
success : this.success
}, wp.media.mixin.mejsSettings );
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 = MediaDetails.instances++;
_.each( $( elem ).find( 'source' ), function( source ) {
source.src = [
source.src,
source.src.indexOf('?') > -1 ? '&' : '?',
'_=',
i
].join('');
} );
return elem;
}
});
module.exports = MediaDetails;