From e1773d3a18981d4e56cd62d6e37d4e7f74a1bfc4 Mon Sep 17 00:00:00 2001
From: Scott Taylor <wonderboymusic@git.wordpress.org>
Date: Thu, 6 Mar 2014 19:05:11 +0000
Subject: [PATCH] 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.



git-svn-id: https://develop.svn.wordpress.org/trunk@27440 602fd350-edb4-49c9-b593-d223f7449a82
---
 src/wp-includes/js/media-views.js             |  13 +-
 .../js/tinymce/plugins/wpgallery/plugin.js    |   8 +
 src/wp-includes/media-template.php            | 141 ++++++++----------
 3 files changed, 76 insertions(+), 86 deletions(-)

diff --git a/src/wp-includes/js/media-views.js b/src/wp-includes/js/media-views.js
index a1b9bb5211..862ec7bf59 100644
--- a/src/wp-includes/js/media-views.js
+++ b/src/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;
 		},
 
diff --git a/src/wp-includes/js/tinymce/plugins/wpgallery/plugin.js b/src/wp-includes/js/tinymce/plugins/wpgallery/plugin.js
index 75ef53d6e0..cb73983d89 100644
--- a/src/wp-includes/js/tinymce/plugins/wpgallery/plugin.js
+++ b/src/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 {
diff --git a/src/wp-includes/media-template.php b/src/wp-includes/media-template.php
index 2a233da76a..8fcbb0831e 100644
--- a/src/wp-includes/media-template.php
+++ b/src/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 ?>
-		<# var rendered = false; #>
+		<?php // reusing .media-embed to pick up the styles for now
+		?><# var rendered = false; #>
 		<div class="media-embed">
 			<div class="embed-media-settings embed-audio-settings">
-				<#
-					var src,
-						t = (new Date()).getTime();
-
-					if ( data.model.src ) {
-						src = data.model.src + (data.model.src.indexOf('?') > -1 ? '&' : '?' ) + t;
-					#>
-					<audio controls class="wp-audio-shortcode" src="{{{ src }}}"
+				<# if ( data.model.src ) { #>
+					<audio controls
+						class="wp-audio-shortcode"
+						src="{{{ data.model.src }}}"
 						preload="{{{ _.isUndefined( data.model.preload ) ? 'none' : data.model.preload }}}"
 						<#
-						if ( ! _.isUndefined( data.model.autoplay ) && data.model.autoplay ) {
-							#> autoplay<#
+						<?php foreach ( array( 'autoplay', 'loop' ) as $attr ):
+						?>if ( ! _.isUndefined( data.model.<?php echo $attr ?> ) && data.model.<?php echo $attr ?> ) {
+							#> <?php echo $attr ?><#
 						}
-
-						if ( ! _.isUndefined( data.model.loop ) && data.model.loop ) {
-							#> loop<#
-						} #>
+						<?php endforeach ?>#>
 					/>
 					<# 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 ): ?>
-				<# if ( data.model.<?php echo $type ?> ) { #>
-					<# if ( ! rendered ) {
-						src = data.model.<?php echo $type ?> + (data.model.<?php echo $type ?>.indexOf('?') > -1 ? '&' : '?' ) + t;
-					#>
-					<audio controls class="wp-audio-shortcode" src="{{{ src }}}"
+				foreach ( $default_types as $type ):
+				?><# if ( data.model.<?php echo $type ?> ) { #>
+					<# if ( ! rendered ) { #>
+					<audio controls
+						class="wp-audio-shortcode"
+						src="{{{ data.model.<?php echo $type ?> }}}"
 						preload="{{{ _.isUndefined( data.model.preload ) ? 'none' : data.model.preload }}}"
 						<#
-						if ( ! _.isUndefined( data.model.autoplay ) && data.model.autoplay ) {
-							#> autoplay<#
+						<?php foreach ( array( 'autoplay', 'loop' ) as $attr ):
+						?>if ( ! _.isUndefined( data.model.<?php echo $attr ?> ) && data.model.<?php echo $attr ?> ) {
+							#> <?php echo $attr ?><#
 						}
-						if ( ! _.isUndefined( data.model.loop ) && data.model.loop ) {
-							#> loop<#
-						} #>
+						<?php endforeach ?>#>
 					/>
-					<#
-						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">
-							<?php esc_attr_e( 'Auto' ); ?>
-						</button>
-						<button class="button" value="metadata">
-							<?php esc_attr_e( 'Metadata' ); ?>
-						</button>
-						<button class="button active" value="none">
-							<?php esc_attr_e( 'None' ); ?>
-						</button>
+						<button class="button" value="auto"><?php _e( 'Auto' ); ?></button>
+						<button class="button" value="metadata"><?php _e( 'Metadata' ); ?></button>
+						<button class="button active" value="none"><?php _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 ?>
-		<# var rendered = false; #>
+		<?php // reusing .media-embed to pick up the styles for now
+		?><# var rendered = false; #>
 		<div class="media-embed">
 			<div class="embed-media-settings embed-video-settings">
 				<div class="wp-video-holder">
 				<#
-					var src,
-						t = (new Date()).getTime(),
-						w = ! data.model.width || data.model.width > 640 ? 640 : data.model.width,
-						h = ! data.model.height ? 360 : data.model.height;
+				var 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 ) {
-					src = data.model.src + (data.model.src.indexOf('?') > -1 ? '&' : '?' ) + t;
-				#>
-					<video controls class="wp-video-shortcode"
+				if ( data.model.src ) { #>
+					<video controls
+						class="wp-video-shortcode"
 						width="{{{ w }}}"
 						height="{{{ h }}}"
-						src="{{{ src }}}"
-						<#
-						if ( ! _.isUndefined( data.model.poster ) ) {
-							#> poster="{{{ data.model.poster }}}"<#
+						src="{{{ data.model.src }}}"
+						<?php
+						$props = array( 'poster' => '', 'preload' => 'metadata' );
+						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 }}}"
-						<#
-						if ( ! _.isUndefined( data.model.autoplay ) && data.model.autoplay ) {
-							#> autoplay<#
-						}
-
-						if ( ! _.isUndefined( data.model.loop ) && data.model.loop ) {
-							#> loop<#
-						} #>
+						<?php endforeach ?>#>
 					/>
 					<# 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 ): ?>
-				<# if ( data.model.<?php echo $type ?> ) { #>
-					<# if ( ! rendered ) {
-						src = data.model.<?php echo $type ?> + (data.model.<?php echo $type ?>.indexOf('?') > -1 ? '&' : '?' ) + t;
-					#>
-					<video controls class="wp-video-shortcode"
+				foreach ( $default_types as $type ):
+				?><# if ( data.model.<?php echo $type ?> ) {
+					if ( ! rendered ) { #>
+					<video controls
+						class="wp-video-shortcode"
 						width="{{{ w }}}"
 						height="{{{ h }}}"
-						src="{{{ src }}}"
-						<#
-						if ( ! _.isUndefined( data.model.poster ) ) {
-							#> poster="{{{ data.model.poster }}}"<#
+						src="{{{ data.model.<?php echo $type ?> }}}"
+						<?php
+						$props = array( 'poster' => '', 'preload' => 'metadata' );
+						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 }}}"
-						<#
-						if ( ! _.isUndefined( data.model.autoplay ) && data.model.autoplay ) {
-							#> autoplay<#
-						}
-
-						if ( ! _.isUndefined( data.model.loop ) && data.model.loop ) {
-							#> loop<#
-						} #>
+						<?php endforeach ?>#>
 					/>
-					<#
-						rendered = true;
+					<# rendered = true;
 					} #>
 				<label class="setting">
 					<span><?php echo strtoupper( $type ) ?></span>