Media: Add awareness to Attachment Display Settings that audio and video can be embedded.

Also:
 * Add file length metadata to Attachment Details.
 * Round the kb/s bitrate on post.php.

fixes #24449.



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

wp-admin/includes/media.php

@@ -2470,7 +2470,7 @@ function attachment_submitbox_metadata() {
 		if ( ! empty( $meta['bitrate'] ) ) : ?>
 		<div class="misc-pub-section">
 			<?php _e( 'Bitrate:' ); ?> <strong><?php
-				echo $meta['bitrate'] / 1000, 'kb/s';
+				echo round( $meta['bitrate'] / 1000 ), 'kb/s';
 
 				if ( ! empty( $meta['bitrate_mode'] ) )
 					echo ' ', strtoupper( $meta['bitrate_mode'] );

wp-includes/js/media-editor.js

@@ -45,7 +45,7 @@
 			props.title = props.title || attachment.title;
 
 			link = props.link || defaultProps.link || getUserSetting( 'urlbutton', 'file' );
-			if ( 'file' === link )
+			if ( 'file' === link || 'embed' === link )
 				linkUrl = attachment.url;
 			else if ( 'post' === link )
 				linkUrl = attachment.link;
@@ -97,90 +97,41 @@
 		},
 
 		audio: function( props, attachment ) {
-			var shortcode, html;
+			return wp.media.string._audioVideo( 'audio', props, attachment );
-
-			props = wp.media.string.props( props, attachment );
-			shortcode = {};
-
-			if ( props.mime ) {
-				switch ( props.mime ) {
-				case 'audio/mpeg':
-					if ( attachment.url.indexOf( 'mp3' ) )
-						shortcode.mp3 = attachment.url;
-					else if ( attachment.url.indexOf( 'm4a' ) )
-						shortcode.m4a = attachment.url;
-					break;
-				case 'audio/mp3':
-					shortcode.mp3 = attachment.url;
-					break;
-				case 'audio/m4a':
-					shortcode.m4a = attachment.url;
-					break;
-				case 'audio/wav':
-					shortcode.wav = attachment.url;
-					break;
-				case 'audio/ogg':
-					shortcode.ogg = attachment.url;
-					break;
-				case 'audio/x-ms-wma':
-				case 'audio/wma':
-					shortcode.wma = attachment.url;
-					break;
-				default:
-					// Render unsupported audio files as links.
-					return wp.media.string.link( props );
-				}
-			}
-
-			html = wp.shortcode.string({
-				tag:     'audio',
-				attrs:   shortcode
-			});
-
-			return html;
 		},
 
 		video: function( props, attachment ) {
-			var shortcode, html;
+			return wp.media.string._audioVideo( 'video', props, attachment );
+		},
+
+		_audioVideo: function( type, props, attachment ) {
+			var shortcode, html, extension;
 
 			props = wp.media.string.props( props, attachment );
+			if ( props.link !== 'embed' )
+				return wp.media.string.link( props );
 
 			shortcode = {};
 
-			if ( attachment.width )
+			if ( 'video' === type ) {
-				shortcode.width = attachment.width;
+				if ( attachment.width )
+					shortcode.width = attachment.width;
 
-			if ( attachment.height )
+				if ( attachment.height )
-				shortcode.height = attachment.height;
+					shortcode.height = attachment.height;
+			}
 
-			if ( props.mime ) {
+			extension = attachment.filename.split('.').pop();
-				switch ( props.mime ) {
+
-				case 'video/mp4':
+			if ( _.contains( wp.media.view.settings.embedExts, extension ) ) {
-					shortcode.mp4 = attachment.url;
+				shortcode[extension] = attachment.url;
-					break;
+			} else {
-				case 'video/m4v':
+				// Render unsupported audio and video files as links.
-					shortcode.m4v = attachment.url;
+				return wp.media.string.link( props );
-					break;
-				case 'video/webm':
-					shortcode.webm = attachment.url;
-					break;
-				case 'video/ogg':
-					shortcode.ogv = attachment.url;
-					break;
-				case 'video/x-ms-wmv':
-				case 'video/wmv':
-				case 'video/asf':
-					shortcode.wmv = attachment.url;
-					break;
-				case 'video/flv':
-				case 'video/x-flv':
-					shortcode.flv = attachment.url;
-					break;
-				}
 			}
 
 			html = wp.shortcode.string({
-				tag:     'video',
+				tag:     type,
 				attrs:   shortcode
 			});
 

wp-includes/js/media-views.js

@@ -449,11 +449,26 @@
 			var displays = this._displays;
 
 			if ( ! displays[ attachment.cid ] )
-				displays[ attachment.cid ] = new Backbone.Model( this._defaultDisplaySettings );
+				displays[ attachment.cid ] = new Backbone.Model( this.defaultDisplaySettings( attachment ) );
 
 			return displays[ attachment.cid ];
 		},
 
+		defaultDisplaySettings: function( attachment ) {
+			settings = this._defaultDisplaySettings;
+			if ( settings.canEmbed = this.canEmbed( attachment ) )
+				settings.link = 'embed';
+			return settings;
+		},
+
+		canEmbed: function( attachment ) {
+			var type = attachment.get('type');
+			if ( type !== 'audio' && type !== 'video' )
+				return false;
+
+			return _.contains( media.view.settings.embedExts, attachment.get('filename').split('.').pop() );
+		},
+
 		syncSelection: function() {
 			var selection = this.get('selection'),
 				manager = this.frame._selection;
@@ -3666,7 +3681,7 @@
 				$input = this.$('.link-to-custom'),
 				attachment = this.options.attachment;
 
-			if ( 'none' === linkTo || ( ! attachment && 'custom' !== linkTo ) ) {
+			if ( 'none' === linkTo || 'embed' === linkTo || ( ! attachment && 'custom' !== linkTo ) ) {
 				$input.hide();
 				return;
 			}

wp-includes/media-template.php

@@ -205,6 +205,10 @@ function wp_print_media_templates() {
 					<# } #>
 				<# } #>
 
+				<# if ( data.fileLength ) { #>
+					<div class="file-length"><?php _e( 'Length:' ); ?> {{ data.fileLength }}</div>
+				<# } #>
+
 				<# if ( ! data.uploading && data.can.remove ) { #>
 					<a class="delete-attachment" href="#"><?php _e( 'Delete Permanently' ); ?></a>
 				<# } #>
@@ -281,25 +285,52 @@ function wp_print_media_templates() {
 
 		<div class="setting">
 			<label>
-				<span><?php _e('Link To'); ?></span>
+				<# if ( data.model.canEmbed ) { #>
+					<span><?php _e('Embed or Link'); ?></span>
+				<# } else { #>
+					<span><?php _e('Link To'); ?></span>
+				<# } #>
+
 				<select class="link-to"
 					data-setting="link"
-					<# if ( data.userSettings ) { #>
+					<# if ( data.userSettings && ! data.model.canEmbed ) { #>
 						data-user-setting="urlbutton"
 					<# } #>>
 
-					<option value="custom">
+				<# if ( data.model.canEmbed && 'audio' === data.type ) { #>
-						<?php esc_attr_e('Custom URL'); ?>
+					<option value="embed" selected>
+						<?php esc_attr_e('Embed Audio Player'); ?>
 					</option>
+					<option value="file">
+				<# } else if ( data.model.canEmbed && 'video' === data.type ) { #>
+					<option value="embed" selected>
+						<?php esc_attr_e('Embed Video Player'); ?>
+					</option>
+					<option value="file">
+				<# } else { #>
 					<option value="file" selected>
+				<# } #>
+					<# if ( data.model.canEmbed ) { #>
+						<?php esc_attr_e('Link to Media File'); ?>
+					<# } else { #>
 						<?php esc_attr_e('Media File'); ?>
+					<# } #>
 					</option>
 					<option value="post">
+					<# if ( data.model.canEmbed ) { #>
+						<?php esc_attr_e('Link to Attachment Page'); ?>
+					<# } else { #>
 						<?php esc_attr_e('Attachment Page'); ?>
+					<# } #>
+					</option>
+				<# if ( 'image' === data.type ) { #>
+					<option value="custom">
+						<?php esc_attr_e('Custom URL'); ?>
 					</option>
 					<option value="none">
 						<?php esc_attr_e('None'); ?>
 					</option>
+				<# } #>
 				</select>
 			</label>
 			<input type="text" class="link-to-custom" data-setting="linkUrl" />

wp-includes/media.php

@@ -1699,6 +1699,11 @@ function wp_prepare_attachment_for_js( $attachment ) {
 			$response['height'] = (int) $meta['height'];
 	}
 
+	if ( $meta && ( 'audio' === $type || 'video' === $type ) ) {
+		if ( isset( $meta['length_formatted'] ) )
+			$response['fileLength'] = $meta['length_formatted'];
+	}
+
 	if ( function_exists('get_compat_media_markup') )
 		$response['compat'] = get_compat_media_markup( $attachment->ID, array( 'in_modal' => true ) );
 
@@ -1753,6 +1758,7 @@ function wp_enqueue_media( $args = array() ) {
 			'id' => 0,
 		),
 		'defaultProps' => $props,
+		'embedExts'    => array_merge( wp_get_audio_extensions(), wp_get_video_extensions() ),
 	);
 
 	$post = null;