sergiotarxz
/
Wordpress
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Widgets: Defer rendering controls for media widgets until container element fully expands. 

Fixes issue with MediaElement.js failing to build the player in an animating container that doesn't have established dimensions.
Also utilizes MediaElement.js for the video widget instead of using a native player.

See #32417.
Fixes #40750.


git-svn-id: https://develop.svn.wordpress.org/trunk@40656 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Weston Ruter 2017-05-12 19:55:53 +00:00
parent c21b828581
commit fd02381098
2 changed files with 17 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/wp-admin/js/widgets/media-video-widget.js
View File

@ -180,6 +180,7 @@
is_hosted_embed: isHostedEmbed,
error: error
} ) );
wp.mediaelement.initialize();
},
/**

18
src/wp-admin/js/widgets/media-widgets.js
View File

@ -1000,7 +1000,7 @@ wp.mediaWidgets = ( function( $ ) {
* @returns {void}
*/
component.handleWidgetAdded = function handleWidgetAdded( event, widgetContainer ) {
var widgetContent, controlContainer, widgetForm, idBase, ControlConstructor, ModelConstructor, modelAttributes, widgetControl, widgetModel, widgetId;
var widgetContent, controlContainer, widgetForm, idBase, ControlConstructor, ModelConstructor, modelAttributes, widgetControl, widgetModel, widgetId, widgetInside, animatedCheckDelay = 50, renderWhenAnimationDone;
widgetForm = widgetContainer.find( '> .widget-inside > .form, > .widget-inside > form' ); // Note: '.form' appears in the customizer, whereas 'form' on the widgets admin screen.
widgetContent = widgetForm.find( '> .widget-content' );
idBase = widgetForm.find( '> .id_base' ).val();
@ -1050,7 +1050,21 @@ wp.mediaWidgets = ( function( $ ) {
el: controlContainer,
model: widgetModel
});
widgetControl.render();
/*
* Render the widget once the widget parent's container finishes animating,
* as the widget-added event fires with a slideDown of the container.
* This ensures that the container's dimensions are fixed so that ME.js
* can initialize with the proper dimensions.
*/
widgetInside = widgetContainer.parent();
renderWhenAnimationDone = function() {
if ( widgetInside.is( ':animated' ) ) {
setTimeout( renderWhenAnimationDone, animatedCheckDelay );
} else {
widgetControl.render();
}
};
/*
* Note that the model and control currently won't ever get garbage-collected