From d3a76ecd4787a68170381d4184c1bcb178b971ad Mon Sep 17 00:00:00 2001
From: Dan Barber <dan@new-bamboo.co.uk>
Date: Tue, 10 Dec 2013 17:59:47 +0000
Subject: [PATCH] Start work on Library browser.

---
 assets/css/common.css.sass     | 19 ++++++++++---------
 assets/css/library.css.sass    | 10 ++++++++++
 assets/css/mpd-client.css.sass |  1 +
 assets/css/queue.css.sass      | 11 +++++++++++
 assets/js/application.js       |  2 ++
 assets/js/controls/library.js  |  9 +++++++++
 public/views/library.ejs       |  8 ++++++++
 public/views/queue.ejs         |  4 ++--
 public/views/transport.ejs     | 15 ++++++++++-----
 views/index.erb                |  1 +
 10 files changed, 64 insertions(+), 16 deletions(-)
 create mode 100644 assets/css/library.css.sass
 create mode 100644 assets/js/controls/library.js
 create mode 100644 public/views/library.ejs

diff --git a/assets/css/common.css.sass b/assets/css/common.css.sass
index 0cf632f..163c33b 100644
--- a/assets/css/common.css.sass
+++ b/assets/css/common.css.sass
@@ -1,28 +1,29 @@
 *
   @include box-sizing(border-box)
 
+html
+  height: 100%
+
 body
   font: 1em "Helvetica Neue", sans-serif
   margin: 0
+  height: 100%
 
 #app
+  position: relative
+  height: 100%
   max-width: 320px
   margin: 0 auto
-  padding-top: 2.5em
-  padding-bottom: 5.625em
 
-header
+#content
+  height: 100%
+
+.header
   position: fixed
   top: 0
   width: 100%
   background: rgba(248, 248, 248, 0.95)
   border-bottom: 1px solid rgba(0, 0, 0, 0.1)
-  z-index: 1
-  #library
-    position: absolute
-    left: 10px
-    top: 8px
-    @include button
   h1
     text-align: center
     font-size: 1em
diff --git a/assets/css/library.css.sass b/assets/css/library.css.sass
new file mode 100644
index 0000000..7e111ab
--- /dev/null
+++ b/assets/css/library.css.sass
@@ -0,0 +1,10 @@
+#library
+  background: white
+  display: none
+  position: absolute
+  top: 0
+  height: 100%
+  width: 100%
+  z-index: 2
+  header
+    @extend .header
diff --git a/assets/css/mpd-client.css.sass b/assets/css/mpd-client.css.sass
index 6b8db47..b71486d 100644
--- a/assets/css/mpd-client.css.sass
+++ b/assets/css/mpd-client.css.sass
@@ -6,3 +6,4 @@
 @import 'common'
 @import 'transport'
 @import 'queue'
+@import 'library'
diff --git a/assets/css/queue.css.sass b/assets/css/queue.css.sass
index cbfa12e..1ce66ea 100644
--- a/assets/css/queue.css.sass
+++ b/assets/css/queue.css.sass
@@ -1,4 +1,15 @@
 #queue
+  height: 100%
+  overflow: auto
+  padding: 2.5em 0 5.625em
+  header
+    z-index: 1
+    @extend .header
+    button.library
+      position: absolute
+      left: 10px
+      top: 8px
+      @include button
   ol
     list-style: none
     margin: 0
diff --git a/assets/js/application.js b/assets/js/application.js
index 19b3132..e6a9817 100644
--- a/assets/js/application.js
+++ b/assets/js/application.js
@@ -11,6 +11,8 @@ $(document).ready(function() {
         status: status
       }),
 
+      library: new Library('#library'),
+
       events: new Events(queueSongs, status),
 
       queue: new Queue('#queue', {
diff --git a/assets/js/controls/library.js b/assets/js/controls/library.js
new file mode 100644
index 0000000..c2f46b9
--- /dev/null
+++ b/assets/js/controls/library.js
@@ -0,0 +1,9 @@
+var Library = can.Control.extend({
+
+  init: function(element, options) {
+    element.html(
+      can.view( 'views/library.ejs')
+    );
+  }
+
+});
diff --git a/public/views/library.ejs b/public/views/library.ejs
new file mode 100644
index 0000000..ada8496
--- /dev/null
+++ b/public/views/library.ejs
@@ -0,0 +1,8 @@
+<header>
+  <h1>Library</h1>
+</header>
+<ol class="list">
+  <li>Artists</li>
+  <li>Albums</li>
+  <li>Songs</li>
+</ol>
diff --git a/public/views/queue.ejs b/public/views/queue.ejs
index 576dee6..efa43a8 100644
--- a/public/views/queue.ejs
+++ b/public/views/queue.ejs
@@ -1,8 +1,8 @@
 <header>
-  <button id="library">Library</button>
+  <button class="library">Library</button>
   <h1>Queue</h1>
 </header>
-<ol id="queue">
+<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>
diff --git a/public/views/transport.ejs b/public/views/transport.ejs
index 3b9c713..f6fb0cb 100644
--- a/public/views/transport.ejs
+++ b/public/views/transport.ejs
@@ -1,12 +1,17 @@
-<% if (status.attr('state') == 'play' || status.attr('state') == 'pause') { %>
-  <div class="scrubber">
+<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>
-    <div class="track">
+  <% } 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>
-<% } %>
+</div>
 <nav class="controls">
   <button data-command="previous">previous</button>
   <% if (status.attr('state') == 'play') { %>
diff --git a/views/index.erb b/views/index.erb
index 51a8d61..874fa04 100644
--- a/views/index.erb
+++ b/views/index.erb
@@ -10,6 +10,7 @@
   <body>
     <div id="app">
       <div id="content">
+        <div id="library"></div>
         <div id="queue"></div>
       </div>
       <div id="transport"></div>