Partway through component refactor.

* Queue now displays.
* Does not yet update.

assets/css/library.css.sass

@@ -1,4 +1,4 @@
-#library
+mpd-library
   background: white
   position: absolute
   top: 100%
@@ -40,7 +40,7 @@
       @extend .list
     ol.songs
       @extend .song-list
-    panel
+    mpd-panel
       position: absolute
       width: $interface-width
       height: 100%

assets/css/queue.css.sass

@@ -1,7 +1,5 @@
-#queue
+mpd-queue
   height: 100%
-  overflow: auto
-  padding: 2.5em 0 5.625em
   header
     z-index: 1
     @extend .header
@@ -11,6 +9,9 @@
       top: 8px
       @include button
   ol
+    padding: 2.5em 0 5.625em
+    height: 100%
+    overflow: auto
     @extend .song-list
     li.playing
       .title

assets/js/application.js

@@ -1,26 +1,30 @@
 // Set up necessary events and startup stuff
 $(document).ready(function() {
 
-  $.when(QueueSong.findAll(), Status.findOne()).then(function(queueSongs, status) {
+  //$.when(QueueSong.findAll(), Status.findOne()).then(function(queueSongs, status) {
 
-    window.mpdClient = {
+    //window.mpdClient = {
-      status: status,
+      //status: status,
-      queueSongs: queueSongs,
+      //queueSongs: queueSongs,
 
-      transport: new Transport('#transport', {
+      //transport: new Transport('#transport', {
-        status: status
+        //status: status
-      }),
+      //}),
 
-      library: new Library('#library'),
+      //library: new Library('#library'),
 
-      events: new Events(queueSongs, status),
+      //events: new Events(queueSongs, status),
 
-      queue: new Queue('#queue', {
+      //queue: new Queue('#queue', {
-        queueSongs: queueSongs,
+        //queueSongs: queueSongs,
-        status: status
+        //status: status
-      })
+      //})
-    };
+    //};
 
-  });
+  //});
+
+  // Render the application template. Components should take care of the rest.
+  var template = can.view.mustache("<mpd-client></mpd-client>");
+  $(document.body).append(template());
 
 });

assets/js/components/app.js

@@ -0,0 +1,30 @@
+can.Component.extend({
+
+  tag: 'mpd-client',
+
+  template: can.view('views/app.mustache'),
+
+  scope: {
+    queueSongs: new can.List(),
+    status: new can.Map()
+  },
+
+  events: {
+    init: function(element, options) {
+      this.scope.attr('events', new Events(this.scope.queueSongs, this.scope.status));
+      this.fetch();
+    },
+
+    fetch: function() {
+      var self = this;
+      QueueSong.findAll().then(function(songs) {
+        self.update(songs);
+      });
+    },
+
+    update: function(songs) {
+      this.scope.attr('queueSongs', songs);
+    }
+  }
+
+});

assets/js/components/library.js

@@ -0,0 +1,7 @@
+can.Component.extend({
+
+  tag: 'mpd-library',
+
+  template: can.view('views/library.mustache'),
+
+});

assets/js/components/panel.js

@@ -1,15 +1,12 @@
 can.Component.extend({
 
-  init: function() {
+  tag: 'mpd-panel',
-    console.log('Initializing');
-  },
-
-  tag: 'panel',
 
   template: can.view('views/panel.mustache'),
 
   scope: {
     show: '@',
+    depth: '@',
     artist: '@',
     album: '@',
     title: function() {
@@ -18,17 +15,13 @@ can.Component.extend({
     },
     fetchItems: {
       root: new can.Map,
-      artists: Artist.findAll({}),
+      artists: function() { return Artist.findAll({}) },
-      albums: Album.findAll({ artist: this.artist }),
+      albums: function() { Album.findAll({ artist: this.artist }) },
-      songs: Song.findAll({ artist: this.artist, album: this.album })
+      songs: function() { Song.findAll({ artist: this.artist, album: this.album }) }
     }
   },
 
-  events: {
+  events: {},
-    inserted: function() {
-      console.log('Panel inserted.');
-    }
-  },
 
   helpers: {
     renderItems: function() {

assets/js/components/queue.js

@@ -0,0 +1,7 @@
+can.Component.extend({
+
+  tag: 'mpd-queue',
+
+  template: can.view('views/queue.mustache')
+
+});

assets/js/constructs/events.js

@@ -13,6 +13,7 @@ var Events = can.Construct.extend({
           break;
         case 'queue':
           queue.replace(response.data);
+          debugger;
           break;
         case 'time':
           status.attr('time', response.data);
@@ -22,6 +23,7 @@ var Events = can.Construct.extend({
 
     status.bind('change', function(event, attr, how, newVal, oldVal) {
       if (attr == 'song') {
+        debugger;
         queue.updatePlaying(how, newVal, oldVal);
       }
     });

assets/js/controls/library.js

@@ -2,12 +2,10 @@ var Library = can.Control.extend({
 
   init: function(element, options) {
     this.element = element;
-    this.browser = new can.Model({ title: 'Library', currentPane: 0 });
+    this.browser = new can.Model({ title: 'Library', currentDepth: 0 });
     element.html(
       can.view('views/library.mustache', { browser: this.browser })
     );
-    var rootControl = new Pane('#library .root', { show: 'root' });
-    this.panes = new can.List([rootControl]);
   },
 
   show: function() {
@@ -33,12 +31,9 @@ var Library = can.Control.extend({
   },
 
   addPane: function(data) {
-    var newElement = document.createElement('div');
+    var newElement = document.createElement('panel');
     $('.browser', this.element).append(newElement);
 
-    data['pos'] = this.panes.length;
-    var newPane = new Pane(newElement, data);
-
     this.panes.push(newPane);
     this.setTitle(newPane.title);
     this.nextPane();

assets/js/mpd-client.js

@@ -6,6 +6,6 @@
 //= require_tree ./models/
 //= require_tree ./helpers/
 //= require_tree ./controls/
-//= require_tree ./components/
 //= require_tree ./constructs/
+//= require_tree ./components/
 //= require ./application.js

public/views/app.mustache

@@ -0,0 +1,7 @@
+<div id="app">
+  <div id="content">
+    <mpd-library></mpd-library>
+    <mpd-queue></mpd-queue>
+  </div>
+  <mpd-transport></mpd-transport>
+</div>

public/views/library.mustache

@@ -1,5 +1 @@
-<div class="browser">
+<mpd-panel show="root" style="left: 0;"></mpd-panel>
-
-  <panel show="root" style="left: 0;"></panel>
-
-</div>

public/views/queue.mustache

@@ -0,0 +1,13 @@
+<header>
+  <a class="library" href="#!library">Library</a>
+  <h1>Queue</h1>
+</header>
+<ol class="queue">
+  {{#each 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>
+    </li>
+  {{/each}}
+</ol>

public/views/transport.mustache

@@ -0,0 +1,24 @@
+<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>
+  {{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}}
+  </div>
+</div>
+<nav class="controls">
+  <button data-command="previous">previous</button>
+  {{#if status.playing()}}
+    <button data-command="pause">pause</button>
+  {{else}}
+    <button data-command="play">play</button>
+  {{/if}}
+  <button data-command="stop">stop</button>
+  <button data-command="next">next</button>
+</nav>

views/index.erb

@@ -8,12 +8,5 @@
   </head>
 
   <body>
-    <div id="app">
-      <div id="content">
-        <div id="library"></div>
-        <div id="queue"></div>
-      </div>
-      <div id="transport"></div>
-    </div>
   </body>
 </html>