media-audio-widget.js 3.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150
  1. /* eslint consistent-this: [ "error", "control" ] */
  2. (function( component ) {
  3. 'use strict';
  4. var AudioWidgetModel, AudioWidgetControl, AudioDetailsMediaFrame;
  5. /**
  6. * Custom audio details frame that removes the replace-audio state.
  7. *
  8. * @class AudioDetailsMediaFrame
  9. * @constructor
  10. */
  11. AudioDetailsMediaFrame = wp.media.view.MediaFrame.AudioDetails.extend({
  12. /**
  13. * Create the default states.
  14. *
  15. * @returns {void}
  16. */
  17. createStates: function createStates() {
  18. this.states.add([
  19. new wp.media.controller.AudioDetails({
  20. media: this.media
  21. }),
  22. new wp.media.controller.MediaLibrary({
  23. type: 'audio',
  24. id: 'add-audio-source',
  25. title: wp.media.view.l10n.audioAddSourceTitle,
  26. toolbar: 'add-audio-source',
  27. media: this.media,
  28. menu: false
  29. })
  30. ]);
  31. }
  32. });
  33. /**
  34. * Audio widget model.
  35. *
  36. * See WP_Widget_Audio::enqueue_admin_scripts() for amending prototype from PHP exports.
  37. *
  38. * @class AudioWidgetModel
  39. * @constructor
  40. */
  41. AudioWidgetModel = component.MediaWidgetModel.extend({});
  42. /**
  43. * Audio widget control.
  44. *
  45. * See WP_Widget_Audio::enqueue_admin_scripts() for amending prototype from PHP exports.
  46. *
  47. * @class AudioWidgetModel
  48. * @constructor
  49. */
  50. AudioWidgetControl = component.MediaWidgetControl.extend({
  51. /**
  52. * Show display settings.
  53. *
  54. * @type {boolean}
  55. */
  56. showDisplaySettings: false,
  57. /**
  58. * Map model props to media frame props.
  59. *
  60. * @param {Object} modelProps - Model props.
  61. * @returns {Object} Media frame props.
  62. */
  63. mapModelToMediaFrameProps: function mapModelToMediaFrameProps( modelProps ) {
  64. var control = this, mediaFrameProps;
  65. mediaFrameProps = component.MediaWidgetControl.prototype.mapModelToMediaFrameProps.call( control, modelProps );
  66. mediaFrameProps.link = 'embed';
  67. return mediaFrameProps;
  68. },
  69. /**
  70. * Render preview.
  71. *
  72. * @returns {void}
  73. */
  74. renderPreview: function renderPreview() {
  75. var control = this, previewContainer, previewTemplate, attachmentId, attachmentUrl;
  76. attachmentId = control.model.get( 'attachment_id' );
  77. attachmentUrl = control.model.get( 'url' );
  78. if ( ! attachmentId && ! attachmentUrl ) {
  79. return;
  80. }
  81. previewContainer = control.$el.find( '.media-widget-preview' );
  82. previewTemplate = wp.template( 'wp-media-widget-audio-preview' );
  83. previewContainer.html( previewTemplate({
  84. model: {
  85. attachment_id: control.model.get( 'attachment_id' ),
  86. src: attachmentUrl
  87. },
  88. error: control.model.get( 'error' )
  89. }));
  90. wp.mediaelement.initialize();
  91. },
  92. /**
  93. * Open the media audio-edit frame to modify the selected item.
  94. *
  95. * @returns {void}
  96. */
  97. editMedia: function editMedia() {
  98. var control = this, mediaFrame, metadata, updateCallback;
  99. metadata = control.mapModelToMediaFrameProps( control.model.toJSON() );
  100. // Set up the media frame.
  101. mediaFrame = new AudioDetailsMediaFrame({
  102. frame: 'audio',
  103. state: 'audio-details',
  104. metadata: metadata
  105. });
  106. wp.media.frame = mediaFrame;
  107. mediaFrame.$el.addClass( 'media-widget' );
  108. updateCallback = function( mediaFrameProps ) {
  109. // Update cached attachment object to avoid having to re-fetch. This also triggers re-rendering of preview.
  110. control.selectedAttachment.set( mediaFrameProps );
  111. control.model.set( _.extend(
  112. control.model.defaults(),
  113. control.mapMediaToModelProps( mediaFrameProps ),
  114. { error: false }
  115. ) );
  116. };
  117. mediaFrame.state( 'audio-details' ).on( 'update', updateCallback );
  118. mediaFrame.state( 'replace-audio' ).on( 'replace', updateCallback );
  119. mediaFrame.on( 'close', function() {
  120. mediaFrame.detach();
  121. });
  122. mediaFrame.open();
  123. }
  124. });
  125. // Exports.
  126. component.controlConstructors.media_audio = AudioWidgetControl;
  127. component.modelConstructors.media_audio = AudioWidgetModel;
  128. })( wp.mediaWidgets );