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.

Built from https://develop.svn.wordpress.org/trunk@40656


git-svn-id: http://core.svn.wordpress.org/trunk@40519 1a063a9b-81f0-0310-95a4-ce76da25c4cd

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

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

wp-admin/js/widgets/media-video-widget.min.js

@@ -1 +1 @@
-!function(a){"use strict";var b,c,d;d=wp.media.view.MediaFrame.VideoDetails.extend({createStates:function(){this.states.add([new wp.media.controller.VideoDetails({media:this.media}),new wp.media.controller.MediaLibrary({type:"video",id:"add-video-source",title:wp.media.view.l10n.videoAddSourceTitle,toolbar:"add-video-source",media:this.media,menu:!1}),new wp.media.controller.MediaLibrary({type:"text",id:"add-track",title:wp.media.view.l10n.videoAddTrackTitle,toolbar:"add-track",media:this.media,menu:"video-details"})])}}),b=a.MediaWidgetModel.extend({}),c=a.MediaWidgetControl.extend({showDisplaySettings:!1,oembedResponses:{},mapModelToMediaFrameProps:function(b){var c,d=this;return c=a.MediaWidgetControl.prototype.mapModelToMediaFrameProps.call(d,b),c.link="embed",c},fetchEmbed:function(){var a,b=this;a=b.model.get("url"),b.oembedResponses[a]||(b.fetchEmbedDfd&&"pending"===b.fetchEmbedDfd.state()&&b.fetchEmbedDfd.abort(),b.fetchEmbedDfd=jQuery.ajax({url:wp.media.view.settings.oEmbedProxyUrl,data:{url:b.model.get("url"),maxwidth:b.model.get("width"),maxheight:b.model.get("height"),_wpnonce:wp.media.view.settings.nonce.wpRestApi,discover:!1},type:"GET",dataType:"json",context:b}),b.fetchEmbedDfd.done(function(c){b.oembedResponses[a]=c,b.renderPreview()}),b.fetchEmbedDfd.fail(function(){b.oembedResponses[a]=null}))},renderPreview:function(){var a,b,c,d,e,f,g,h,i=this,j=!1;c=i.model.get("attachment_id"),d=i.model.get("url"),h=i.model.get("error"),(c||d)&&(!c&&d&&(f=document.createElement("a"),f.href=d,j=/vimeo|youtu\.?be/.test(f.host)),j&&(i.fetchEmbed(),e=i.oembedResponses[d]?i.oembedResponses[d].thumbnail_url:null),g=i.selectedAttachment.get("mime"),g&&c&&(_.contains(_.values(wp.media.view.settings.embedMimes),g)||(h="unsupported_file_type")),a=i.$el.find(".media-widget-preview"),b=wp.template("wp-media-widget-video-preview"),a.html(b({model:{attachment_id:i.model.get("attachment_id"),src:d,poster:e},is_hosted_embed:j,error:h})))},editMedia:function(){var a,b,c,e=this;b=e.mapModelToMediaFrameProps(e.model.toJSON()),a=new d({frame:"video",state:"video-details",metadata:b}),wp.media.frame=a,a.$el.addClass("media-widget"),c=function(a){e.selectedAttachment.set(a),e.model.set(_.extend(_.omit(e.model.defaults(),"title"),e.mapMediaToModelProps(a),{error:!1}))},a.state("video-details").on("update",c),a.state("replace-video").on("replace",c),a.on("close",function(){a.detach()}),a.open()}}),a.controlConstructors.media_video=c,a.modelConstructors.media_video=b}(wp.mediaWidgets);
+!function(a){"use strict";var b,c,d;d=wp.media.view.MediaFrame.VideoDetails.extend({createStates:function(){this.states.add([new wp.media.controller.VideoDetails({media:this.media}),new wp.media.controller.MediaLibrary({type:"video",id:"add-video-source",title:wp.media.view.l10n.videoAddSourceTitle,toolbar:"add-video-source",media:this.media,menu:!1}),new wp.media.controller.MediaLibrary({type:"text",id:"add-track",title:wp.media.view.l10n.videoAddTrackTitle,toolbar:"add-track",media:this.media,menu:"video-details"})])}}),b=a.MediaWidgetModel.extend({}),c=a.MediaWidgetControl.extend({showDisplaySettings:!1,oembedResponses:{},mapModelToMediaFrameProps:function(b){var c,d=this;return c=a.MediaWidgetControl.prototype.mapModelToMediaFrameProps.call(d,b),c.link="embed",c},fetchEmbed:function(){var a,b=this;a=b.model.get("url"),b.oembedResponses[a]||(b.fetchEmbedDfd&&"pending"===b.fetchEmbedDfd.state()&&b.fetchEmbedDfd.abort(),b.fetchEmbedDfd=jQuery.ajax({url:wp.media.view.settings.oEmbedProxyUrl,data:{url:b.model.get("url"),maxwidth:b.model.get("width"),maxheight:b.model.get("height"),_wpnonce:wp.media.view.settings.nonce.wpRestApi,discover:!1},type:"GET",dataType:"json",context:b}),b.fetchEmbedDfd.done(function(c){b.oembedResponses[a]=c,b.renderPreview()}),b.fetchEmbedDfd.fail(function(){b.oembedResponses[a]=null}))},renderPreview:function(){var a,b,c,d,e,f,g,h,i=this,j=!1;c=i.model.get("attachment_id"),d=i.model.get("url"),h=i.model.get("error"),(c||d)&&(!c&&d&&(f=document.createElement("a"),f.href=d,j=/vimeo|youtu\.?be/.test(f.host)),j&&(i.fetchEmbed(),e=i.oembedResponses[d]?i.oembedResponses[d].thumbnail_url:null),g=i.selectedAttachment.get("mime"),g&&c&&(_.contains(_.values(wp.media.view.settings.embedMimes),g)||(h="unsupported_file_type")),a=i.$el.find(".media-widget-preview"),b=wp.template("wp-media-widget-video-preview"),a.html(b({model:{attachment_id:i.model.get("attachment_id"),src:d,poster:e},is_hosted_embed:j,error:h})),wp.mediaelement.initialize())},editMedia:function(){var a,b,c,e=this;b=e.mapModelToMediaFrameProps(e.model.toJSON()),a=new d({frame:"video",state:"video-details",metadata:b}),wp.media.frame=a,a.$el.addClass("media-widget"),c=function(a){e.selectedAttachment.set(a),e.model.set(_.extend(_.omit(e.model.defaults(),"title"),e.mapMediaToModelProps(a),{error:!1}))},a.state("video-details").on("update",c),a.state("replace-video").on("replace",c),a.on("close",function(){a.detach()}),a.open()}}),a.controlConstructors.media_video=c,a.modelConstructors.media_video=b}(wp.mediaWidgets);

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

wp-includes/version.php

@@ -4,7 +4,7 @@
  *
  * @global string $wp_version
  */
-$wp_version = '4.8-alpha-40655';
+$wp_version = '4.8-alpha-40656';
 
 /**
  * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.