Audio/video previews for media controls in the Customizer

[celloexpressions]

These were mostly in place but missing whatever's needed to trigger MediaElement.js, so they got pulled in [30712]. Turns out we just need to do something along the lines of control.container.find('audio,video').mediaelementplayer(_wpmejsSettings ); after rendering it from the JS template.

[celloexpressions]

Implement audio & video control previewing.

[celloexpressions]

This is a nice quick improvement. Design improvements beyond this can happen in #30618.

[ocean90]

After the media is saved and doing a page refresh the preview doesn't work anymore. You will see a gray box with a download link.

[celloexpressions]

I think that means that MediaElement.js is having issues detecting browser support for the players, so it's using the fallback (a download link). Maybe it's trying to load them too early? I have no idea why it would do that, and didn't see that issue in my testing...

@wonderboymusic - any insights here?

[Fab1en]

I played a bit with @celloexpressions patch​, and I found two issues :

1. When the customizer is loaded with a media already present in the Upload control, mediaelement.js already handles it. So calling mediaelementplayer again breaks it.
2. When mediaelementplayer is first run, the section is closed so the player inside the control is not visible. This causes the player control bar width to be set to a wrong value. setControlsSize mediaelement method should be called as soon as the player is made visible to restore the right control bar width

I have modified the patch to correct both issues, but I was not able to find the proper events to bind into. I put a 5s delay, so if you open the section where upload control is within 5s after loading, it works.

Is there an event that is triggered upon section opening, so that I can do something like

control.section().on( 'open', function() { /* do something */ } );

?

[celloexpressions]

@Fab1en: the function you're looking for is api.Section.onChangeExpanded(). I believe there's a hook to bind in there but if there isn't we can add one. Or may be able to do something like control.section().bind...

[westonruter]

I think what you're looking for is:

wp.customize.section( control.section() ).expanded.bind( function ( expanded ) {
    if ( expanded ) {
        // it is open
    } else {
        // it is closed
    }
} )

[Fab1en]

@westonruter : that's almost this, but the expanded event fires when the section start its expansion. I need an event that fires after the expansion is finished. In fact, what I need is called defaultExpandedArguments.completeCallback but I can't find a way to set it only for the proper control. Any hints ?

[Aniruddh]

Replying to Fab1en:

@westonruter : that's almost this, but the expanded event fires when the section start its expansion. I need an event that fires after the expansion is finished. In fact, what I need is called defaultExpandedArguments.completeCallback but I can't find a way to set it only for the proper control. Any hints ?

I think a patch of customizer-controls.js should be added where we change the defaultExpandedArguments.completeCallback from jQuery.noop to an actual function where we trigger an expanded event.

This will allow us to do something like this:

wp.customize.section( theSection ).on( 'expanded', function() {
    //do something
} );

And I think this event can be very useful.

[westonruter]

Yes, having an expanded (and collapsed) event for Sections would align with what widget form controls in the Customizer are ​doing. But in the mean time of not having it in Core, by the power of JavaScript you can have it now, by adding the following to some plugin code that gets enqueued after customize-controls.js:

var oldToggleExpanded = wp.customize.Section.prototype._toggleExpanded;
wp.customize.Section.prototype._toggleExpanded = function ( expanded, params ) {
        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' );
                }
        }
        oldToggleExpanded.call( this, expanded, params );
};

Note that as with widget form controls, the event is triggered on the DOM element itself, so that's what you listen on.

[Fab1en]

Introduce the triggering of 'expanded' and 'collapsed' events on a section

[Fab1en]

30850.3.patch​ includes @westonruter code above (without the monkey patch because, hey, we are in core !) and uses it to refresh the player controls once the panel is open.

I think we now have something pretty close to a good fix to this ticket.

[Fab1en]

Here is a simple way to test this : edit the inc/customizer.php file in the twentyfifteen theme, and add an upload control to the list :

$wp_customize->add_setting( 'upload_test', array(
	'default'           => '',
) );
$wp_customize->add_control( new WP_Customize_Upload_Control( $wp_customize, 'upload_test', array(
	'label'       => 'Upload test',
	'section'     => 'header_image',
) ) );

[ocean90]

For testing:

function test_customize_media( $wp_customize ) {
	$wp_customize->add_section( 'media', array( 'title' => 'Media', 'priority' => 0 ) );
	$wp_customize->add_setting( 'upload_control', array(
		'default' => 'https://make.wordpress.org/files/2011/06/wordpress-community-summit1.jpg',
	) );
	$wp_customize->add_control( new WP_Customize_Upload_Control( $wp_customize, 'upload_control', array(
		'label' => 'Upload Control',
		'section' => 'media',
		'priority' => 1,
	) ) );
}
add_action( 'customize_register', 'test_customize_media' );

Edit: Sorry @Fab1en, haven't seen you comment…

[wonderboymusic]

30850.2.diff​ should do it.

[ocean90]

In 31661:

Customizer: Add audio/video previews for upload controls.

props celloexpressions, Fab1en, wonderboymusic.
fixes #30850.