wp-includes/js/media-audiovideo.js

   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){
   2 /*globals wp, _ */
   3
   4 var media = wp.media,
   5         baseSettings = window._wpmejsSettings || {},
   6         l10n = window._wpMediaViewsL10n || {};
   7
   8 /**
   9  * @mixin
  10  */
  11 wp.media.mixin = {
  12         mejsSettings: baseSettings,
  13
  14         removeAllPlayers: function() {
  15                 var p;
  16
  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] );
  21                         }
  22                 }
  23         },
  24
  25         /**
  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.
  29          */
  30         removePlayer: function(t) {
  31                 var featureIndex, feature;
  32
  33                 if ( ! t.options ) {
  34                         return;
  35                 }
  36
  37                 // invoke features cleanup
  38                 for ( featureIndex in t.options.features ) {
  39                         feature = t.options.features[featureIndex];
  40                         if ( t['clean' + feature] ) {
  41                                 try {
  42                                         t['clean' + feature](t);
  43                                 } catch (e) {}
  44                         }
  45                 }
  46
  47                 if ( ! t.isDynamic ) {
  48                         t.$node.remove();
  49                 }
  50
  51                 if ( 'native' !== t.media.pluginType ) {
  52                         t.$media.remove();
  53                 }
  54
  55                 delete window.mejs.players[t.id];
  56
  57                 t.container.remove();
  58                 t.globalUnbind();
  59                 delete t.node.player;
  60         },
  61
  62         /**
  63          * Allows any class that has set 'player' to a MediaElementPlayer
  64          *  instance to remove the player when listening to events.
  65          *
  66          *  Examples: modal closes, shortcode properties are removed, etc.
  67          */
  68         unsetPlayers : function() {
  69                 if ( this.players && this.players.length ) {
  70                         _.each( this.players, function (player) {
  71                                 player.pause();
  72                                 wp.media.mixin.removePlayer( player );
  73                         } );
  74                         this.players = [];
  75                 }
  76         }
  77 };
  78
  79 /**
  80  * Autowire "collection"-type shortcodes
  81  */
  82 wp.media.playlist = new wp.media.collection({
  83         tag: 'playlist',
  84         editTitle : l10n.editPlaylistTitle,
  85         defaults : {
  86                 id: wp.media.view.settings.post.id,
  87                 style: 'light',
  88                 tracklist: true,
  89                 tracknumbers: true,
  90                 images: true,
  91                 artists: true,
  92                 type: 'audio'
  93         }
  94 });
  95
  96 /**
  97  * Shortcode modeling for audio
  98  *  `edit()` prepares the shortcode for the media modal
  99  *  `shortcode()` builds the new shortcode after update
 100  *
 101  * @namespace
 102  */
 103 wp.media.audio = {
 104         coerce : wp.media.coerce,
 105
 106         defaults : {
 107                 id : wp.media.view.settings.post.id,
 108                 src : '',
 109                 loop : false,
 110                 autoplay : false,
 111                 preload : 'none',
 112                 width : 400
 113         },
 114
 115         edit : function( data ) {
 116                 var frame, shortcode = wp.shortcode.next( 'audio', data ).shortcode;
 117
 118                 frame = wp.media({
 119                         frame: 'audio',
 120                         state: 'audio-details',
 121                         metadata: _.defaults( shortcode.attrs.named, this.defaults )
 122                 });
 123
 124                 return frame;
 125         },
 126
 127         shortcode : function( model ) {
 128                 var content;
 129
 130                 _.each( this.defaults, function( value, key ) {
 131                         model[ key ] = this.coerce( model, key );
 132
 133                         if ( value === model[ key ] ) {
 134                                 delete model[ key ];
 135                         }
 136                 }, this );
 137
 138                 content = model.content;
 139                 delete model.content;
 140
 141                 return new wp.shortcode({
 142                         tag: 'audio',
 143                         attrs: model,
 144                         content: content
 145                 });
 146         }
 147 };
 148
 149 /**
 150  * Shortcode modeling for video
 151  *  `edit()` prepares the shortcode for the media modal
 152  *  `shortcode()` builds the new shortcode after update
 153  *
 154  * @namespace
 155  */
 156 wp.media.video = {
 157         coerce : wp.media.coerce,
 158
 159         defaults : {
 160                 id : wp.media.view.settings.post.id,
 161                 src : '',
 162                 poster : '',
 163                 loop : false,
 164                 autoplay : false,
 165                 preload : 'metadata',
 166                 content : '',
 167                 width : 640,
 168                 height : 360
 169         },
 170
 171         edit : function( data ) {
 172                 var frame,
 173                         shortcode = wp.shortcode.next( 'video', data ).shortcode,
 174                         attrs;
 175
 176                 attrs = shortcode.attrs.named;
 177                 attrs.content = shortcode.content;
 178
 179                 frame = wp.media({
 180                         frame: 'video',
 181                         state: 'video-details',
 182                         metadata: _.defaults( attrs, this.defaults )
 183                 });
 184
 185                 return frame;
 186         },
 187
 188         shortcode : function( model ) {
 189                 var content;
 190
 191                 _.each( this.defaults, function( value, key ) {
 192                         model[ key ] = this.coerce( model, key );
 193
 194                         if ( value === model[ key ] ) {
 195                                 delete model[ key ];
 196                         }
 197                 }, this );
 198
 199                 content = model.content;
 200                 delete model.content;
 201
 202                 return new wp.shortcode({
 203                         tag: 'video',
 204                         attrs: model,
 205                         content: content
 206                 });
 207         }
 208 };
 209
 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' );
 219
 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){
 221 /*globals wp */
 222
 223 /**
 224  * wp.media.controller.AudioDetails
 225  *
 226  * The controller for the Audio Details state
 227  *
 228  * @class
 229  * @augments wp.media.controller.State
 230  * @augments Backbone.Model
 231  */
 232 var State = wp.media.controller.State,
 233         l10n = wp.media.view.l10n,
 234         AudioDetails;
 235
 236 AudioDetails = State.extend({
 237         defaults: {
 238                 id: 'audio-details',
 239                 toolbar: 'audio-details',
 240                 title: l10n.audioDetailsTitle,
 241                 content: 'audio-details',
 242                 menu: 'audio-details',
 243                 router: false,
 244                 priority: 60
 245         },
 246
 247         initialize: function( options ) {
 248                 this.media = options.media;
 249                 State.prototype.initialize.apply( this, arguments );
 250         }
 251 });
 252
 253 module.exports = AudioDetails;
 254
 255 },{}],3:[function(require,module,exports){
 256 /*globals wp */
 257
 258 /**
 259  * wp.media.controller.VideoDetails
 260  *
 261  * The controller for the Video Details state
 262  *
 263  * @class
 264  * @augments wp.media.controller.State
 265  * @augments Backbone.Model
 266  */
 267 var State = wp.media.controller.State,
 268         l10n = wp.media.view.l10n,
 269         VideoDetails;
 270
 271 VideoDetails = State.extend({
 272         defaults: {
 273                 id: 'video-details',
 274                 toolbar: 'video-details',
 275                 title: l10n.videoDetailsTitle,
 276                 content: 'video-details',
 277                 menu: 'video-details',
 278                 router: false,
 279                 priority: 60
 280         },
 281
 282         initialize: function( options ) {
 283                 this.media = options.media;
 284                 State.prototype.initialize.apply( this, arguments );
 285         }
 286 });
 287
 288 module.exports = VideoDetails;
 289
 290 },{}],4:[function(require,module,exports){
 291 /*globals wp, Backbone, _ */
 292
 293 /**
 294  * wp.media.model.PostMedia
 295  *
 296  * Shared model class for audio and video. Updates the model after
 297  *   "Add Audio|Video Source" and "Replace Audio|Video" states return
 298  *
 299  * @class
 300  * @augments Backbone.Model
 301  */
 302 var PostMedia = Backbone.Model.extend({
 303         initialize: function() {
 304                 this.attachment = false;
 305         },
 306
 307         setSource: function( attachment ) {
 308                 this.attachment = attachment;
 309                 this.extension = attachment.get( 'filename' ).split('.').pop();
 310
 311                 if ( this.get( 'src' ) && this.extension === this.get( 'src' ).split('.').pop() ) {
 312                         this.unset( 'src' );
 313                 }
 314
 315                 if ( _.contains( wp.media.view.settings.embedExts, this.extension ) ) {
 316                         this.set( this.extension, this.attachment.get( 'url' ) );
 317                 } else {
 318                         this.unset( this.extension );
 319                 }
 320         },
 321
 322         changeAttachment: function( attachment ) {
 323                 this.setSource( attachment );
 324
 325                 this.unset( 'src' );
 326                 _.each( _.without( wp.media.view.settings.embedExts, this.extension ), function( ext ) {
 327                         this.unset( ext );
 328                 }, this );
 329         }
 330 });
 331
 332 module.exports = PostMedia;
 333
 334 },{}],5:[function(require,module,exports){
 335 /*globals wp */
 336
 337 /**
 338  * wp.media.view.AudioDetails
 339  *
 340  * @class
 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
 347  */
 348 var MediaDetails = wp.media.view.MediaDetails,
 349         AudioDetails;
 350
 351 AudioDetails = MediaDetails.extend({
 352         className: 'audio-details',
 353         template:  wp.template('audio-details'),
 354
 355         setMedia: function() {
 356                 var audio = this.$('.wp-audio-shortcode');
 357
 358                 if ( audio.find( 'source' ).length ) {
 359                         if ( audio.is(':hidden') ) {
 360                                 audio.show();
 361                         }
 362                         this.media = MediaDetails.prepareSrc( audio.get(0) );
 363                 } else {
 364                         audio.hide();
 365                         this.media = false;
 366                 }
 367
 368                 return this;
 369         }
 370 });
 371
 372 module.exports = AudioDetails;
 373
 374 },{}],6:[function(require,module,exports){
 375 /*globals wp */
 376
 377 /**
 378  * wp.media.view.MediaFrame.AudioDetails
 379  *
 380  * @class
 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
 389  */
 390 var MediaDetails = wp.media.view.MediaFrame.MediaDetails,
 391         MediaLibrary = wp.media.controller.MediaLibrary,
 392
 393         l10n = wp.media.view.l10n,
 394         AudioDetails;
 395
 396 AudioDetails = MediaDetails.extend({
 397         defaults: {
 398                 id:      'audio',
 399                 url:     '',
 400                 menu:    'audio-details',
 401                 content: 'audio-details',
 402                 toolbar: 'audio-details',
 403                 type:    'link',
 404                 title:    l10n.audioDetailsTitle,
 405                 priority: 120
 406         },
 407
 408         initialize: function( options ) {
 409                 options.DetailsView = wp.media.view.AudioDetails;
 410                 options.cancelText = l10n.audioDetailsCancel;
 411                 options.addText = l10n.audioAddSourceTitle;
 412
 413                 MediaDetails.prototype.initialize.call( this, options );
 414         },
 415
 416         bindHandlers: function() {
 417                 MediaDetails.prototype.bindHandlers.apply( this, arguments );
 418
 419                 this.on( 'toolbar:render:replace-audio', this.renderReplaceToolbar, this );
 420                 this.on( 'toolbar:render:add-audio-source', this.renderAddSourceToolbar, this );
 421         },
 422
 423         createStates: function() {
 424                 this.states.add([
 425                         new wp.media.controller.AudioDetails( {
 426                                 media: this.media
 427                         } ),
 428
 429                         new MediaLibrary( {
 430                                 type: 'audio',
 431                                 id: 'replace-audio',
 432                                 title: l10n.audioReplaceTitle,
 433                                 toolbar: 'replace-audio',
 434                                 media: this.media,
 435                                 menu: 'audio-details'
 436                         } ),
 437
 438                         new MediaLibrary( {
 439                                 type: 'audio',
 440                                 id: 'add-audio-source',
 441                                 title: l10n.audioAddSourceTitle,
 442                                 toolbar: 'add-audio-source',
 443                                 media: this.media,
 444                                 menu: false
 445                         } )
 446                 ]);
 447         }
 448 });
 449
 450 module.exports = AudioDetails;
 451
 452 },{}],7:[function(require,module,exports){
 453 /*globals wp */
 454
 455 /**
 456  * wp.media.view.MediaFrame.MediaDetails
 457  *
 458  * @class
 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
 466  */
 467 var Select = wp.media.view.MediaFrame.Select,
 468         l10n = wp.media.view.l10n,
 469         MediaDetails;
 470
 471 MediaDetails = Select.extend({
 472         defaults: {
 473                 id:      'media',
 474                 url:     '',
 475                 menu:    'media-details',
 476                 content: 'media-details',
 477                 toolbar: 'media-details',
 478                 type:    'link',
 479                 priority: 120
 480         },
 481
 482         initialize: function( options ) {
 483                 this.DetailsView = options.DetailsView;
 484                 this.cancelText = options.cancelText;
 485                 this.addText = options.addText;
 486
 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 );
 490         },
 491
 492         bindHandlers: function() {
 493                 var menu = this.defaults.menu;
 494
 495                 Select.prototype.bindHandlers.apply( this, arguments );
 496
 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 );
 501         },
 502
 503         renderDetailsContent: function() {
 504                 var view = new this.DetailsView({
 505                         controller: this,
 506                         model: this.state().media,
 507                         attachment: this.state().media.attachment
 508                 }).render();
 509
 510                 this.content.set( view );
 511         },
 512
 513         renderMenu: function( view ) {
 514                 var lastState = this.lastState(),
 515                         previous = lastState && lastState.id,
 516                         frame = this;
 517
 518                 view.set({
 519                         cancel: {
 520                                 text:     this.cancelText,
 521                                 priority: 20,
 522                                 click:    function() {
 523                                         if ( previous ) {
 524                                                 frame.setState( previous );
 525                                         } else {
 526                                                 frame.close();
 527                                         }
 528                                 }
 529                         },
 530                         separateCancel: new wp.media.View({
 531                                 className: 'separator',
 532                                 priority: 40
 533                         })
 534                 });
 535
 536         },
 537
 538         setPrimaryButton: function(text, handler) {
 539                 this.toolbar.set( new wp.media.view.Toolbar({
 540                         controller: this,
 541                         items: {
 542                                 button: {
 543                                         style:    'primary',
 544                                         text:     text,
 545                                         priority: 80,
 546                                         click:    function() {
 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 );
 551                                                 controller.reset();
 552                                         }
 553                                 }
 554                         }
 555                 }) );
 556         },
 557
 558         renderDetailsToolbar: function() {
 559                 this.setPrimaryButton( l10n.update, function( controller, state ) {
 560                         controller.close();
 561                         state.trigger( 'update', controller.media.toJSON() );
 562                 } );
 563         },
 564
 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() );
 570                 } );
 571         },
 572
 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() );
 578                 } );
 579         }
 580 });
 581
 582 module.exports = MediaDetails;
 583
 584 },{}],8:[function(require,module,exports){
 585 /*globals wp, _ */
 586
 587 /**
 588  * wp.media.view.MediaFrame.VideoDetails
 589  *
 590  * @class
 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
 599  */
 600 var MediaDetails = wp.media.view.MediaFrame.MediaDetails,
 601         MediaLibrary = wp.media.controller.MediaLibrary,
 602         l10n = wp.media.view.l10n,
 603         VideoDetails;
 604
 605 VideoDetails = MediaDetails.extend({
 606         defaults: {
 607                 id:      'video',
 608                 url:     '',
 609                 menu:    'video-details',
 610                 content: 'video-details',
 611                 toolbar: 'video-details',
 612                 type:    'link',
 613                 title:    l10n.videoDetailsTitle,
 614                 priority: 120
 615         },
 616
 617         initialize: function( options ) {
 618                 options.DetailsView = wp.media.view.VideoDetails;
 619                 options.cancelText = l10n.videoDetailsCancel;
 620                 options.addText = l10n.videoAddSourceTitle;
 621
 622                 MediaDetails.prototype.initialize.call( this, options );
 623         },
 624
 625         bindHandlers: function() {
 626                 MediaDetails.prototype.bindHandlers.apply( this, arguments );
 627
 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 );
 632         },
 633
 634         createStates: function() {
 635                 this.states.add([
 636                         new wp.media.controller.VideoDetails({
 637                                 media: this.media
 638                         }),
 639
 640                         new MediaLibrary( {
 641                                 type: 'video',
 642                                 id: 'replace-video',
 643                                 title: l10n.videoReplaceTitle,
 644                                 toolbar: 'replace-video',
 645                                 media: this.media,
 646                                 menu: 'video-details'
 647                         } ),
 648
 649                         new MediaLibrary( {
 650                                 type: 'video',
 651                                 id: 'add-video-source',
 652                                 title: l10n.videoAddSourceTitle,
 653                                 toolbar: 'add-video-source',
 654                                 media: this.media,
 655                                 menu: false
 656                         } ),
 657
 658                         new MediaLibrary( {
 659                                 type: 'image',
 660                                 id: 'select-poster-image',
 661                                 title: l10n.videoSelectPosterImageTitle,
 662                                 toolbar: 'select-poster-image',
 663                                 media: this.media,
 664                                 menu: 'video-details'
 665                         } ),
 666
 667                         new MediaLibrary( {
 668                                 type: 'text',
 669                                 id: 'add-track',
 670                                 title: l10n.videoAddTrackTitle,
 671                                 toolbar: 'add-track',
 672                                 media: this.media,
 673                                 menu: 'video-details'
 674                         } )
 675                 ]);
 676         },
 677
 678         renderSelectPosterImageToolbar: function() {
 679                 this.setPrimaryButton( l10n.videoSelectPosterImageTitle, function( controller, state ) {
 680                         var urls = [], attachment = state.get( 'selection' ).single();
 681
 682                         controller.media.set( 'poster', attachment.get( 'url' ) );
 683                         state.trigger( 'set-poster-image', controller.media.toJSON() );
 684
 685                         _.each( wp.media.view.settings.embedExts, function (ext) {
 686                                 if ( controller.media.get( ext ) ) {
 687                                         urls.push( controller.media.get( ext ) );
 688                                 }
 689                         } );
 690
 691                         wp.ajax.send( 'set-attachment-thumbnail', {
 692                                 data : {
 693                                         urls: urls,
 694                                         thumbnail_id: attachment.get( 'id' )
 695                                 }
 696                         } );
 697                 } );
 698         },
 699
 700         renderAddTrackToolbar: function() {
 701                 this.setPrimaryButton( l10n.videoAddTrackTitle, function( controller, state ) {
 702                         var attachment = state.get( 'selection' ).single(),
 703                                 content = controller.media.get( 'content' );
 704
 705                         if ( -1 === content.indexOf( attachment.get( 'url' ) ) ) {
 706                                 content += [
 707                                         '<track srclang="en" label="English" kind="subtitles" src="',
 708                                         attachment.get( 'url' ),
 709                                         '" />'
 710                                 ].join('');
 711
 712                                 controller.media.set( 'content', content );
 713                         }
 714                         state.trigger( 'add-track', controller.media.toJSON() );
 715                 } );
 716         }
 717 });
 718
 719 module.exports = VideoDetails;
 720
 721 },{}],9:[function(require,module,exports){
 722 /*global wp, jQuery, _, MediaElementPlayer */
 723
 724 /**
 725  * wp.media.view.MediaDetails
 726  *
 727  * @class
 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
 733  */
 734 var AttachmentDisplay = wp.media.view.Settings.AttachmentDisplay,
 735         $ = jQuery,
 736         MediaDetails;
 737
 738 MediaDetails = AttachmentDisplay.extend({
 739         initialize: function() {
 740                 _.bindAll(this, 'success');
 741                 this.players = [];
 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'
 752                 } );
 753
 754                 AttachmentDisplay.prototype.initialize.apply( this, arguments );
 755         },
 756
 757         prepare: function() {
 758                 return _.defaults({
 759                         model: this.model.toJSON()
 760                 }, this.options );
 761         },
 762
 763         /**
 764          * Remove a setting's UI when the model unsets it
 765          *
 766          * @fires wp.media.view.MediaDetails#media:setting:remove
 767          *
 768          * @param {Event} e
 769          */
 770         removeSetting : function(e) {
 771                 var wrap = $( e.currentTarget ).parent(), setting;
 772                 setting = wrap.find( 'input' ).data( 'setting' );
 773
 774                 if ( setting ) {
 775                         this.model.unset( setting );
 776                         this.trigger( 'media:setting:remove', this );
 777                 }
 778
 779                 wrap.remove();
 780         },
 781
 782         /**
 783          *
 784          * @fires wp.media.view.MediaDetails#media:setting:remove
 785          */
 786         setTracks : function() {
 787                 var tracks = '';
 788
 789                 _.each( this.$('.content-track'), function(track) {
 790                         tracks += $( track ).val();
 791                 } );
 792
 793                 this.model.set( 'content', tracks );
 794                 this.trigger( 'media:setting:remove', this );
 795         },
 796
 797         addSource : function( e ) {
 798                 this.controller.lastMime = $( e.currentTarget ).data( 'mime' );
 799                 this.controller.setState( 'add-' + this.controller.defaults.id + '-source' );
 800         },
 801
 802         loadPlayer: function () {
 803                 this.players.push( new MediaElementPlayer( this.media, this.settings ) );
 804                 this.scriptXhr = false;
 805         },
 806
 807         /**
 808          * @global MediaElementPlayer
 809          */
 810         setPlayer : function() {
 811                 var baseSettings;
 812
 813                 if ( this.players.length || ! this.media || this.scriptXhr ) {
 814                         return;
 815                 }
 816
 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 ) );
 820                 } else {
 821                         this.loadPlayer();
 822                 }
 823         },
 824
 825         /**
 826          * @abstract
 827          */
 828         setMedia : function() {
 829                 return this;
 830         },
 831
 832         success : function(mejs) {
 833                 var autoplay = mejs.attributes.autoplay && 'false' !== mejs.attributes.autoplay;
 834
 835                 if ( 'flash' === mejs.pluginType && autoplay ) {
 836                         mejs.addEventListener( 'canplay', function() {
 837                                 mejs.play();
 838                         }, false );
 839                 }
 840
 841                 this.mejs = mejs;
 842         },
 843
 844         /**
 845          * @returns {media.view.MediaDetails} Returns itself to allow chaining
 846          */
 847         render: function() {
 848                 AttachmentDisplay.prototype.render.apply( this, arguments );
 849
 850                 setTimeout( _.bind( function() {
 851                         this.resetFocus();
 852                 }, this ), 10 );
 853
 854                 this.settings = _.defaults( {
 855                         success : this.success
 856                 }, wp.media.mixin.mejsSettings );
 857
 858                 return this.setMedia();
 859         },
 860
 861         resetFocus: function() {
 862                 this.$( '.embed-media-settings' ).scrollTop( 0 );
 863         }
 864 }, {
 865         instances : 0,
 866         /**
 867          * When multiple players in the DOM contain the same src, things get weird.
 868          *
 869          * @param {HTMLElement} elem
 870          * @returns {HTMLElement}
 871          */
 872         prepareSrc : function( elem ) {
 873                 var i = MediaDetails.instances++;
 874                 _.each( $( elem ).find( 'source' ), function( source ) {
 875                         source.src = [
 876                                 source.src,
 877                                 source.src.indexOf('?') > -1 ? '&' : '?',
 878                                 '_=',
 879                                 i
 880                         ].join('');
 881                 } );
 882
 883                 return elem;
 884         }
 885 });
 886
 887 module.exports = MediaDetails;
 888
 889 },{}],10:[function(require,module,exports){
 890 /*globals wp */
 891
 892 /**
 893  * wp.media.view.VideoDetails
 894  *
 895  * @class
 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
 902  */
 903 var MediaDetails = wp.media.view.MediaDetails,
 904         VideoDetails;
 905
 906 VideoDetails = MediaDetails.extend({
 907         className: 'video-details',
 908         template:  wp.template('video-details'),
 909
 910         setMedia: function() {
 911                 var video = this.$('.wp-video-shortcode');
 912
 913                 if ( video.find( 'source' ).length ) {
 914                         if ( video.is(':hidden') ) {
 915                                 video.show();
 916                         }
 917
 918                         if ( ! video.hasClass( 'youtube-video' ) && ! video.hasClass( 'vimeo-video' ) ) {
 919                                 this.media = MediaDetails.prepareSrc( video.get(0) );
 920                         } else {
 921                                 this.media = video.get(0);
 922                         }
 923                 } else {
 924                         video.hide();
 925                         this.media = false;
 926                 }
 927
 928                 return this;
 929         }
 930 });
 931
 932 module.exports = VideoDetails;
 933
 934 },{}]},{},[1]);