1 (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
5 baseSettings = window._wpmejsSettings || {},
6 l10n = window._wpMediaViewsL10n || {};
12 mejsSettings: baseSettings,
14 removeAllPlayers: function() {
17 if ( window.mejs && window.mejs.players ) {
18 for ( p in window.mejs.players ) {
19 window.mejs.players[p].pause();
20 this.removePlayer( window.mejs.players[p] );
26 * Override the MediaElement method for removing a player.
27 * MediaElement tries to pull the audio/video tag out of
28 * its container and re-add it to the DOM.
30 removePlayer: function(t) {
31 var featureIndex, feature;
37 // invoke features cleanup
38 for ( featureIndex in t.options.features ) {
39 feature = t.options.features[featureIndex];
40 if ( t['clean' + feature] ) {
42 t['clean' + feature](t);
47 if ( ! t.isDynamic ) {
51 if ( 'native' !== t.media.pluginType ) {
55 delete window.mejs.players[t.id];
63 * Allows any class that has set 'player' to a MediaElementPlayer
64 * instance to remove the player when listening to events.
66 * Examples: modal closes, shortcode properties are removed, etc.
68 unsetPlayers : function() {
69 if ( this.players && this.players.length ) {
70 _.each( this.players, function (player) {
72 wp.media.mixin.removePlayer( player );
80 * Autowire "collection"-type shortcodes
82 wp.media.playlist = new wp.media.collection({
84 editTitle : l10n.editPlaylistTitle,
86 id: wp.media.view.settings.post.id,
97 * Shortcode modeling for audio
98 * `edit()` prepares the shortcode for the media modal
99 * `shortcode()` builds the new shortcode after update
104 coerce : wp.media.coerce,
107 id : wp.media.view.settings.post.id,
115 edit : function( data ) {
116 var frame, shortcode = wp.shortcode.next( 'audio', data ).shortcode;
120 state: 'audio-details',
121 metadata: _.defaults( shortcode.attrs.named, this.defaults )
127 shortcode : function( model ) {
130 _.each( this.defaults, function( value, key ) {
131 model[ key ] = this.coerce( model, key );
133 if ( value === model[ key ] ) {
138 content = model.content;
139 delete model.content;
141 return new wp.shortcode({
150 * Shortcode modeling for video
151 * `edit()` prepares the shortcode for the media modal
152 * `shortcode()` builds the new shortcode after update
157 coerce : wp.media.coerce,
160 id : wp.media.view.settings.post.id,
165 preload : 'metadata',
171 edit : function( data ) {
173 shortcode = wp.shortcode.next( 'video', data ).shortcode,
176 attrs = shortcode.attrs.named;
177 attrs.content = shortcode.content;
181 state: 'video-details',
182 metadata: _.defaults( attrs, this.defaults )
188 shortcode : function( model ) {
191 _.each( this.defaults, function( value, key ) {
192 model[ key ] = this.coerce( model, key );
194 if ( value === model[ key ] ) {
199 content = model.content;
200 delete model.content;
202 return new wp.shortcode({
210 media.model.PostMedia = require( './models/post-media.js' );
211 media.controller.AudioDetails = require( './controllers/audio-details.js' );
212 media.controller.VideoDetails = require( './controllers/video-details.js' );
213 media.view.MediaFrame.MediaDetails = require( './views/frame/media-details.js' );
214 media.view.MediaFrame.AudioDetails = require( './views/frame/audio-details.js' );
215 media.view.MediaFrame.VideoDetails = require( './views/frame/video-details.js' );
216 media.view.MediaDetails = require( './views/media-details.js' );
217 media.view.AudioDetails = require( './views/audio-details.js' );
218 media.view.VideoDetails = require( './views/video-details.js' );
220 },{"./controllers/audio-details.js":2,"./controllers/video-details.js":3,"./models/post-media.js":4,"./views/audio-details.js":5,"./views/frame/audio-details.js":6,"./views/frame/media-details.js":7,"./views/frame/video-details.js":8,"./views/media-details.js":9,"./views/video-details.js":10}],2:[function(require,module,exports){
224 * wp.media.controller.AudioDetails
226 * The controller for the Audio Details state
229 * @augments wp.media.controller.State
230 * @augments Backbone.Model
232 var State = wp.media.controller.State,
233 l10n = wp.media.view.l10n,
236 AudioDetails = State.extend({
239 toolbar: 'audio-details',
240 title: l10n.audioDetailsTitle,
241 content: 'audio-details',
242 menu: 'audio-details',
247 initialize: function( options ) {
248 this.media = options.media;
249 State.prototype.initialize.apply( this, arguments );
253 module.exports = AudioDetails;
255 },{}],3:[function(require,module,exports){
259 * wp.media.controller.VideoDetails
261 * The controller for the Video Details state
264 * @augments wp.media.controller.State
265 * @augments Backbone.Model
267 var State = wp.media.controller.State,
268 l10n = wp.media.view.l10n,
271 VideoDetails = State.extend({
274 toolbar: 'video-details',
275 title: l10n.videoDetailsTitle,
276 content: 'video-details',
277 menu: 'video-details',
282 initialize: function( options ) {
283 this.media = options.media;
284 State.prototype.initialize.apply( this, arguments );
288 module.exports = VideoDetails;
290 },{}],4:[function(require,module,exports){
291 /*globals wp, Backbone, _ */
294 * wp.media.model.PostMedia
296 * Shared model class for audio and video. Updates the model after
297 * "Add Audio|Video Source" and "Replace Audio|Video" states return
300 * @augments Backbone.Model
302 var PostMedia = Backbone.Model.extend({
303 initialize: function() {
304 this.attachment = false;
307 setSource: function( attachment ) {
308 this.attachment = attachment;
309 this.extension = attachment.get( 'filename' ).split('.').pop();
311 if ( this.get( 'src' ) && this.extension === this.get( 'src' ).split('.').pop() ) {
315 if ( _.contains( wp.media.view.settings.embedExts, this.extension ) ) {
316 this.set( this.extension, this.attachment.get( 'url' ) );
318 this.unset( this.extension );
322 changeAttachment: function( attachment ) {
323 this.setSource( attachment );
326 _.each( _.without( wp.media.view.settings.embedExts, this.extension ), function( ext ) {
332 module.exports = PostMedia;
334 },{}],5:[function(require,module,exports){
338 * wp.media.view.AudioDetails
341 * @augments wp.media.view.MediaDetails
342 * @augments wp.media.view.Settings.AttachmentDisplay
343 * @augments wp.media.view.Settings
344 * @augments wp.media.View
345 * @augments wp.Backbone.View
346 * @augments Backbone.View
348 var MediaDetails = wp.media.view.MediaDetails,
351 AudioDetails = MediaDetails.extend({
352 className: 'audio-details',
353 template: wp.template('audio-details'),
355 setMedia: function() {
356 var audio = this.$('.wp-audio-shortcode');
358 if ( audio.find( 'source' ).length ) {
359 if ( audio.is(':hidden') ) {
362 this.media = MediaDetails.prepareSrc( audio.get(0) );
372 module.exports = AudioDetails;
374 },{}],6:[function(require,module,exports){
378 * wp.media.view.MediaFrame.AudioDetails
381 * @augments wp.media.view.MediaFrame.MediaDetails
382 * @augments wp.media.view.MediaFrame.Select
383 * @augments wp.media.view.MediaFrame
384 * @augments wp.media.view.Frame
385 * @augments wp.media.View
386 * @augments wp.Backbone.View
387 * @augments Backbone.View
388 * @mixes wp.media.controller.StateMachine
390 var MediaDetails = wp.media.view.MediaFrame.MediaDetails,
391 MediaLibrary = wp.media.controller.MediaLibrary,
393 l10n = wp.media.view.l10n,
396 AudioDetails = MediaDetails.extend({
400 menu: 'audio-details',
401 content: 'audio-details',
402 toolbar: 'audio-details',
404 title: l10n.audioDetailsTitle,
408 initialize: function( options ) {
409 options.DetailsView = wp.media.view.AudioDetails;
410 options.cancelText = l10n.audioDetailsCancel;
411 options.addText = l10n.audioAddSourceTitle;
413 MediaDetails.prototype.initialize.call( this, options );
416 bindHandlers: function() {
417 MediaDetails.prototype.bindHandlers.apply( this, arguments );
419 this.on( 'toolbar:render:replace-audio', this.renderReplaceToolbar, this );
420 this.on( 'toolbar:render:add-audio-source', this.renderAddSourceToolbar, this );
423 createStates: function() {
425 new wp.media.controller.AudioDetails( {
432 title: l10n.audioReplaceTitle,
433 toolbar: 'replace-audio',
435 menu: 'audio-details'
440 id: 'add-audio-source',
441 title: l10n.audioAddSourceTitle,
442 toolbar: 'add-audio-source',
450 module.exports = AudioDetails;
452 },{}],7:[function(require,module,exports){
456 * wp.media.view.MediaFrame.MediaDetails
459 * @augments wp.media.view.MediaFrame.Select
460 * @augments wp.media.view.MediaFrame
461 * @augments wp.media.view.Frame
462 * @augments wp.media.View
463 * @augments wp.Backbone.View
464 * @augments Backbone.View
465 * @mixes wp.media.controller.StateMachine
467 var Select = wp.media.view.MediaFrame.Select,
468 l10n = wp.media.view.l10n,
471 MediaDetails = Select.extend({
475 menu: 'media-details',
476 content: 'media-details',
477 toolbar: 'media-details',
482 initialize: function( options ) {
483 this.DetailsView = options.DetailsView;
484 this.cancelText = options.cancelText;
485 this.addText = options.addText;
487 this.media = new wp.media.model.PostMedia( options.metadata );
488 this.options.selection = new wp.media.model.Selection( this.media.attachment, { multiple: false } );
489 Select.prototype.initialize.apply( this, arguments );
492 bindHandlers: function() {
493 var menu = this.defaults.menu;
495 Select.prototype.bindHandlers.apply( this, arguments );
497 this.on( 'menu:create:' + menu, this.createMenu, this );
498 this.on( 'content:render:' + menu, this.renderDetailsContent, this );
499 this.on( 'menu:render:' + menu, this.renderMenu, this );
500 this.on( 'toolbar:render:' + menu, this.renderDetailsToolbar, this );
503 renderDetailsContent: function() {
504 var view = new this.DetailsView({
506 model: this.state().media,
507 attachment: this.state().media.attachment
510 this.content.set( view );
513 renderMenu: function( view ) {
514 var lastState = this.lastState(),
515 previous = lastState && lastState.id,
520 text: this.cancelText,
524 frame.setState( previous );
530 separateCancel: new wp.media.View({
531 className: 'separator',
538 setPrimaryButton: function(text, handler) {
539 this.toolbar.set( new wp.media.view.Toolbar({
547 var controller = this.controller;
548 handler.call( this, controller, controller.state() );
549 // Restore and reset the default state.
550 controller.setState( controller.options.state );
558 renderDetailsToolbar: function() {
559 this.setPrimaryButton( l10n.update, function( controller, state ) {
561 state.trigger( 'update', controller.media.toJSON() );
565 renderReplaceToolbar: function() {
566 this.setPrimaryButton( l10n.replace, function( controller, state ) {
567 var attachment = state.get( 'selection' ).single();
568 controller.media.changeAttachment( attachment );
569 state.trigger( 'replace', controller.media.toJSON() );
573 renderAddSourceToolbar: function() {
574 this.setPrimaryButton( this.addText, function( controller, state ) {
575 var attachment = state.get( 'selection' ).single();
576 controller.media.setSource( attachment );
577 state.trigger( 'add-source', controller.media.toJSON() );
582 module.exports = MediaDetails;
584 },{}],8:[function(require,module,exports){
588 * wp.media.view.MediaFrame.VideoDetails
591 * @augments wp.media.view.MediaFrame.MediaDetails
592 * @augments wp.media.view.MediaFrame.Select
593 * @augments wp.media.view.MediaFrame
594 * @augments wp.media.view.Frame
595 * @augments wp.media.View
596 * @augments wp.Backbone.View
597 * @augments Backbone.View
598 * @mixes wp.media.controller.StateMachine
600 var MediaDetails = wp.media.view.MediaFrame.MediaDetails,
601 MediaLibrary = wp.media.controller.MediaLibrary,
602 l10n = wp.media.view.l10n,
605 VideoDetails = MediaDetails.extend({
609 menu: 'video-details',
610 content: 'video-details',
611 toolbar: 'video-details',
613 title: l10n.videoDetailsTitle,
617 initialize: function( options ) {
618 options.DetailsView = wp.media.view.VideoDetails;
619 options.cancelText = l10n.videoDetailsCancel;
620 options.addText = l10n.videoAddSourceTitle;
622 MediaDetails.prototype.initialize.call( this, options );
625 bindHandlers: function() {
626 MediaDetails.prototype.bindHandlers.apply( this, arguments );
628 this.on( 'toolbar:render:replace-video', this.renderReplaceToolbar, this );
629 this.on( 'toolbar:render:add-video-source', this.renderAddSourceToolbar, this );
630 this.on( 'toolbar:render:select-poster-image', this.renderSelectPosterImageToolbar, this );
631 this.on( 'toolbar:render:add-track', this.renderAddTrackToolbar, this );
634 createStates: function() {
636 new wp.media.controller.VideoDetails({
643 title: l10n.videoReplaceTitle,
644 toolbar: 'replace-video',
646 menu: 'video-details'
651 id: 'add-video-source',
652 title: l10n.videoAddSourceTitle,
653 toolbar: 'add-video-source',
660 id: 'select-poster-image',
661 title: l10n.videoSelectPosterImageTitle,
662 toolbar: 'select-poster-image',
664 menu: 'video-details'
670 title: l10n.videoAddTrackTitle,
671 toolbar: 'add-track',
673 menu: 'video-details'
678 renderSelectPosterImageToolbar: function() {
679 this.setPrimaryButton( l10n.videoSelectPosterImageTitle, function( controller, state ) {
680 var urls = [], attachment = state.get( 'selection' ).single();
682 controller.media.set( 'poster', attachment.get( 'url' ) );
683 state.trigger( 'set-poster-image', controller.media.toJSON() );
685 _.each( wp.media.view.settings.embedExts, function (ext) {
686 if ( controller.media.get( ext ) ) {
687 urls.push( controller.media.get( ext ) );
691 wp.ajax.send( 'set-attachment-thumbnail', {
694 thumbnail_id: attachment.get( 'id' )
700 renderAddTrackToolbar: function() {
701 this.setPrimaryButton( l10n.videoAddTrackTitle, function( controller, state ) {
702 var attachment = state.get( 'selection' ).single(),
703 content = controller.media.get( 'content' );
705 if ( -1 === content.indexOf( attachment.get( 'url' ) ) ) {
707 '<track srclang="en" label="English"kind="subtitles" src="',
708 attachment.get( 'url' ),
712 controller.media.set( 'content', content );
714 state.trigger( 'add-track', controller.media.toJSON() );
719 module.exports = VideoDetails;
721 },{}],9:[function(require,module,exports){
722 /*global wp, jQuery, _, MediaElementPlayer */
725 * wp.media.view.MediaDetails
728 * @augments wp.media.view.Settings.AttachmentDisplay
729 * @augments wp.media.view.Settings
730 * @augments wp.media.View
731 * @augments wp.Backbone.View
732 * @augments Backbone.View
734 var AttachmentDisplay = wp.media.view.Settings.AttachmentDisplay,
738 MediaDetails = AttachmentDisplay.extend({
739 initialize: function() {
740 _.bindAll(this, 'success');
742 this.listenTo( this.controller, 'close', wp.media.mixin.unsetPlayers );
743 this.on( 'ready', this.setPlayer );
744 this.on( 'media:setting:remove', wp.media.mixin.unsetPlayers, this );
745 this.on( 'media:setting:remove', this.render );
746 this.on( 'media:setting:remove', this.setPlayer );
747 this.events = _.extend( this.events, {
748 'click .remove-setting' : 'removeSetting',
749 'change .content-track' : 'setTracks',
750 'click .remove-track' : 'setTracks',
751 'click .add-media-source' : 'addSource'
754 AttachmentDisplay.prototype.initialize.apply( this, arguments );
757 prepare: function() {
759 model: this.model.toJSON()
764 * Remove a setting's UI when the model unsets it
766 * @fires wp.media.view.MediaDetails#media:setting:remove
770 removeSetting : function(e) {
771 var wrap = $( e.currentTarget ).parent(), setting;
772 setting = wrap.find( 'input' ).data( 'setting' );
775 this.model.unset( setting );
776 this.trigger( 'media:setting:remove', this );
784 * @fires wp.media.view.MediaDetails#media:setting:remove
786 setTracks : function() {
789 _.each( this.$('.content-track'), function(track) {
790 tracks += $( track ).val();
793 this.model.set( 'content', tracks );
794 this.trigger( 'media:setting:remove', this );
797 addSource : function( e ) {
798 this.controller.lastMime = $( e.currentTarget ).data( 'mime' );
799 this.controller.setState( 'add-' + this.controller.defaults.id + '-source' );
802 loadPlayer: function () {
803 this.players.push( new MediaElementPlayer( this.media, this.settings ) );
804 this.scriptXhr = false;
808 * @global MediaElementPlayer
810 setPlayer : function() {
813 if ( this.players.length || ! this.media || this.scriptXhr ) {
817 if ( this.model.get( 'src' ).indexOf( 'vimeo' ) > -1 && ! ( 'Froogaloop' in window ) ) {
818 baseSettings = wp.media.mixin.mejsSettings;
819 this.scriptXhr = $.getScript( baseSettings.pluginPath + 'froogaloop.min.js', _.bind( this.loadPlayer, this ) );
828 setMedia : function() {
832 success : function(mejs) {
833 var autoplay = mejs.attributes.autoplay && 'false' !== mejs.attributes.autoplay;
835 if ( 'flash' === mejs.pluginType && autoplay ) {
836 mejs.addEventListener( 'canplay', function() {
845 * @returns {media.view.MediaDetails} Returns itself to allow chaining
848 AttachmentDisplay.prototype.render.apply( this, arguments );
850 setTimeout( _.bind( function() {
854 this.settings = _.defaults( {
855 success : this.success
856 }, wp.media.mixin.mejsSettings );
858 return this.setMedia();
861 resetFocus: function() {
862 this.$( '.embed-media-settings' ).scrollTop( 0 );
867 * When multiple players in the DOM contain the same src, things get weird.
869 * @param {HTMLElement} elem
870 * @returns {HTMLElement}
872 prepareSrc : function( elem ) {
873 var i = MediaDetails.instances++;
874 _.each( $( elem ).find( 'source' ), function( source ) {
877 source.src.indexOf('?') > -1 ? '&' : '?',
887 module.exports = MediaDetails;
889 },{}],10:[function(require,module,exports){
893 * wp.media.view.VideoDetails
896 * @augments wp.media.view.MediaDetails
897 * @augments wp.media.view.Settings.AttachmentDisplay
898 * @augments wp.media.view.Settings
899 * @augments wp.media.View
900 * @augments wp.Backbone.View
901 * @augments Backbone.View
903 var MediaDetails = wp.media.view.MediaDetails,
906 VideoDetails = MediaDetails.extend({
907 className: 'video-details',
908 template: wp.template('video-details'),
910 setMedia: function() {
911 var video = this.$('.wp-video-shortcode');
913 if ( video.find( 'source' ).length ) {
914 if ( video.is(':hidden') ) {
918 if ( ! video.hasClass( 'youtube-video' ) && ! video.hasClass( 'vimeo-video' ) ) {
919 this.media = MediaDetails.prepareSrc( video.get(0) );
921 this.media = video.get(0);
932 module.exports = VideoDetails;