Widgets: Harden logic for checking for valid media URLs.

* Update deprecated `isHostedVideo` method to always return `true` since all oEmbeds are now supported.
* Disable `scanImage` for non-image media widgets.
* Ensure embed URL field element is matched from current media frame instance due to bug where media frames are not destroyed upon closing.
* Update error message for invalid video URLs to ask user to check the URL for validity.

Props gk.loveweb, octalmage, westonruter.
See #42039, #40935.
Fixes #41052.

Built from https://develop.svn.wordpress.org/trunk@41933


git-svn-id: http://core.svn.wordpress.org/trunk@41767 1a063a9b-81f0-0310-95a4-ce76da25c4cd

wp-admin/js/widgets/media-video-widget.js

@@ -138,11 +138,10 @@
 		 *
 		 * @deprecated since 4.9.
 		 *
-		 * @param {String} url - Video url.
 		 * @returns {boolean} Whether url is a supported video host.
 		 */
 		isHostedVideo: function isHostedVideo() {
-			return false;
+			return true;
 		},
 
 		/**

wp-admin/js/widgets/media-video-widget.min.js

@@ -1 +1 @@
-!function(a){"use strict";var b,c,d;d=wp.media.view.MediaFrame.VideoDetails.extend({createStates:function(){this.states.add([new wp.media.controller.VideoDetails({media:this.media}),new wp.media.controller.MediaLibrary({type:"video",id:"add-video-source",title:wp.media.view.l10n.videoAddSourceTitle,toolbar:"add-video-source",media:this.media,menu:!1}),new wp.media.controller.MediaLibrary({type:"text",id:"add-track",title:wp.media.view.l10n.videoAddTrackTitle,toolbar:"add-track",media:this.media,menu:"video-details"})])}}),b=a.MediaWidgetModel.extend({}),c=a.MediaWidgetControl.extend({showDisplaySettings:!1,oembedResponses:{},mapModelToMediaFrameProps:function(b){var c,d=this;return c=a.MediaWidgetControl.prototype.mapModelToMediaFrameProps.call(d,b),c.link="embed",c},fetchEmbed:function(){var a,b=this;a=b.model.get("url"),b.oembedResponses[a]||(b.fetchEmbedDfd&&"pending"===b.fetchEmbedDfd.state()&&b.fetchEmbedDfd.abort(),b.fetchEmbedDfd=wp.apiRequest({url:wp.media.view.settings.oEmbedProxyUrl,data:{url:b.model.get("url"),maxwidth:b.model.get("width"),maxheight:b.model.get("height"),discover:!1},type:"GET",dataType:"json",context:b}),b.fetchEmbedDfd.done(function(c){b.oembedResponses[a]=c,b.renderPreview()}),b.fetchEmbedDfd.fail(function(){b.oembedResponses[a]=null}))},isHostedVideo:function(){return!1},renderPreview:function(){var a,b,c,d,e,f,g,h,i,j=this,k="",l=!1;c=j.model.get("attachment_id"),d=j.model.get("url"),g=j.model.get("error"),(c||d)&&(f=j.selectedAttachment.get("mime"),f&&c?_.contains(_.values(wp.media.view.settings.embedMimes),f)||(g="unsupported_file_type"):c||(h=document.createElement("a"),h.href=d,i=h.pathname.toLowerCase().match(/\.(\w+)$/),i?_.contains(_.keys(wp.media.view.settings.embedMimes),i[1])||(g="unsupported_file_type"):l=!0),l&&(j.fetchEmbed(),j.oembedResponses[d]&&(e=j.oembedResponses[d].thumbnail_url,k=j.oembedResponses[d].html.replace(/\swidth="\d+"/,' width="100%"').replace(/\sheight="\d+"/,""))),a=j.$el.find(".media-widget-preview"),b=wp.template("wp-media-widget-video-preview"),a.html(b({model:{attachment_id:c,html:k,src:d,poster:e},is_oembed:l,error:g})),wp.mediaelement.initialize())},editMedia:function(){var a,b,c,e=this;b=e.mapModelToMediaFrameProps(e.model.toJSON()),a=new d({frame:"video",state:"video-details",metadata:b}),wp.media.frame=a,a.$el.addClass("media-widget"),c=function(a){e.selectedAttachment.set(a),e.model.set(_.extend(_.omit(e.model.defaults(),"title"),e.mapMediaToModelProps(a),{error:!1}))},a.state("video-details").on("update",c),a.state("replace-video").on("replace",c),a.on("close",function(){a.detach()}),a.open()}}),a.controlConstructors.media_video=c,a.modelConstructors.media_video=b}(wp.mediaWidgets);
+!function(a){"use strict";var b,c,d;d=wp.media.view.MediaFrame.VideoDetails.extend({createStates:function(){this.states.add([new wp.media.controller.VideoDetails({media:this.media}),new wp.media.controller.MediaLibrary({type:"video",id:"add-video-source",title:wp.media.view.l10n.videoAddSourceTitle,toolbar:"add-video-source",media:this.media,menu:!1}),new wp.media.controller.MediaLibrary({type:"text",id:"add-track",title:wp.media.view.l10n.videoAddTrackTitle,toolbar:"add-track",media:this.media,menu:"video-details"})])}}),b=a.MediaWidgetModel.extend({}),c=a.MediaWidgetControl.extend({showDisplaySettings:!1,oembedResponses:{},mapModelToMediaFrameProps:function(b){var c,d=this;return c=a.MediaWidgetControl.prototype.mapModelToMediaFrameProps.call(d,b),c.link="embed",c},fetchEmbed:function(){var a,b=this;a=b.model.get("url"),b.oembedResponses[a]||(b.fetchEmbedDfd&&"pending"===b.fetchEmbedDfd.state()&&b.fetchEmbedDfd.abort(),b.fetchEmbedDfd=wp.apiRequest({url:wp.media.view.settings.oEmbedProxyUrl,data:{url:b.model.get("url"),maxwidth:b.model.get("width"),maxheight:b.model.get("height"),discover:!1},type:"GET",dataType:"json",context:b}),b.fetchEmbedDfd.done(function(c){b.oembedResponses[a]=c,b.renderPreview()}),b.fetchEmbedDfd.fail(function(){b.oembedResponses[a]=null}))},isHostedVideo:function(){return!0},renderPreview:function(){var a,b,c,d,e,f,g,h,i,j=this,k="",l=!1;c=j.model.get("attachment_id"),d=j.model.get("url"),g=j.model.get("error"),(c||d)&&(f=j.selectedAttachment.get("mime"),f&&c?_.contains(_.values(wp.media.view.settings.embedMimes),f)||(g="unsupported_file_type"):c||(h=document.createElement("a"),h.href=d,i=h.pathname.toLowerCase().match(/\.(\w+)$/),i?_.contains(_.keys(wp.media.view.settings.embedMimes),i[1])||(g="unsupported_file_type"):l=!0),l&&(j.fetchEmbed(),j.oembedResponses[d]&&(e=j.oembedResponses[d].thumbnail_url,k=j.oembedResponses[d].html.replace(/\swidth="\d+"/,' width="100%"').replace(/\sheight="\d+"/,""))),a=j.$el.find(".media-widget-preview"),b=wp.template("wp-media-widget-video-preview"),a.html(b({model:{attachment_id:c,html:k,src:d,poster:e},is_oembed:l,error:g})),wp.mediaelement.initialize())},editMedia:function(){var a,b,c,e=this;b=e.mapModelToMediaFrameProps(e.model.toJSON()),a=new d({frame:"video",state:"video-details",metadata:b}),wp.media.frame=a,a.$el.addClass("media-widget"),c=function(a){e.selectedAttachment.set(a),e.model.set(_.extend(_.omit(e.model.defaults(),"title"),e.mapMediaToModelProps(a),{error:!1}))},a.state("video-details").on("update",c),a.state("replace-video").on("replace",c),a.on("close",function(){a.detach()}),a.open()}}),a.controlConstructors.media_video=c,a.modelConstructors.media_video=b}(wp.mediaWidgets);

wp-admin/js/widgets/media-widgets.js

@@ -84,6 +84,23 @@ wp.mediaWidgets = ( function( $ ) {
 	 */
 	component.MediaEmbedView = wp.media.view.Embed.extend({
 
+		/**
+		 * Initialize.
+		 *
+		 * @since 4.9.0
+		 *
+		 * @param {object} options - Options.
+		 * @returns {void}
+		 */
+		initialize: function( options ) {
+			var view = this, embedController; // eslint-disable-line consistent-thi
+			wp.media.view.Embed.prototype.initialize.call( view, options );
+			if ( 'image' !== view.controller.options.mimeType ) {
+				embedController = view.controller.states.get( 'embed' );
+				embedController.off( 'scan', embedController.scanImage, embedController );
+			}
+		},
+
 		/**
 		 * Refresh embed view.
 		 *
@@ -139,6 +156,33 @@ wp.mediaWidgets = ( function( $ ) {
 						}
 					},
 
+					/**
+					 * Update oEmbed.
+					 *
+					 * @since 4.9.0
+					 *
+					 * @returns {void}
+					 */
+					updateoEmbed: function() {
+						var embedLinkView = this, url; // eslint-disable-line consistent-this
+
+						url = embedLinkView.model.get( 'url' );
+
+						// Abort if the URL field was emptied out.
+						if ( ! url ) {
+							embedLinkView.setErrorNotice( '' );
+							embedLinkView.setAddToWidgetButtonDisabled( true );
+							return;
+						}
+
+						if ( ! url.match( /^(http|https):\/\/.+\// ) ) {
+							embedLinkView.controller.$el.find( '#embed-url-field' ).addClass( 'invalid' );
+							embedLinkView.setAddToWidgetButtonDisabled( true );
+						}
+
+						wp.media.view.EmbedLink.prototype.updateoEmbed.call( embedLinkView );
+					},
+
 					/**
 					 * Fetch media.
 					 *
@@ -146,17 +190,12 @@ wp.mediaWidgets = ( function( $ ) {
 					 */
 					fetch: function() {
 						var embedLinkView = this, fetchSuccess, matches, fileExt, urlParser, url, re, youTubeEmbedMatch; // eslint-disable-line consistent-this
+						url = embedLinkView.model.get( 'url' );
 
 						if ( embedLinkView.dfd && 'pending' === embedLinkView.dfd.state() ) {
 							embedLinkView.dfd.abort();
 						}
 
-						// Abort if the URL field was emptied out.
-						if ( ! embedLinkView.model.get( 'url' ) ) {
-							embedLinkView.setErrorNotice( '' );
-							return;
-						}
-
 						fetchSuccess = function( response ) {
 							embedLinkView.renderoEmbed({
 								data: {
@@ -164,13 +203,13 @@ wp.mediaWidgets = ( function( $ ) {
 								}
 							});
 
-							$( '#embed-url-field' ).removeClass( 'invalid' );
+							embedLinkView.controller.$el.find( '#embed-url-field' ).removeClass( 'invalid' );
 							embedLinkView.setErrorNotice( '' );
 							embedLinkView.setAddToWidgetButtonDisabled( false );
 						};
 
 						urlParser = document.createElement( 'a' );
-						urlParser.href = embedLinkView.model.get( 'url' );
+						urlParser.href = url;
 						matches = urlParser.pathname.toLowerCase().match( /\.(\w+)$/ );
 						if ( matches ) {
 							fileExt = matches[1];
@@ -185,7 +224,6 @@ wp.mediaWidgets = ( function( $ ) {
 						}
 
 						// Support YouTube embed links.
-						url = embedLinkView.model.get( 'url' );
 						re = /https?:\/\/www\.youtube\.com\/embed\/([^/]+)/;
 						youTubeEmbedMatch = re.exec( url );
 						if ( youTubeEmbedMatch ) {
@@ -228,7 +266,7 @@ wp.mediaWidgets = ( function( $ ) {
 					 */
 					renderFail: function renderFail() {
 						var embedLinkView = this; // eslint-disable-line consistent-this
-						$( '#embed-url-field' ).addClass( 'invalid' );
+						embedLinkView.controller.$el.find( '#embed-url-field' ).addClass( 'invalid' );
 						embedLinkView.setErrorNotice( embedLinkView.controller.options.invalidEmbedTypeError || 'ERROR' );
 						embedLinkView.setAddToWidgetButtonDisabled( true );
 					}

wp-includes/version.php

@@ -4,7 +4,7 @@
  *
  * @global string $wp_version
  */
-$wp_version = '4.9-beta2-41932';
+$wp_version = '4.9-beta2-41933';
 
 /**
  * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.

wp-includes/widgets/class-wp-widget-media-video.php

@@ -41,7 +41,7 @@ class WP_Widget_Media_Video extends WP_Widget_Media {
 			'media_library_state_multi' => _n_noop( 'Video Widget (%d)', 'Video Widget (%d)' ),
 			'media_library_state_single' => __( 'Video Widget' ),
 			/* translators: %s: a list of valid video file extensions */
-			'unsupported_file_type' => sprintf( __( 'Sorry, we can&#8217;t display the video file type selected. Please select a supported video file (%s) or stream (e.g. YouTube and Vimeo) instead.' ), '<code>.' . implode( '</code>, <code>.', wp_get_video_extensions() ) . '</code>' ),
+			'unsupported_file_type' => sprintf( __( 'Sorry, we can&#8217;t load the video at the supplied URL. Please check that the URL is for a supported video file (%s) or stream (e.g. YouTube and Vimeo).' ), '<code>.' . implode( '</code>, <code>.', wp_get_video_extensions() ) . '</code>' ),
 		) );
 	}