Widgets: Allow oEmbeds in video widget.

Opens up video embeds to all supported video oEmbed providers.

Props westonruter.
See #42039.


git-svn-id: https://develop.svn.wordpress.org/trunk@41759 602fd350-edb4-49c9-b593-d223f7449a82

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

@@ -136,13 +136,13 @@
 		/**
 		 * Whether a url is a supported external host.
 		 *
+		 * @deprecated since 4.9.
+		 *
 		 * @param {String} url - Video url.
 		 * @returns {boolean} Whether url is a supported video host.
 		 */
 		isHostedVideo: function isHostedVideo( url ) {
-			var parsedUrl = document.createElement( 'a' );
+			return false;
-			parsedUrl.href = url;
-			return /vimeo|youtu\.?be/.test( parsedUrl.host );
 		},
 
 		/**
@@ -151,7 +151,7 @@
 		 * @returns {void}
 		 */
 		renderPreview: function renderPreview() {
-			var control = this, previewContainer, previewTemplate, attachmentId, attachmentUrl, poster, isHostedEmbed = false, mime, error;
+			var control = this, previewContainer, previewTemplate, attachmentId, attachmentUrl, poster, html = '', isOEmbed = false, mime, error, urlParser, matches;
 			attachmentId = control.model.get( 'attachment_id' );
 			attachmentUrl = control.model.get( 'url' );
 			error = control.model.get( 'error' );
@@ -160,21 +160,31 @@
 				return;
 			}
 
-			if ( ! attachmentId && attachmentUrl ) {
-				isHostedEmbed = control.isHostedVideo( attachmentUrl );
-			}
-
-			if ( isHostedEmbed ) {
-				control.fetchEmbed();
-				poster = control.oembedResponses[ attachmentUrl ] ? control.oembedResponses[ attachmentUrl ].thumbnail_url : null;
-			}
-
 			// Verify the selected attachment mime is supported.
 			mime = control.selectedAttachment.get( 'mime' );
 			if ( mime && attachmentId ) {
 				if ( ! _.contains( _.values( wp.media.view.settings.embedMimes ), mime ) ) {
 					error = 'unsupported_file_type';
 				}
+			} else if ( ! attachmentId ) {
+				urlParser = document.createElement( 'a' );
+				urlParser.href = attachmentUrl;
+				matches = urlParser.pathname.toLowerCase().match( /\.(\w+)$/ );
+				if ( matches ) {
+					if ( ! _.contains( _.keys( wp.media.view.settings.embedMimes ), matches[1] ) ) {
+						error = 'unsupported_file_type';
+					}
+				} else {
+					isOEmbed = true;
+				}
+			}
+
+			if ( isOEmbed ) {
+				control.fetchEmbed();
+				if ( control.oembedResponses[ attachmentUrl ] ) {
+					poster = control.oembedResponses[ attachmentUrl ].thumbnail_url;
+					html = control.oembedResponses[ attachmentUrl ].html.replace( /\swidth="\d+"/, ' width="100%"' ).replace( /\sheight="\d+"/, '' );
+				}
 			}
 
 			previewContainer = control.$el.find( '.media-widget-preview' );
@@ -182,11 +192,12 @@
 
 			previewContainer.html( previewTemplate({
 				model: {
-					attachment_id: control.model.get( 'attachment_id' ),
+					attachment_id: attachmentId,
+					html: html,
 					src: attachmentUrl,
 					poster: poster
 				},
-				is_hosted_embed: isHostedEmbed,
+				is_oembed: isOEmbed,
 				error: error
 			}));
 			wp.mediaelement.initialize();

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

@@ -184,12 +184,6 @@ wp.mediaWidgets = ( function( $ ) {
 							return;
 						}
 
-						// If video, test for Vimeo and YouTube, otherwise, renderFail(). This should be removed once #34115 is resolved.
-						if ( 'video' === this.controller.options.mimeType && ! /vimeo|youtu\.?be/.test( urlParser.host ) ) {
-							embedLinkView.renderFail();
-							return;
-						}
-
 						// Support YouTube embed links.
 						url = embedLinkView.model.get( 'url' );
 						re = /https?:\/\/www\.youtube\.com\/embed\/([^/]+)/;

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

@@ -121,17 +121,21 @@ class WP_Widget_Media_Video extends WP_Widget_Media {
 			return;
 		}
 
-		add_filter( 'wp_video_shortcode', array( $this, 'inject_video_max_width_style' ) );
+		if ( $attachment ) {
+			add_filter( 'wp_video_shortcode', array( $this, 'inject_video_max_width_style' ) );
 
-		echo wp_video_shortcode(
+			echo wp_video_shortcode(
-			array_merge(
+				array_merge(
-				$instance,
+					$instance,
-				compact( 'src' )
+					compact( 'src' )
-			),
+				),
-			$instance['content']
+				$instance['content']
-		);
+			);
 
-		remove_filter( 'wp_video_shortcode', array( $this, 'inject_video_max_width_style' ) );
+			remove_filter( 'wp_video_shortcode', array( $this, 'inject_video_max_width_style' ) );
+		} else {
+			echo $this->inject_video_max_width_style( wp_oembed_get( $src ) );
+		}
 	}
 
 	/**
@@ -227,11 +231,11 @@ class WP_Widget_Media_Video extends WP_Widget_Media {
 				<div class="notice notice-error notice-alt">
 					<p><?php _e( 'Unable to preview media due to an unknown error.' ); ?></p>
 				</div>
-			<# } else if ( data.is_hosted_embed && data.model.poster ) { #>
+			<# } else if ( data.is_oembed && data.model.poster ) { #>
 				<a href="{{ data.model.src }}" target="_blank" class="media-widget-video-link">
 					<img src="{{ data.model.poster }}" />
 				</a>
-			<# } else if ( data.is_hosted_embed ) { #>
+			<# } else if ( data.is_oembed ) { #>
 				<a href="{{ data.model.src }}" target="_blank" class="media-widget-video-link no-poster">
 					<span class="dashicons dashicons-format-video"></span>
 				</a>

tests/qunit/wp-admin/js/widgets/test-media-video-widget.js

@@ -34,12 +34,6 @@
 		equal( mappedProps.title, undefined, 'mapMediaToModelProps should ignore title inputs' );
 		equal( mappedProps.loop, false, 'mapMediaToModelProps should set loop' );
 		equal( mappedProps.preload, 'meta', 'mapMediaToModelProps should set preload' );
-
-		// Test isHostedVideo().
-		equal( videoWidgetControlInstance.isHostedVideo( 'https://www.youtube.com/watch?v=OQSNhk5ICTI' ), true, 'isHostedVideo should return true for full YouTube url.' );
-		equal( videoWidgetControlInstance.isHostedVideo( 'https://youtu.be/OQSNhk5ICTI' ), true, 'isHostedVideo should return true for shortened youtube url' );
-		equal( videoWidgetControlInstance.isHostedVideo( 'https://vimeo.com/190372437' ), true, 'isHostedVideo should return true for vimeo url.' );
-		equal( videoWidgetControlInstance.isHostedVideo( 'https://wordpress.org/' ), false, 'isHostedVideo should return false for non-supported video url.' );
 	});
 
 	test( 'video widget control renderPreview', function( assert ) {