Upstream/WordPress
1
0
Fork 0
mirror of https://github.com/WordPress/WordPress.git synced 2024-06-23 13:24:57 +02:00
Code Issues Projects Releases Wiki Activity

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

Browse Source 
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
This commit is contained in:
Weston Ruter 2017-05-12 19:56:43 +00:00
parent d1ec180619
commit 020ffded1a
5 changed files with 20 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

2
wp-admin/js/widgets/media-video-widget.min.js vendored
View File

@ -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);

18
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

2
wp-admin/js/widgets/media-widgets.min.js vendored
View File

File diff suppressed because one or more lines are too long

2
wp-includes/version.php
View File

@ -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.