WordPress.org

Make WordPress Core

Ticket #38678: 38678.1.diff

File 38678.1.diff, 9.0 KB (added by bradyvercher, 4 years ago)
  • src/wp-content/themes/twentyseventeen/style.css

     
    41414141                padding: 0;
    41424142        }
    41434143}
     4144
     4145/* For testing purposes. */
     4146.wp-custom-header-video-button {
     4147        background: red;
     4148        position: relative;
     4149}
  • src/wp-includes/js/wp-custom-header.js

     
    55                return;
    66        }
    77
    8         function wpCustomHeader() {
    9                 var handlers = {
    10                         nativeVideo: {
     8        function trigger( target, name ) {
     9                var e = new Event( name );
     10                target.dispatchEvent( e );
     11        }
     12
     13        function CustomHeader() {
     14                this.handlers = {
     15                        native: {
    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                        header = this,
     34                        button = document.createElement( 'button' );
    2735
    28                         if ( supportsVideo() ) {
    29                                 for ( var id in handlers ) {
    30                                         var handler = handlers[ id ];
     36                button.setAttribute( 'type', 'button' );
     37                button.setAttribute( 'id', 'wp-custom-header-video-button' );
     38                button.setAttribute( 'class', 'wp-custom-header-video-button wp-custom-header-video-play' );
     39                button.setAttribute( 'aria-hidden', true );
     40                button.innerHTML = settings.l10n.play;
    3141
    32                                         if ( handlers.hasOwnProperty( id ) && handler.test( settings ) ) {
    33                                                 handler.callback( settings );
     42                this.container = document.getElementById( 'wp-custom-header' ),
     43                this.button = button;
    3444
    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                                                 }
     45                if ( this.supportsVideo() ) {
     46                        for ( var id in this.handlers ) {
     47                                var handler = this.handlers[ id ];
    4048
    41                                                 break;
    42                                         }
     49                                if ( this.handlers.hasOwnProperty( id ) && handler.test( settings ) ) {
     50                                        activeHandler = handler.callback.call( this, this, settings );
     51
     52                                        // Dispatch custom event when the video is loaded.
     53                                        trigger( document, 'wp-custom-header-video-loaded' );
     54                                        break;
    4355                                }
    4456                        }
     57
     58                        this.container.addEventListener( 'play', function() {
     59                                button.className = 'wp-custom-header-video-button wp-custom-header-video-play';
     60                                button.innerHTML = settings.l10n.pause;
     61                        })
     62
     63                        this.container.addEventListener( 'pause', function() {
     64                                button.className = 'wp-custom-header-video-button wp-custom-header-video-pause';
     65                                button.innerHTML = settings.l10n.play;
     66                        });
     67
     68                        button.addEventListener( 'click', function() {
     69                                if ( activeHandler.paused() ) {
     70                                        activeHandler.play();
     71                                } else {
     72                                        activeHandler.pause();
     73                                }
     74                        });
    4575                }
     76        };
    4677
    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                         }
     78        CustomHeader.prototype.supportsVideo = function() {
     79                // Don't load video on small screens. @todo: consider bandwidth and other factors.
     80                if ( window.innerWidth < settings.minWidth  || window.innerHeight < settings.minHeight ) {
     81                        return false;
     82                }
    5283
    53                         return true;
     84                return true;
     85        };
     86
     87        CustomHeader.prototype.setVideo = function( node ) {
     88                this.container.innerHTML = '';
     89                this.container.appendChild( node );
     90                this.container.appendChild( this.button );
     91        };
     92
     93        function NativeHandler( header, settings ) {
     94                if ( ! ( this instanceof NativeHandler ) ) {
     95                        return new NativeHandler( header, settings );
    5496                }
    5597
    56                 return {
    57                         handlers: handlers,
    58                         initialize: initialize,
    59                         supportsVideo: supportsVideo
    60                 };
    61         }
    62 
    63         function nativeHandler( settings ) {
    6498                var video = document.createElement( 'video' );
    65 
    6699                video.id = 'wp-custom-header-video';
    67100                video.autoplay = 'autoplay';
    68101                video.loop = 'loop';
     
    70103                video.width = settings.width;
    71104                video.height = settings.height;
    72105
    73                 video.addEventListener( 'click', function() {
    74                         if ( video.paused ) {
    75                                 video.play();
    76                         } else {
    77                                 video.pause();
    78                         }
     106                video.addEventListener( 'play', function() {
     107                        trigger( header.container, 'play' );
    79108                });
    80109
    81                 settings.container.innerHTML = '';
    82                 settings.container.appendChild( video );
     110                video.addEventListener( 'pause', function() {
     111                        trigger( header.container, 'pause' );
     112                });
     113
     114                header.setVideo( video );
    83115                video.src = settings.videoUrl;
     116
     117                return {
     118                        play: video.play.bind( video ),
     119
     120                        pause: video.pause.bind( video ),
     121
     122                        paused: function() {
     123                                return video.paused;
     124                        }
     125                };
    84126        }
    85127
    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];
     128        function YouTubeHandler( header, settings ) {
     129                if ( ! ( this instanceof YouTubeHandler ) ) {
     130                        return new YouTubeHandler( header, settings );
     131                }
    90132
     133                var player;
     134
    91135                function loadVideo() {
    92                         var YT = window.YT || {};
     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)?=))([^#\&\?]*).*/;
    93139
    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 );
     140                        video.id = 'wp-custom-header-video';
     141                        header.setVideo( video );
    99142
    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                                                         }
     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();
     150                                        },
     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();
    112158                                                }
    113                                         },
    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
    126159                                        }
    127                                 });
     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                                }
    128173                        });
    129174                }
    130175
    131176                if ( 'YT' in window ) {
    132                         loadVideo();
     177                        YT.ready( loadVideo );
    133178                } else {
    134179                        var tag = document.createElement( 'script' );
    135180                        tag.src = 'https://www.youtube.com/player_api';
    136                         tag.onload = function () { loadVideo(); };
     181                        tag.onload = function () { YT.ready( loadVideo ); };
    137182                        document.getElementsByTagName( 'head' )[0].appendChild( tag );
    138183                }
     184
     185                return {
     186                        play: function() {
     187                                player.playVideo();
     188                        },
     189
     190                        pause: function() {
     191                                player.pauseVideo();
     192                        },
     193
     194                        paused: function() {
     195                                return YT.PlayerState.PAUSED === player.getPlayerState();
     196                        }
     197                }
    139198        }
    140199
    141200        window.wp = window.wp || {};
    142         window.wp.customHeader = new wpCustomHeader();
    143         document.addEventListener( 'DOMContentLoaded', window.wp.customHeader.initialize, false );
     201        window.wp.customHeader = new CustomHeader();
     202        document.addEventListener( 'DOMContentLoaded', window.wp.customHeader.initialize.bind( window.wp.customHeader ), false );
    144203
    145204        if ( 'customize' in window.wp ) {
    146205                wp.customize.selectiveRefresh.bind( 'render-partials-response', function( response ) {
  • src/wp-includes/theme.php

     
    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 ) ) {