[Summary view] [Print] [Text view]

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