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 );
155