From 75ce48ef702e6fc79340ec447c816fef763cfd34 Mon Sep 17 00:00:00 2001 From: Konstantin Obenland Date: Thu, 5 Oct 2017 00:21:27 +0000 Subject: [PATCH] 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 | 41 ++++++++++++------- src/wp-admin/js/widgets/media-widgets.js | 6 --- .../widgets/class-wp-widget-media-video.php | 26 +++++++----- .../js/widgets/test-media-video-widget.js | 6 --- 4 files changed, 41 insertions(+), 38 deletions(-) diff --git a/src/wp-admin/js/widgets/media-video-widget.js b/src/wp-admin/js/widgets/media-video-widget.js index 9eb532caa6..1b0febb68a 100644 --- a/src/wp-admin/js/widgets/media-video-widget.js +++ b/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' ); - parsedUrl.href = url; - return /vimeo|youtu\.?be/.test( parsedUrl.host ); + return false; }, /** @@ -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(); diff --git a/src/wp-admin/js/widgets/media-widgets.js b/src/wp-admin/js/widgets/media-widgets.js index 5e7383c6fc..ad21e37a7e 100644 --- a/src/wp-admin/js/widgets/media-widgets.js +++ b/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\/([^/]+)/; diff --git a/src/wp-includes/widgets/class-wp-widget-media-video.php b/src/wp-includes/widgets/class-wp-widget-media-video.php index 5ba0526961..a171ca8c4f 100644 --- a/src/wp-includes/widgets/class-wp-widget-media-video.php +++ b/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( - array_merge( - $instance, - compact( 'src' ) - ), - $instance['content'] - ); + echo wp_video_shortcode( + array_merge( + $instance, + compact( 'src' ) + ), + $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 {

- <# } else if ( data.is_hosted_embed && data.model.poster ) { #> + <# } else if ( data.is_oembed && data.model.poster ) { #> - <# } else if ( data.is_hosted_embed ) { #> + <# } else if ( data.is_oembed ) { #> diff --git a/tests/qunit/wp-admin/js/widgets/test-media-video-widget.js b/tests/qunit/wp-admin/js/widgets/test-media-video-widget.js index 0abd1c0289..776ea5f952 100644 --- a/tests/qunit/wp-admin/js/widgets/test-media-video-widget.js +++ b/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 ) {