From 6a0ad62887457d1eb04f5a3b960e86d93046c041 Mon Sep 17 00:00:00 2001
From: Gregory Ballantine <brotherballantine@gmail.com>
Date: Mon, 28 Nov 2016 16:51:29 -0500
Subject: [PATCH] Added music player selection highlights

---
 app/views/music1.twig         |  2 +-
 app/views/music2.twig         |  2 +-
 assets/sass/pages/_music.sass | 84 ++++++++++++++++++-----------------
 public/css/main.css           |  6 ++-
 public/js/music.js            | 18 +++++++-
 5 files changed, 67 insertions(+), 45 deletions(-)

diff --git a/app/views/music1.twig b/app/views/music1.twig
index 30087e5..8deb816 100644
--- a/app/views/music1.twig
+++ b/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 %}
diff --git a/app/views/music2.twig b/app/views/music2.twig
index 731b8a5..086d21f 100644
--- a/app/views/music2.twig
+++ b/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 %}
diff --git a/assets/sass/pages/_music.sass b/assets/sass/pages/_music.sass
index 1b79d74..9dabee4 100755
--- a/assets/sass/pages/_music.sass
+++ b/assets/sass/pages/_music.sass
@@ -1,59 +1,63 @@
 #music-header
-	text-align: center
+  text-align: center
 
-	h1
-		color: white
-		font:
-			size: 34px
-			weight: bold
+  h1
+    color: white
+    font:
+      size: 34px
+      weight: bold
 
 #music-list-section
-	.music-list
-		position: relative
-		+transition(background, 200ms)
+  .music-list
+    position: relative
+    +transition(background, 200ms)
 
-		&:hover
-			cursor: pointer
-			background: #f0f0f0
+    &:hover
+      cursor: pointer
+      background: #f0f0f0
 
-	.music-list-header
-		margin: 10px 0
+  .music-list-header
+    margin: 10px 0
 
 .now-playing-list,
 .music-list ol
-	margin-left: 15px
-	margin-right: 15px
-	color: $text-color
+  margin-left: 15px
+  margin-right: 15px
+  color: $text-color
 
-	li
-		+transition(background, 200ms)
+  li
+    +transition(background, 200ms)
 
-		&:hover
-			background: #f0f0f0
+    &:hover
+      background: #f0f0f0
+      cursor: pointer
 
-			a
-				color: $main-color
+      a
+        color: $main-color
 
-		&.selected
-			background: #e0e0e0
+    &.selected
+      background: #e0e0e0
 
-	li,
-	a
-		display: block
-		+size(100% 100%)
-		padding: 8px 5px
-		color: $text-color
-		text-decoration: none
-		+transition(color, 200ms)
+      a
+        color: $main-color
+
+  li,
+  a
+    display: block
+    +size(100% 100%)
+    padding: 8px 5px
+    color: $text-color
+    text-decoration: none
+    +transition(color, 200ms)
 
 #music-player-card
-	.mejs-container
-		width: 100%
+  .mejs-container
+    width: 100%
 
-	.mejs-container,
-	.mejs-mediaelement,
-	.mejs-controls
-		background: transparent
+  .mejs-container,
+  .mejs-mediaelement,
+  .mejs-controls
+    background: transparent
 
 .album-art
-	width: 100%
+  width: 100%
diff --git a/public/css/main.css b/public/css/main.css
index b2cca4c..bff0703 100755
--- a/public/css/main.css
+++ b/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,
diff --git a/public/js/music.js b/public/js/music.js
index b343e5a..0d6eceb 100755
--- a/public/js/music.js
+++ b/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');