From c03e8cd51c209f9826fdddd1c6d97ce98d9a79d8 Mon Sep 17 00:00:00 2001
From: Weston Ruter <westonruter@git.wordpress.org>
Date: Tue, 15 Nov 2016 03:46:14 +0000
Subject: [PATCH] Customize: Only show video header controls if previewing
 front page; show explanatory notice when controls are hidden.

Also include todo for the `header_video` control's `button_labels`. See #38796.

Props westonruter, joemcgill, celloexpressions.
Fixes #38778.


git-svn-id: https://develop.svn.wordpress.org/trunk@39237 602fd350-edb4-49c9-b593-d223f7449a82
---
 src/wp-admin/js/customize-controls.js         | 20 +++++++++++++++++++
 .../class-wp-customize-manager.php            | 12 +++++++++--
 2 files changed, 30 insertions(+), 2 deletions(-)

diff --git a/src/wp-admin/js/customize-controls.js b/src/wp-admin/js/customize-controls.js
index 17159a0964..ab834680ec 100644
--- a/src/wp-admin/js/customize-controls.js
+++ b/src/wp-admin/js/customize-controls.js
@@ -5284,6 +5284,26 @@
 			} );
 		} );
 
+		// Toggle visibility of Header Video notice when active state change.
+		api.control( 'header_video', function( headerVideoControl ) {
+			headerVideoControl.deferred.embedded.done( function() {
+				var toggleNotice = function() {
+					var section = api.section( headerVideoControl.section() ), notice;
+					if ( ! section ) {
+						return;
+					}
+					notice = section.container.find( '.header-video-not-currently-previewable:first' );
+					if ( headerVideoControl.active.get() ) {
+						notice.stop().slideUp( 'fast' );
+					} else {
+						notice.stop().slideDown( 'fast' );
+					}
+				};
+				toggleNotice();
+				headerVideoControl.active.bind( toggleNotice );
+			} );
+		} );
+
 		// Update the setting validities.
 		api.previewer.bind( 'selective-refresh-setting-validities', function handleSelectiveRefreshedSettingValidities( settingValidities ) {
 			api._handleSettingValidities( {
diff --git a/src/wp-includes/class-wp-customize-manager.php b/src/wp-includes/class-wp-customize-manager.php
index 34aeba767d..54c3f0eac1 100644
--- a/src/wp-includes/class-wp-customize-manager.php
+++ b/src/wp-includes/class-wp-customize-manager.php
@@ -3407,7 +3407,12 @@ final class WP_Customize_Manager {
 
 		if ( current_theme_supports( 'custom-header', 'video' ) ) {
 			$title = __( 'Header Media' );
-			$description = __( 'If you add a video, the image will be used as a fallback while the video loads.' );
+			$description = '<p>' . __( 'If you add a video, the image will be used as a fallback while the video loads.' ) . '</p>';
+
+			// @todo Customizer sections should support having notifications just like controls do. See <https://core.trac.wordpress.org/ticket/38794>.
+			$description .= '<div class="customize-control-notifications-container header-video-not-currently-previewable" style="display: none"><ul>';
+			$description .= '<li class="notice notice-info">' . __( 'This theme doesn\'t support video headers on this page. Navigate to the front page or another page that supports video headers.' ) . '</li>';
+			$description .= '</ul></div>';
 			$width = absint( get_theme_support( 'custom-header', 'width' ) );
 			$height = absint( get_theme_support( 'custom-header', 'height' ) );
 			if ( $width && $height ) {
@@ -3478,13 +3483,15 @@ final class WP_Customize_Manager {
 			'description'    => $control_description,
 			'section'        => 'header_image',
 			'mime_type'      => 'video',
+			// @todo These button_labels can be removed once WP_Customize_Media_Control provides mime_type-specific labels automatically. See <https://core.trac.wordpress.org/ticket/38796>.
 			'button_labels'  => array(
 				'select'       => __( 'Select Video' ),
 				'change'       => __( 'Change Video' ),
 				'placeholder'  => __( 'No video selected' ),
 				'frame_title'  => __( 'Select Video' ),
 				'frame_button' => __( 'Choose Video' ),
-			)
+			),
+			'active_callback' => 'is_front_page',
 		) ) );
 
 		$this->add_control( 'external_header_video', array(
@@ -3492,6 +3499,7 @@ final class WP_Customize_Manager {
 			'type'           => 'url',
 			'description'    => __( 'Or, enter a YouTube URL:' ),
 			'section'        => 'header_image',
+			'active_callback'=> 'is_front_page',
 		) );
 
 		$this->add_control( new WP_Customize_Header_Image_Control( $this ) );