Queue now updates on commands.

assets/js/application.js

@@ -2,11 +2,27 @@
 $(document).ready(function() {
 
   $.when(QueueSong.findAll(), Status.findOne()).then(function(queueSongs, status) {
-    new Transport('#transport');
-    new Queue('#queue', {
+
+    window.mpdClient = {
+      status: status,
       queueSongs: queueSongs,
-      status: status
+
+      transport: new Transport('#transport', {
+        status: status
+      }),
+
+      queue: new Queue('#queue', {
+        queueSongs: queueSongs,
+        status: status
+      })
+    };
+
+    status.bind('change', function(event, attr, how, newVal, oldVal) {
+      if (attr == 'songid') {
+        mpdClient.queueSongs.updatePlaying(oldVal, newVal);
+      }
     });
+
   });
 
 });

assets/js/controls/transport.js

@@ -1,11 +1,19 @@
 var Transport = can.Control.extend({
 
-  init: function(element) {
+  init: function(element, options) {
+    this.status = options.status;
     element.html(can.view('views/transport.ejs'));
   },
 
   sendCommand: function(command) {
-    can.ajax({ url: '/api/control/'+command, type: 'PUT' });
+    var self = this;
+    can.ajax({
+      url: '/api/control/' + command,
+      type: 'PUT',
+      success: function(status) {
+        self.status.attr(status);
+      }
+    });
   },
 
   'button click': function(element, event) {

assets/js/models/queueSong.js

@@ -0,0 +1,14 @@
+var QueueSong = can.Model.extend({
+
+  findAll: 'GET /api/queue'
+
+}, {});
+
+QueueSong.List = can.List.extend({
+
+  updatePlaying: function(oldVal, newVal) {
+    this.attr(oldVal).attr('playing', false);
+    this.attr(newVal).attr('playing', true);
+  }
+
+});

assets/js/models/queueSongs.js

@@ -1,5 +0,0 @@
-var QueueSong = can.Model.extend({
-
-  findAll: 'GET /api/queue'
-
-}, {});

mpd_client.rb

@@ -27,6 +27,10 @@ class MPDClient < Sinatra::Base
 
   namespace '/api' do
 
+    before do
+      content_type 'application/json'
+    end
+
     get '/status' do
       JSON MPDConnection.status
     end

public/views/queue.ejs

@@ -1,7 +1,7 @@
 <h2>Queue</h2>
 <ul id="queue">
   <% list(queueSongs, function(song) { %>
-    <li id="<%= song.attr('id') %>"<%= song.attr('id') == status.songid ? ' class="playing"' : '' %>>
+    <li id="<%= song.attr('id') %>" <%= song.attr('playing') ? 'class="playing"' : '' %>>
       <%= song.attr('artist') %> - <%= song.attr('title') %>
     </li>
   <% }) %>