Added music player selection highlights

app/views/music1.twig

@@ -43,7 +43,7 @@
       <article class="card">
         <ul class="now-playing-list">
           {% for song in songs %}
-            <li class="music-track" data-title="{{ song.title }}" data-album="{{ song.album_id }}" data-order="{{ song.track_order }}" data-path="{{ song.audio_file }}">
+            <li class="music-track {% if loop.index0 == 0 %}selected{% endif %}" data-trackid="{{ song.id }}" data-title="{{ song.title }}" data-album="{{ song.album_id }}" data-order="{{ song.track_order }}" data-path="{{ song.audio_file }}">
               <span>{{ song.track_order }}. {{ song.title }}</span>
             </li>
           {% endfor %}

app/views/music2.twig

@@ -43,7 +43,7 @@
       <article class="card">
         <ul class="now-playing-list">
           {% for song in songs %}
-            <li class="music-track" data-title="{{ song.title }}" data-album="{{ song.album_id }}" data-order="{{ song.track_order }}" data-path="{{ song.audio_file }}">
+            <li class="music-track {% if loop.index0 == 0 %}selected{% endif %}" data-trackid="{{ song.id }}" data-title="{{ song.title }}" data-album="{{ song.album_id }}" data-order="{{ song.track_order }}" data-path="{{ song.audio_file }}">
               <span>{{ song.track_order }}. {{ song.title }}</span>
             </li>
           {% endfor %}

assets/sass/pages/_music.sass

@@ -30,6 +30,7 @@
 
     &:hover
       background: #f0f0f0
+      cursor: pointer
 
       a
         color: $main-color
@@ -37,6 +38,9 @@
     &.selected
       background: #e0e0e0
 
+      a
+        color: $main-color
+
   li,
   a
     display: block

public/css/main.css

@@ -645,13 +645,17 @@ body {
     transition: background, 200ms; }
     .now-playing-list li:hover,
     .music-list ol li:hover {
-      background: #f0f0f0; }
+      background: #f0f0f0;
+      cursor: pointer; }
       .now-playing-list li:hover a,
       .music-list ol li:hover a {
         color: #e51400; }
     .now-playing-list li.selected,
     .music-list ol li.selected {
       background: #e0e0e0; }
+      .now-playing-list li.selected a,
+      .music-list ol li.selected a {
+        color: #e51400; }
   .now-playing-list li,
   .now-playing-list a,
   .music-list ol li,

public/js/music.js

@@ -4,11 +4,25 @@ $(document).ready(function() {
   player = $('#music-player').get(0);
 
   $('.now-playing-list .music-track').on('click', function() {
-    // change the audio source
-    changeAudioSources(this);
+    // change selected track
+    changeSelectedTrack(this);
   });
 });
 
+function changeSelectedTrack(trackElem) {
+  var oldSelected = $('.now-playing-list .music-track.selected');
+  var newSelected = $(trackElem);
+
+  if (oldSelected.data('trackid') != newSelected.data('trackid')) {
+    // remove selected class from the old element and add it to the new one
+    oldSelected.removeClass('selected');
+    newSelected.addClass('selected');
+
+    // now change the audio sources
+    changeAudioSources(trackElem);
+  }
+}
+
 function changeAudioSources(trackElem) {
   trackElem = $(trackElem);
   var playerSources = $('#music-player source');