From 6bc65a23a852bef39d15918837b64f206640f81e Mon Sep 17 00:00:00 2001
From: Dan Barber <dan@new-bamboo.co.uk>
Date: Wed, 8 Jan 2014 11:19:17 +0000
Subject: [PATCH] Big refactor into components.

---
 assets/css/transport.css.sass     |  2 +-
 assets/js/components/app.js       | 15 ++++++++++++---
 assets/js/components/transport.js | 22 +++++++++++++++++++++
 assets/js/constructs/events.js    | 16 ++++------------
 assets/js/helpers/time.js         |  2 +-
 assets/js/models/queueSong.js     | 24 +++++++++++++----------
 assets/js/models/status.js        | 32 ++++++++++++++++++++++++++++++-
 public/views/library.ejs          | 15 ---------------
 public/views/queue.ejs            | 13 -------------
 public/views/queue.mustache       |  6 +++---
 public/views/transport.ejs        | 24 -----------------------
 public/views/transport.mustache   | 12 ++++++------
 12 files changed, 94 insertions(+), 89 deletions(-)
 create mode 100644 assets/js/components/transport.js
 delete mode 100644 public/views/library.ejs
 delete mode 100644 public/views/queue.ejs
 delete mode 100644 public/views/transport.ejs

diff --git a/assets/css/transport.css.sass b/assets/css/transport.css.sass
index e287dc8..78bb7bb 100644
--- a/assets/css/transport.css.sass
+++ b/assets/css/transport.css.sass
@@ -1,4 +1,4 @@
-#transport
+mpd-transport
   position: fixed
   bottom: 0
   width: 20em
diff --git a/assets/js/components/app.js b/assets/js/components/app.js
index 8c3e340..e16befd 100644
--- a/assets/js/components/app.js
+++ b/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);
     }
   }
 
diff --git a/assets/js/components/transport.js b/assets/js/components/transport.js
new file mode 100644
index 0000000..ced3354
--- /dev/null
+++ b/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();
+    }
+  }
+
+});
diff --git a/assets/js/constructs/events.js b/assets/js/constructs/events.js
index 8834cbf..d52ee0a 100644
--- a/assets/js/constructs/events.js
+++ b/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);
-      }
-    });
   },
 
 });
diff --git a/assets/js/helpers/time.js b/assets/js/helpers/time.js
index 0c60b5b..1875f4c 100644
--- a/assets/js/helpers/time.js
+++ b/assets/js/helpers/time.js
@@ -7,4 +7,4 @@ window.timeHelpers = {
     }
     return minutes + ':' + seconds;
   }
-}
+};
diff --git a/assets/js/models/queueSong.js b/assets/js/models/queueSong.js
index cdd8021..e3bf2f5 100644
--- a/assets/js/models/queueSong.js
+++ b/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);
   }
 
 });
diff --git a/assets/js/models/status.js b/assets/js/models/status.js
index 7aa5504..0791990 100644
--- a/assets/js/models/status.js
+++ b/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
+  }
+
+});
diff --git a/public/views/library.ejs b/public/views/library.ejs
deleted file mode 100644
index eead0f2..0000000
--- a/public/views/library.ejs
+++ /dev/null
@@ -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>
diff --git a/public/views/queue.ejs b/public/views/queue.ejs
deleted file mode 100644
index c7060e0..0000000
--- a/public/views/queue.ejs
+++ /dev/null
@@ -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>
diff --git a/public/views/queue.mustache b/public/views/queue.mustache
index e8cbc02..88897a6 100644
--- a/public/views/queue.mustache
+++ b/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>
diff --git a/public/views/transport.ejs b/public/views/transport.ejs
deleted file mode 100644
index f6fb0cb..0000000
--- a/public/views/transport.ejs
+++ /dev/null
@@ -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>
diff --git a/public/views/transport.mustache b/public/views/transport.mustache
index 5b7cdcf..9cf17ba 100644
--- a/public/views/transport.mustache
+++ b/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>