Changeset 40656

Timestamp:

05/12/2017 07:55:53 PM (8 years ago)

Author:

westonruter

Message:

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.

Location:

trunk/src/wp-admin/js/widgets

Files:

• media-video-widget.js (modified) (1 diff)
• media-widgets.js (modified) (2 diffs)

trunk/src/wp-admin/js/widgets/media-video-widget.js

@@ -181 +181 @@
                 error: error
             } ) );
+            wp.mediaelement.initialize();
         },
 

trunk/src/wp-admin/js/widgets/media-widgets.js

@@ -1001 +1001 @@
      */
     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' );
@@ -1051 +1051 @@
             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();
+            }
+        };
 
         /*