2015-02-22 07:56:27 +01:00
|
|
|
/*global wp, jQuery, _, MediaElementPlayer */
|
2015-02-22 06:57:28 +01:00
|
|
|
|
2015-02-09 01:43:50 +01:00
|
|
|
/**
|
|
|
|
* wp.media.view.MediaDetails
|
|
|
|
*
|
2015-02-22 07:28:26 +01:00
|
|
|
* @class
|
2015-02-09 01:43:50 +01:00
|
|
|
* @augments wp.media.view.Settings.AttachmentDisplay
|
|
|
|
* @augments wp.media.view.Settings
|
|
|
|
* @augments wp.media.View
|
|
|
|
* @augments wp.Backbone.View
|
|
|
|
* @augments Backbone.View
|
|
|
|
*/
|
|
|
|
var AttachmentDisplay = require( './settings/attachment-display.js' ),
|
|
|
|
$ = 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' );
|
|
|
|
},
|
|
|
|
|
2015-02-22 06:38:27 +01:00
|
|
|
loadPlayer: function () {
|
|
|
|
this.players.push( new MediaElementPlayer( this.media, this.settings ) );
|
|
|
|
this.scriptXhr = false;
|
|
|
|
},
|
|
|
|
|
2015-02-09 01:43:50 +01:00
|
|
|
/**
|
|
|
|
* @global MediaElementPlayer
|
|
|
|
*/
|
|
|
|
setPlayer : function() {
|
2015-02-22 06:38:27 +01:00
|
|
|
var baseSettings;
|
|
|
|
|
|
|
|
if ( this.players.length || ! this.media || this.scriptXhr ) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
if ( this.media.src.indexOf( 'vimeo' ) && ! ( 'Froogaloop' in window ) ) {
|
|
|
|
baseSettings = wp.media.mixin.mejsSettings;
|
|
|
|
this.scriptXhr = $.getScript( baseSettings.pluginPath + 'froogaloop.min.js', _.bind( this.loadPlayer, this ) );
|
|
|
|
} else {
|
|
|
|
this.loadPlayer();
|
2015-02-09 01:43:50 +01:00
|
|
|
}
|
|
|
|
},
|
|
|
|
|
|
|
|
/**
|
|
|
|
* @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 );
|
2015-02-09 17:01:29 +01:00
|
|
|
|
2015-02-09 05:45:28 +01:00
|
|
|
setTimeout( _.bind( function() {
|
|
|
|
this.resetFocus();
|
|
|
|
}, this ), 10 );
|
2015-02-09 01:43:50 +01:00
|
|
|
|
|
|
|
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;
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
2015-02-09 17:01:29 +01:00
|
|
|
module.exports = MediaDetails;
|