Changeset 27489

Timestamp:

03/10/2014 12:14:42 AM (12 years ago)

Author:

wonderboymusic

Message:

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.

Location:

trunk/src/wp-includes/js/mediaelement

Files:

• wp-mediaelement.css (modified) (2 diffs)
• wp-playlist.js (modified) (3 diffs)

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

@@ -125 +125 @@
 .wp-playlist-item-length {
         position: absolute;
-        right: 0;
+        right: 3px;
         top: 0;
 }
@@ -137 +137 @@
         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;
 }
 

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

@@ -26 +26 @@
 
                         if ( this.data.tracklist ) {
+                                this.playingClass = 'wp-playlist-playing';
                                 this.renderTracks();
                         }
@@ -58 +59 @@
 
                 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( '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 );
                 },
 
@@ -116 +119 @@
                 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();