Refactor server into construct.

assets/js/components/queue.js

@@ -2,6 +2,13 @@ can.Component.extend({
 
   tag: 'mpd-queue',
 
-  template: can.view('views/queue.mustache')
+  template: can.view('views/queue.mustache'),
+
+  events: {
+    'li click': function(element, event) {
+      var pos = $(element).data('pos');
+      server.playSong(pos);
+    }
+  }
 
 });

assets/js/components/transport.js

@@ -5,16 +5,9 @@ can.Component.extend({
   template: can.view('views/transport.mustache'),
 
   events: {
-    sendCommand: function(command) {
-      can.ajax({
-        url: '/api/control/' + command,
-        type: 'PUT'
-      });
-    },
-
     'button click': function(element, event) {
       var command = $(element).data('command');
-      this.sendCommand(command);
+      server.sendCommand(command);
       $(element).blur();
     }
   }

assets/js/constructs/server.js

@@ -0,0 +1,31 @@
+var Server = can.Construct.extend({
+
+  init: function() {
+    this.eventSource = new EventSource('/api/stream')
+  },
+
+  onMessage: function(callback) {
+    this.eventSource.addEventListener('message', function(event) {
+      var response = JSON.parse(event.data);
+      callback(response);
+    });
+  },
+
+  sendCommand: function(command) {
+    can.ajax({
+      url: '/api/control/' + command,
+      type: 'PUT'
+    });
+  },
+
+  playSong: function(pos) {
+    can.ajax({
+      url: '/api/control/play',
+      data: { pos: pos },
+      type: 'PUT'
+    });
+  }
+
+});
+
+window.server = new Server();

assets/js/helpers/server.js

@@ -1,5 +0,0 @@
-window.server = {
-
-  eventSource: new EventSource('/api/stream'),
-
-}

assets/js/models/queueSong.js

@@ -13,11 +13,10 @@ var QueueSong = can.Model.extend({
 QueueSong.List = can.List.extend({
 
   init: function() {
-    server.eventSource.addEventListener('message', this.updateQueue.bind(this));
+    server.onMessage(this.updateQueue.bind(this));
   },
 
-  updateQueue: function(event) {
+  updateQueue: function(response) {
-    var response = JSON.parse(event.data);
     if (response.type === 'queue') {
       this.attr(response.data, true);
     }
@@ -27,7 +26,9 @@ QueueSong.List = can.List.extend({
     this.each(function(item) {
       item.attr('playing', false);
     });
+    if (this.attr(newSong) !== undefined) {
       this.attr(newSong).attr('playing', true);
     }
+  }
 
 });

assets/js/models/status.js

@@ -5,11 +5,10 @@ var Status = can.Model.extend({
 }, {
 
   init: function() {
-    server.eventSource.addEventListener('message', this.updateStatus.bind(this));
+    server.onMessage(this.updateStatus.bind(this));
   },
 
-  updateStatus: function(event) {
+  updateStatus: function(response) {
-    var response = JSON.parse(event.data);
     switch (response.type) {
       case 'status':
         this.attr(response.data);