From fd0238109869cc1dd37ba7f0ee43d94f6c1d5868 Mon Sep 17 00:00:00 2001
From: Weston Ruter <westonruter@git.wordpress.org>
Date: Fri, 12 May 2017 19:55:53 +0000
Subject: [PATCH] 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
---
 src/wp-admin/js/widgets/media-video-widget.js |  1 +
 src/wp-admin/js/widgets/media-widgets.js      | 18 ++++++++++++++++--
 2 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/src/wp-admin/js/widgets/media-video-widget.js b/src/wp-admin/js/widgets/media-video-widget.js
index 8c5563164d..547c4efc48 100644
--- a/src/wp-admin/js/widgets/media-video-widget.js
+++ b/src/wp-admin/js/widgets/media-video-widget.js
@@ -180,6 +180,7 @@
 				is_hosted_embed: isHostedEmbed,
 				error: error
 			} ) );
+			wp.mediaelement.initialize();
 		},
 
 		/**
diff --git a/src/wp-admin/js/widgets/media-widgets.js b/src/wp-admin/js/widgets/media-widgets.js
index c45e9ee954..1985e7abf0 100644
--- a/src/wp-admin/js/widgets/media-widgets.js
+++ b/src/wp-admin/js/widgets/media-widgets.js
@@ -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