Add a class, `wp-playlist-playing`, to the currently loaded track when tracks are displayed. Add some subtle styles for light and dark playlist themes.

See #27321.


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


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

wp-includes/js/mediaelement/wp-mediaelement.css

@@ -124,7 +124,7 @@
 
 .wp-playlist-item-length {
 	position: absolute;
-	right: 0;
+	right: 3px;
 	top: 0;
 }
 
@@ -136,9 +136,24 @@
 .wp-playlist-item {
 	position: relative;
 	cursor: pointer;
+	padding: 0 3px;
 	border-bottom: 1px solid #ccc;
 }
 
+.wp-playlist-dark .wp-playlist-item {
+	color: #dedede;
+}
+
+.wp-playlist-playing {
+	font-weight: bold;
+	background: #f7f7f7;
+}
+
+.wp-playlist-dark .wp-playlist-playing {
+	background: #000;
+	color: #fff;
+}
+
 .wp-playlist-current-item {
 	overflow: hidden;
 	margin-bottom: 10px;

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

@@ -25,6 +25,7 @@
 			this.renderCurrent();
 
 			if ( this.data.tracklist ) {
+				this.playingClass = 'wp-playlist-playing';
 				this.renderTracks();
 			}
 
@@ -57,17 +58,19 @@
 		},
 
 		renderTracks : function () {
-			var that = this, i = 1, tracklist = $( '<div class="wp-playlist-tracks"></div>' );
+			var self = this, i = 1, tracklist = $( '<div class="wp-playlist-tracks"></div>' );
 			this.tracks.each(function (model) {
-				if ( ! that.data.images ) {
+				if ( ! self.data.images ) {
 					model.set( 'image', false );
 				}
-				model.set( 'artists', that.data.artists );
+				model.set( 'artists', self.data.artists );
-				model.set( 'index', that.data.tracknumbers ? i : false );
+				model.set( 'index', self.data.tracknumbers ? i : false );
-				tracklist.append( that.itemTemplate( model.toJSON() ) );
+				tracklist.append( self.itemTemplate( model.toJSON() ) );
 				i += 1;
 			});
 			this.$el.append( tracklist );
+
+			this.$( '.wp-playlist-item' ).eq(0).addClass( this.playingClass );
 		},
 
 		events : {
@@ -115,6 +118,14 @@
 
 		setCurrent : function () {
 			this.current = this.tracks.at( this.index );
+
+			if ( this.data.tracklist ) {
+				this.$( '.wp-playlist-item' )
+					.removeClass( this.playingClass )
+					.eq( this.index )
+						.addClass( this.playingClass );
+			}
+
 			this.loadCurrent();
 			this.player.play();
 		}