From 5efb7cde7e643926e01a30e6008b6fef63dedb76 Mon Sep 17 00:00:00 2001
From: Scott Taylor <wonderboymusic@git.wordpress.org>
Date: Wed, 5 Mar 2014 21:36:32 +0000
Subject: [PATCH] Add a timestamp to the urls passed to `<audio>` and `<video>`
 in the modal to ensure that cached view instances aren't referenced by MEjs.
 Pause the player when closing the controller's modal.

See #27016, #26779.



git-svn-id: https://develop.svn.wordpress.org/trunk@27420 602fd350-edb4-49c9-b593-d223f7449a82
---
 src/wp-includes/js/media-views.js  | 22 ++------
 src/wp-includes/media-template.php | 87 ++++++++++++++++++++++--------
 2 files changed, 69 insertions(+), 40 deletions(-)

diff --git a/src/wp-includes/js/media-views.js b/src/wp-includes/js/media-views.js
index 19b26d1712..c3f15f9679 100644
--- a/src/wp-includes/js/media-views.js
+++ b/src/wp-includes/js/media-views.js
@@ -6239,7 +6239,7 @@
 			media.view.Settings.AttachmentDisplay.prototype.render.apply( this, arguments );
 			setTimeout( function() { self.resetFocus(); }, 10 );
 
-			new MediaElementPlayer( this.$('audio').get(0), settings );
+			new MediaElementPlayer( this.$('.wp-audio-shortcode').get(0), settings );
 
 			return this;
 		},
@@ -6264,13 +6264,10 @@
 		template:  media.template('video-details'),
 
 		initialize: function() {
-			_.bindAll(this, 'player', 'played');
+			_.bindAll(this, 'player');
 
-			this.removable = false;
 			this.listenTo( this.controller, 'close', this.close );
 
-			// used in AttachmentDisplay.prototype.updateLinkTo
-			this.options.attachment = this.model.attachment;
 			media.view.Settings.AttachmentDisplay.prototype.initialize.apply( this, arguments );
 		},
 
@@ -6287,20 +6284,12 @@
 		},
 
 		close : function() {
-			if ( this.removable ) {
-				this.mejs.pause();
-			}
+			this.mejs.pause();
 			this.remove();
-			this.mejs = this.mejsInstance = null;
-		},
-
-		played : function () {
-			this.removable = true;
 		},
 
 		player : function (mejs) {
 			this.mejs = mejs;
-			this.mejs.addEventListener( 'play', this.played );
 		},
 
 		render: function() {
@@ -6315,10 +6304,7 @@
 			media.view.Settings.AttachmentDisplay.prototype.render.apply( this, arguments );
 			setTimeout( function() { self.resetFocus(); }, 10 );
 
-			if ( ! this.mejsInstance ) {
-				this.mejsInstance = new MediaElementPlayer( this.$('video').get(0), settings );
-			}
-
+			new MediaElementPlayer( this.$('.wp-video-shortcode').get(0), settings );
 			return this;
 		},
 
diff --git a/src/wp-includes/media-template.php b/src/wp-includes/media-template.php
index 8200b313f7..fc423f20c7 100644
--- a/src/wp-includes/media-template.php
+++ b/src/wp-includes/media-template.php
@@ -654,11 +654,23 @@ function wp_print_media_templates() {
 		<# var rendered = false; #>
 		<div class="media-embed">
 			<div class="embed-media-settings embed-audio-settings">
-				<# if ( data.model.src ) { #>
-					<audio class="wp-audio-shortcode" src="{{{ data.model.src }}}"
+				<#
+					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 }}}"
 						preload="{{{ _.isUndefined( data.model.preload ) ? 'none' : data.model.preload }}}"
-						<# if ( ! _.isUndefined( data.model.autoplay ) && data.model.autoplay ) { #>autoplay<# } #>
-						<# if ( ! _.isUndefined( data.model.loop ) && data.model.loop ) { #>loop<# } #>
+						<#
+						if ( ! _.isUndefined( data.model.autoplay ) && data.model.autoplay ) {
+							#>autoplay<#
+						}
+
+						if ( ! _.isUndefined( data.model.loop ) && data.model.loop ) {
+							#>loop<#
+						} #>
 					/>
 					<# rendered = true; #>
 				<label class="setting">
@@ -671,11 +683,18 @@ function wp_print_media_templates() {
 
 				foreach ( $default_types as $type ): ?>
 				<# if ( data.model.<?php echo $type ?> ) { #>
-					<# if ( ! rendered ) { #>
-					<audio class="wp-audio-shortcode" src="{{{ 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 }}}"
 						preload="{{{ _.isUndefined( data.model.preload ) ? 'none' : data.model.preload }}}"
-						<# if ( ! _.isUndefined( data.model.autoplay ) && data.model.autoplay ) { #>autoplay<# } #>
-						<# if ( ! _.isUndefined( data.model.loop ) && data.model.loop ) { #>loop<# } #>
+						<#
+						if ( ! _.isUndefined( data.model.autoplay ) && data.model.autoplay ) {
+							#>autoplay<#
+						}
+						if ( ! _.isUndefined( data.model.loop ) && data.model.loop ) {
+							#>loop<#
+						} #>
 					/>
 					<#
 						rendered = true;
@@ -723,22 +742,35 @@ function wp_print_media_templates() {
 			<div class="embed-media-settings embed-video-settings">
 				<div class="wp-video-holder">
 				<#
-				var w = ! data.model.width || data.model.width > 640 ? 640 : data.model.width,
-					h = ! data.model.height ? 320 : data.model.height;
+					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;
 
 				if ( w !== data.model.width ) {
 					h = Math.ceil( ( h * w ) / data.model.width );
 				}
 
-				if ( data.model.src ) { #>
-					<video class="wp-video-shortcode"
+				if ( data.model.src ) {
+					src = data.model.src + (data.model.src.indexOf('?') > -1 ? '&' : '?' ) + t;
+				#>
+					<video controls class="wp-video-shortcode"
 						width="{{{ w }}}"
 						height="{{{ h }}}"
-						src="{{{ data.model.src }}}"
-						<# if ( ! _.isUndefined( data.model.poster ) ) { #>poster="{{{ data.model.poster }}}"<# } #>
+						src="{{{ src }}}"
+						<#
+						if ( ! _.isUndefined( data.model.poster ) ) {
+							#>poster="{{{ data.model.poster }}}"<#
+						} #>
 						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<# } #>
+						<#
+						if ( ! _.isUndefined( data.model.autoplay ) && data.model.autoplay ) {
+							#>autoplay<#
+						}
+
+						if ( ! _.isUndefined( data.model.loop ) && data.model.loop ) {
+							#>loop<#
+						} #>
 					/>
 					<# rendered = true; #>
 				<label class="setting">
@@ -751,15 +783,26 @@ function wp_print_media_templates() {
 
 				foreach ( $default_types as $type ): ?>
 				<# if ( data.model.<?php echo $type ?> ) { #>
-					<# if ( ! rendered ) { #>
-					<video class="wp-video-shortcode"
+					<# if ( ! rendered ) {
+						src = data.model.<?php echo $type ?> + (data.model.<?php echo $type ?>.indexOf('?') > -1 ? '&' : '?' ) + t;
+					#>
+					<video controls class="wp-video-shortcode"
 						width="{{{ w }}}"
 						height="{{{ h }}}"
-						src="{{{ data.model.<?php echo $type ?> }}}"
-						<# if ( ! _.isUndefined( data.model.poster ) ) { #>poster="{{{ data.model.poster }}}"<# } #>
+						src="{{{ src }}}"
+						<#
+						if ( ! _.isUndefined( data.model.poster ) ) {
+							#>poster="{{{ data.model.poster }}}"<#
+						} #>
 						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<# } #>
+						<#
+						if ( ! _.isUndefined( data.model.autoplay ) && data.model.autoplay ) {
+							#>autoplay<#
+						}
+
+						if ( ! _.isUndefined( data.model.loop ) && data.model.loop ) {
+							#>loop<#
+						} #>
 					/>
 					<#
 						rendered = true;