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)
parent
9c1ab4eec0
commit
305a44617c
|
|
@ -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%;
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -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">“{{ data.attachment.title }}”</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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue