WordPress.org
Get WordPress

Make WordPress Core

Ticket #38172: 38172.4.diff

File 38172.4.diff, 16.1 KB (added by bradyvercher, 7 years ago)

  • src/wp-admin/css/customize-controls.css

     
    552552        display: block;
    553553        font-style: italic;
    554554        line-height: 18px;
     555        margin-top: 0;
    555556        margin-bottom: 5px;
    556557}
    557558

  • src/wp-content/themes/twentyfourteen/functions.php

     
    409409                $classes[] = 'group-blog';
    410410        }
    411411
    412         if ( get_header_image() ) {
     412        if ( get_header_image() || function_exists( 'has_header_video' ) && has_header_video() ) {
    413413                $classes[] = 'header-image';
    414414        } elseif ( ! in_array( $GLOBALS['pagenow'], array( 'wp-activate.php', 'wp-signup.php' ) ) ) {
    415415                $classes[] = 'masthead-fixed';

  • src/wp-content/themes/twentyfourteen/header.php

     
    3232
    3333<body <?php body_class(); ?>>
    3434<div id="page" class="hfeed site">
    35         <?php if ( get_header_image() ) : ?>
    36         <div id="site-header">
    37                 <a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home">
    38                         <img src="<?php header_image(); ?>" width="<?php echo get_custom_header()->width; ?>" height="<?php echo get_custom_header()->height; ?>" alt="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>">
    39                 </a>
    40         </div>
     35        <?php if ( function_exists( 'has_header_video' ) && has_header_video() ) : ?>
     36                <div id="site-header">
     37                        <?php the_custom_header(); ?>
     38                </div>
     39        <?php elseif ( get_header_image() ) : ?>
     40                <div id="site-header">
     41                        <a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home">
     42                                <img src="<?php header_image(); ?>" width="<?php echo get_custom_header()->width; ?>" height="<?php echo get_custom_header()->height; ?>" alt="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>">
     43                        </a>
     44                </div>
    4145        <?php endif; ?>
    4246
    4347        <header id="masthead" class="site-header" role="banner">

  • src/wp-content/themes/twentyfourteen/inc/custom-header.php

     
    4040                'width'                  => 1260,
    4141                'height'                 => 240,
    4242                'flex-height'            => true,
     43                'video'                  => true,
    4344                'wp-head-callback'       => 'twentyfourteen_header_style',
    4445                'admin-head-callback'    => 'twentyfourteen_admin_header_style',
    4546                'admin-preview-callback' => 'twentyfourteen_admin_header_image',

  • src/wp-content/themes/twentyfourteen/js/functions.js

     
    103103
    104104                        if ( body.is( '.header-image' ) ) {
    105105                                toolbarOffset  = body.is( '.admin-bar' ) ? $( '#wpadminbar' ).height() : 0;
    106                                 mastheadOffset = $( '#masthead' ).offset().top - toolbarOffset;
     106                                mastheadOffset = $( '#site-header' ).height() - toolbarOffset;
    107107
    108108                                _window.on( 'scroll.twentyfourteen', function() {
    109109                                        if ( _window.scrollTop() > mastheadOffset && mastheadHeight < 49 ) {
    … …  
    112112                                                body.removeClass( 'masthead-fixed' );
    113113                                        }
    114114                                } );
     115
     116                                // Update masthead offset after a selective refresh.
     117                                if ( 'undefined' !== typeof wp && wp.customize && wp.customize.selectiveRefresh ) {
     118                                        wp.customize.selectiveRefresh.bind( 'partial-content-rendered', function( placement ) {
     119                                                mastheadOffset = $( '#site-header' ).height() - toolbarOffset;
     120                                        } );
     121                                }
    115122                        }
    116123                }
    117124

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

     
    8888video {
    8989        display: inline-block;
    9090        max-width: 100%;
     91        height: auto;
    9192}
    9293
    9394html {
    … …  
    608609        max-width: 100%;
    609610}
    610611
     612#wp-custom-header iframe,
     613#wp-custom-header video {
     614        margin-bottom: -8px;
     615}
     616
    611617p > embed,
    612618p > iframe,
    613619p > object,

  • src/wp-includes/class-wp-customize-manager.php

     
    21592159
    21602160                /* Custom Header */
    21612161
     2162                if ( current_theme_supports( 'custom-header', 'video' ) ) {
     2163                        $title = __( 'Header Visuals' );
     2164                        $description = __( 'If you add a video, the image will be used as a fallback while the video loads.' );
     2165                        $width = absint( get_theme_support( 'custom-header', 'width' ) );
     2166                        $height = absint( get_theme_support( 'custom-header', 'height' ) );
     2167                        if ( $width && $height ) {
     2168                                /* translators: %s: header size in pixels */
     2169                                $control_description = sprintf( __( 'Upload your video in <code>.mp4</code> format and minimize its file size for best results. Your theme recommends dimensions of %s pixels.' ),
     2170                                        sprintf( '<strong>%s &times; %s</strong>', $width, $height )
     2171                                );
     2172                        } elseif ( $width ) {
     2173                                /* translators: %s: header width in pixels */
     2174                                $control_description = sprintf( __( 'Upload your video in <code>.mp4</code> format and minimize its file size for best results. Your theme recommends a width of %s pixels.' ),
     2175                                        sprintf( '<strong>%s</strong>', $width )
     2176                                );
     2177                        } else {
     2178                                /* translators: %s: header height in pixels */
     2179                                $control_description = sprintf( __( 'Upload your video in <code>.mp4</code> format and minimize its file size for best results. Your theme recommends a height of %s pixels.' ),
     2180                                        sprintf( '<strong>%s</strong>', $height )
     2181                                );
     2182                        }
     2183                } else {
     2184                        $title = __( 'Header Image' );
     2185                        $description = '';
     2186                        $control_description = '';
     2187                }
     2188
    21622189                $this->add_section( 'header_image', array(
    2163                         'title'          => __( 'Header Image' ),
     2190                        'title'          => $title,
     2191                        'description'    => $description,
    21642192                        'theme_supports' => 'custom-header',
    21652193                        'priority'       => 60,
    21662194                ) );
    21672195
     2196                $this->add_setting( 'header_video', array(
     2197                        'theme_supports' => array( 'custom-header', 'video' ),
     2198                        //'transport'      => 'postMessage',
     2199                ) );
     2200
    21682201                $this->add_setting( new WP_Customize_Filter_Setting( $this, 'header_image', array(
    21692202                        'default'        => get_theme_support( 'custom-header', 'default-image' ),
    21702203                        'theme_supports' => 'custom-header',
    … …  
    21752208                        'theme_supports' => 'custom-header',
    21762209                ) ) );
    21772210
     2211                $this->add_control( new WP_Customize_Media_Control( $this, 'header_video', array(
     2212                        'theme_supports' => array( 'custom-header', 'video' ),
     2213                        'label'          => __( 'Header Video' ),
     2214                        'description'    => $control_description,
     2215                        'section'        => 'header_image',
     2216                        'mime_type'      => 'video',
     2217                ) ) );
     2218
    21782219                $this->add_control( new WP_Customize_Header_Image_Control( $this ) );
    21792220
     2221                $this->selective_refresh->add_partial( 'header_video', array(
     2222                        'selector' => '#wp-custom-header-video',
     2223                        'render_callback' => 'get_header_video_tag',
     2224                        'settings' => array( 'header_video', 'header_image' ), // The image is used as a video fallback here.
     2225                ) );
     2226
    21802227                /* Custom Background */
    21812228
    21822229                $this->add_section( 'background_image', array(

  • src/wp-includes/customize/class-wp-customize-header-image-control.php

     
    166166                $height = absint( get_theme_support( 'custom-header', 'height' ) );
    167167                ?>
    168168                <div class="customize-control-content">
    169                         <p class="customizer-section-intro">
     169                        <?php if ( current_theme_supports( 'custom-header', 'video' ) ) {
     170                                echo '<span class="customize-control-title">' . $this->label . '</span>';
     171                        } ?>
     172                        <p class="customizer-section-intro customize-control-description">
    170173                                <?php
    171                                 if ( $width && $height ) {
     174                                if ( current_theme_supports( 'custom-header', 'video' ) ) {
     175                                        _e( 'While you can crop images to your liking after clicking <strong>Add new image</strong>, we recommend matching the size of your video.' );
     176                                } elseif ( $width && $height ) {
    172177                                        /* translators: %s: header size in pixels */
    173178                                        printf( __( 'While you can crop images to your liking after clicking <strong>Add new image</strong>, your theme recommends a header size of %s pixels.' ),
    174179                                                sprintf( '<strong>%s &times; %s</strong>', $width, $height )

  • src/wp-includes/js/wp-custom-header.js

     
     1(function( window, settings ) {
     2        //settings.videoUrl = 'https://www.youtube.com/watch?v=LSmgKRx5pBo';
     3        //settings.mimeType = 'video/x-youtube';
     4
     5        function wpCustomHeader() {
     6                var handlers = {
     7                        native: {
     8                                test: function( settings ) {
     9                                        var video = document.createElement( 'video' );
     10                                        return video.canPlayType( settings.mimeType );
     11                                },
     12                                callback: nativeHandler
     13                        },
     14                        youtube: {
     15                                test: function( settings ) {
     16                                        return 'video/x-youtube' === settings.mimeType;
     17                                },
     18                                callback: youtubeHandler
     19                        }
     20                };
     21
     22                function initialize() {
     23                        settings.container = document.getElementById( 'wp-custom-header' );
     24
     25                        if ( supportsVideo() ) {
     26                                for ( id in handlers ) {
     27                                        var handler = handlers[ id ];
     28
     29                                        if ( handlers.hasOwnProperty( id ) && handler.test( settings ) ) {
     30                                                handler.callback( settings );
     31                                                break;
     32                                        }
     33                                }
     34                        }
     35                }
     36
     37                function supportsVideo() {
     38                        // @todo Check screen width, user agent, other environment variables, etc.
     39                        return true;
     40                }
     41
     42                return {
     43                        handlers: handlers,
     44                        initialize: initialize,
     45                        supportsVideo: supportsVideo
     46                }
     47        }
     48
     49        function nativeHandler( settings ) {
     50                var video = document.createElement( 'video' );
     51
     52                video.id = 'wp-custom-header-video';
     53                video.autoplay = true;
     54                video.loop = true;
     55                video.muted = true;
     56                video.poster = settings.posterUrl;
     57                video.width = settings.width;
     58                video.height = settings.height;
     59
     60                video.addEventListener( 'canplay', function() {
     61                        settings.container.innerHTML = '';
     62                        settings.container.appendChild( video );
     63                });
     64
     65                video.addEventListener( 'click', function() {
     66                        if ( video.paused ) {
     67                                video.play();
     68                        } else {
     69                                video.pause();
     70                        }
     71                });
     72
     73                video.src = settings.videoUrl;
     74                video.load();
     75        }
     76
     77        function youtubeHandler( settings ) {
     78                // @link http://stackoverflow.com/a/27728417
     79                var VIDEO_ID_REGEX = /^.*(?:(?:youtu\.be\/|v\/|vi\/|u\/\w\/|embed\/)|(?:(?:watch)?\?v(?:i)?=|\&v(?:i)?=))([^#\&\?]*).*/,
     80                        videoId = settings.videoUrl.match( VIDEO_ID_REGEX )[1];
     81
     82                function loadVideo() {
     83                        YT.ready(function() {
     84                                var video = document.createElement( 'div' );
     85                                video.id = 'wp-custom-header-video';
     86                                settings.container.innerHTML = '';
     87                                settings.container.appendChild( video );
     88
     89                                new YT.Player( video, {
     90                                        height: settings.height,
     91                                        width: settings.width,
     92                                        videoId: videoId,
     93                                        events: {
     94                                                onReady: function( e ) {
     95                                                        e.target.mute();
     96                                                }
     97                                        },
     98                                        playerVars: {
     99                                                autoplay: 1,
     100                                                controls: 0,
     101                                                disablekb: 1,
     102                                                fs: 0,
     103                                                iv_load_policy: 3,
     104                                                loop: 1,
     105                                                modestbranding: 1,
     106                                                //origin: '',
     107                                                playsinline: 1,
     108                                                rel: 0,
     109                                                showinfo: 0
     110                                        }
     111                                });
     112                        });
     113                }
     114
     115                if ( 'YT' in window ) {
     116                        loadVideo();
     117                } else {
     118                        tag = document.createElement( 'script' );
     119                        tag.src = 'https://www.youtube.com/player_api';
     120                        tag.onload = function () { loadVideo(); };
     121                        document.getElementsByTagName( 'head' )[0].appendChild( tag );
     122                }
     123        }
     124
     125        window.wp = window.wp || {};
     126        window.wp.customHeader = new wpCustomHeader();
     127        document.addEventListener( 'DOMContentLoaded', window.wp.customHeader.initialize, false );
     128
     129})( window, window._wpCustomHeaderSettings || {} );

  • src/wp-includes/script-loader.php

     
    479479        $scripts->add( 'customize-nav-menus', "/wp-admin/js/customize-nav-menus$suffix.js", array( 'jquery', 'wp-backbone', 'customize-controls', 'accordion', 'nav-menu' ), false, 1 );
    480480        $scripts->add( 'customize-preview-nav-menus', "/wp-includes/js/customize-preview-nav-menus$suffix.js", array( 'jquery', 'wp-util', 'customize-preview', 'customize-selective-refresh' ), false, 1 );
    481481
     482        $scripts->add( 'wp-custom-header', "/wp-includes/js/wp-custom-header$suffix.js", array(), false, 1 );
     483
    482484        $scripts->add( 'accordion', "/wp-admin/js/accordion$suffix.js", array( 'jquery' ), false, 1 );
    483485
    484486        $scripts->add( 'shortcode', "/wp-includes/js/shortcode$suffix.js", array( 'underscore' ), false, 1 );

  • src/wp-includes/theme.php

     
    12641264                'thumbnail_url' => '',
    12651265                'width'         => get_theme_support( 'custom-header', 'width' ),
    12661266                'height'        => get_theme_support( 'custom-header', 'height' ),
     1267                'video'         => get_theme_support( 'custom-header', 'video' ),
    12671268        );
    12681269        return (object) wp_parse_args( $data, $default );
    12691270}
    … …  
    13111312}
    13121313
    13131314/**
     1315 * Check whether a header video is set or not.
     1316 *
     1317 * @since 4.7.0
     1318 *
     1319 * @see get_header_video_url()
     1320 *
     1321 * @return bool Whether a header video is set or not.
     1322 */
     1323function has_header_video() {
     1324        return (bool) get_header_video_url();
     1325}
     1326
     1327/* Retrieve header video URL for custom header.
     1328*
     1329* @since 4.7.0
     1330*
     1331* @return string|false
     1332*/
     1333function get_header_video_url() {
     1334        $id = absint( get_theme_mod( 'header_video' ) );
     1335
     1336        if ( ! $id ) {
     1337                return false;
     1338        }
     1339
     1340        if ( $id ) {
     1341                // We have an attachment ID, need the full URL
     1342                $url = wp_get_attachment_url( $id );
     1343        }
     1344
     1345        return esc_url_raw( set_url_scheme( $url ) );
     1346}
     1347
     1348/**
     1349 * Display header video URL.
     1350 *
     1351 * @since 4.7.0
     1352 */
     1353function the_header_video_url() {
     1354        $video = get_header_video_url();
     1355        if ( $video ) {
     1356                echo esc_url( $video );
     1357        }
     1358}
     1359
     1360/**
     1361 * Display the video and image markup for a custom header.
     1362 *
     1363 * @since 4.7.0
     1364 */
     1365function the_custom_header() {
     1366        $header = get_custom_header();
     1367
     1368        printf(
     1369                '<div id="wp-custom-header">%s</div>',
     1370                get_header_image_tag()
     1371        );
     1372
     1373        if ( isset( $header->video ) && $header->video && has_header_video() ) {
     1374                $video_url  = get_header_video_url();
     1375                $video_type = wp_check_filetype( $video_url, wp_get_mime_types() );
     1376
     1377                $settings = array(
     1378                        'mimeType'  => '',
     1379                        'posterUrl' => get_header_image(),
     1380                        'videoUrl'  => $video_url,
     1381                        'width'     => absint( $header->width ),
     1382                        'height'    => absint( $header->height ),
     1383                );
     1384
     1385                if ( preg_match( '#^https?://(?:www\.)?(?:youtube\.com/watch|youtu\.be/)#', $video_url ) ) {
     1386                        $settings['mimeType'] = 'video/x-youtube';
     1387                } elseif ( preg_match( '#^https?://(.+\.)?vimeo\.com/.*#', $video_url ) ) {
     1388                        $settings['mimeType'] = 'video/x-vimeo';
     1389                } elseif ( ! empty( $video_type['type'] ) ) {
     1390                        $settings['mimeType'] = $video_type['type'];
     1391                }
     1392
     1393                wp_enqueue_script( 'wp-custom-header' );
     1394                wp_localize_script( 'wp-custom-header', '_wpCustomHeaderSettings', $settings );
     1395        }
     1396}
     1397
     1398/**
    13141399 * Retrieve background image for custom background.
    13151400 *
    13161401 * @since 3.0.0
    … …  
    16231708                                'wp-head-callback' => '',
    16241709                                'admin-head-callback' => '',
    16251710                                'admin-preview-callback' => '',
     1711                                'video' => false,
    16261712                        );
    16271713
    16281714                        $jit = isset( $args[0]['__jit'] );
    … …  
    20822168                return;
    20832169        }
    20842170
    2085         require_once ABSPATH . WPINC . '/class-wp-customize-manager.php'; 
     2171        require_once ABSPATH . WPINC . '/class-wp-customize-manager.php';
    20862172        $GLOBALS['wp_customize'] = new WP_Customize_Manager();
    20872173}
    20882174