Ticket #40771: 40771-1.diff

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

@@ -98 +98 @@
                  */
                 fetchEmbed: function fetchEmbed() {
                         var control = this, url;
-                        url = control.model.get( 'url' );
+                        url = control.model.get( 'url' ).trim();
 
                         // If we already have a local cache of the embed response, return.
                         if ( control.oembedResponses[ url ] ) {
@@ -113 +113 @@
                         control.fetchEmbedDfd = jQuery.ajax({
                                 url: wp.media.view.settings.oEmbedProxyUrl,
                                 data: {
-                                        url: control.model.get( 'url' ),
+                                        url: url,
                                         maxwidth: control.model.get( 'width' ),
                                         maxheight: control.model.get( 'height' ),
                                         _wpnonce: wp.media.view.settings.nonce.wpRestApi,
@@ -142 +142 @@
                 renderPreview: function renderPreview() {
                         var control = this, previewContainer, previewTemplate, attachmentId, attachmentUrl, poster, isHostedEmbed = false, parsedUrl, mime, error;
                         attachmentId = control.model.get( 'attachment_id' );
-                        attachmentUrl = control.model.get( 'url' );
+                        attachmentUrl = control.model.get( 'url' ).trim();
                         error = control.model.get( 'error' );
 
                         if ( ! attachmentId && ! attachmentUrl ) {

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

@@ -142 +142 @@
                                         /**
                                          * Fetch media.
                                          *
-                                         * This is a TEMPORARY measure until the WP API supports an oEmbed proxy endpoint. See #40450.
-                                         *
-                                         * @see https://core.trac.wordpress.org/ticket/40450
                                          * @returns {void}
                                          */
                                         fetch: function() {
-                                                var embedLinkView = this, fetchSuccess, matches, fileExt, urlParser; // eslint-disable-line consistent-this
+                                                var embedLinkView = this, fetchSuccess, matches, fileExt, urlParser, url; // eslint-disable-line consistent-this
+                                                url = embedLinkView.model.get( 'url' ).trim();
 
                                                 if ( embedLinkView.dfd && 'pending' === embedLinkView.dfd.state() ) {
                                                         embedLinkView.dfd.abort();
@@ -167 +165 @@
                                                 };
 
                                                 urlParser = document.createElement( 'a' );
-                                                urlParser.href = embedLinkView.model.get( 'url' );
+                                                urlParser.href = url;
                                                 matches = urlParser.pathname.toLowerCase().match( /\.(\w+)$/ );
                                                 if ( matches ) {
                                                         fileExt = matches[1];
@@ -184 +182 @@
                                                 embedLinkView.dfd = $.ajax({
                                                         url: wp.media.view.settings.oEmbedProxyUrl,
                                                         data: {
-                                                                url: embedLinkView.model.get( 'url' ),
+                                                                url: url,
                                                                 maxwidth: embedLinkView.model.get( 'width' ),
                                                                 maxheight: embedLinkView.model.get( 'height' ),
                                                                 _wpnonce: wp.media.view.settings.nonce.wpRestApi,
@@ -779 +777 @@
                                 mediaFramePropToModelPropMap[ fieldSchema.media_prop || modelProp ] = modelProp;
                         });
 
+                        // Trim whitespace from url since it causes problems with oembeds.
+                        if ( mediaFrameProps.url ) {
+                                mediaFrameProps.url = mediaFrameProps.url.trim();
+                        }
+
                         _.each( mediaFrameProps, function( value, mediaProp ) {
                                 var propName = mediaFramePropToModelPropMap[ mediaProp ] || mediaProp;
                                 if ( control.model.schema[ propName ] ) {

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

@@ -28 +28 @@
                 equal( mappedProps.preload, 'meta', 'mapModelToMediaFrameProps should set preload' );
 
                 // Test mapMediaToModelProps().
-                mappedProps = videoWidgetControlInstance.mapMediaToModelProps( { loop: false, preload: 'meta', url: testVideoUrl, title: 'random movie file title' } );
+                mappedProps = videoWidgetControlInstance.mapMediaToModelProps( { loop: false, preload: 'meta', url: testVideoUrl + ' ', title: 'random movie file title' } );
                 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' );
+                equal( mappedProps.url, testVideoUrl, 'mapMediaToModelProps should trim whitespace from urls' );
         });
 
         test( 'video widget control renderPreview', function( assert ) {