Cleanup audio/video shortcodes in the media modal:

* On the controller's `update`, `replace`, and `close` events, call `detach()` on the frame
* Cleanup the HTML ouput of the Underscore templates.
* Move some logic from the Underscore template to the `VideoDetails` view class.

See #27016.


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


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

wp-includes/js/media-views.js

@@ -6237,7 +6237,6 @@
 
 		close : function() {
 			this.mejs.pause();
-			this.remove();
 		},
 
 		player : function (mejs) {
@@ -6302,7 +6301,6 @@
 
 		close : function() {
 			this.mejs.pause();
-			this.remove();
 		},
 
 		player : function (mejs) {
@@ -6310,7 +6308,7 @@
 		},
 
 		render: function() {
-			var self = this, settings = {
+			var video, self = this, settings = {
 				success : this.player
 			};
 
@@ -6321,7 +6319,14 @@
 			media.view.Settings.AttachmentDisplay.prototype.render.apply( this, arguments );
 			setTimeout( function() { self.resetFocus(); }, 10 );
 
-			new MediaElementPlayer( this.$('.wp-video-shortcode').get(0), settings );
+			video = this.$('.wp-video-shortcode').get(0);
+			video.src = [
+				video.src,
+				video.src.indexOf('?') > -1 ? '&' : '?',
+				(new Date()).getTime()
+			].join('');
+
+			new MediaElementPlayer( video, settings );
 			return this;
 		},
 

wp-includes/js/tinymce/plugins/wpgallery/plugin.js

@@ -94,16 +94,24 @@ tinymce.PluginManager.add('wpgallery', function( editor ) {
 			});
 		} else if ( editor.dom.hasClass( node, 'wp-video' ) ) {
 			frame = wp.media.video.edit( data );
+			frame.on( 'close', function () {
+				frame.detach();
+			} );
 			frame.state( 'video-details' ).on( 'update replace', function ( selection ) {
 				var shortcode = wp.media.video.shortcode( selection );
 				editor.dom.setAttrib( node, 'data-wp-media', window.encodeURIComponent( shortcode ) );
+				frame.detach();
 			} );
 			frame.open();
 		} else if ( editor.dom.hasClass( node, 'wp-audio' ) ) {
 			frame = wp.media.audio.edit( data );
+			frame.on( 'close', function () {
+				frame.detach();
+			} );
 			frame.state( 'audio-details' ).on( 'update replace', function ( selection ) {
 				var shortcode = wp.media.audio.shortcode( selection );
 				editor.dom.setAttrib( node, 'data-wp-media', window.encodeURIComponent( shortcode ) );
+				frame.detach();
 			} );
 			frame.open();
 		} else {

wp-includes/js/tinymce/plugins/wpgallery/plugin.min.js

@@ -1 +1 @@
-tinymce.PluginManager.add("wpgallery",function(a){function b(a){return a.replace(/\[gallery([^\]]*)\]/g,function(a){return c("wp-gallery",a)})}function c(a,b){return b=window.encodeURIComponent(b),'<img src="'+tinymce.Env.transparentSrc+'" class="wp-media mceItem '+a+'" data-wp-media="'+b+'" data-mce-resize="false" data-mce-placeholder="1" />'}function d(a,b,d){var e;return d&&d.indexOf("["+b)>-1?(e=a.length-d.length,c("wp-"+b,a.substring(0,e))+a.substring(e)):c("wp-"+b,a)}function e(a){for(var b=/\[(video-playlist|audio|video|playlist)[^\]]*\]/,c=/\[(video-playlist|audio|video|playlist)[^\]]*\]([\s\S]*?\[\/\1\])?/;b.test(a);)a=a.replace(c,d);return a}function f(a){function b(a,b){return b=new RegExp(b+'="([^"]+)"').exec(a),b?window.decodeURIComponent(b[1]):""}return a.replace(/(?:<p(?: [^>]+)?>)*(<img [^>]+>)(?:<\/p>)*/g,function(a,c){var d=b(c,"data-wp-media");return d?"<p>"+d+"</p>":a})}function g(b){var c,d,e;"IMG"===b.nodeName&&"undefined"!=typeof wp&&wp.media&&(e=window.decodeURIComponent(a.dom.getAttrib(b,"data-wp-media")),a.dom.hasClass(b,"wp-gallery")&&wp.media.gallery?(c=wp.media.gallery,d=c.edit(e),d.state("gallery-edit").on("update",function(e){var f=c.shortcode(e).string();a.dom.setAttrib(b,"data-wp-media",window.encodeURIComponent(f)),d.detach()})):a.dom.hasClass(b,"wp-playlist")&&wp.media.playlist?(d=wp.media.playlist.edit(e),d.state("playlist-edit").on("update",function(c){var e=wp.media.playlist.shortcode(c).string();a.dom.setAttrib(b,"data-wp-media",window.encodeURIComponent(e)),d.detach()})):a.dom.hasClass(b,"wp-video-playlist")&&wp.media["video-playlist"]?(d=wp.media["video-playlist"].edit(e),d.state("video-playlist-edit").on("update",function(c){var e=wp.media["video-playlist"].shortcode(c).string();a.dom.setAttrib(b,"data-wp-media",window.encodeURIComponent(e)),d.detach()})):a.dom.hasClass(b,"wp-video")?(d=wp.media.video.edit(e),d.state("video-details").on("update replace",function(c){var d=wp.media.video.shortcode(c);a.dom.setAttrib(b,"data-wp-media",window.encodeURIComponent(d))}),d.open()):a.dom.hasClass(b,"wp-audio")?(d=wp.media.audio.edit(e),d.state("audio-details").on("update replace",function(c){var d=wp.media.audio.shortcode(c);a.dom.setAttrib(b,"data-wp-media",window.encodeURIComponent(d))}),d.open()):window.console&&window.console.log("Edit AV shortcode "+e))}a.addCommand("WP_Gallery",function(){g(a.selection.getNode())}),a.on("mouseup",function(b){function c(){d.removeClass(d.select("img.wp-media-selected"),"wp-media-selected")}var d=a.dom,e=b.target;"IMG"===e.nodeName&&d.getAttrib(e,"data-wp-media")?2!==b.button&&(d.hasClass(e,"wp-media-selected")?g(e):(c(),d.addClass(e,"wp-media-selected"))):c()}),a.on("ResolveName",function(b){var c=a.dom,d=b.target;"IMG"===d.nodeName&&c.getAttrib(d,"data-wp-media")&&(c.hasClass(d,"wp-gallery")?b.name="gallery":c.hasClass(d,"wp-video")?b.name="video":c.hasClass(d,"wp-audio")?b.name="audio":c.hasClass(d,"wp-playlist")?b.name="playlist":c.hasClass(d,"wp-video-playlist")&&(b.name="video-playlist"))}),a.on("BeforeSetContent",function(c){a.plugins.wpview||(c.content=b(c.content)),c.content=e(c.content)}),a.on("PostProcess",function(a){a.get&&(a.content=f(a.content))})});
+tinymce.PluginManager.add("wpgallery",function(a){function b(a){return a.replace(/\[gallery([^\]]*)\]/g,function(a){return c("wp-gallery",a)})}function c(a,b){return b=window.encodeURIComponent(b),'<img src="'+tinymce.Env.transparentSrc+'" class="wp-media mceItem '+a+'" data-wp-media="'+b+'" data-mce-resize="false" data-mce-placeholder="1" />'}function d(a,b,d){var e;return d&&d.indexOf("["+b)>-1?(e=a.length-d.length,c("wp-"+b,a.substring(0,e))+a.substring(e)):c("wp-"+b,a)}function e(a){for(var b=/\[(video-playlist|audio|video|playlist)[^\]]*\]/,c=/\[(video-playlist|audio|video|playlist)[^\]]*\]([\s\S]*?\[\/\1\])?/;b.test(a);)a=a.replace(c,d);return a}function f(a){function b(a,b){return b=new RegExp(b+'="([^"]+)"').exec(a),b?window.decodeURIComponent(b[1]):""}return a.replace(/(?:<p(?: [^>]+)?>)*(<img [^>]+>)(?:<\/p>)*/g,function(a,c){var d=b(c,"data-wp-media");return d?"<p>"+d+"</p>":a})}function g(b){var c,d,e;"IMG"===b.nodeName&&"undefined"!=typeof wp&&wp.media&&(e=window.decodeURIComponent(a.dom.getAttrib(b,"data-wp-media")),a.dom.hasClass(b,"wp-gallery")&&wp.media.gallery?(c=wp.media.gallery,d=c.edit(e),d.state("gallery-edit").on("update",function(e){var f=c.shortcode(e).string();a.dom.setAttrib(b,"data-wp-media",window.encodeURIComponent(f)),d.detach()})):a.dom.hasClass(b,"wp-playlist")&&wp.media.playlist?(d=wp.media.playlist.edit(e),d.state("playlist-edit").on("update",function(c){var e=wp.media.playlist.shortcode(c).string();a.dom.setAttrib(b,"data-wp-media",window.encodeURIComponent(e)),d.detach()})):a.dom.hasClass(b,"wp-video-playlist")&&wp.media["video-playlist"]?(d=wp.media["video-playlist"].edit(e),d.state("video-playlist-edit").on("update",function(c){var e=wp.media["video-playlist"].shortcode(c).string();a.dom.setAttrib(b,"data-wp-media",window.encodeURIComponent(e)),d.detach()})):a.dom.hasClass(b,"wp-video")?(d=wp.media.video.edit(e),d.on("close",function(){d.detach()}),d.state("video-details").on("update replace",function(c){var e=wp.media.video.shortcode(c);a.dom.setAttrib(b,"data-wp-media",window.encodeURIComponent(e)),d.detach()}),d.open()):a.dom.hasClass(b,"wp-audio")?(d=wp.media.audio.edit(e),d.on("close",function(){d.detach()}),d.state("audio-details").on("update replace",function(c){var e=wp.media.audio.shortcode(c);a.dom.setAttrib(b,"data-wp-media",window.encodeURIComponent(e)),d.detach()}),d.open()):window.console&&window.console.log("Edit AV shortcode "+e))}a.addCommand("WP_Gallery",function(){g(a.selection.getNode())}),a.on("mouseup",function(b){function c(){d.removeClass(d.select("img.wp-media-selected"),"wp-media-selected")}var d=a.dom,e=b.target;"IMG"===e.nodeName&&d.getAttrib(e,"data-wp-media")?2!==b.button&&(d.hasClass(e,"wp-media-selected")?g(e):(c(),d.addClass(e,"wp-media-selected"))):c()}),a.on("ResolveName",function(b){var c=a.dom,d=b.target;"IMG"===d.nodeName&&c.getAttrib(d,"data-wp-media")&&(c.hasClass(d,"wp-gallery")?b.name="gallery":c.hasClass(d,"wp-video")?b.name="video":c.hasClass(d,"wp-audio")?b.name="audio":c.hasClass(d,"wp-playlist")?b.name="playlist":c.hasClass(d,"wp-video-playlist")&&(b.name="video-playlist"))}),a.on("BeforeSetContent",function(c){a.plugins.wpview||(c.content=b(c.content)),c.content=e(c.content)}),a.on("PostProcess",function(a){a.get&&(a.content=f(a.content))})});

wp-includes/media-template.php

@@ -650,27 +650,21 @@ function wp_print_media_templates() {
 	</script>
 
 	<script type="text/html" id="tmpl-audio-details">
-		<?php // reusing .media-embed to pick up the styles for now ?>
+		<?php // reusing .media-embed to pick up the styles for now
-		<# var rendered = false; #>
+		?><# var rendered = false; #>
 		<div class="media-embed">
 			<div class="embed-media-settings embed-audio-settings">
-				<#
+				<# if ( data.model.src ) { #>
-					var src,
+					<audio controls
-						t = (new Date()).getTime();
+						class="wp-audio-shortcode"
-
+						src="{{{ data.model.src }}}"
-					if ( data.model.src ) {
-						src = data.model.src + (data.model.src.indexOf('?') > -1 ? '&' : '?' ) + t;
-					#>
-					<audio controls class="wp-audio-shortcode" src="{{{ src }}}"
 						preload="{{{ _.isUndefined( data.model.preload ) ? 'none' : data.model.preload }}}"
 						<#
-						if ( ! _.isUndefined( data.model.autoplay ) && data.model.autoplay ) {
+						<?php foreach ( array( 'autoplay', 'loop' ) as $attr ):
-							#> autoplay<#
+						?>if ( ! _.isUndefined( data.model.<?php echo $attr ?> ) && data.model.<?php echo $attr ?> ) {
+							#> <?php echo $attr ?><#
 						}
-
+						<?php endforeach ?>#>
-						if ( ! _.isUndefined( data.model.loop ) && data.model.loop ) {
-							#> loop<#
-						} #>
 					/>
 					<# rendered = true; #>
 				<label class="setting">
@@ -681,23 +675,21 @@ function wp_print_media_templates() {
 				<?php
 				$default_types = wp_get_audio_extensions();
 
-				foreach ( $default_types as $type ): ?>
+				foreach ( $default_types as $type ):
-				<# if ( data.model.<?php echo $type ?> ) { #>
+				?><# if ( data.model.<?php echo $type ?> ) { #>
-					<# if ( ! rendered ) {
+					<# if ( ! rendered ) { #>
-						src = data.model.<?php echo $type ?> + (data.model.<?php echo $type ?>.indexOf('?') > -1 ? '&' : '?' ) + t;
+					<audio controls
-					#>
+						class="wp-audio-shortcode"
-					<audio controls class="wp-audio-shortcode" src="{{{ src }}}"
+						src="{{{ data.model.<?php echo $type ?> }}}"
 						preload="{{{ _.isUndefined( data.model.preload ) ? 'none' : data.model.preload }}}"
 						<#
-						if ( ! _.isUndefined( data.model.autoplay ) && data.model.autoplay ) {
+						<?php foreach ( array( 'autoplay', 'loop' ) as $attr ):
-							#> autoplay<#
+						?>if ( ! _.isUndefined( data.model.<?php echo $attr ?> ) && data.model.<?php echo $attr ?> ) {
+							#> <?php echo $attr ?><#
 						}
-						if ( ! _.isUndefined( data.model.loop ) && data.model.loop ) {
+						<?php endforeach ?>#>
-							#> loop<#
-						} #>
 					/>
-					<#
+					<# rendered = true;
-						rendered = true;
 					} #>
 				<label class="setting">
 					<span><?php echo strtoupper( $type ) ?></span>
@@ -709,15 +701,9 @@ function wp_print_media_templates() {
 				<div class="setting preload">
 					<span><?php _e( 'Preload' ); ?></span>
 					<div class="button-group button-large" data-setting="preload">
-						<button class="button" value="auto">
+						<button class="button" value="auto"><?php _e( 'Auto' ); ?></button>
-							<?php esc_attr_e( 'Auto' ); ?>
+						<button class="button" value="metadata"><?php _e( 'Metadata' ); ?></button>
-						</button>
+						<button class="button active" value="none"><?php _e( 'None' ); ?></button>
-						<button class="button" value="metadata">
-							<?php esc_attr_e( 'Metadata' ); ?>
-						</button>
-						<button class="button active" value="none">
-							<?php esc_attr_e( 'None' ); ?>
-						</button>
 					</div>
 				</div>
 
@@ -736,41 +722,36 @@ function wp_print_media_templates() {
 	</script>
 
 	<script type="text/html" id="tmpl-video-details">
-		<?php // reusing .media-embed to pick up the styles for now ?>
+		<?php // reusing .media-embed to pick up the styles for now
-		<# var rendered = false; #>
+		?><# var rendered = false; #>
 		<div class="media-embed">
 			<div class="embed-media-settings embed-video-settings">
 				<div class="wp-video-holder">
 				<#
-					var src,
+				var w = ! data.model.width || data.model.width > 640 ? 640 : data.model.width,
-						t = (new Date()).getTime(),
-						w = ! data.model.width || data.model.width > 640 ? 640 : data.model.width,
 					h = ! data.model.height ? 360 : data.model.height;
 
 				if ( w !== data.model.width ) {
 					h = Math.ceil( ( h * w ) / data.model.width );
 				}
 
-				if ( data.model.src ) {
+				if ( data.model.src ) { #>
-					src = data.model.src + (data.model.src.indexOf('?') > -1 ? '&' : '?' ) + t;
+					<video controls
-				#>
+						class="wp-video-shortcode"
-					<video controls class="wp-video-shortcode"
 						width="{{{ w }}}"
 						height="{{{ h }}}"
-						src="{{{ src }}}"
+						src="{{{ data.model.src }}}"
-						<#
+						<?php
-						if ( ! _.isUndefined( data.model.poster ) ) {
+						$props = array( 'poster' => '', 'preload' => 'metadata' );
-							#> poster="{{{ data.model.poster }}}"<#
+						foreach ( $props as $key => $value ):
+							echo $key ?>="{{{ _.isUndefined( data.model.<?php echo $key ?> ) ? '<?php echo $value ?>' : data.model.<?php echo $key ?> }}}"
+						<?php endforeach;
+						?><#
+						<?php foreach ( array( 'autoplay', 'loop' ) as $attr ):
+						?> if ( ! _.isUndefined( data.model.<?php echo $attr ?> ) && data.model.<?php echo $attr ?> ) {
+							#> <?php echo $attr ?><#
 						}
-						#> preload="{{{ _.isUndefined( data.model.preload ) ? 'metadata' : data.model.preload }}}"
+						<?php endforeach ?>#>
-						<#
-						if ( ! _.isUndefined( data.model.autoplay ) && data.model.autoplay ) {
-							#> autoplay<#
-						}
-
-						if ( ! _.isUndefined( data.model.loop ) && data.model.loop ) {
-							#> loop<#
-						} #>
 					/>
 					<# rendered = true; #>
 				<label class="setting">
@@ -781,31 +762,27 @@ function wp_print_media_templates() {
 				<?php
 				$default_types = wp_get_video_extensions();
 
-				foreach ( $default_types as $type ): ?>
+				foreach ( $default_types as $type ):
-				<# if ( data.model.<?php echo $type ?> ) { #>
+				?><# if ( data.model.<?php echo $type ?> ) {
-					<# if ( ! rendered ) {
+					if ( ! rendered ) { #>
-						src = data.model.<?php echo $type ?> + (data.model.<?php echo $type ?>.indexOf('?') > -1 ? '&' : '?' ) + t;
+					<video controls
-					#>
+						class="wp-video-shortcode"
-					<video controls class="wp-video-shortcode"
 						width="{{{ w }}}"
 						height="{{{ h }}}"
-						src="{{{ src }}}"
+						src="{{{ data.model.<?php echo $type ?> }}}"
-						<#
+						<?php
-						if ( ! _.isUndefined( data.model.poster ) ) {
+						$props = array( 'poster' => '', 'preload' => 'metadata' );
-							#> poster="{{{ data.model.poster }}}"<#
+						foreach ( $props as $key => $value ):
+							echo $key ?>="{{{ _.isUndefined( data.model.<?php echo $key ?> ) ? '<?php echo $value ?>' : data.model.<?php echo $key ?> }}}"
+						<?php endforeach;
+						?><#
+						<?php foreach ( array( 'autoplay', 'loop' ) as $attr ):
+						?>if ( ! _.isUndefined( data.model.<?php echo $attr ?> ) && data.model.<?php echo $attr ?> ) {
+							#> <?php echo $attr ?><#
 						}
-						#> preload="{{{ _.isUndefined( data.model.preload ) ? 'metadata' : data.model.preload }}}"
+						<?php endforeach ?>#>
-						<#
-						if ( ! _.isUndefined( data.model.autoplay ) && data.model.autoplay ) {
-							#> autoplay<#
-						}
-
-						if ( ! _.isUndefined( data.model.loop ) && data.model.loop ) {
-							#> loop<#
-						} #>
 					/>
-					<#
+					<# rendered = true;
-						rendered = true;
 					} #>
 				<label class="setting">
 					<span><?php echo strtoupper( $type ) ?></span>