Changeset 41759

Timestamp:

10/05/2017 12:21:27 AM (8 years ago)

Author:

obenland

Message:

Widgets: Allow oEmbeds in video widget.

Opens up video embeds to all supported video oEmbed providers.

Props westonruter.
See #42039.

Location:

trunk

Files:

• src/wp-admin/js/widgets/media-video-widget.js (modified) (5 diffs)
• src/wp-admin/js/widgets/media-widgets.js (modified) (1 diff)
• src/wp-includes/widgets/class-wp-widget-media-video.php (modified) (2 diffs)
• tests/qunit/wp-admin/js/widgets/test-media-video-widget.js (modified) (1 diff)

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

@@ -137 +137 @@
          * 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;
         },
 
@@ -152 +152 @@
          */
         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' );
@@ -159 +159 @@
             if ( ! attachmentId && ! attachmentUrl ) {
                 return;
-            }
-
-            if ( ! attachmentId && attachmentUrl ) {
-                isHostedEmbed = control.isHostedVideo( attachmentUrl );
-            }
-
-            if ( isHostedEmbed ) {
-                control.fetchEmbed();
-                poster = control.oembedResponses[ attachmentUrl ] ? control.oembedResponses[ attachmentUrl ].thumbnail_url : null;
             }
 
@@ -176 +167 @@
                     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+"/, '' );
+                }
             }
 
@@ -183 +193 @@
             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
             }));

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

@@ -182 +182 @@
                                 fetchSuccess( '<!--success-->' );
                             }
-                            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;
                         }

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

@@ -122 +122 @@
         }
 
-        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' ) );
+        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' ) );
+        } else {
+            echo $this->inject_video_max_width_style( wp_oembed_get( $src ) );
+        }
     }
 
@@ -228 +232 @@
                     <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>

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

@@ -35 +35 @@
         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.' );
     });