diff --git a/wp-includes/js/mediaelement/wp-mediaelement.css b/wp-includes/js/mediaelement/wp-mediaelement.css index cf498e959d..4abfef8697 100644 --- a/wp-includes/js/mediaelement/wp-mediaelement.css +++ b/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; diff --git a/wp-includes/js/mediaelement/wp-playlist.js b/wp-includes/js/mediaelement/wp-playlist.js index 092161a740..6c19e1da5f 100644 --- a/wp-includes/js/mediaelement/wp-playlist.js +++ b/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 = $( '
' ); + var self = this, i = 1, tracklist = $( '
' ); 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( 'index', that.data.tracknumbers ? i : false ); - tracklist.append( that.itemTemplate( model.toJSON() ) ); + model.set( 'artists', self.data.artists ); + model.set( 'index', self.data.tracknumbers ? i : false ); + 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(); }