Customizer: Add audio/video previews for upload controls.

props celloexpressions, Fab1en, wonderboymusic.
fixes #30850.

git-svn-id: https://develop.svn.wordpress.org/trunk@31661 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Dominik Schilling (ocean90) 2015-03-07 11:05:57 +00:00
parent 9c1ab4eec0
commit 305a44617c
3 changed files with 69 additions and 5 deletions

View File

@ -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%;

View File

@ -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();
}
},
/**

View File

@ -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>