Changeset 31661

Timestamp:

03/07/2015 11:05:57 AM (10 years ago)

Author:

ocean90

Message:

Customizer: Add audio/video previews for upload controls.

props celloexpressions, Fab1en, wonderboymusic.
fixes #30850.

Location:

trunk/src

Files:

• wp-admin/css/customize-controls.css (modified) (2 diffs)
• wp-admin/js/customize-controls.js (modified) (5 diffs)
• wp-includes/class-wp-customize-control.php (modified) (2 diffs)

trunk/src/wp-admin/css/customize-controls.css

@@ -434 +434 @@
     text-overflow: ellipsis;
     margin: 0;
-    padding: 5px 10px 0;
+    padding: 0 10px;
 }
 
@@ -447 +447 @@
 .customize-control .thumbnail-image img {
     cursor: pointer;
+}
+
+#customize-controls .thumbnail-audio .thumbnail {
+    max-width: 64px;
+    max-height: 64px;
+    margin: 10px;
+    float: left;
 }
 

trunk/src/wp-admin/js/customize-controls.js

@@ -1 @@
-/* globals _wpCustomizeHeader, _wpCustomizeBackground, _wpMediaViewsL10n */
+/* globals _wpCustomizeHeader, _wpCustomizeBackground, _wpMediaViewsL10n, MediaElementPlayer */
 (function( exports, $ ){
     var Container, focus, api = wp.customize;
@@ -317 +317 @@
             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;
@@ -1375 +1386 @@
             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 );
         },
 
@@ -1432 +1465 @@
         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;
@@ -1438 +1473 @@
             // 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();
+            }
         },
 

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

@@ -764 +764 @@
                                 <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 ) { #>
@@ -772 +776 @@
                                 <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" />