Customizer: Add audio/video previews for upload controls.

props celloexpressions, Fab1en, wonderboymusic.
fixes #30850.
Built from https://develop.svn.wordpress.org/trunk@31661


git-svn-id: http://core.svn.wordpress.org/trunk@31642 1a063a9b-81f0-0310-95a4-ce76da25c4cd

wp-admin/css/customize-controls-rtl.css

@@ -433,7 +433,7 @@ p.customize-section-description {
 	overflow: hidden;
 	text-overflow: ellipsis;
 	margin: 0;
-	padding: 5px 10px 0;
+	padding: 0 10px;
 }
 
 .customize-control .attachment-meta-title {
@@ -448,6 +448,13 @@ p.customize-section-description {
 	cursor: pointer;
 }
 
+#customize-controls .thumbnail-audio .thumbnail {
+	max-width: 64px;
+	max-height: 64px;
+	margin: 10px;
+	float: right;
+}
+
 #customize-preview iframe {
 	width: 100%;
 	height: 100%;

wp-admin/css/customize-controls.css

@@ -433,7 +433,7 @@ p.customize-section-description {
 	overflow: hidden;
 	text-overflow: ellipsis;
 	margin: 0;
-	padding: 5px 10px 0;
+	padding: 0 10px;
 }
 
 .customize-control .attachment-meta-title {
@@ -448,6 +448,13 @@ p.customize-section-description {
 	cursor: pointer;
 }
 
+#customize-controls .thumbnail-audio .thumbnail {
+	max-width: 64px;
+	max-height: 64px;
+	margin: 10px;
+	float: left;
+}
+
 #customize-preview iframe {
 	width: 100%;
 	height: 100%;

wp-admin/js/customize-controls.js

@@ -1,4 +1,4 @@
-/* globals _wpCustomizeHeader, _wpCustomizeBackground, _wpMediaViewsL10n */
+/* globals _wpCustomizeHeader, _wpCustomizeBackground, _wpMediaViewsL10n, MediaElementPlayer */
 (function( exports, $ ){
 	var Container, focus, api = wp.customize;
 
@@ -316,6 +316,17 @@
 		_toggleExpanded: function ( expanded, params ) {
 			var self = this;
 			params = params || {};
+			var section = this, previousCompleteCallback = params.completeCallback;
+			params.completeCallback = function () {
+				if ( previousCompleteCallback ) {
+					previousCompleteCallback.apply( section, arguments );
+				}
+				if ( expanded ) {
+					section.container.trigger( 'expanded' );
+				} else {
+					section.container.trigger( 'collapsed' );
+				}
+			};
 			if ( ( expanded && this.expanded.get() ) || ( ! expanded && ! this.expanded.get() ) ) {
 				params.unchanged = true;
 				self.onChangeExpanded( self.expanded.get(), params );
@@ -1374,18 +1385,40 @@
 		ready: function() {
 			var control = this;
 			// Shortcut so that we don't have to use _.bind every time we add a callback.
-			_.bindAll( control, 'restoreDefault', 'removeFile', 'openFrame', 'select' );
+			_.bindAll( control, 'restoreDefault', 'removeFile', 'openFrame', 'select', 'pausePlayer' );
 
 			// Bind events, with delegation to facilitate re-rendering.
 			control.container.on( 'click keydown', '.upload-button', control.openFrame );
+			control.container.on( 'click keydown', '.upload-button', control.pausePlayer );
 			control.container.on( 'click keydown', '.thumbnail-image img', control.openFrame );
 			control.container.on( 'click keydown', '.default-button', control.restoreDefault );
+			control.container.on( 'click keydown', '.remove-button', control.pausePlayer );
 			control.container.on( 'click keydown', '.remove-button', control.removeFile );
+			control.container.on( 'click keydown', '.remove-button', control.cleanupPlayer );
+
+			// Resize the player controls when it becomes visible (ie when section is expanded)
+			api.section( control.section() ).container
+				.on( 'expanded', function() {
+					if ( control.player ) {
+						control.player.setControlsSize();
+					}
+				})
+				.on( 'collapsed', function() {
+					control.pausePlayer();
+				});
 
 			// Re-render whenever the control's setting changes.
 			control.setting.bind( function () { control.renderContent(); } );
 		},
 
+		pausePlayer: function () {
+			this.player && this.player.pause();
+		},
+
+		cleanupPlayer: function () {
+			this.player && wp.media.mixin.removePlayer( this.player );
+		},
+
 		/**
 		 * Open the media modal.
 		 */
@@ -1431,12 +1464,22 @@
 		 */
 		select: function() {
 			// Get the attachment from the modal frame.
-			var attachment = this.frame.state().get( 'selection' ).first().toJSON();
+			var node,
+				attachment = this.frame.state().get( 'selection' ).first().toJSON(),
+				mejsSettings = window._wpmejsSettings || {};
 
 			this.params.attachment = attachment;
 
 			// Set the Customizer setting; the callback takes care of rendering.
 			this.setting( attachment.url );
+			node = this.container.find( 'audio, video' ).get(0);
+
+			// Initialize audio/video previews.
+			if ( node ) {
+				this.player = new MediaElementPlayer( node, mejsSettings );
+			} else {
+				this.cleanupPlayer();
+			}
 		},
 
 		/**

wp-includes/class-wp-customize-control.php

@@ -763,7 +763,11 @@ class WP_Customize_Upload_Control extends WP_Customize_Control {
 							<# } else if ( 'image' === data.attachment.type && data.attachment.sizes && data.attachment.sizes.full ) { #>
 								<img class="attachment-thumb" src="{{ data.attachment.sizes.full.url }}" draggable="false" />
 							<# } else if ( 'audio' === data.attachment.type ) { #>
-								<img class="attachment-thumb type-icon" src="{{ data.attachment.icon }}" class="icon" draggable="false" />
+								<# if ( data.attachment.image && data.attachment.image.src && data.attachment.image.src !== data.attachment.icon ) { #>
+									<img src="{{ data.attachment.image.src }}" class="thumbnail" draggable="false" />
+								<# } else { #>
+									<img src="{{ data.attachment.icon }}" class="attachment-thumb type-icon" draggable="false" />
+								<# } #>
 								<p class="attachment-meta attachment-meta-title">&#8220;{{ data.attachment.title }}&#8221;</p>
 								<# if ( data.attachment.album || data.attachment.meta.album ) { #>
 								<p class="attachment-meta"><em>{{ data.attachment.album || data.attachment.meta.album }}</em></p>
@@ -771,6 +775,16 @@ class WP_Customize_Upload_Control extends WP_Customize_Control {
 								<# if ( data.attachment.artist || data.attachment.meta.artist ) { #>
 								<p class="attachment-meta">{{ data.attachment.artist || data.attachment.meta.artist }}</p>
 								<# } #>
+								<audio style="visibility: hidden" controls class="wp-audio-shortcode" width="100%" preload="none">
+									<source type="{{ data.attachment.mime }}" src="{{ data.attachment.url }}"/>
+								</audio>
+							<# } else if ( 'video' === data.attachment.type ) { #>
+								<div class="wp-media-wrapper wp-video">
+									<video controls="controls" class="wp-video-shortcode" preload="metadata"
+										<# if ( data.attachment.image && data.attachment.image.src !== data.attachment.icon ) { #>poster="{{ data.attachment.image.src }}"<# } #>>
+										<source type="{{ data.attachment.mime }}" src="{{ data.attachment.url }}"/>
+									</video>
+								</div>
 							<# } else { #>
 								<img class="attachment-thumb type-icon" src="{{ data.attachment.icon }}" class="icon" draggable="false" />
 								<p class="attachment-title">{{ data.attachment.title }}</p>

wp-includes/version.php

@@ -4,7 +4,7 @@
  *
  * @global string $wp_version
  */
-$wp_version = '4.2-alpha-31660';
+$wp_version = '4.2-alpha-31661';
 
 /**
  * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.