WordPress.org
Get WordPress

Make WordPress Core

Ticket #38678: 38678.4.diff

File 38678.4.diff, 9.6 KB (added by bradyvercher, 10 years ago)

  • src/wp-content/themes/twentyseventeen/style.css

     
    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

     
    1 (function( window, settings ) {
     1/* globals YT:false */
     2( function( window, settings ) {
    23
    34        if ( ! ( 'addEventListener' in window ) ) {
    45                // Fail gracefully in unsupported browsers.
    … …  
    56                return;
    67        }
    78
    8         function wpCustomHeader() {
    9                 var handlers = {
     9        function trigger( target, name ) {
     10                var evt;
     11
     12                if ( 'function' === typeof window.Event ) {
     13                        evt = new Event( name );
     14                } else {
     15                        evt = document.createEvent( 'Event' );
     16                        evt.initEvent( name, true, true );
     17                }
     18
     19                target.dispatchEvent( evt );
     20        }
     21
     22        function CustomHeader() {
     23                this.handlers = {
    1024                        nativeVideo: {
    1125                                test: function( settings ) {
    1226                                        var video = document.createElement( 'video' );
    1327                                        return video.canPlayType( settings.mimeType );
    1428                                },
    15                                 callback: nativeHandler
     29                                callback: NativeHandler
    1630                        },
    1731                        youtube: {
    1832                                test: function( settings ) {
    1933                                        return 'video/x-youtube' === settings.mimeType;
    2034                                },
    21                                 callback: youtubeHandler
     35                                callback: YouTubeHandler
    2236                        }
    2337                };
     38        }
    2439
    25                 function initialize() {
    26                         settings.container = document.getElementById( 'wp-custom-header' );
     40        CustomHeader.prototype.initialize = function() {
     41                var activeHandler,
     42                        button = document.createElement( 'button' );
    2743
    28                         if ( supportsVideo() ) {
    29                                 for ( var id in handlers ) {
    30                                         var handler = handlers[ id ];
     44                button.setAttribute( 'type', 'button' );
     45                button.setAttribute( 'id', 'wp-custom-header-video-button' );
     46                button.setAttribute( 'class', 'wp-custom-header-video-button wp-custom-header-video-play' );
     47                button.setAttribute( 'aria-hidden', true );
     48                button.innerHTML = settings.l10n.play;
    3149
    32                                         if ( handlers.hasOwnProperty( id ) && handler.test( settings ) ) {
    33                                                 handler.callback( settings );
     50                this.container = document.getElementById( 'wp-custom-header' ),
     51                this.button = button;
    3452
    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                                                 }
     53                if ( this.supportsVideo() ) {
     54                        for ( var id in this.handlers ) {
     55                                var handler = this.handlers[ id ];
    4056
    41                                                 break;
    42                                         }
     57                                if ( this.handlers.hasOwnProperty( id ) && handler.test( settings ) ) {
     58                                        activeHandler = handler.callback.call( this, this, settings );
     59
     60                                        // Dispatch custom event when the video is loaded.
     61                                        trigger( document, 'wp-custom-header-video-loaded' );
     62                                        break;
    4363                                }
    4464                        }
     65
     66                        this.container.addEventListener( 'play', function() {
     67                                button.className = 'wp-custom-header-video-button wp-custom-header-video-play';
     68                                button.innerHTML = settings.l10n.pause;
     69                        });
     70
     71                        this.container.addEventListener( 'pause', function() {
     72                                button.className = 'wp-custom-header-video-button wp-custom-header-video-pause';
     73                                button.innerHTML = settings.l10n.play;
     74                        });
     75
     76                        button.addEventListener( 'click', function() {
     77                                if ( activeHandler.paused() ) {
     78                                        activeHandler.play();
     79                                } else {
     80                                        activeHandler.pause();
     81                                }
     82                        });
    4583                }
     84        };
    4685
    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                         }
     86        CustomHeader.prototype.supportsVideo = function() {
     87                // Don't load video on small screens. @todo: consider bandwidth and other factors.
     88                if ( window.innerWidth < settings.minWidth || window.innerHeight < settings.minHeight ) {
     89                        return false;
     90                }
    5291
    53                         return true;
     92                return true;
     93        };
     94
     95        CustomHeader.prototype.setButton = function() {
     96                if ( ! this.container.contains( this.button ) ) {
     97                        this.container.appendChild( this.button );
    5498                }
     99        };
    55100
    56                 return {
    57                         handlers: handlers,
    58                         initialize: initialize,
    59                         supportsVideo: supportsVideo
    60                 };
    61         }
     101        CustomHeader.prototype.setVideo = function( node ) {
     102                this.container.innerHTML = '';
     103                this.container.appendChild( node );
     104        };
    62105
    63         function nativeHandler( settings ) {
     106        function NativeHandler( header, settings ) {
     107                if ( ! ( this instanceof NativeHandler ) ) {
     108                        return new NativeHandler( header, settings );
     109                }
     110
    64111                var video = document.createElement( 'video' );
    65 
    66112                video.id = 'wp-custom-header-video';
    67113                video.autoplay = 'autoplay';
    68114                video.loop = 'loop';
    … …  
    70116                video.width = settings.width;
    71117                video.height = settings.height;
    72118
    73                 video.addEventListener( 'click', function() {
    74                         if ( video.paused ) {
    75                                 video.play();
    76                         } else {
    77                                 video.pause();
    78                         }
     119                video.addEventListener( 'play', function() {
     120                        trigger( header.container, 'play' );
    79121                });
    80122
    81                 settings.container.innerHTML = '';
    82                 settings.container.appendChild( video );
     123                video.addEventListener( 'pause', function() {
     124                        trigger( header.container, 'pause' );
     125                });
     126
     127                video.addEventListener( 'canplay', function() {
     128                        header.setButton();
     129                });
     130
     131                header.setVideo( video );
    83132                video.src = settings.videoUrl;
     133
     134                return {
     135                        play: video.play.bind( video ),
     136
     137                        pause: video.pause.bind( video ),
     138
     139                        paused: function() {
     140                                return video.paused;
     141                        }
     142                };
    84143        }
    85144
    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];
     145        function YouTubeHandler( header, settings ) {
     146                if ( ! ( this instanceof YouTubeHandler ) ) {
     147                        return new YouTubeHandler( header, settings );
     148                }
    90149
     150                var player;
     151
    91152                function loadVideo() {
    92                         var YT = window.YT || {};
     153                        var video = document.createElement( 'div' ),
     154                                // @link http://stackoverflow.com/a/27728417
     155                                VIDEO_ID_REGEX = /^.*(?:(?:youtu\.be\/|v\/|vi\/|u\/\w\/|embed\/)|(?:(?:watch)?\?v(?:i)?=|\&v(?:i)?=))([^#\&\?]*).*/;
    93156
    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 );
     157                        video.id = 'wp-custom-header-video';
     158                        header.setVideo( video );
    99159
    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                                                         }
     160                        player = new YT.Player( video, {
     161                                height: settings.height,
     162                                width: settings.width,
     163                                videoId: settings.videoUrl.match( VIDEO_ID_REGEX )[1],
     164                                events: {
     165                                        onReady: function( e ) {
     166                                                e.target.mute();
     167                                                header.setButton();
     168                                        },
     169                                        onStateChange: function( e ) {
     170                                                if ( YT.PlayerState.PLAYING === e.data ) {
     171                                                        trigger( header.container, 'play' );
     172                                                } else if ( YT.PlayerState.PAUSED === e.data ) {
     173                                                        trigger( header.container, 'pause' );
     174                                                } else if ( YT.PlayerState.ENDED === e.data ) {
     175                                                        e.target.playVideo();
    112176                                                }
    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
    126177                                        }
    127                                 });
     178                                },
     179                                playerVars: {
     180                                        autoplay: 1,
     181                                        controls: 0,
     182                                        disablekb: 1,
     183                                        fs: 0,
     184                                        iv_load_policy: 3,
     185                                        loop: 1,
     186                                        modestbranding: 1,
     187                                        playsinline: 1,
     188                                        rel: 0,
     189                                        showinfo: 0
     190                                }
    128191                        });
    129192                }
    130193
    131194                if ( 'YT' in window ) {
    132                         loadVideo();
     195                        YT.ready( loadVideo );
    133196                } else {
    134197                        var tag = document.createElement( 'script' );
    135                         tag.src = 'https://www.youtube.com/player_api';
    136                         tag.onload = function () { loadVideo(); };
     198                        tag.src = 'https://www.youtube.com/iframe_api';
     199                        tag.onload = function () {
     200                                YT.ready( loadVideo );
     201                        };
     202
    137203                        document.getElementsByTagName( 'head' )[0].appendChild( tag );
    138204                }
     205
     206                return {
     207                        play: function() {
     208                                player.playVideo();
     209                        },
     210
     211                        pause: function() {
     212                                player.pauseVideo();
     213                        },
     214
     215                        paused: function() {
     216                                return YT.PlayerState.PAUSED === player.getPlayerState();
     217                        }
     218                };
    139219        }
    140220
    141221        window.wp = window.wp || {};
    142         window.wp.customHeader = new wpCustomHeader();
    143         document.addEventListener( 'DOMContentLoaded', window.wp.customHeader.initialize, false );
     222        window.wp.customHeader = new CustomHeader();
     223        document.addEventListener( 'DOMContentLoaded', window.wp.customHeader.initialize.bind( window.wp.customHeader ), false );
    144224
    145225        if ( 'customize' in window.wp ) {
    146226                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 ) ) {