1/**
  2 * @output wp-admin/js/widgets/media-video-widget.js
  3 */
  4
  5/* eslint consistent-this: [ "error", "control" ] */
  6(function( component ) {
  7	'use strict';
  8
  9	var VideoWidgetModel, VideoWidgetControl, VideoDetailsMediaFrame;
 10
 11	/**
 12	 * Custom video details frame that removes the replace-video state.
 13	 *
 14	 * @class    wp.mediaWidgets.controlConstructors~VideoDetailsMediaFrame
 15	 * @augments wp.media.view.MediaFrame.VideoDetails
 16	 *
 17	 * @private
 18	 */
 19	VideoDetailsMediaFrame = wp.media.view.MediaFrame.VideoDetails.extend(/** @lends wp.mediaWidgets.controlConstructors~VideoDetailsMediaFrame.prototype */{
 20
 21		/**
 22		 * Create the default states.
 23		 *
 24		 * @return {void}
 25		 */
 26		createStates: function createStates() {
 27			this.states.add([
 28				new wp.media.controller.VideoDetails({
 29					media: this.media
 30				}),
 31
 32				new wp.media.controller.MediaLibrary({
 33					type: 'video',
 34					id: 'add-video-source',
 35					title: wp.media.view.l10n.videoAddSourceTitle,
 36					toolbar: 'add-video-source',
 37					media: this.media,
 38					menu: false
 39				}),
 40
 41				new wp.media.controller.MediaLibrary({
 42					type: 'text',
 43					id: 'add-track',
 44					title: wp.media.view.l10n.videoAddTrackTitle,
 45					toolbar: 'add-track',
 46					media: this.media,
 47					menu: 'video-details'
 48				})
 49			]);
 50		}
 51	});
 52
 53	/**
 54	 * Video widget model.
 55	 *
 56	 * See WP_Widget_Video::enqueue_admin_scripts() for amending prototype from PHP exports.
 57	 *
 58	 * @class    wp.mediaWidgets.modelConstructors.media_video
 59	 * @augments wp.mediaWidgets.MediaWidgetModel
 60	 */
 61	VideoWidgetModel = component.MediaWidgetModel.extend({});
 62
 63	/**
 64	 * Video widget control.
 65	 *
 66	 * See WP_Widget_Video::enqueue_admin_scripts() for amending prototype from PHP exports.
 67	 *
 68	 * @class    wp.mediaWidgets.controlConstructors.media_video
 69	 * @augments wp.mediaWidgets.MediaWidgetControl
 70	 */
 71	VideoWidgetControl = component.MediaWidgetControl.extend(/** @lends wp.mediaWidgets.controlConstructors.media_video.prototype */{
 72
 73		/**
 74		 * Show display settings.
 75		 *
 76		 * @type {boolean}
 77		 */
 78		showDisplaySettings: false,
 79
 80		/**
 81		 * Cache of oembed responses.
 82		 *
 83		 * @type {Object}
 84		 */
 85		oembedResponses: {},
 86
 87		/**
 88		 * Map model props to media frame props.
 89		 *
 90		 * @param {Object} modelProps - Model props.
 91		 * @return {Object} Media frame props.
 92		 */
 93		mapModelToMediaFrameProps: function mapModelToMediaFrameProps( modelProps ) {
 94			var control = this, mediaFrameProps;
 95			mediaFrameProps = component.MediaWidgetControl.prototype.mapModelToMediaFrameProps.call( control, modelProps );
 96			mediaFrameProps.link = 'embed';
 97			return mediaFrameProps;
 98		},
 99
100		/**
101		 * Fetches embed data for external videos.
102		 *
103		 * @return {void}
104		 */
105		fetchEmbed: function fetchEmbed() {
106			var control = this, url;
107			url = control.model.get( 'url' );
108
109			// If we already have a local cache of the embed response, return.
110			if ( control.oembedResponses[ url ] ) {
111				return;
112			}
113
114			// If there is an in-flight embed request, abort it.
115			if ( control.fetchEmbedDfd && 'pending' === control.fetchEmbedDfd.state() ) {
116				control.fetchEmbedDfd.abort();
117			}
118
119			control.fetchEmbedDfd = wp.apiRequest({
120				url: wp.media.view.settings.oEmbedProxyUrl,
121				data: {
122					url: control.model.get( 'url' ),
123					maxwidth: control.model.get( 'width' ),
124					maxheight: control.model.get( 'height' ),
125					discover: false
126				},
127				type: 'GET',
128				dataType: 'json',
129				context: control
130			});
131
132			control.fetchEmbedDfd.done( function( response ) {
133				control.oembedResponses[ url ] = response;
134				control.renderPreview();
135			});
136
137			control.fetchEmbedDfd.fail( function() {
138				control.oembedResponses[ url ] = null;
139			});
140		},
141
142		/**
143		 * Whether a url is a supported external host.
144		 *
145		 * @deprecated since 4.9.
146		 *
147		 * @return {boolean} Whether url is a supported video host.
148		 */
149		isHostedVideo: function isHostedVideo() {
150			return true;
151		},
152
153		/**
154		 * Render preview.
155		 *
156		 * @return {void}
157		 */
158		renderPreview: function renderPreview() {
159			var control = this, previewContainer, previewTemplate, attachmentId, attachmentUrl, poster, html = '', isOEmbed = false, mime, error, urlParser, matches;
160			attachmentId = control.model.get( 'attachment_id' );
161			attachmentUrl = control.model.get( 'url' );
162			error = control.model.get( 'error' );
163
164			if ( ! attachmentId && ! attachmentUrl ) {
165				return;
166			}
167
168			// Verify the selected attachment mime is supported.
169			mime = control.selectedAttachment.get( 'mime' );
170			if ( mime && attachmentId ) {
171				if ( ! _.contains( _.values( wp.media.view.settings.embedMimes ), mime ) ) {
172					error = 'unsupported_file_type';
173				}
174			} else if ( ! attachmentId ) {
175				urlParser = document.createElement( 'a' );
176				urlParser.href = attachmentUrl;
177				matches = urlParser.pathname.toLowerCase().match( /\.(\w+)$/ );
178				if ( matches ) {
179					if ( ! _.contains( _.keys( wp.media.view.settings.embedMimes ), matches[1] ) ) {
180						error = 'unsupported_file_type';
181					}
182				} else {
183					isOEmbed = true;
184				}
185			}
186
187			if ( isOEmbed ) {
188				control.fetchEmbed();
189				if ( control.oembedResponses[ attachmentUrl ] ) {
190					poster = control.oembedResponses[ attachmentUrl ].thumbnail_url;
191					html = control.oembedResponses[ attachmentUrl ].html.replace( /\swidth="\d+"/, ' width="100%"' ).replace( /\sheight="\d+"/, '' );
192				}
193			}
194
195			previewContainer = control.$el.find( '.media-widget-preview' );
196			previewTemplate = wp.template( 'wp-media-widget-video-preview' );
197
198			previewContainer.html( previewTemplate({
199				model: {
200					attachment_id: attachmentId,
201					html: html,
202					src: attachmentUrl,
203					poster: poster
204				},
205				is_oembed: isOEmbed,
206				error: error
207			}));
208			wp.mediaelement.initialize();
209		},
210
211		/**
212		 * Open the media image-edit frame to modify the selected item.
213		 *
214		 * @return {void}
215		 */
216		editMedia: function editMedia() {
217			var control = this, mediaFrame, metadata, updateCallback;
218
219			metadata = control.mapModelToMediaFrameProps( control.model.toJSON() );
220
221			// Set up the media frame.
222			mediaFrame = new VideoDetailsMediaFrame({
223				frame: 'video',
224				state: 'video-details',
225				metadata: metadata
226			});
227			wp.media.frame = mediaFrame;
228			mediaFrame.$el.addClass( 'media-widget' );
229
230			updateCallback = function( mediaFrameProps ) {
231
232				// Update cached attachment object to avoid having to re-fetch. This also triggers re-rendering of preview.
233				control.selectedAttachment.set( mediaFrameProps );
234
235				control.model.set( _.extend(
236					_.omit( control.model.defaults(), 'title' ),
237					control.mapMediaToModelProps( mediaFrameProps ),
238					{ error: false }
239				) );
240			};
241
242			mediaFrame.state( 'video-details' ).on( 'update', updateCallback );
243			mediaFrame.state( 'replace-video' ).on( 'replace', updateCallback );
244			mediaFrame.on( 'close', function() {
245				mediaFrame.detach();
246			});
247
248			mediaFrame.open();
249		}
250	});
251
252	// Exports.
253	component.controlConstructors.media_video = VideoWidgetControl;
254	component.modelConstructors.media_video = VideoWidgetModel;
255
256})( wp.mediaWidgets );
257