media-audiovideo.js 27 KB

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