Ticket #42039: 42039.2.diff

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

@@ -136 +136 @@
                 /**
                  * 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 +151 @@
                  * @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 +160 @@
                                 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 +192 @@
 
                         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 +184 @@
                                                         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 +121 @@
                         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']
-                );
-
-                remove_filter( 'wp_video_shortcode', array( $this, 'inject_video_max_width_style' ) );
+                        echo wp_video_shortcode(
+                                array_merge(
+                                        $instance,
+                                        compact( 'src' )
+                                ),
+                                $instance['content']
+                        );
+
+                        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 +231 @@
                                 <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.model.html ) { #>
+                                {{{ data.model.html }}}
+                        <# } 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 +34 @@
                 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 ) {