Add scrubber.

assets/css/controls.css.sass

@@ -1,18 +0,0 @@
-#transport
-  position: fixed
-  bottom: 0
-  width: 20em
-  background: rgba(248, 248, 248, 0.9)
-  border-top: 1px solid rgba(0, 0, 0, 0.1)
-  text-align: center
-  button
-    @extend .icon
-    font-size: 2em
-    width: 23%
-    padding: 0.5em
-    text-align: center
-    border: none
-    background: none
-    color: black
-    &:hover, &:focus
-      text-shadow: 0 0 10px rgba(255, 255, 255, 1)

assets/css/mpd-client.css.sass

@@ -3,5 +3,5 @@
 @import 'includes/fonts'
 @import 'includes/colours'
 @import 'common'
-@import 'controls'
+@import 'transport'
 @import 'queue'

assets/css/queue.css.sass

@@ -16,6 +16,12 @@
     white-space: nowrap
     overflow: hidden
     text-overflow: ellipsis
+  .length
+    position: absolute
+    font-size: 0.8em
+    padding: 0.6em 0
+    right: 10px
+    top: 10px
   li
     position: relative
     padding: 10px
@@ -39,3 +45,5 @@
         top: 10px
         padding: 0.3em
         content: "playing"
+      .length
+        display: none

assets/css/transport.css.sass

@@ -0,0 +1,42 @@
+#transport
+  position: fixed
+  bottom: 0
+  width: 20em
+  background: rgba(248, 248, 248, 0.95)
+  border-top: 1px solid rgba(0, 0, 0, 0.1)
+  text-align: center
+  button
+    @extend .icon
+    font-size: 2em
+    width: 23%
+    padding: 0.5em
+    text-align: center
+    border: none
+    background: none
+    color: black
+    &:hover, &:focus
+      text-shadow: 0 0 10px rgba(255, 255, 255, 1)
+
+  .scrubber
+    @include clearfix
+    padding: 0.5em 25px 0
+    .time
+      font-size: 0.8em
+    .elapsed
+      float: left
+    .total
+      float: right
+
+  .track
+    position: relative
+    width: 70%
+    margin: 0.25em auto
+    height: 7px
+    background: rgba(127, 127, 127, 0.2)
+    .marker
+      position: absolute
+      background: #FD2D57
+      margin-left: -1px
+      margin-top: -4px
+      width: 2px
+      height: 15px

assets/js/constructs/events.js

@@ -14,6 +14,9 @@ var Events = can.Construct.extend({
         case 'queue':
           queue.replace(response.data);
           break;
+        case 'time':
+          status.attr('time', response.data);
+          break;
       }
     }
 

assets/js/controls/queue.js

@@ -1,10 +1,13 @@
 var Queue = can.Control.extend({
 
   init: function(element, options) {
-    element.html(can.view('views/queue.ejs', {
+    element.html(
+      can.view('views/queue.ejs', {
         queueSongs: options.queueSongs,
         status: options.status
-    }));
+      },
+      { formatLength: timeHelpers.formatLength }
+    ));
   },
 
   playSong: function(pos) {

assets/js/controls/transport.js

@@ -2,7 +2,12 @@ var Transport = can.Control.extend({
 
   init: function(element, options) {
     this.status = options.status;
-    element.html(can.view('views/transport.ejs', { status: this.status }));
+    element.html(
+      can.view(
+        'views/transport.ejs', { status: this.status },
+        { formatLength: timeHelpers.formatLength }
+      )
+    );
   },
 
   updateStatus: function(status) {

assets/js/helpers/time.js

@@ -0,0 +1,10 @@
+window.timeHelpers = {
+  formatLength: function(length) {
+    var minutes = Math.floor(length / 60);
+    var seconds = length % 60;
+    if (seconds < 10) {
+      seconds = '0' + seconds;
+    }
+    return minutes + ':' + seconds;
+  }
+}

assets/js/mpd-client.js

@@ -3,6 +3,7 @@
 //= require ./libs/can.ejs.js
 
 //= require_tree ./models/
+//= require_tree ./helpers/
 //= require_tree ./controls/
 //= require_tree ./constructs/
 //= require ./router.js

models/song.rb

@@ -1,12 +1,13 @@
 require './models/mpd_connection'
 
-class Song < Struct.new(:id, :artist, :album, :title, :pos, :playing)
+class Song < Struct.new(:id, :artist, :album, :title, :length, :pos, :playing)
 
   def initialize(song, pos: nil, playing: false)
     self.id = song.id
     self.artist = song.artist
     self.album = song.album
     self.title  = song.title
+    self.length = song.time
     self.pos = pos
     self.playing = playing
   end

mpd_client.rb

@@ -39,7 +39,7 @@ class MPDClient < Sinatra::Base
   end
 
   def self.send_time(elapsed, total)
-    response = JSON({ type: 'time', data: { elapsed: elapsed, total: total } })
+    response = JSON({ type: 'time', data: [elapsed, total] })
     settings.connections.each { |out| out << "data: #{response}\n\n" }
   end
 

public/views/queue.ejs

@@ -3,6 +3,7 @@
     <li id="<%= song.attr('id') %>" data-pos="<%= song.attr('pos') %>" <%= song.attr('playing') ? 'class="playing"' : '' %>>
       <p class="title"><%= song.attr('title') %></p>
       <p class="artist"><%= song.attr('artist') %></p>
+      <p class="length"><%= formatLength(song.attr('length')) %></p>
     </li>
   <% }) %>
 </ol>

public/views/transport.ejs

@@ -1,4 +1,13 @@
-<nav>
+<% if (status.attr('time')) { %>
+<div class="scrubber">
+  <div class="time elapsed"><%= formatLength(status.attr('time')[0]) %></div>
+  <div class="time total"><%= formatLength(status.attr('time')[1]) %></div>
+  <div class="track">
+    <div class="marker" style="left: <%= (status.attr('time')[0] / status.attr('time')[1]) * 100 %>%"></div>
+  </div>
+</div>
+<% } %>
+<nav class="controls">
   <button data-command="previous">previous</button>
   <% if (status.attr('state') == 'play') { %>
     <button data-command="pause">pause</button>