WordPress.org

Make WordPress Core

Changeset 41759


Ignore:
Timestamp:
10/05/2017 12:21:27 AM (8 months 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.