From 6ca0982865b4f970c14fbcf02c92c2149983f6b1 Mon Sep 17 00:00:00 2001
From: Dan Barber <dan@new-bamboo.co.uk>
Date: Wed, 4 Dec 2013 17:41:57 +0000
Subject: [PATCH] Queue now updates on commands.

---
 assets/js/application.js        | 22 +++++++++++++++++++---
 assets/js/controls/transport.js | 12 ++++++++++--
 assets/js/models/queueSong.js   | 14 ++++++++++++++
 assets/js/models/queueSongs.js  |  5 -----
 mpd_client.rb                   |  4 ++++
 public/views/queue.ejs          |  2 +-
 6 files changed, 48 insertions(+), 11 deletions(-)
 create mode 100644 assets/js/models/queueSong.js
 delete mode 100644 assets/js/models/queueSongs.js

diff --git a/assets/js/application.js b/assets/js/application.js
index 6ec5b3b..7352eb4 100644
--- a/assets/js/application.js
+++ b/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);
+      }
     });
+
   });
 
 });
diff --git a/assets/js/controls/transport.js b/assets/js/controls/transport.js
index 8f16adf..198971c 100644
--- a/assets/js/controls/transport.js
+++ b/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) {
diff --git a/assets/js/models/queueSong.js b/assets/js/models/queueSong.js
new file mode 100644
index 0000000..2e662d9
--- /dev/null
+++ b/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);
+  }
+
+});
diff --git a/assets/js/models/queueSongs.js b/assets/js/models/queueSongs.js
deleted file mode 100644
index f0ab7b2..0000000
--- a/assets/js/models/queueSongs.js
+++ /dev/null
@@ -1,5 +0,0 @@
-var QueueSong = can.Model.extend({
-
-  findAll: 'GET /api/queue'
-
-}, {});
diff --git a/mpd_client.rb b/mpd_client.rb
index fcf8b0f..565c7dd 100644
--- a/mpd_client.rb
+++ b/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
diff --git a/public/views/queue.ejs b/public/views/queue.ejs
index 89fb89b..af6d8d3 100644
--- a/public/views/queue.ejs
+++ b/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>
   <% }) %>