Big refactor into components.

assets/css/transport.css.sass

@@ -1,4 +1,4 @@
-#transport
+mpd-transport
   position: fixed
   bottom: 0
   width: 20em

assets/js/components/app.js

@@ -5,13 +5,14 @@ can.Component.extend({
   template: can.view('views/app.mustache'),
 
   scope: {
-    queueSongs: new can.List(),
-    status: new can.Map()
+    queueSongs: new QueueSong.List(),
+    status: new Status
   },
 
   events: {
     init: function(element, options) {
-      this.scope.attr('events', new Events(this.scope.queueSongs, this.scope.status));
+      Status.findOne({}, this.updateStatus.bind(this));
+      this.scope.attr('events', new Events(this.scope));
       this.fetch();
     },
 
@@ -22,8 +23,16 @@ can.Component.extend({
       });
     },
 
+    updateStatus: function(result) {
+      this.scope.attr('status', result);
+    },
+
     update: function(songs) {
       this.scope.attr('queueSongs', songs);
+    },
+
+    '{scope.status} change': function() {
+      this.scope.attr('queueSongs').updatePlaying(this.scope.status.song);
     }
   }
 

assets/js/components/transport.js

@@ -0,0 +1,22 @@
+can.Component.extend({
+
+  tag: 'mpd-transport',
+
+  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);
+      $(element).blur();
+    }
+  }
+
+});

assets/js/constructs/events.js

@@ -1,6 +1,6 @@
 var Events = can.Construct.extend({
 
-  init: function(queue, status) {
+  init: function(scope) {
     this.events = new EventSource('/api/stream')
 
     self = this
@@ -9,24 +9,16 @@ var Events = can.Construct.extend({
       response = JSON.parse(e.data);
       switch (response.type) {
         case 'status':
-          status.attr(response.data, true);
+          scope.attr('status').attr(response.data);
           break;
         case 'queue':
-          queue.replace(response.data);
-          debugger;
+          scope.attr('queueSongs', response.data);
           break;
         case 'time':
-          status.attr('time', response.data);
+          scope.attr('status.time', response.data);
           break;
       }
     }
-
-    status.bind('change', function(event, attr, how, newVal, oldVal) {
-      if (attr == 'song') {
-        debugger;
-        queue.updatePlaying(how, newVal, oldVal);
-      }
-    });
   },
 
 });

assets/js/helpers/time.js

@@ -7,4 +7,4 @@ window.timeHelpers = {
     }
     return minutes + ':' + seconds;
   }
-}
+};

assets/js/models/queueSong.js

@@ -2,17 +2,21 @@ var QueueSong = can.Model.extend({
 
   findAll: 'GET /api/queue'
 
-}, {});
+}, {
 
-QueueSong.List = can.List.extend({
-
-  updatePlaying: function(how, newVal, oldVal) {
-    if ((how == 'remove' || how == 'set') && this.attr(oldVal) != undefined) {
-      this.attr(oldVal).attr('playing', false);
-    }
-    if (how == 'add' || how == 'set') {
-      this.attr(newVal).attr('playing', true);
-    }
+  formattedLength: function() {
+    return timeHelpers.formatLength(this.length)
+  }
+
+});
+
+QueueSong.List = can.List.extend({
+
+  updatePlaying: function(newSong) {
+    this.each(function(item) {
+      item.attr('playing', false);
+    });
+    this.attr(newSong).attr('playing', true);
   }
 
 });

assets/js/models/status.js

@@ -2,4 +2,34 @@ var Status = can.Model.extend({
 
   findOne: 'GET /api/status'
 
-}, {});
+}, {
+
+  playing: function() {
+    return this.attr('state') === 'play'
+  },
+
+  playingOrPaused: function() {
+    return (this.attr('state') === 'play' || this.attr('state') === 'pause');
+  },
+
+  showTrackProgress: can.compute(function() {
+    return (this.playingOrPaused() && this.attr('time') != undefined);
+  }),
+
+  formattedElapsedTime: function() {
+    if (this.attr('time') != undefined) {
+      return timeHelpers.formatLength(this.attr('time')[0])
+    }
+  },
+
+  formattedTotalTime: function() {
+    if (this.attr('time') != undefined) {
+      return timeHelpers.formatLength(this.attr('time')[1])
+    }
+  },
+
+  markerPosition: function() {
+    return (this.attr('time')[0] / this.attr('time')[1]) * 100
+  }
+
+});

public/views/library.ejs

@@ -1,15 +0,0 @@
-<header>
-  <% if (browser.attr('currentPane') > 0) { %>
-    <%== can.route.link('Back', { page: 'library', pane: browser.attr('currentPane') - 1 }, { class: 'back' }) %>
-  <% } %>
-  <a class="close" href="#!">Close</a>
-  <h1><%= browser.attr('title') %></h1>
-</header>
-
-<div class="browser"
-     data-current-pane="<%= browser.attr('currentPane') %>"
-     style="left: -<%= browser.attr('currentPane') * 20 %>em;">
-
-  <panel show="root" style="left: 0;"></panel>
-
-</div>

public/views/queue.ejs

@@ -1,13 +0,0 @@
-<header>
-  <a class="library" href="#!library">Library</a>
-  <h1>Queue</h1>
-</header>
-<ol class="queue">
-  <% list(queueSongs, function(song) { %>
-    <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/queue.mustache

@@ -3,11 +3,11 @@
   <h1>Queue</h1>
 </header>
 <ol class="queue">
-  {{#each queueSongs}}
+  {{#queueSongs}}
     <li id="{{id}}" data-pos="{{pos}}" class="{{#playing}}playing{{/playing}}">
       <p class="title">{{title}}</p>
       <p class="artist">{{artist}}</p>
-      <p class="length">{{formatLength length}}</p>
+      <p class="length">{{formattedLength}}</p>
     </li>
-  {{/each}}
+  {{/queueSongs}}
 </ol>

public/views/transport.ejs

@@ -1,24 +0,0 @@
-<div class="scrubber">
-  <% if (status.attr('state') == 'play' || status.attr('state') == 'pause') { %>
-    <div class="time elapsed"><%= formatLength(status.attr('time')[0]) %></div>
-    <div class="time total">-<%= formatLength(status.attr('time')[1] - status.attr('time')[0]) %></div>
-  <% } else { %>
-    <div class="time elapsed">--:--</div>
-    <div class="time total">--:--</div>
-  <% } %>
-  <div class="track">
-    <% if (status.attr('state') == 'play' || status.attr('state') == 'pause') { %>
-      <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>
-  <% } else { %>
-    <button data-command="play">play</button>
-  <% } %>
-  <button data-command="stop">stop</button>
-  <button data-command="next">next</button>
-</nav>

public/views/transport.mustache

@@ -1,20 +1,20 @@
 <div class="scrubber">
-  {{#if status.playingOrPaused()}}
-    <div class="time elapsed"><%= formatLength(status.attr('time')[0]) %></div>
-    <div class="time total">-<%= formatLength(status.attr('time')[1] - status.attr('time')[0]) %></div>
+  {{#if status.showTrackProgress}}
+    <div class="time elapsed">{{status.formattedElapsedTime}}</div>
+    <div class="time total">{{status.formattedTotalTime}}</div>
   {{else}}
     <div class="time elapsed">--:--</div>
     <div class="time total">--:--</div>
   {{/if}}
   <div class="track">
-    {{#if playingOrPaused()}}
-      <div class="marker" style="left: {{status.markerPosition()}}"></div>
+    {{#if status.showTrackProgress}}
+      <div class="marker" style="left: {{status.markerPosition}}%"></div>
     {{/if}}
   </div>
 </div>
 <nav class="controls">
   <button data-command="previous">previous</button>
-  {{#if status.playing()}}
+  {{#if status.playing}}
     <button data-command="pause">pause</button>
   {{else}}
     <button data-command="play">play</button>