add color to the first part of the track slider. closes #15

andrewrk · Oct 15, 2012 · 61a1474 · 61a1474
1 parent 8e22ebb
commit 61a1474
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 0 deletions.
diff --git a/src/client/app.co b/src/client/app.co
@@ -1318,6 +1318,10 @@ function queueSelection (event)
       socket.emit 'Chat', message
       return false
 
+!function updateSliderUi (value)
+  percent = value * 100
+  $track_slider.css('background-size', "#percent% 100%")
+
 !function setUpNowPlayingUi
   actions =
     toggle: togglePlayback
@@ -1336,9 +1340,11 @@ function queueSelection (event)
     min: 0
     max: 1
     change: !(event, ui) ->
+      updateSliderUi(ui.value)
       return if not event.originalEvent?
       mpd.seek ui.value * mpd.status.time
     slide: !(event, ui) ->
+      updateSliderUi(ui.value)
       $nowplaying_elapsed.html Util.formatTime(ui.value * mpd.status.time)
     start: !(event, ui) -> user_is_seeking := true
     stop: !(event, ui) -> user_is_seeking := false

diff --git a/src/client/styles/app.styl b/src/client/styles/app.styl
@@ -30,6 +30,9 @@ body
 #track-slider
   margin 10px 10px 5px
 
+  background url("img/bright-10.png") left no-repeat
+  background-size 0% 100%
+
 #nowplaying
   margin 6px auto
   text-align center

diff --git a/src/public/img/bright-10.png b/src/public/img/bright-10.png