WordPress.org

Make WordPress Core

Ticket #38678: 38678.diff

File 38678.diff, 9.7 KB (added by joemcgill, 4 years ago)
  • src/wp-content/themes/twentyseventeen/style.css

    diff --git src/wp-content/themes/twentyseventeen/style.css src/wp-content/themes/twentyseventeen/style.css
    index 05dec3b..3ec3115 100644
    object { 
    41494149                padding: 0;
    41504150        }
    41514151}
     4152
     4153/* For testing purposes. */
     4154.wp-custom-header-video-button {
     4155        background: red;
     4156        position: relative;
     4157}
  • src/wp-includes/js/wp-custom-header.js

    diff --git src/wp-includes/js/wp-custom-header.js src/wp-includes/js/wp-custom-header.js
    index 08e2488..ea1ec0c 100644
     
    1 (function( window, settings ) {
     1( function( window, settings ) {
    22
    33        if ( ! ( 'addEventListener' in window ) ) {
    44                // Fail gracefully in unsupported browsers.
    55                return;
    66        }
    77
    8         function wpCustomHeader() {
    9                 var handlers = {
     8        function trigger( target, name ) {
     9                var e = new Event( name );
     10                target.dispatchEvent( e );
     11        }
     12
     13        function CustomHeader() {
     14                this.handlers = {
    1015                        nativeVideo: {
    1116                                test: function( settings ) {
    1217                                        var video = document.createElement( 'video' );
    1318                                        return video.canPlayType( settings.mimeType );
    1419                                },
    15                                 callback: nativeHandler
     20                                callback: NativeHandler
    1621                        },
    1722                        youtube: {
    1823                                test: function( settings ) {
    1924                                        return 'video/x-youtube' === settings.mimeType;
    2025                                },
    21                                 callback: youtubeHandler
     26                                callback: YouTubeHandler
    2227                        }
    2328                };
     29        }
    2430
    25                 function initialize() {
    26                         settings.container = document.getElementById( 'wp-custom-header' );
     31        CustomHeader.prototype.initialize = function() {
     32                var activeHandler,
     33                        button = document.createElement( 'button' );
    2734
    28                         if ( supportsVideo() ) {
    29                                 for ( var id in handlers ) {
    30                                         var handler = handlers[ id ];
     35                button.setAttribute( 'type', 'button' );
     36                button.setAttribute( 'id', 'wp-custom-header-video-button' );
     37                button.setAttribute( 'class', 'wp-custom-header-video-button wp-custom-header-video-play' );
     38                button.setAttribute( 'aria-hidden', true );
     39                button.innerHTML = settings.l10n.play;
    3140
    32                                         if ( handlers.hasOwnProperty( id ) && handler.test( settings ) ) {
    33                                                 handler.callback( settings );
     41                this.container = document.getElementById( 'wp-custom-header' ),
     42                this.button = button;
    3443
    35                                                 // Set up and dispatch custom event when the video is loaded.
    36                                                 if ( 'dispatchEvent' in window ) {
    37                                                         var videoLoaded = new Event( 'wp-custom-header-video-loaded' );
    38                                                         document.dispatchEvent( videoLoaded );
    39                                                 }
     44                if ( this.supportsVideo() ) {
     45                        for ( var id in this.handlers ) {
     46                                var handler = this.handlers[ id ];
    4047
    41                                                 break;
    42                                         }
     48                                if ( this.handlers.hasOwnProperty( id ) && handler.test( settings ) ) {
     49                                        activeHandler = handler.callback.call( this, this, settings );
     50
     51                                        // Dispatch custom event when the video is loaded.
     52                                        trigger( document, 'wp-custom-header-video-loaded' );
     53                                        break;
    4354                                }
    4455                        }
    45                 }
    4656
    47                 function supportsVideo() {
    48                         // Don't load video on small screens. @todo: consider bandwidth and other factors.
    49                         if ( window.innerWidth < settings.minWidth  || window.innerHeight < settings.minHeight ) {
    50                                 return false;
    51                         }
     57                        this.container.addEventListener( 'play', function() {
     58                                button.className = 'wp-custom-header-video-button wp-custom-header-video-play';
     59                                button.innerHTML = settings.l10n.pause;
     60                        } );
     61
     62                        this.container.addEventListener( 'pause', function() {
     63                                button.className = 'wp-custom-header-video-button wp-custom-header-video-pause';
     64                                button.innerHTML = settings.l10n.play;
     65                        } );
     66
     67                        button.addEventListener( 'click', function() {
     68                                if ( activeHandler.paused() ) {
     69                                        activeHandler.play();
     70                                } else {
     71                                        activeHandler.pause();
     72                                }
     73                        } );
     74                }
     75        };
    5276
    53                         return true;
     77        CustomHeader.prototype.supportsVideo = function() {
     78                // Don't load video on small screens. @todo: consider bandwidth and other factors.
     79                if ( window.innerWidth < settings.minWidth  || window.innerHeight < settings.minHeight ) {
     80                        return false;
    5481                }
    5582
    56                 return {
    57                         handlers: handlers,
    58                         initialize: initialize,
    59                         supportsVideo: supportsVideo
    60                 };
    61         }
     83                return true;
     84        };
    6285
    63         function nativeHandler( settings ) {
    64                 var video = document.createElement( 'video' );
     86        CustomHeader.prototype.setVideo = function( node ) {
     87                this.container.innerHTML = '';
     88                this.container.appendChild( node );
     89                this.container.appendChild( this.button );
     90        };
     91
     92        function NativeHandler( header, settings ) {
     93                if ( ! ( this instanceof NativeHandler ) ) {
     94                        return new NativeHandler( header, settings );
     95                }
    6596
     97                var video = document.createElement( 'video' );
    6698                video.id = 'wp-custom-header-video';
    6799                video.autoplay = 'autoplay';
    68100                video.loop = 'loop';
     
    70102                video.width = settings.width;
    71103                video.height = settings.height;
    72104
    73                 video.addEventListener( 'click', function() {
    74                         if ( video.paused ) {
    75                                 video.play();
    76                         } else {
    77                                 video.pause();
    78                         }
    79                 });
     105                video.addEventListener( 'play', function() {
     106                        trigger( header.container, 'play' );
     107                } );
    80108
    81                 settings.container.innerHTML = '';
    82                 settings.container.appendChild( video );
     109                video.addEventListener( 'pause', function() {
     110                        trigger( header.container, 'pause' );
     111                } );
     112
     113                header.setVideo( video );
    83114                video.src = settings.videoUrl;
     115
     116                return {
     117                        play: video.play.bind( video ),
     118
     119                        pause: video.pause.bind( video ),
     120
     121                        paused: function() {
     122                                return video.paused;
     123                        }
     124                };
    84125        }
    85126
    86         function youtubeHandler( settings ) {
    87                 // @link http://stackoverflow.com/a/27728417
    88                 var VIDEO_ID_REGEX = /^.*(?:(?:youtu\.be\/|v\/|vi\/|u\/\w\/|embed\/)|(?:(?:watch)?\?v(?:i)?=|\&v(?:i)?=))([^#\&\?]*).*/,
    89                         videoId = settings.videoUrl.match( VIDEO_ID_REGEX )[1];
     127        function YouTubeHandler( header, settings ) {
     128                if ( ! ( this instanceof YouTubeHandler ) ) {
     129                        return new YouTubeHandler( header, settings );
     130                }
     131
     132                var player,
     133                        YT;
    90134
    91135                function loadVideo() {
    92                         var YT = window.YT || {};
    93 
    94                         YT.ready(function() {
    95                                 var video = document.createElement( 'div' );
    96                                 video.id = 'wp-custom-header-video';
    97                                 settings.container.innerHTML = '';
    98                                 settings.container.appendChild( video );
    99 
    100                                 new YT.Player( video, {
    101                                         height: settings.height,
    102                                         width: settings.width,
    103                                         videoId: videoId,
    104                                         events: {
    105                                                 onReady: function( e ) {
    106                                                         e.target.mute();
    107                                                 },
    108                                                 onStateChange: function( e ) {
    109                                                         if ( YT.PlayerState.ENDED === e.data ) {
    110                                                                 e.target.playVideo();
    111                                                         }
    112                                                 }
     136                        var video = document.createElement( 'div' ),
     137                                // @link http://stackoverflow.com/a/27728417
     138                                VIDEO_ID_REGEX = /^.*(?:(?:youtu\.be\/|v\/|vi\/|u\/\w\/|embed\/)|(?:(?:watch)?\?v(?:i)?=|\&v(?:i)?=))([^#\&\?]*).*/;
     139
     140                        video.id = 'wp-custom-header-video';
     141                        header.setVideo( video );
     142
     143                        player = new YT.Player( video, {
     144                                height: settings.height,
     145                                width: settings.width,
     146                                videoId: settings.videoUrl.match( VIDEO_ID_REGEX )[1],
     147                                events: {
     148                                        onReady: function( e ) {
     149                                                e.target.mute();
    113150                                        },
    114                                         playerVars: {
    115                                                 autoplay: 1,
    116                                                 controls: 0,
    117                                                 disablekb: 1,
    118                                                 fs: 0,
    119                                                 iv_load_policy: 3,
    120                                                 loop: 1,
    121                                                 modestbranding: 1,
    122                                                 //origin: '',
    123                                                 playsinline: 1,
    124                                                 rel: 0,
    125                                                 showinfo: 0
     151                                        onStateChange: function( e ) {
     152                                                if ( YT.PlayerState.PLAYING === e.data ) {
     153                                                        trigger( header.container, 'play' );
     154                                                } else if ( YT.PlayerState.PAUSED === e.data ) {
     155                                                        trigger( header.container, 'pause' );
     156                                                } else if ( YT.PlayerState.ENDED === e.data ) {
     157                                                        e.target.playVideo();
     158                                                }
    126159                                        }
    127                                 });
    128                         });
     160                                },
     161                                playerVars: {
     162                                        autoplay: 1,
     163                                        controls: 0,
     164                                        disablekb: 1,
     165                                        fs: 0,
     166                                        iv_load_policy: 3,
     167                                        loop: 1,
     168                                        modestbranding: 1,
     169                                        playsinline: 1,
     170                                        rel: 0,
     171                                        showinfo: 0
     172                                }
     173                        } );
    129174                }
    130175
    131176                if ( 'YT' in window ) {
    132                         loadVideo();
     177                        YT = window.YT;
     178                        YT.ready( loadVideo );
    133179                } else {
    134180                        var tag = document.createElement( 'script' );
    135181                        tag.src = 'https://www.youtube.com/player_api';
    136                         tag.onload = function () { loadVideo(); };
     182                        tag.onload = function () {
     183                                YT = window.YT;
     184                                YT.ready( loadVideo );
     185                        };
     186
    137187                        document.getElementsByTagName( 'head' )[0].appendChild( tag );
    138188                }
     189
     190                return {
     191                        play: function() {
     192                                player.playVideo();
     193                        },
     194
     195                        pause: function() {
     196                                player.pauseVideo();
     197                        },
     198
     199                        paused: function() {
     200                                return YT.PlayerState.PAUSED === player.getPlayerState();
     201                        }
     202                };
    139203        }
    140204
    141205        window.wp = window.wp || {};
    142         window.wp.customHeader = new wpCustomHeader();
    143         document.addEventListener( 'DOMContentLoaded', window.wp.customHeader.initialize, false );
     206        window.wp.customHeader = new CustomHeader();
     207        document.addEventListener( 'DOMContentLoaded', window.wp.customHeader.initialize.bind( window.wp.customHeader ), false );
    144208
    145209        if ( 'customize' in window.wp ) {
    146210                wp.customize.selectiveRefresh.bind( 'render-partials-response', function( response ) {
    147211                        if ( 'custom_header_settings' in response ) {
    148212                                settings = response.custom_header_settings;
    149213                        }
    150                 });
     214                } );
    151215
    152216                wp.customize.selectiveRefresh.bind( 'partial-content-rendered', function( placement ) {
    153217                        if ( 'custom_header' === placement.partial.id ) {
    154218                                window.wp.customHeader.initialize();
    155219                        }
    156                 });
     220                } );
    157221        }
    158222
    159 })( window, window._wpCustomHeaderSettings || {} );
     223} )( window, window._wpCustomHeaderSettings || {} );
  • src/wp-includes/theme.php

    diff --git src/wp-includes/theme.php src/wp-includes/theme.php
    index baad12f..a400702 100644
    function get_header_video_settings() { 
    13811381                'height'    => absint( $header->height ),
    13821382                'minWidth'  => 900,
    13831383                'minHeight' => 500,
     1384                'l10n'      => array(
     1385                        'pause' => __( 'Pause' ),
     1386                        'play'  => __( 'Play' ),
     1387                ),
    13841388        );
    13851389
    13861390        if ( preg_match( '#^https?://(?:www\.)?(?:youtube\.com/watch|youtu\.be/)#', $video_url ) ) {