Final about page.

props melchoyce, helen, wonderboymusic, nacin, and the illustrious Michael Pick.
fixes #27713, #27837.

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


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

wp-admin/about.php

@@ -9,6 +9,8 @@
 /** WordPress Administration Bootstrap */
 require_once( dirname( __FILE__ ) . '/admin.php' );
 
+wp_playlist_scripts( 'audio' );
+
 $title = __( 'About' );
 
 list( $display_version ) = explode( '-', $wp_version );
@@ -35,23 +37,28 @@ include( ABSPATH . 'wp-admin/admin-header.php' );
 
 <div class="changelog">
 	<div class="about-overview">
-		<img class="about-overview-img" src="//wordpress.org/images/core/3.9/overview.png?0" />
+	<?php
+	if ( ( $locale = get_locale() ) && 'en_' === substr( $locale, 0, 3 ) ) : ?>
+		<embed src="//v0.wordpress.com/player.swf?v=1.03" type="application/x-shockwave-flash" width="640" height="360" wmode="direct" seamlesstabbing="true" allowfullscreen="true" allowscriptaccess="always" overstretch="true" flashvars="guid=sAiXhCfV&amp;isDynamicSeeking=true" title=""></embed>
+	<?php else : ?>
+		<img class="about-overview-img" src="//s.w.org/images/core/3.9/overview.png?0" />
+	<?php endif; ?>
 	</div>
 	<h2 class="about-headline-callout"><?php _e( 'A smoother media editing&nbsp;experience' ); ?></h2>
 	<div class="feature-section col three-col">
 		<div class="col-1">
-			<img src="//wordpress.org/images/core/3.9/editor.jpg?0" />
+			<img src="//s.w.org/images/core/3.9/editor.jpg?0" />
 			<h4><?php _e( 'Improved visual editing' ); ?></h4>
 			<p><?php _e( 'The updated visual editor has improved speed, accessibility, and mobile support.' );
 				echo ' ' . __( 'You can paste into the visual editor from your word processor without wasting time to clean up messy styling. (Yeah, we&#8217;re talking about you, Microsoft Word.)' ); ?></p>
 		</div>
 		<div class="col-2">
-			<img src="//wordpress.org/images/core/3.9/image.jpg?0" />
+			<img src="//s.w.org/images/core/3.9/image.gif?0" />
 			<h4><?php _e( 'Edit images easily' ); ?></h4>
 			<p><?php _e( 'With quicker access to crop and rotation tools, it&#8217;s now much easier to edit your images while editing posts. You can also scale images directly in the editor to find just the right fit.' ); ?></p>
 		</div>
 		<div class="col-3 last-feature">
-			<img src="//wordpress.org/images/core/3.9/drop.jpg?0" />
+			<img src="//s.w.org/images/core/3.9/drop.jpg?0" />
 			<h4><?php _e( 'Drag and drop your images' ); ?></h4>
 			<p><?php _e( 'Uploading your images is easier than ever. Just grab them from your desktop and drop them onto the editor.' ); ?></p>
 		</div>
@@ -61,12 +68,101 @@ include( ABSPATH . 'wp-admin/admin-header.php' );
 
 	<div class="feature-section col two-col">
 		<div class="col-1">
-			<img src="//wordpress.org/images/core/3.9/gallery.jpg?0" />
+			<img src="//s.w.org/images/core/3.9/gallery.jpg?0" />
 			<h4><?php _e( 'Gallery previews' ); ?></h4>
 			<p><?php _e( 'Galleries display a beautiful grid of images right in the editor, just like they do in your published post.' ); ?></p>
 		</div>
 		<div class="col-2 last-feature">
-			<img src="//wordpress.org/images/core/3.9/gallery.jpg?0" />
+			<div class="wp-playlist wp-audio-playlist wp-playlist-light">
+				<div class="wp-playlist-current-item"></div>
+				<audio controls="controls" preload="metadata"></audio>
+				<div class="wp-playlist-next"></div>
+				<div class="wp-playlist-prev"></div>
+				<?php
+				$audio_icon_js = esc_js( includes_url( 'images/media/audio.png' ) );
+				$wp_host = '//s.w.org/images/core/3.9/';
+				?>
+
+				<script type="application/json">{
+					"type":"audio",
+					"tracklist":true,
+					"tracknumbers":true,
+					"images":true,
+					"artists":true,
+					"tracks":[{
+						"src":"<?php echo $wp_host ?>AintMisbehavin.mp3",
+						"type":"audio\/mpeg","title":"Ain't Misbehavin'","caption":"","description":"",
+						"meta":{
+							"artist":"Louis Armstrong & His Orchestra",
+							"album":"78 RPMs & Cylinder Recordings",
+							"genre":"Jazz",
+							"length_formatted":"3:21"
+						},
+						"image":{"src":"//s.w.org/images/core/3.9/louis.jpg","width":308,"height":240},
+						"thumb":{"src":"//s.w.org/images/core/3.9/louis.jpg","width":308,"height":240}
+					},
+					{
+						"src":"<?php echo $wp_host ?>JellyRollMorton-BuddyBoldensBlues.mp3",
+						"type":"audio\/mpeg","title":"Buddy Bolden's Blues","caption":"","description":"",
+						"meta":{
+							"artist":"Jelly Roll Morten",
+							"album":"78 RPMs & Cylinder Recordings",
+							"genre":"Jazz",
+							"length_formatted":"2:09"
+						},
+						"image":{"src":"<?php echo $audio_icon_js ?>","width":48,"height":64},
+						"thumb":{"src":"<?php echo $audio_icon_js ?>","width":48,"height":64}
+					},
+					{
+						"src":"<?php echo $wp_host ?>DavenportBlues.mp3",
+						"type":"audio\/mpeg","title":"Davenport Blues","caption":"","description":"",
+						"meta":{
+							"artist":"Bix Beiderbecke & His Rhythm Jugglers",
+							"album":"78 RPMs & Cylinder Recordings",
+							"genre":"Jazz",
+							"length_formatted":"2:48"
+						},
+						"image":{"src":"<?php echo $audio_icon_js ?>","width":48,"height":64},
+						"thumb":{"src":"<?php echo $audio_icon_js ?>","width":48,"height":64}
+					},
+					{
+						"src":"<?php echo $wp_host ?>WolverineBlues.mp3",
+						"type":"audio\/mpeg","title":"Wolverine Blues","caption":"","description":"",
+						"meta":{
+							"artist":"Benny Goodman's Boys",
+							"album":"78 RPMs & Cylinder Recordings",
+							"genre":"Jazz",
+							"length_formatted":"2:55"
+						},
+						"image":{"src":"<?php echo $audio_icon_js ?>","width":48,"height":64},
+						"thumb":{"src":"<?php echo $audio_icon_js ?>","width":48,"height":64}
+					},
+					{
+						"src":"<?php echo $wp_host ?>Louisiana_Five-Dixie_Blues-1919.mp3",
+						"type":"audio\/mpeg","title":"Dixie Blues","caption":"","description":"",
+						"meta":{
+							"artist":"Louisiana Five",
+							"album":"78 RPMs & Cylinder Recordings",
+							"genre":"Jazz",
+							"length_formatted":"3:01"
+						},
+						"image":{"src":"<?php echo $audio_icon_js ?>","width":48,"height":64},
+						"thumb":{"src":"<?php echo $audio_icon_js ?>","width":48,"height":64}
+					},
+					{
+						"src":"<?php echo $wp_host ?>Johnny_Hodges_Orchestra-Squaty_Roo-1941.mp3",
+						"type":"audio\/mpeg","title":"Squaty Roo","caption":"","description":"",
+						"meta":{
+							"artist":"Johnny Hodges Orchestra",
+							"album":"78 RPMs & Cylinder Recordings",
+							"genre":"Jazz",
+							"length_formatted":"2:24"
+						},
+						"image":{"src":"<?php echo $audio_icon_js ?>","width":48,"height":64},
+						"thumb":{"src":"<?php echo $audio_icon_js ?>","width":48,"height":64}
+					}]
+				}</script>
+			</div>
 			<h4><?php _e( 'Do more with audio and video' ); ?></h4>
 			<p><?php _e( 'Images have galleries; now we&#8217;ve added simple audio and video playlists, so you can showcase your music and clips.' ); ?></p>
 		</div>
@@ -78,13 +174,22 @@ include( ABSPATH . 'wp-admin/admin-header.php' );
 <div class="changelog customize">
 	<div class="feature-section col two-col">
 		<div>
-			<img src="//wordpress.org/images/core/3.9/theme.jpg?0" />
+			<?php
+				echo wp_video_shortcode( array(
+					'mp4'      => '//s.w.org/images/core/3.9/widgets.mp4',
+					'ogv'      => '//s.w.org/images/core/3.9/widgets.ogv',
+					'webm'     => '//s.w.org/images/core/3.9/widgets.webm',
+					'loop'     => true,
+					'autoplay' => true,
+					'width'    => 499
+				) );
+			?>
 			<h4><?php _e( 'Live widget and header previews' ); ?></h4>
 			<p><?php _e( 'Add, edit, and rearrange your site&#8217;s widgets right in the theme customizer. No &#8220;save and surprise&#8221; &mdash; preview your changes live and only save them when you&#8217;re ready.' ); ?></p>
 			<p><?php _e( 'The improved header image tool also lets you upload, crop, and manage headers while customizing your theme.' ); ?></p>
 		</div>
 		<div class="last-feature">
-			<img src="//wordpress.org/images/core/3.9/theme.jpg?0" />
+			<img src="//s.w.org/images/core/3.9/theme.jpg?0" />
 			<h4><?php _e( 'Stunning new theme browser' ); ?></h4>
 			<p><?php _e( 'Looking for a new theme should be easy and fun. Lose yourself in the boundless supply of free WordPress.org themes with the beautiful new theme browser.' ); ?></p>
 		<?php if ( current_user_can( 'install_themes' ) ) { ?>

wp-admin/css/about-rtl.css

@@ -175,7 +175,16 @@
 .about-overview {
 	margin-top: 40px;
 	text-align: center;
-	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+}
+
+.about-overview .wp-video {
+	margin: 0 auto;
+}
+
+.changelog .wp-playlist .wp-playlist-current-item img {
+	height: 64px;
+	width: auto;
+	max-width: 100%;
 }
 
 .about-wrap .feature-section {

wp-admin/css/about.css

@@ -175,7 +175,16 @@
 .about-overview {
 	margin-top: 40px;
 	text-align: center;
-	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+}
+
+.about-overview .wp-video {
+	margin: 0 auto;
+}
+
+.changelog .wp-playlist .wp-playlist-current-item img {
+	height: 64px;
+	width: auto;
+	max-width: 100%;
 }
 
 .about-wrap .feature-section {

wp-includes/js/mediaelement/wp-playlist.js

@@ -162,7 +162,7 @@
 	});
 
     $(document).ready(function () {
-		if ( ! $( 'body' ).hasClass('wp-admin') ) {
+		if ( ! $( 'body' ).hasClass( 'wp-admin' ) || $( 'body' ).hasClass( 'about-php' ) ) {
 			$('.wp-playlist').each(function () {
 				return new WPPlaylistView({ el: this });
 			});

wp-includes/media.php

@@ -1139,7 +1139,8 @@ function wp_playlist_scripts( $type ) {
 ?>
 <!--[if lt IE 9]><script>document.createElement('<?php echo esc_js( $type ) ?>');</script><![endif]-->
 <?php
-	wp_underscore_playlist_templates();
+	add_action( 'wp_footer', 'wp_underscore_playlist_templates', 0 );
+	add_action( 'admin_footer', 'wp_underscore_playlist_templates', 0 );
 }
 add_action( 'wp_playlist_scripts', 'wp_playlist_scripts' );