From 67512aa18af20fc46216d29b9f7930f273eacc44 Mon Sep 17 00:00:00 2001
From: Scott Taylor <wonderboymusic@git.wordpress.org>
Date: Sun, 9 Mar 2014 01:00:53 +0000
Subject: [PATCH] Audio/Video shortcodes in the media modal:

* Add `embedMimes` to `_wpMediaViewsL10n`
* Use `escape` instead of `interpolate` when setting attributes in Underscore templates
* When creating the `<audio>` and `<video>` tags dynamically, set inner `<source>` nodes instead of the `src` attribute and properly set the mime-type per source as the `type` attribute. This is also drastically reduces the amount of code used to generate the tags.

See #27016.



git-svn-id: https://develop.svn.wordpress.org/trunk@27476 602fd350-edb4-49c9-b593-d223f7449a82
---
 src/wp-includes/js/media-views.js  |  21 ++-
 src/wp-includes/media-template.php | 205 +++++++++++------------------
 src/wp-includes/media.php          |  15 ++-
 3 files changed, 103 insertions(+), 138 deletions(-)

diff --git a/src/wp-includes/js/media-views.js b/src/wp-includes/js/media-views.js
index 457a38e609..e3ca06650d 100644
--- a/src/wp-includes/js/media-views.js
+++ b/src/wp-includes/js/media-views.js
@@ -6435,18 +6435,27 @@
 			}, this.options );
 		},
 
+		/**
+		 * When multiple players in the DOM contain the same src, things get weird.
+		 *
+		 * @param {HTMLElement} media
+		 * @returns {HTMLElement}
+		 */
 		prepareSrc : function (media) {
-			media.src = [
-				media.src,
-				media.src.indexOf('?') > -1 ? '&' : '?',
-				(new Date()).getTime()
-			].join('');
+			var t = (new Date()).getTime();
+			_.each( $(media).find('source'), function (source) {
+				source.src = [
+					source.src,
+					source.src.indexOf('?') > -1 ? '&' : '?',
+					t
+				].join('');
+			});
 
 			return media;
 		},
 
 		setPlayer : function () {
-			if ( ! this.player ) {
+			if ( ! this.player && this.media ) {
 				this.player = new MediaElementPlayer( this.media, this.settings );
 			}
 		},
diff --git a/src/wp-includes/media-template.php b/src/wp-includes/media-template.php
index 15c84c6392..f70db59407 100644
--- a/src/wp-includes/media-template.php
+++ b/src/wp-includes/media-template.php
@@ -662,50 +662,42 @@ 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 $audio_types = wp_get_audio_extensions(); ?>
 		<div class="media-embed">
 			<div class="embed-media-settings embed-audio-settings">
-				<# if ( data.model.src ) { #>
-					<audio controls
-						class="wp-audio-shortcode"
-						src="{{{ data.model.src }}}"
-						preload="{{{ _.isUndefined( data.model.preload ) ? 'none' : data.model.preload }}}"
-						<#
-						<?php foreach ( array( 'autoplay', 'loop' ) as $attr ):
-						?>if ( ! _.isUndefined( data.model.<?php echo $attr ?> ) && data.model.<?php echo $attr ?> ) {
-							#> <?php echo $attr ?><#
-						}
-						<?php endforeach ?>#>
-					/>
-					<# rendered = true; #>
+				<audio controls
+					class="wp-audio-shortcode"
+					preload="{{ _.isUndefined( data.model.preload ) ? 'none' : data.model.preload }}"
+					<#
+					<?php foreach ( array( 'autoplay', 'loop' ) as $attr ):
+					?>if ( ! _.isUndefined( data.model.<?php echo $attr ?> ) && data.model.<?php echo $attr ?> ) {
+						#> <?php echo $attr ?><#
+					}
+					<?php endforeach ?>#>
+				>
+					<# if ( ! _.isEmpty( data.model.src ) ) { #>
+					<source src="{{ data.model.src }}" type="{{ wp.media.view.settings.embedMimes[ data.model.src.split('.').pop() ] }}" />
+					<# } #>
+
+					<?php foreach ( $audio_types as $type ):
+					?><# if ( ! _.isEmpty( data.model.<?php echo $type ?> ) ) { #>
+					<source src="{{ data.model.<?php echo $type ?> }}" type="{{ wp.media.view.settings.embedMimes[ '<?php echo $type ?>' ] }}" />
+					<# } #>
+					<?php endforeach;
+				?></audio>
+				<# if ( ! _.isEmpty( data.model.src ) ) { #>
 				<label class="setting">
 					<span>SRC</span>
-					<input type="text" disabled="disabled" data-setting="src" value="{{{ data.model.src }}}" />
+					<input type="text" disabled="disabled" data-setting="src" value="{{ data.model.src }}" />
 				</label>
 				<# } #>
 				<?php
-				$default_types = wp_get_audio_extensions();
 
-				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 }}}"
-						<#
-						<?php foreach ( array( 'autoplay', 'loop' ) as $attr ):
-						?>if ( ! _.isUndefined( data.model.<?php echo $attr ?> ) && data.model.<?php echo $attr ?> ) {
-							#> <?php echo $attr ?><#
-						}
-						<?php endforeach ?>#>
-					/>
-					<# rendered = true;
-					} #>
+				foreach ( $audio_types as $type ):
+				?><# if ( ! _.isEmpty( data.model.<?php echo $type ?> ) ) { #>
 				<label class="setting">
 					<span><?php echo strtoupper( $type ) ?></span>
-					<input type="text" disabled="disabled" data-setting="<?php echo $type ?>" value="{{{ data.model.<?php echo $type ?> }}}" />
+					<input type="text" disabled="disabled" data-setting="<?php echo $type ?>" value="{{ data.model.<?php echo $type ?> }}" />
 				</label>
 				<# } #>
 				<?php endforeach ?>
@@ -734,8 +726,7 @@ 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 $video_types = wp_get_video_extensions(); ?>
 		<div class="media-embed">
 			<div class="embed-media-settings embed-video-settings">
 				<div class="wp-video-holder">
@@ -746,117 +737,69 @@ function wp_print_media_templates() {
 				if ( data.model.width && w !== data.model.width ) {
 					h = Math.ceil( ( h * w ) / data.model.width );
 				}
+				#>
+				<video controls
+					class="wp-video-shortcode youtube-video"
+					width="{{ w }}"
+					height="{{ h }}"
+					<?php
+					$props = array( 'poster' => '', 'preload' => 'metadata' );
+					foreach ( $props as $key => $value ):
+						if ( empty( $value ) ) {
+						?><#
+						if ( ! _.isUndefined( data.model.<?php echo $key ?> ) && data.model.<?php echo $key ?> ) {
+							#> <?php echo $key ?>="{{ data.model.<?php echo $key ?> }}"<#
+						} #>
+						<?php } else {
+							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 ?><#
+					}
+					<?php endforeach ?>#>
+				>
+					<# if ( ! _.isEmpty( data.model.src ) ) {
+						if ( data.model.src.match(/youtube|youtu\.be/) ) { #>
+						<source src="{{ data.model.src }}" type="video/youtube" />
+						<# } else { #>
+						<source src="{{ data.model.src }}" type="{{ wp.media.view.settings.embedMimes[ data.model.src.split('.').pop() ] }}" />
+						<# }
+					} #>
 
-				if ( data.model.src ) {
-					if ( data.model.src.match(/youtube|youtu\.be/) ) {
-				#>
-					<video controls
-						class="wp-video-shortcode youtube-video"
-						width="{{{ w }}}"
-						height="{{{ h }}}"
-						<?php
-						$props = array( 'poster' => '', 'preload' => 'metadata' );
-						foreach ( $props as $key => $value ):
-							if ( empty( $value ) ) {
-							?><#
-							if ( ! _.isUndefined( data.model.<?php echo $key ?> ) && data.model.<?php echo $key ?> ) {
-								#> <?php echo $key ?>="{{{ data.model.<?php echo $key ?> }}}"<#
-							} #>
-							<?php } else {
-								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 ?><#
-						}
-						<?php endforeach ?>#>
-					>
-						<source type="video/youtube" src="{{{ data.model.src }}}" />
-					</video>
-				<#
-					} else {
-				#>
-					<video controls
-						class="wp-video-shortcode"
-						width="{{{ w }}}"
-						height="{{{ h }}}"
-						src="{{{ data.model.src }}}"
-						<?php
-						$props = array( 'poster' => '', 'preload' => 'metadata' );
-						foreach ( $props as $key => $value ):
-							if ( empty( $value ) ) {
-							?><#
-							if ( ! _.isUndefined( data.model.<?php echo $key ?> ) && data.model.<?php echo $key ?> ) {
-								#> <?php echo $key ?>="{{{ data.model.<?php echo $key ?> }}}"<#
-							} #>
-							<?php } else {
-								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 ?><#
-						}
-						<?php endforeach ?>#>
-					/>
+					<?php foreach ( $video_types as $type ):
+					?><# if ( data.model.<?php echo $type ?> ) { #>
+					<source src="{{ data.model.<?php echo $type ?> }}" type="{{ wp.media.view.settings.embedMimes[ '<?php echo $type ?>' ] }}" />
+					<# } #>
+					<?php endforeach;
+				?></video>
+				<# if ( ! _.isEmpty( data.model.src ) ) { #>
 				<label class="setting">
 					<span>SRC</span>
-					<input type="text" disabled="disabled" data-setting="src" value="{{{ data.model.src }}}" />
+					<input type="text" disabled="disabled" data-setting="src" value="{{ data.model.src }}" />
 				</label>
-				<#	}
-					rendered = true;
-				} #>
-				<?php
-				$default_types = wp_get_video_extensions();
-
-				foreach ( $default_types as $type ):
-				?><# if ( data.model.<?php echo $type ?> ) {
-					if ( ! rendered ) { #>
-					<video controls
-						class="wp-video-shortcode"
-						width="{{{ w }}}"
-						height="{{{ h }}}"
-						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 ?><#
-						}
-						<?php endforeach ?>#>
-					/>
-					<# rendered = true;
-					} #>
+				<# } #>
+				<?php foreach ( $video_types as $type ):
+				?><# if ( ! _.isEmpty( data.model.<?php echo $type ?> ) ) { #>
 				<label class="setting">
 					<span><?php echo strtoupper( $type ) ?></span>
-					<input type="text" disabled="disabled" data-setting="<?php echo $type ?>" value="{{{ data.model.<?php echo $type ?> }}}" />
+					<input type="text" disabled="disabled" data-setting="<?php echo $type ?>" value="{{ data.model.<?php echo $type ?> }}" />
 				</label>
 				<# } #>
 				<?php endforeach ?>
 				</div>
 				<label class="setting">
 					<span><?php _e( 'Poster Image' ); ?></span>
-					<input type="text" data-setting="poster" value="{{{ data.model.poster }}}" />
+					<input type="text" data-setting="poster" value="{{ data.model.poster }}" />
 				</label>
 				<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>
 
diff --git a/src/wp-includes/media.php b/src/wp-includes/media.php
index 92a32ce6d0..42b242e693 100644
--- a/src/wp-includes/media.php
+++ b/src/wp-includes/media.php
@@ -2342,6 +2342,18 @@ function wp_enqueue_media( $args = array() ) {
 		'size'  => get_option( 'image_default_size' ),  // empty default
 	);
 
+	$exts = array_merge( wp_get_audio_extensions(), wp_get_video_extensions() );
+	$mimes = get_allowed_mime_types();
+	$ext_mimes = array();
+	foreach ( $exts as $ext ) {
+		foreach ( $mimes as $ext_preg => $mime_match ) {
+			if ( preg_match( '#' . $ext . '#i', $ext_preg ) ) {
+				$ext_mimes[ $ext ] = $mime_match;
+				break;
+			}
+		}
+	}
+
 	$settings = array(
 		'tabs'      => $tabs,
 		'tabUrl'    => add_query_arg( array( 'chromeless' => true ), admin_url('media-upload.php') ),
@@ -2354,7 +2366,8 @@ function wp_enqueue_media( $args = array() ) {
 			'id' => 0,
 		),
 		'defaultProps' => $props,
-		'embedExts'    => array_merge( wp_get_audio_extensions(), wp_get_video_extensions() ),
+		'embedExts'    => $exts,
+		'embedMimes'   => $ext_mimes
 	);
 
 	$post = null;