Make WordPress Core

Changeset 31661


Ignore:
Timestamp:
03/07/2015 11:05:57 AM (9 years ago)
Author:
ocean90
Message:

Customizer: Add audio/video previews for upload controls.

props celloexpressions, Fab1en, wonderboymusic.
fixes #30850.

Location:
trunk/src
Files:
3 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-admin/css/customize-controls.css

    r31579 r31661  
    434434    text-overflow: ellipsis;
    435435    margin: 0;
    436     padding: 5px 10px 0;
     436    padding: 0 10px;
    437437}
    438438
     
    447447.customize-control .thumbnail-image img {
    448448    cursor: pointer;
     449}
     450
     451#customize-controls .thumbnail-audio .thumbnail {
     452    max-width: 64px;
     453    max-height: 64px;
     454    margin: 10px;
     455    float: left;
    449456}
    450457
  • trunk/src/wp-admin/js/customize-controls.js

    r31538 r31661  
    1 /* globals _wpCustomizeHeader, _wpCustomizeBackground, _wpMediaViewsL10n */
     1/* globals _wpCustomizeHeader, _wpCustomizeBackground, _wpMediaViewsL10n, MediaElementPlayer */
    22(function( exports, $ ){
    33    var Container, focus, api = wp.customize;
     
    317317            var self = this;
    318318            params = params || {};
     319            var section = this, previousCompleteCallback = params.completeCallback;
     320            params.completeCallback = function () {
     321                if ( previousCompleteCallback ) {
     322                    previousCompleteCallback.apply( section, arguments );
     323                }
     324                if ( expanded ) {
     325                    section.container.trigger( 'expanded' );
     326                } else {
     327                    section.container.trigger( 'collapsed' );
     328                }
     329            };
    319330            if ( ( expanded && this.expanded.get() ) || ( ! expanded && ! this.expanded.get() ) ) {
    320331                params.unchanged = true;
     
    13751386            var control = this;
    13761387            // Shortcut so that we don't have to use _.bind every time we add a callback.
    1377             _.bindAll( control, 'restoreDefault', 'removeFile', 'openFrame', 'select' );
     1388            _.bindAll( control, 'restoreDefault', 'removeFile', 'openFrame', 'select', 'pausePlayer' );
    13781389
    13791390            // Bind events, with delegation to facilitate re-rendering.
    13801391            control.container.on( 'click keydown', '.upload-button', control.openFrame );
     1392            control.container.on( 'click keydown', '.upload-button', control.pausePlayer );
    13811393            control.container.on( 'click keydown', '.thumbnail-image img', control.openFrame );
    13821394            control.container.on( 'click keydown', '.default-button', control.restoreDefault );
     1395            control.container.on( 'click keydown', '.remove-button', control.pausePlayer );
    13831396            control.container.on( 'click keydown', '.remove-button', control.removeFile );
     1397            control.container.on( 'click keydown', '.remove-button', control.cleanupPlayer );
     1398
     1399            // Resize the player controls when it becomes visible (ie when section is expanded)
     1400            api.section( control.section() ).container
     1401                .on( 'expanded', function() {
     1402                    if ( control.player ) {
     1403                        control.player.setControlsSize();
     1404                    }
     1405                })
     1406                .on( 'collapsed', function() {
     1407                    control.pausePlayer();
     1408                });
    13841409
    13851410            // Re-render whenever the control's setting changes.
    13861411            control.setting.bind( function () { control.renderContent(); } );
     1412        },
     1413
     1414        pausePlayer: function () {
     1415            this.player && this.player.pause();
     1416        },
     1417
     1418        cleanupPlayer: function () {
     1419            this.player && wp.media.mixin.removePlayer( this.player );
    13871420        },
    13881421
     
    14321465        select: function() {
    14331466            // Get the attachment from the modal frame.
    1434             var attachment = this.frame.state().get( 'selection' ).first().toJSON();
     1467            var node,
     1468                attachment = this.frame.state().get( 'selection' ).first().toJSON(),
     1469                mejsSettings = window._wpmejsSettings || {};
    14351470
    14361471            this.params.attachment = attachment;
     
    14381473            // Set the Customizer setting; the callback takes care of rendering.
    14391474            this.setting( attachment.url );
     1475            node = this.container.find( 'audio, video' ).get(0);
     1476
     1477            // Initialize audio/video previews.
     1478            if ( node ) {
     1479                this.player = new MediaElementPlayer( node, mejsSettings );
     1480            } else {
     1481                this.cleanupPlayer();
     1482            }
    14401483        },
    14411484
  • trunk/src/wp-includes/class-wp-customize-control.php

    r31539 r31661  
    764764                                <img class="attachment-thumb" src="{{ data.attachment.sizes.full.url }}" draggable="false" />
    765765                            <# } else if ( 'audio' === data.attachment.type ) { #>
    766                                 <img class="attachment-thumb type-icon" src="{{ data.attachment.icon }}" class="icon" draggable="false" />
     766                                <# if ( data.attachment.image && data.attachment.image.src && data.attachment.image.src !== data.attachment.icon ) { #>
     767                                    <img src="{{ data.attachment.image.src }}" class="thumbnail" draggable="false" />
     768                                <# } else { #>
     769                                    <img src="{{ data.attachment.icon }}" class="attachment-thumb type-icon" draggable="false" />
     770                                <# } #>
    767771                                <p class="attachment-meta attachment-meta-title">&#8220;{{ data.attachment.title }}&#8221;</p>
    768772                                <# if ( data.attachment.album || data.attachment.meta.album ) { #>
     
    772776                                <p class="attachment-meta">{{ data.attachment.artist || data.attachment.meta.artist }}</p>
    773777                                <# } #>
     778                                <audio style="visibility: hidden" controls class="wp-audio-shortcode" width="100%" preload="none">
     779                                    <source type="{{ data.attachment.mime }}" src="{{ data.attachment.url }}"/>
     780                                </audio>
     781                            <# } else if ( 'video' === data.attachment.type ) { #>
     782                                <div class="wp-media-wrapper wp-video">
     783                                    <video controls="controls" class="wp-video-shortcode" preload="metadata"
     784                                        <# if ( data.attachment.image && data.attachment.image.src !== data.attachment.icon ) { #>poster="{{ data.attachment.image.src }}"<# } #>>
     785                                        <source type="{{ data.attachment.mime }}" src="{{ data.attachment.url }}"/>
     786                                    </video>
     787                                </div>
    774788                            <# } else { #>
    775789                                <img class="attachment-thumb type-icon" src="{{ data.attachment.icon }}" class="icon" draggable="false" />
Note: See TracChangeset for help on using the changeset viewer.