Improved navigation

.gitignore

@@ -0,0 +1 @@
+build

CMakeLists.txt

@@ -42,6 +42,7 @@ file(GLOB RESOURCES
     htdocs/assets/*
     htdocs/css/*.css
     htdocs/fonts/*
+	htdocs/img/*
     htdocs/index.html
 )
 

README.md

@@ -31,10 +31,26 @@ Usage: ./ympd [OPTION]...
  -h, --host <host>          connect to mpd at host [localhost]
  -p, --port <port>          connect to mpd at port [6600]
  -w, --webport [ip:]<port>  listen interface/port for webserver [8080]
+ -a, --artwork [url template] for artwork fetch
  -u, --user <username>      drop priviliges to user after socket bind
  -V, --version              get version
  --help                     this help
 ```
+Artwork
+-------
+Provide a template where the artwork may be fetched from:
+```
+ http://server/music/%A/%a/cover.jpg
+```
+The available substitutions are:
+```
+ %A - Artist
+ %a - Album
+ %T - Title
+ %t - track
+ %P - Path to track (dirname)
+ %% - %
+```
 
 SSL Support
 -----------

htdocs/css/mpd.css

@@ -1,6 +1,16 @@
 body {
   padding-top: 50px;
   padding-bottom: 50px;
+  background-color: #ddccdd;
+}
+
+.panel {
+	background-color: #ffffee;
+    box-shadow: 5px 5px 5px #888888;
+}
+
+.quicknav-btn {
+    background-color: #428bca;
 }
 
 .starter-template {
@@ -32,6 +42,17 @@ body {
   margin-right: -10px;
 }
 
+.queue-track {
+  cursor: move;
+  cursor: -webkit-grab;
+}
+
+#artwork {
+    width: 100px;
+    height: 100px;
+    border: 1px solid #cccccc;
+}
+
 .btn-group-hover {
     opacity: 20%;
 }
@@ -88,3 +109,16 @@ td:last-child, td:first-child {
 button {
   overflow: hidden;
 }
+
+#welcome {
+	margin: 20px;
+	padding: 5px;
+	border: 1px solid #ddccdd;
+}
+
+.stats {
+	padding: 5px;
+	display: inline-block;
+	margin: 0px;
+}
+

htdocs/index.html

@@ -12,6 +12,8 @@
   <!-- Bootstrap core CSS -->
   <link href="css/bootstrap.css" rel="stylesheet">
   <link href="css/bootstrap-theme.css" rel="stylesheet">
+  <!-- Dragula -->
+  <link href="css/dragula.min.css" rel="stylesheet">
 
   <!-- Custom styles for this template -->
   <link href="css/mpd.css" rel="stylesheet">
@@ -33,9 +35,8 @@
       <div class="collapse navbar-collapse">
 
         <ul id="nav_links" class="nav navbar-nav">
-          <li id="queue"><a href="#/">Queue</a></li>
-          <li id="browse"><a href="#/browse/0/">Browse database</a></li>
-          <li id="dirble"><a href="#/dirble/">Dirble</a></li>
+          <li id="queue"><a href="#/0">Queue</a></li>
+          <li id="browse"><a href="#/browse/0/">Browse</a></li>
           <li><a href="#" data-toggle="modal" data-target="#addstream">Add Stream</a></li>
           <li><a href="#" data-toggle="modal" data-target="#settings" onclick="getHost();">Settings</a></li>
         </ul>
@@ -82,6 +83,9 @@
           <div class="panel-heading"><b id="panel-heading">Queue</b></div>
           <div class="panel-body">
             <h1>
+                <span>
+                    <img id="artwork" src="img/cover.jpg" />
+                </span>
               <span id="track-icon" onclick="clickPlay();" class="glyphicon glyphicon-play"></span>
               <span id="currenttrack"></span>
             </h1>
@@ -96,6 +100,19 @@ <h4>
 
           </div><!-- /.panel-body -->
 
+		  <div id="quicknav" class="hide">
+			<button type="button" class="btn quicknav-btn">A-C</button>
+			<button type="button" class="btn quicknav-btn">D-F</button>
+			<button type="button" class="btn quicknav-btn">G-I</button>
+			<button type="button" class="btn quicknav-btn">J-L</button>
+			<button type="button" class="btn quicknav-btn">M-O</button>
+			<button type="button" class="btn quicknav-btn">P-R</button>
+			<button type="button" class="btn quicknav-btn">S-U</button>
+			<button type="button" class="btn quicknav-btn">V-X</button>
+			<button type="button" class="btn quicknav-btn">Y-Z</button>
+			<button type="button" class="btn quicknav-btn">Playlists</button>
+		  </div>
+
           <ol id="breadcrump" class="breadcrumb">
           </ol>
 
@@ -118,27 +135,14 @@ <h4>
             </tbody>
           </table>
 
-          <div id="dirble_panel">
-            <p id="dirble_loading" style="font-size:16px;font-weight:bold;margin-left:4em;">Loading...</p>
-            <table style="float:right; width:44%; margin-right:4%;" id="dirble_right" class="table table-hover">
-                <thead>
-                <tr>
-                    <th></th>
-                </tr>
-                </thead>
-                <tbody>
-                </tbody>
-            </table>
-            <table style="width:44%; margin-left:4%;" id="dirble_left" class="table table-hover">
-                <thead>
-                <tr>
-                    <th></th>
-                </tr>
-                </thead>
-                <tbody>
-                </tbody>
-            </table>
-        </div>
+		<!-- Welcome page -->
+		<div id="welcome">
+			<div><span class="stats">Artists</span><span id="stat_artists" class="stats"></span></div>
+			<div><span class="stats">Albums</span><span id="stat_albums" class="stats"></span></div>
+			<div><span class="stats">Songs</span><span id="stat_songs" class="stats"></span></div>
+			<div><span class="stats">Total play time</span><span id="stat_ttime" class="stats"></span></div>
+			<div><span class="stats">Last DB update</span><span id="stat_update" class="stats"></span></div>
+		</div>
 
         </div><!-- /.panel -->
         <ul class="pager">
@@ -170,7 +174,7 @@ <h4>
           </div>
 
           <div id="btn-responsive-block" class="btn-group-vertical btn-block btn-group-lg">
-            <button type="button" class="btn btn-default" onclick="socket.send('MPD_API_RM_ALL');">
+            <button type="button" class="btn btn-default" onclick="clearPlaylist();">
               <span class="glyphicon glyphicon-trash"></span> Clear queue
             </button>
             <a href="#" data-toggle="modal" data-target="#savequeue" class="btn btn-default">
@@ -329,6 +333,7 @@ <h1>Searching...</h1>
   <script src="js/bootstrap-notify.js"></script>
   <script src="js/bootstrap-slider.js"></script>
   <script src="js/sammy.js"></script>
+  <script src="js/dragula.min.js"></script>
   <script src="js/mpd.js"></script>
 </body>
 </html>