WordPress.org

Make WordPress Core

Changeset 41759


Ignore:
Timestamp:
10/05/17 00:21:27 (2 weeks 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:
4 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-admin/js/widgets/media-video-widget.js

    r41206 r41759  
    137137         * Whether a url is a supported external host. 
    138138         * 
     139         * @deprecated since 4.9. 
     140         * 
    139141         * @param {String} url - Video url. 
    140142         * @returns {boolean} Whether url is a supported video host. 
    141143         */ 
    142144        isHostedVideo: function isHostedVideo( url ) { 
    143             var parsedUrl = document.createElement( 'a' ); 
    144             parsedUrl.href = url; 
    145             return /vimeo|youtu\.?be/.test( parsedUrl.host ); 
     145            return false; 
    146146        }, 
    147147 
     
    152152         */ 
    153153        renderPreview: function renderPreview() { 
    154             var control = this, previewContainer, previewTemplate, attachmentId, attachmentUrl, poster, isHostedEmbed = false, mime, error; 
     154            var control = this, previewContainer, previewTemplate, attachmentId, attachmentUrl, poster, html = '', isOEmbed = false, mime, error, urlParser, matches; 
    155155            attachmentId = control.model.get( 'attachment_id' ); 
    156156            attachmentUrl = control.model.get( 'url' ); 
     
    159159            if ( ! attachmentId && ! attachmentUrl ) { 
    160160                return; 
    161             } 
    162  
    163             if ( ! attachmentId && attachmentUrl ) { 
    164                 isHostedEmbed = control.isHostedVideo( attachmentUrl ); 
    165             } 
    166  
    167             if ( isHostedEmbed ) { 
    168                 control.fetchEmbed(); 
    169                 poster = control.oembedResponses[ attachmentUrl ] ? control.oembedResponses[ attachmentUrl ].thumbnail_url : null; 
    170161            } 
    171162 
     
    176167                    error = 'unsupported_file_type'; 
    177168                } 
     169            } else if ( ! attachmentId ) { 
     170                urlParser = document.createElement( 'a' ); 
     171                urlParser.href = attachmentUrl; 
     172                matches = urlParser.pathname.toLowerCase().match( /\.(\w+)$/ ); 
     173                if ( matches ) { 
     174                    if ( ! _.contains( _.keys( wp.media.view.settings.embedMimes ), matches[1] ) ) { 
     175                        error = 'unsupported_file_type'; 
     176                    } 
     177                } else { 
     178                    isOEmbed = true; 
     179                } 
     180            } 
     181 
     182            if ( isOEmbed ) { 
     183                control.fetchEmbed(); 
     184                if ( control.oembedResponses[ attachmentUrl ] ) { 
     185                    poster = control.oembedResponses[ attachmentUrl ].thumbnail_url; 
     186                    html = control.oembedResponses[ attachmentUrl ].html.replace( /\swidth="\d+"/, ' width="100%"' ).replace( /\sheight="\d+"/, '' ); 
     187                } 
    178188            } 
    179189 
     
    183193            previewContainer.html( previewTemplate({ 
    184194                model: { 
    185                     attachment_id: control.model.get( 'attachment_id' ), 
     195                    attachment_id: attachmentId, 
     196                    html: html, 
    186197                    src: attachmentUrl, 
    187198                    poster: poster 
    188199                }, 
    189                 is_hosted_embed: isHostedEmbed, 
     200                is_oembed: isOEmbed, 
    190201                error: error 
    191202            })); 
  • trunk/src/wp-admin/js/widgets/media-widgets.js

    r41590 r41759  
    182182                                fetchSuccess( '<!--success-->' ); 
    183183                            } 
    184                             return; 
    185                         } 
    186  
    187                         // If video, test for Vimeo and YouTube, otherwise, renderFail(). This should be removed once #34115 is resolved. 
    188                         if ( 'video' === this.controller.options.mimeType && ! /vimeo|youtu\.?be/.test( urlParser.host ) ) { 
    189                             embedLinkView.renderFail(); 
    190184                            return; 
    191185                        } 
  • trunk/src/wp-includes/widgets/class-wp-widget-media-video.php

    r41640 r41759  
    122122        } 
    123123 
    124         add_filter( 'wp_video_shortcode', array( $this, 'inject_video_max_width_style' ) ); 
    125  
    126         echo wp_video_shortcode( 
    127             array_merge( 
    128                 $instance, 
    129                 compact( 'src' ) 
    130             ), 
    131             $instance['content'] 
    132         ); 
    133  
    134         remove_filter( 'wp_video_shortcode', array( $this, 'inject_video_max_width_style' ) ); 
     124        if ( $attachment ) { 
     125            add_filter( 'wp_video_shortcode', array( $this, 'inject_video_max_width_style' ) ); 
     126 
     127            echo wp_video_shortcode( 
     128                array_merge( 
     129                    $instance, 
     130                    compact( 'src' ) 
     131                ), 
     132                $instance['content'] 
     133            ); 
     134 
     135            remove_filter( 'wp_video_shortcode', array( $this, 'inject_video_max_width_style' ) ); 
     136        } else { 
     137            echo $this->inject_video_max_width_style( wp_oembed_get( $src ) ); 
     138        } 
    135139    } 
    136140 
     
    228232                    <p><?php _e( 'Unable to preview media due to an unknown error.' ); ?></p> 
    229233                </div> 
    230             <# } else if ( data.is_hosted_embed && data.model.poster ) { #> 
     234            <# } else if ( data.is_oembed && data.model.poster ) { #> 
    231235                <a href="{{ data.model.src }}" target="_blank" class="media-widget-video-link"> 
    232236                    <img src="{{ data.model.poster }}" /> 
    233237                </a> 
    234             <# } else if ( data.is_hosted_embed ) { #> 
     238            <# } else if ( data.is_oembed ) { #> 
    235239                <a href="{{ data.model.src }}" target="_blank" class="media-widget-video-link no-poster"> 
    236240                    <span class="dashicons dashicons-format-video"></span> 
  • trunk/tests/qunit/wp-admin/js/widgets/test-media-video-widget.js

    r40941 r41759  
    3535        equal( mappedProps.loop, false, 'mapMediaToModelProps should set loop' ); 
    3636        equal( mappedProps.preload, 'meta', 'mapMediaToModelProps should set preload' ); 
    37  
    38         // Test isHostedVideo(). 
    39         equal( videoWidgetControlInstance.isHostedVideo( 'https://www.youtube.com/watch?v=OQSNhk5ICTI' ), true, 'isHostedVideo should return true for full YouTube url.' ); 
    40         equal( videoWidgetControlInstance.isHostedVideo( 'https://youtu.be/OQSNhk5ICTI' ), true, 'isHostedVideo should return true for shortened youtube url' ); 
    41         equal( videoWidgetControlInstance.isHostedVideo( 'https://vimeo.com/190372437' ), true, 'isHostedVideo should return true for vimeo url.' ); 
    42         equal( videoWidgetControlInstance.isHostedVideo( 'https://wordpress.org/' ), false, 'isHostedVideo should return false for non-supported video url.' ); 
    4337    }); 
    4438 
Note: See TracChangeset for help on using the changeset viewer.