diff --git a/CMakeLists.txt b/CMakeLists.txt
index 02ee514..4e1d183 100644
--- a/CMakeLists.txt
+++ b/CMakeLists.txt
@@ -43,6 +43,7 @@ file(GLOB RESOURCES
     htdocs/css/*.css
     htdocs/fonts/*
     htdocs/index.html
+    htdocs/player.html
 )
 
 set(SOURCES
diff --git a/README.md b/README.md
index bc14cb8..4bf91f2 100644
--- a/README.md
+++ b/README.md
@@ -29,6 +29,8 @@ Run flags
 ```
 Usage: ./ympd [OPTION]...
 
+ -D, --digest <htdigest>       path to htdigest file for authorization
+                               (realm ympd) [no authorization]
  -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]
@@ -52,6 +54,12 @@ To run ympd with SSL support:
 # ./ympd -w "ssl://8081:/path/to/ssl.pem"
 ```
 
+Dirble support
+--------------
+
+1. Get an API-key from http://dirble.com
+2. Add the key at ```var TOKEN = "";```, in ```mpd.js```.
+
 Copyright
 ---------
 
diff --git a/contrib/init.debian b/contrib/init.debian
index 943e4de..6b328f0 100755
--- a/contrib/init.debian
+++ b/contrib/init.debian
@@ -25,6 +25,8 @@ MPD_HOST=localhost
 MPD_PORT=6600
 WEB_PORT=8080
 DIRBLE_API_TOKEN=2e223c9909593b94fc6577361a
+#DIGEST=--digest /path/to/htdigest
+#LOCALPORT=8080
 
 
 # Exit if the package is not installed
@@ -36,7 +38,7 @@ DIRBLE_API_TOKEN=2e223c9909593b94fc6577361a
 # Load the VERBOSE setting and other rcS variables
 [ -f /etc/default/rcS ] && . /etc/default/rcS
 
-DAEMON_OPT="--user $YMPD_USER --mpdpass '$MPD_PASSWORD' --webport $WEB_PORT --host $MPD_HOST --port $MPD_PORT --dirbletoken $DIRBLE_API_TOKEN"
+DAEMON_OPT="--user $YMPD_USER --mpdpass '$MPD_PASSWORD' --webport $WEB_PORT --host $MPD_HOST --port $MPD_PORT --dirbletoken $DIRBLE_API_TOKEN $DIGEST $LOCALPORT"
 
 do_start()
 {
diff --git a/contrib/ympd.default b/contrib/ympd.default
index d97ac73..b1bf9fd 100644
--- a/contrib/ympd.default
+++ b/contrib/ympd.default
@@ -3,3 +3,5 @@ MPD_PORT=6600
 MPD_PASSWORD=
 WEB_PORT=8080
 DIRBLE_API_TOKEN=2e223c9909593b94fc6577361a
+#DIGEST=--digest /path/to/htdigest
+#LOCALPORT=--localport 8080
diff --git a/contrib/ympd.service b/contrib/ympd.service
index cb1abdc..5037dad 100644
--- a/contrib/ympd.service
+++ b/contrib/ympd.service
@@ -29,8 +29,10 @@ Environment=MPD_PASSWORD=
 Environment=WEB_PORT=8080
 Environment=YMPD_USER=nobody
 Environment=DIRBLE_API_TOKEN=2e223c9909593b94fc6577361a
+Environment=DIGEST=
+Environment=LOCALPORT=
 EnvironmentFile=/etc/default/ympd
-ExecStart=/usr/bin/ympd --user $USER --mpdpass "$MPD_PASSWORD" --webport $WEB_PORT --host $MPD_HOST --port $MPD_PORT --dirbletoken $DIRBLE_API_TOKEN
+ExecStart=/usr/bin/ympd --user $USER --webport $WEB_PORT --host $MPD_HOST --port $MPD_PORT --dirbletoken $DIRBLE_API_TOKEN $DIGEST $LOCALPORT
 Type=simple
 
 [Install]
diff --git a/htdocs/css/mpd.css b/htdocs/css/mpd.css
index 8931c92..a5c6acc 100644
--- a/htdocs/css/mpd.css
+++ b/htdocs/css/mpd.css
@@ -15,12 +15,29 @@ body {
   margin-bottom: 0;
 }
 
+
+button {
+  overflow: hidden;
+}
+
+
 #volume-icon {
   float: left;
   margin-right: 10px;
   margin-top: 2px;
 }
 
+#breadcrump {
+  display: block;
+
+  overflow: auto;
+  white-space: nowrap;
+}
+
+#breadcrump > li > a{
+  cursor: pointer;
+}
+
 #counter {
   font-size: 24px;
   margin-top: -6px;
@@ -55,13 +72,50 @@ body {
   }
 }
 
-#salamisandwich td:nth-last-child(2), th:nth-last-child(2) {
-  text-align: right;
+h1 {
+  display: block;
+
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
-#salamisandwich td:nth-child(2) span {
-  font-style:italic;
-  font-size:90%;
+td:nth-child(4), th:nth-child(4) {
+  /* This *has* to be placed before
+     any t[dh]:nth-last-child(2) for
+     the override to work. */
+  min-width: 50%;
+}
+
+td:nth-last-child(2), th:nth-last-child(2) {
+  text-align: right;
+  width: 4em;
+}
+
+#salamisandwich td:nth-child(4) span {
+  font-size: 90%;
+
+  display: block;
+}
+
+td:nth-child(2), td:nth-child(3) {
+  min-width: 25%;
+  max-width: 10em;
+
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+@media only screen and (max-width: 600px) {
+	td:nth-child(2), td:nth-child(3) {
+	  min-width: 0;
+	  max-width: 0;
+	}
+	td:nth-child(4), th:nth-child(4) {
+	  min-width: 10%;
+	  white-space: normal;
+	}
 }
 
 tbody {
@@ -77,7 +131,7 @@ td:last-child, td:first-child {
   z-index: 9999;
 }
 
-/* Positioning */ 
+/* Positioning */
 .notifications.top-right {
   right: 10px;
   top: 60px;
@@ -99,3 +153,11 @@ button {
   text-align:left;
   width:2.8em;
 }
+
+#filter > a.active {
+  font-weight: bold;
+  pointer-events: none;
+  cursor: default;
+  text-decoration: none;
+  color: black;
+}
diff --git a/htdocs/index.html b/htdocs/index.html
index 6bf5c60..ac05928 100644
--- a/htdocs/index.html
+++ b/htdocs/index.html
@@ -34,7 +34,7 @@
 
         <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="browse"><a href="#/browse/0/">Browse</a></li>
           <li id="dirble"><a href="#/dirble/">Dirble</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>
@@ -60,13 +60,25 @@
               <span class="glyphicon glyphicon-heart"></span>
             </button>
           </div>
+<!--          
           <div class="btn-group">
             <div class="btn btn-toolbar btn-default">
               <span id="volume-icon" class="glyphicon glyphicon-volume-up"></span>
               <div id="volumeslider"></div>
             </div>
           </div>
-        </div>
+-->
+           <div class="btn-group" role="group">
+            <audio id="player" preload="none"></audio>
+            <button type="button" class="btn btn-default" onclick="clickLocalPlay()">
+              <span id="localplay-icon" class="glyphicon glyphicon-play"></span>
+            </button>
+            <button type="button" class="btn btn-default" onclick="window.open('/player.html');">
+              <span id="localplay-icon" class="glyphicon glyphicon-new-window"></span>
+            </button>
+          </div>
+       </div>
+          
         <form id="search" class="navbar-form navbar-right" role="search">
           <div class="form-group">
             <input type="text" class="form-control" placeholder="Search">
@@ -81,18 +93,19 @@
 
       <div class="col-md-10 col-xs-12">
         <div class="notifications top-right"></div>
-        
+
         <div class="panel panel-primary">
           <!-- Default panel contents -->
-          <div class="panel-heading"><b id="panel-heading">Queue</b></div>
+          <div class="panel-heading"><b id="panel-heading">Queue</b>
+                                     <b id="panel-heading-info" class="text pull-right"></b></div>
           <div class="panel-body">
             <h1>
               <span id="track-icon" onclick="clickPlay();" class="glyphicon glyphicon-play"></span>
               <span id="currenttrack"></span>
             </h1>
             <h4>
-              <span id="album" class="text"></span>
-              <span id="artist" class="text pull-right"></span>
+              <span id="artist" class="text"></span>
+              <span id="album" class="text pull-right"></span>
             </h4>
             <p id="counter" class="text pull-right">&nbsp;&nbsp;</p>
 
@@ -114,8 +127,10 @@
             <thead>
               <tr>
                 <th>#</th>
-                <th colspan="2">Track</th>
-                <th>Duration</th>
+                <th>Artist</th>
+                <th>Album</th>
+                <th>Title</th>
+                <th>Length</th>
                 <th></th>
               </tr>
             </thead>
@@ -218,7 +233,7 @@
           <h5>ympd uses following excellent software:</h5>
           <h6><a href="http://cesanta.com/docs.html">Mongoose</a> <small>GPLv2</small></h6>
           <h6><a href="http://www.musicpd.org/libs/libmpdclient/">libMPDClient</a> <small>BSD License</small></h6>
-	  <hr />
+          <hr />
           <div class="row">
             <div class="form-group col-md-6">
               <button type="button" class="btn btn-default btn-block" onclick="updateDB();">
@@ -261,6 +276,19 @@
                 </div>
               </div>
             </div>
+            <div class="row">
+              <div class="form-group col-md-12">
+                <label class="control-label" for="mpdstream">MPD Stream URL</label>
+                <input type="text" class="form-control" id="mpdstream" />
+              </div>
+            </div>
+            <div class="row">
+              <div class="form-group col-md-12">
+                <button type="button" class="btn btn-default" onclick="updateDB();">
+                  <span class="glyphicon glyphicon-refresh"></span> Update DB
+                </button>
+              </div>
+            </div>
           </form>
         </div>
         <div class="modal-footer">
@@ -296,7 +324,7 @@
       </div><!-- /.modal-content -->
     </div><!-- /.modal-dialog -->
   </div><!-- /.modal -->
-  
+
   <div class="modal fade" id="savequeue" tabindex="-1" role="dialog" aria-labelledby="savequeueLabel" aria-hidden="true">
     <div class="modal-dialog">
       <div class="modal-content">
diff --git a/htdocs/js/mpd.js b/htdocs/js/mpd.js
index ce2fd8e..319805f 100644
--- a/htdocs/js/mpd.js
+++ b/htdocs/js/mpd.js
@@ -16,12 +16,14 @@
    Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA.
 */
 
+var TOKEN = "";
+
 var socket;
 var last_state;
 var last_outputs;
 var current_app;
 var pagination = 0;
-var browsepath;
+var browsepath = "";
 var lastSongTitle = "";
 var current_song = new Object();
 var MAX_ELEMENTS_PER_PAGE = 512;
@@ -29,7 +31,7 @@ var dirble_selected_cat = "";
 var dirble_catid = "";
 var dirble_page = 1;
 var isTouch = Modernizr.touch ? 1 : 0;
-var filter = undefined;
+var filter = "";
 var dirble_api_token = "";
 var dirble_stations = false;
 
@@ -45,6 +47,8 @@ var app = $.sammy(function() {
         socket.send('MPD_API_GET_QUEUE,'+pagination);
 
         $('#panel-heading').text("Queue");
+        $('#panel-heading-info').empty();
+
         $('#queue').addClass('active');
     }
 
@@ -67,8 +71,8 @@ var app = $.sammy(function() {
         browsepath = this.params['splat'][1];
         pagination = parseInt(this.params['splat'][0]);
         current_app = 'browse';
-        $('#breadcrump').removeClass('hide').empty().append("<li><a href=\"#/browse/0/\" onclick=\"set_filter()\">root</a></li>");
-        $('#filter').removeClass('hide');
+        $('#breadcrump').removeClass('hide').empty().append("<li><a uri=\"\" onclick=\"set_filter('')\">root</a></li>");
+		add_filter();
         $('#salamisandwich').removeClass('hide').find("tr:gt(0)").remove();
         $('#dirble_panel').addClass('hide');
         socket.send('MPD_API_GET_BROWSE,'+pagination+','+(browsepath ? browsepath : "/"));
@@ -92,7 +96,7 @@ var app = $.sammy(function() {
             }
 
             full_path = full_path + chunk;
-            $('#breadcrump').append("<li><a href=\"#/browse/0/" + full_path + "\">"+chunk+"</a></li>");
+            $('#breadcrump').append("<li><a uri=\"" + full_path + "\">"+chunk+"</a></li>");
             full_path += "/";
         });
         $('#browse').addClass('active');
@@ -111,6 +115,9 @@ var app = $.sammy(function() {
     });
 
     this.get(/\#\/dirble\/(\d+)\/(\d+)/, function() {
+        
+        if (TOKEN === "") context.redirect("#/0");
+        
         prepare();
         current_app = 'dirble';
         $('#breadcrump').removeClass('hide').empty().append("<li><a href=\"#/dirble/\">Categories</a></li><li>"+dirble_selected_cat+"</li>");
@@ -121,6 +128,8 @@ var app = $.sammy(function() {
         $('#dirble_right').find("tr:gt(0)").remove();
 
         $('#panel-heading').text("Dirble");
+        $('#panel-heading-info').empty();
+
         $('#dirble').addClass('active');
 
         $('#next').addClass('hide');
@@ -137,6 +146,9 @@ var app = $.sammy(function() {
     });
 
     this.get(/\#\/dirble\//, function() {
+        
+        if (TOKEN === "") context.redirect("#/0");
+        
         prepare();
         current_app = 'dirble';
         $('#breadcrump').removeClass('hide').empty().append("<li>Categories</li>");
@@ -147,6 +159,8 @@ var app = $.sammy(function() {
         $('#dirble_right').find("tr:gt(0)").remove();
 
         $('#panel-heading').text("Dirble");
+        $('#panel-heading-info').empty();
+
         $('#dirble').addClass('active');
 
         dirble_stations = false;
@@ -186,7 +200,66 @@ $(document).ready(function(){
         if ($.cookie("notification") === "true")
             $('#btnnotify').addClass("active")
 
-    add_filter();
+    document.getElementById('player').addEventListener('stalled', function() {
+						if ( !document.getElementById('player').paused ) {
+							this.pause();
+							clickLocalPlay();
+							$('.top-right').notify({
+								message:{text:"music stream stalled - trying to recover..."},
+								type: "danger",
+								fadeOut: { enabled: true, delay: 1000 },
+							}).show();
+						}
+    });
+
+    document.getElementById('player').addEventListener('pause', function() {
+        this.src='';
+        this.removeAttribute("src");
+    	$("#localplay-icon").removeClass("glyphicon-pause").addClass("glyphicon-play");
+    });
+
+	document.getElementById('player').addEventListener('error', function failed(e) {
+		this.pause();
+		switch (e.target.error.code) {
+			case e.target.error.MEDIA_ERR_ABORTED:
+				$('.top-right').notify({
+					message:{text:"Audio playback aborted by user."},
+					type: "info",
+					fadeOut: { enabled: true, delay: 1000 },
+				}).show();
+				break;
+			case e.target.error.MEDIA_ERR_NETWORK:
+				$('.top-right').notify({
+					message:{text:"Network error while playing audio."},
+					type: "danger",
+					fadeOut: { enabled: true, delay: 1000 },
+				}).show();
+				break;
+			case e.target.error.MEDIA_ERR_DECODE:
+				$('.top-right').notify({
+					message:{text:"Audio playback aborted. Did you unplug your headphones?"},
+					type: "danger",
+					fadeOut: { enabled: true, delay: 1000 },
+				}).show();
+				break;
+			case e.target.error.MEDIA_ERR_SRC_NOT_SUPPORTED:
+				$('.top-right').notify({
+					message:{text:"Error while loading audio (server, network or format error)."},
+					type: "danger",
+					fadeOut: { enabled: true, delay: 1000 },
+				}).show();
+				break;
+			default:
+				$('.top-right').notify({
+					message:{text:"Unknown error while playing audio."},
+					type: "danger",
+					fadeOut: { enabled: true, delay: 1000 },
+				}).show();
+				break;
+		}
+	}, true);
+            
+    if (TOKEN === "") $('#dirble').addClass('hide');
 });
 
 function webSocketConnect() {
@@ -216,12 +289,25 @@ function webSocketConnect() {
                 return;
 
             var obj = JSON.parse(msg.data);
+            
 
             switch (obj.type) {
                 case 'queue':
                     if(current_app !== 'queue')
                         break;
 
+                    if (obj.totalTime > 0) {
+                        var hours = Math.floor(obj.totalTime / 3600);
+                        var minutes = Math.floor(obj.totalTime / 60) - hours * 60;
+                        var seconds = obj.totalTime - hours * 3600 - minutes * 60;
+
+                        $('#panel-heading-info').text('Total: ' +
+                            (hours > 0 ? hours + '\u2009h ' + (minutes < 10 ? '0' : '') : '') +
+                            minutes + '\u2009m ' + (seconds < 10 ? '0' : '') + seconds + '\u2009s');
+                    } else {
+                        $('#panel-heading-info').empty();
+                    }
+
                     $('#salamisandwich > tbody').empty();
                     for (var song in obj.data) {
                         var minutes = Math.floor(obj.data[song].duration / 60);
@@ -229,9 +315,10 @@ function webSocketConnect() {
 
                         $('#salamisandwich > tbody').append(
                             "<tr trackid=\"" + obj.data[song].id + "\"><td>" + (obj.data[song].pos + 1) + "</td>" +
-                                "<td>" + obj.data[song].artist + "<br /><span>" + obj.data[song].album  + "</span></td>" +
-                                "<td>" + obj.data[song].title  + "</td>" +
-                                "<td>" + minutes + ":" + (seconds < 10 ? '0' : '') + seconds +
+                                "<td>"+ obj.data[song].artist +"</td>" + 
+                                "<td>"+ obj.data[song].album +"</td>" +
+                                "<td>"+ obj.data[song].title +"</td>" +
+                                "<td>"+ minutes + ":" + (seconds < 10 ? '0' : '') + seconds +
                         "</td><td></td></tr>");
                     }
 
@@ -313,32 +400,32 @@ function webSocketConnect() {
                         switch(obj.data[item].type) {
                             case 'directory':
                                 var clazz = 'dir';
-                                if (filter !== undefined) {
-                                    var first = obj.data[item].dir[0];
-                                    if (filter === "#" && isNaN(first)) {
+                                if (filter !== "") {
+                                    var first = basename(obj.data[item].dir)[0];
+                                    if (filter === "num" && isNaN(first)) {
                                         clazz += ' hide';
                                     } else if (filter >= "A" && filter <= "Z" && first.toUpperCase() !== filter) {
                                         clazz += ' hide';
-                                    } else if (filter === "||") {
+                                    } else if (filter === "plist") {
                                         clazz += ' hide';
                                     }
                                 }
                                 $('#salamisandwich > tbody').append(
                                     "<tr uri=\"" + encodeURI(obj.data[item].dir) + "\" class=\"" + clazz + "\">" +
                                     "<td><span class=\"glyphicon glyphicon-folder-open\"></span></td>" +
-                                    "<td colspan=\"2\"><a>" + basename(obj.data[item].dir) + "</a></td>" +
+                                    "<td colspan=\"3\"><a>" + basename(obj.data[item].dir) + "</a></td>" +
                                     "<td></td><td></td></tr>"
                                 );
                                 break;
                             case 'playlist':
                                 var clazz = 'plist';
-                                if (filter !== "||") {
+                                if ( (filter !== "") && (filter !== "plist") ) {
                                     clazz += ' hide';
                                 }
                                 $('#salamisandwich > tbody').append(
                                     "<tr uri=\"" + encodeURI(obj.data[item].plist) + "\" class=\"" + clazz + "\">" +
                                     "<td><span class=\"glyphicon glyphicon-list\"></span></td>" +
-                                    "<td colspan=\"2\"><a>" + basename(obj.data[item].plist) + "</a></td>" +
+                                    "<td colspan=\"3\"><a>" + basename(obj.data[item].plist) + "</a></td>" +
                                     "<td></td><td></td></tr>"
                                 );
                                 break;
@@ -346,15 +433,19 @@ function webSocketConnect() {
                                 var minutes = Math.floor(obj.data[item].duration / 60);
                                 var seconds = obj.data[item].duration - minutes * 60;
 
-                                if (typeof obj.data[item].artist === 'undefined') {
-                                    var details = "<td colspan=\"2\">" + obj.data[item].title + "</td>";
+                                if (obj.data[item].artist == null) {
+                                    var artist = "<td colspan=\"2\">";
                                 } else {
-                                    var details = "<td>" + obj.data[item].artist + "<br /><span>" + obj.data[item].album + "</span></td><td>" + obj.data[item].title + "</td>";
+                                    var artist = "<td>" + obj.data[item].artist +
+                                                     "<span>" + obj.data[item].album + "</span></td><td>";
                                 }
 
-				$('#salamisandwich > tbody').append(
+                                $('#salamisandwich > tbody').append(
                                     "<tr uri=\"" + encodeURI(obj.data[item].uri) + "\" class=\"song\">" +
-                                    "<td><span class=\"glyphicon glyphicon-music\"></span></td>" + details +
+                                    "<td><span class=\"glyphicon glyphicon-music\"></span></td>" + 
+                                    "<td>" + obj.data[item].artist + "</td>" + 
+                                    "<td>" + obj.data[item].album  + "</td>" +
+                                    "<td>" + obj.data[item].title  + "</td>" +
                                     "<td>" + minutes + ":" + (seconds < 10 ? '0' : '') + seconds +
                                     "</td><td></td></tr>"
                                 );
@@ -365,7 +456,7 @@ function webSocketConnect() {
                                 } else {
                                     $('#salamisandwich > tbody').append(
                                         "<tr><td><span class=\"glyphicon glyphicon-remove\"></span></td>" +
-                                        "<td colspan=\"2\">Too many results, please refine your search!</td>" +
+                                        "<td colspan=\"3\">Too many results, please refine your search!</td>" +
                                         "<td></td><td></td></tr>"
                                     );
                                 }
@@ -414,7 +505,9 @@ function webSocketConnect() {
                                     pagination = 0;
                                     browsepath = $(this).attr("uri");
                                     $("#browse > a").attr("href", '#/browse/'+pagination+'/'+browsepath);
+									$('#filter > a').attr("href", '#/browse/'+pagination+'/'+browsepath);
                                     app.setLocation('#/browse/'+pagination+'/'+browsepath);
+									set_filter('');
                                     break;
                                 case 'song':
                                     socket.send("MPD_API_ADD_TRACK," + decodeURI($(this).attr("uri")));
@@ -436,6 +529,17 @@ function webSocketConnect() {
                         }
                     });
 
+					$('#breadcrump > li > a').on({
+						click: function() {
+							pagination = 0;
+							browsepath = $(this).attr("uri");
+							$("#browse > a").attr("href", '#/browse/'+pagination+'/'+browsepath);
+							$('#filter > a').attr("href", '#/browse/'+pagination+'/'+browsepath);
+							app.setLocation('#/browse/'+pagination+'/'+browsepath);
+							set_filter('');
+						}
+					});
+
                     break;
                 case 'state':
                     updatePlayIcon(obj.data.state);
@@ -493,7 +597,7 @@ function webSocketConnect() {
                     break;
                 case 'outputnames':
                     $('#btn-outputs-block button').remove();
-                    if (obj.data.length > 1) {
+                    if ( Object.keys(obj.data).length ) {
 		        $.each(obj.data, function(id, name){
                             var btn = $('<button id="btnoutput'+id+'" class="btn btn-default" onclick="toggleoutput(this, '+id+')"><span class="glyphicon glyphicon-volume-up"></span> '+name+'</button>');
                             btn.appendTo($('#btn-outputs-block'));
@@ -528,7 +632,7 @@ function webSocketConnect() {
                         socket.send('MPD_API_GET_QUEUE,'+pagination);
                     break;
                 case 'song_change':
-
+                    updatePageTitle(obj.data);
                     $('#album').text("");
                     $('#artist').text("");
 
@@ -537,14 +641,14 @@ function webSocketConnect() {
                     $('#currenttrack').text(" " + obj.data.title);
                     var notification = "<strong><h4>" + obj.data.title + "</h4></strong>";
 
-                    if(obj.data.album) {
-                        $('#album').text(obj.data.album);
-                        notification += obj.data.album + "<br />";
-                    }
                     if(obj.data.artist) {
                         $('#artist').text(obj.data.artist);
                         notification += obj.data.artist + "<br />";
                     }
+                    if(obj.data.album) {
+                        $('#album').text(obj.data.album);
+                        notification += obj.data.album + "<br />";
+                    }
 
                     if ($.cookie("notification") === "true")
                         songNotify(obj.data.title, obj.data.artist, obj.data.album );
@@ -552,11 +656,11 @@ function webSocketConnect() {
                         $('.top-right').notify({
                             message:{html: notification},
                             type: "info",
-                        }).show();
-                        
+                        }).show();        
                     break;
                 case 'mpdhost':
                     $('#mpdhost').val(obj.data.host);
+                    setLocalStream(obj.data.host);
                     $('#mpdport').val(obj.data.port);
                     if(obj.data.passwort_set)
                         $('#mpd_password_set').removeClass('hide');
@@ -658,12 +762,28 @@ var updatePlayIcon = function(state)
     if(state == 1) { // stop
         $("#play-icon").addClass("glyphicon-play");
         $('#track-icon').addClass("glyphicon-stop");
-    } else if(state == 2) { // pause
+		document.getElementById('player').pause();
+    } else if(state == 2) { // play
         $("#play-icon").addClass("glyphicon-pause");
         $('#track-icon').addClass("glyphicon-play");
-    } else { // play
+    } else { // pause
         $("#play-icon").addClass("glyphicon-play");
         $('#track-icon').addClass("glyphicon-pause");
+		document.getElementById('player').pause();
+    }
+}
+
+var updatePageTitle = function(songInfo) {
+    if(!songInfo || (!songInfo.artist && !songInfo.title)) {
+        document.title = 'ympd';
+        return;
+    }
+    if(songInfo.artist) {
+        if(songInfo.title) {
+            document.title = songInfo.artist + ' - ' + songInfo.title;
+        }
+    } else {
+        document.title = songInfo.title;
     }
 }
 
@@ -681,6 +801,52 @@ function clickPlay() {
         socket.send('MPD_API_SET_PAUSE');
 }
 
+function clickLocalPlay() {
+    var player = document.getElementById('player');
+    $("#localplay-icon").removeClass("glyphicon-play").removeClass("glyphicon-pause");
+	
+
+    if ( !$('#track-icon').hasClass('glyphicon-play') ) {
+		clickPlay();
+	}
+
+    if ( player.paused ) {
+        var mpdstream = $.cookie("mpdstream");
+
+        if ( mpdstream ) {
+            player.src = mpdstream;
+            console.log("playing mpd stream: " + player.src);
+            player.load();
+            player.play();
+            $("#localplay-icon").addClass("glyphicon-pause");
+        } else {
+            $("#mpdstream").change(function(){ clickLocalPlay(); $(this).unbind("change"); });
+            $("#localplay-icon").addClass("glyphicon-play");
+            getHost();
+        }
+    } else {
+        player.pause();
+    }
+}
+
+function setLocalStream(mpdhost) {
+    var mpdstream = $.cookie("mpdstream");
+
+    if ( !mpdstream ) {
+        mpdstream = "http://";
+        if ( mpdhost == "127.0.0.1" )
+            mpdstream += window.location.hostname;
+        else
+            mpdstream += mpdhost;
+        mpdstream += ":8000/";
+
+        $.cookie("mpdstream", mpdstream, { expires: 424242 });
+    }
+
+    $("#mpdstream").val(mpdstream);
+    $("#mpdstream").change();
+}
+
 function trash(tr) {
     if ( $('#btntrashmodeup').hasClass('active') ) {
         socket.send('MPD_API_RM_RANGE,0,' + (tr.index() + 1));
@@ -771,6 +937,7 @@ function getHost() {
 
     $('#mpdhost').keypress(onEnter);
     $('#mpdport').keypress(onEnter);
+    $('#mpdstream').keypress(onEnter);
     $('#mpd_pw').keypress(onEnter);
     $('#mpd_pw_con').keypress(onEnter);
 }
@@ -843,6 +1010,7 @@ function confirmSettings() {
             socket.send('MPD_API_SET_MPDPASS,'+$('#mpd_pw').val());
     }
     socket.send('MPD_API_SET_MPDHOST,'+$('#mpdport').val()+','+$('#mpdhost').val());
+    $.cookie("mpdstream", $("#mpdstream").val(), { expires: 424242 });
     $('#settings').modal('hide');
 }
 
@@ -1060,53 +1228,50 @@ function dirble_load_stations() {
 
 function set_filter (c) {
     filter = c;
+	$('#filter > a').removeClass('active');
+	$('#f' + c).addClass('active');
 
-    $.each($('#salamisandwich > tbody > tr.dir'), function(i, line) {
-        var first = $(line).attr('uri')[0];
+    if (filter === "") {
+    	$('#salamisandwich > tbody > tr').removeClass('hide');
+	} else if (filter === "plist") {
+    	$('#salamisandwich > tbody > tr.dir').addClass('hide');
+    	$('#salamisandwich > tbody > tr.song').addClass('hide');
+    	$('#salamisandwich > tbody > tr.plist').removeClass('hide');
+    } else {
+		$.each($('#salamisandwich > tbody > tr'), function(i, line) {
+			var first = basename($(line).attr('uri'))[0];
+			if ( $(line).hasClass('song') ) {
+				first = $(line).children().eq(3).text()[0];
+			}
 
-        if (filter === undefined) {
-            $(line).removeClass('hide');
-        }
-
-        else if (filter === "#") {
-            if (!isNaN(first)) {
-                $(line).removeClass('hide');
-            } else {
-                $(line).addClass('hide');
-            }
-        }
-
-        else if (filter >= "A" && filter <= "Z") {
-            if (first.toUpperCase() === filter) {
-                $(line).removeClass('hide');
-            } else {
-                $(line).addClass('hide');
-            }
-        }
-
-        else if (filter === "||") {
-            $(line).addClass('hide');
-        }
-    });
-
-    $.each($('#salamisandwich > tbody > tr.plist'), function(i, line) {
-        if (filter === undefined) {
-            $(line).removeClass('hide');
-        } else if (filter === "||") {
-            $(line).removeClass('hide');
-        } else {
-            $(line).addClass('hide');
-        }
-    });
+			if (filter === "num") {
+				if (!isNaN(first)) {
+					$(line).removeClass('hide');
+				} else {
+					$(line).addClass('hide');
+				}
+			} else if (filter >= "A" && filter <= "Z") {
+				if (first.toUpperCase() === filter) {
+					$(line).removeClass('hide');
+				} else {
+					$(line).addClass('hide');
+				}
+			}
+		});
+	}
 }
 
 function add_filter () {
-    $('#filter').append('&nbsp;<a onclick="set_filter(\'#\')" href="#/browse/0/">#</a>');
+	$('#filter').empty();
+    $('#filter').append('&nbsp;<a onclick="set_filter(\'\')" href="#/browse/'+pagination+'/'+browsepath+'">All</a>');
+    $('#filter').append('&nbsp;<a id="fnum" onclick="set_filter(\'num\')" href="#/browse/'+pagination+'/'+browsepath+'">#</a>');
 
     for (i = 65; i <= 90; i++) {
         var c = String.fromCharCode(i);
-        $('#filter').append('&nbsp;<a onclick="set_filter(\'' + c + '\')" href="#/browse/0/">' + c + '</a>');
+        $('#filter').append('&nbsp;<a id="f' + c + '" onclick="set_filter(\'' + c + '\');" href="#/browse/' + pagination + '/' + browsepath + '">' + c + '</a>');
     }
 
-    $('#filter').append('&nbsp;<a onclick="set_filter(\'||\')" href="#/browse/0/" class="glyphicon glyphicon-list"></a>');
+    $('#filter').append('&nbsp;<a id="fplist" onclick="set_filter(\'plist\')" href="#/browse/'+pagination+'/'+browsepath+'" class="glyphicon glyphicon-list"></a>');
+	$('#f' + filter).addClass('active');
+    $('#filter').removeClass('hide');
 }
diff --git a/htdocs/player.html b/htdocs/player.html
new file mode 100644
index 0000000..c93360f
--- /dev/null
+++ b/htdocs/player.html
@@ -0,0 +1,126 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+<!--  <meta name="viewport" content="width=device-width, initial-scale=1.0">-->
+  <meta name="viewport" content="width=320">
+  <meta name="description" content="ympd - fast and lightweight MPD webclient">
+  <meta name="author" content="andy@ndyk.de">
+
+  <title>ympd player</title>
+
+  <!-- Bootstrap core CSS -->
+  <link href="css/bootstrap.css" rel="stylesheet">
+  <link href="css/bootstrap-theme.css" rel="stylesheet">
+
+  <!-- Custom styles for this template -->
+  <link href="css/mpd.css" rel="stylesheet">
+  <link href="assets/favicon.ico" rel="shortcut icon" type="image/vnd.microsoft.icon">
+  <script src="js/jquery-1.10.2.min.js"></script>
+  <script src="js/jquery.cookie.js"></script>
+  <script src="js/bootstrap.min.js"></script>
+  <script src="js/bootstrap-notify.js"></script>
+<script type="text/javascript">
+function clickLocalPlay() {
+    var player = document.getElementById('player');
+    $("#localplay-icon").removeClass("glyphicon-play").removeClass("glyphicon-pause");
+
+
+    if ( player.paused ) {
+        var mpdstream = $.cookie("mpdstream");
+        player.src = mpdstream;
+        console.log("playing mpd stream: " + player.src);
+        player.load();
+        player.play();
+        $("#localplay-icon").addClass("glyphicon-pause");
+    } else {
+        player.pause();
+        player.src='';
+        player.removeAttribute("src");
+        $("#localplay-icon").addClass("glyphicon-play");
+    }
+}
+
+$(document).ready(function(){
+	document.getElementById('player').addEventListener('stalled', function() {
+						if ( !document.getElementById('player').paused ) {
+							this.pause();
+							clickLocalPlay();
+							$('.top-right').notify({
+								message:{text:"music stream stalled - trying to recover..."},
+								type: "danger",
+								fadeOut: { enabled: true, delay: 1000 },
+							}).show();
+						}
+	});
+
+	document.getElementById('player').addEventListener('pause', function() {
+		this.src='';
+		this.removeAttribute("src");
+		$("#localplay-icon").removeClass("glyphicon-pause").addClass("glyphicon-play");
+	});
+
+	document.getElementById('player').addEventListener('error', function failed(e) {
+		this.pause();
+		switch (e.target.error.code) {
+			case e.target.error.MEDIA_ERR_ABORTED:
+				$('.top-right').notify({
+					message:{text:"Audio playback aborted by user."},
+					type: "info",
+					fadeOut: { enabled: true, delay: 1000 },
+				}).show();
+				break;
+			case e.target.error.MEDIA_ERR_NETWORK:
+				$('.top-right').notify({
+					message:{text:"Network error while playing audio."},
+					type: "danger",
+					fadeOut: { enabled: true, delay: 1000 },
+				}).show();
+				break;
+			case e.target.error.MEDIA_ERR_DECODE:
+				$('.top-right').notify({
+					message:{text:"Audio playback aborted. Did you unplug your headphones?"},
+					type: "danger",
+					fadeOut: { enabled: true, delay: 1000 },
+				}).show();
+				break;
+			case e.target.error.MEDIA_ERR_SRC_NOT_SUPPORTED:
+				$('.top-right').notify({
+					message:{text:"Error while loading audio (server, network or format error)."},
+					type: "danger",
+					fadeOut: { enabled: true, delay: 1000 },
+				}).show();
+				break;
+			default:
+				$('.top-right').notify({
+					message:{text:"Unknown error while playing audio."},
+					type: "danger",
+					fadeOut: { enabled: true, delay: 1000 },
+				}).show();
+				break;
+		}
+	}, true);
+});
+</script>
+</head>
+<body>
+  <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
+    <div class="container">
+        <a class="navbar-brand" href="/" target="_blank"><span class="glyphicon glyphicon-play-circle"></span> ympd</a>
+    </div>
+  </div>
+
+  <div class="container starter-template">
+    <div class="row">
+      <div class="col-md-10 col-xs-12">
+            <audio id="player" preload="none"></audio>
+            <button type="button" class="btn btn-default btn-lg center-block" onclick="clickLocalPlay()">
+              <span id="localplay-icon" class="glyphicon glyphicon-play"></span>
+            </button>
+        <div class="notifications top-right"></div>
+      </div>
+    </div>
+  </div>
+</body>
+</html>
diff --git a/src/mpd_client.c b/src/mpd_client.c
index 1054ede..f01ff16 100644
--- a/src/mpd_client.c
+++ b/src/mpd_client.c
@@ -475,28 +475,40 @@ char* mpd_get_title(struct mpd_song const *song)
     return str;
 }
 
-char* mpd_get_artist(struct mpd_song const *song)
-{
-    char *str;
-
-    str = (char *)mpd_song_get_tag(song, MPD_TAG_ARTIST, 0);
-    if (str == NULL) {
-	return "";
-    } else {
-	return str;
-    }
-}
-
 char* mpd_get_album(struct mpd_song const *song)
 {
     char *str;
 
     str = (char *)mpd_song_get_tag(song, MPD_TAG_ALBUM, 0);
-    if (str == NULL) {
-	return "";
-    } else {
-	return str;
+    if(str == NULL){
+        str = "-";
     }
+
+    return str;
+}
+
+char* mpd_get_artist(struct mpd_song const *song)
+{
+    char *str;
+
+    str = (char *)mpd_song_get_tag(song, MPD_TAG_ARTIST, 0);
+    if(str == NULL){
+        str = "-";
+    }
+
+    return str;
+}
+
+char* mpd_get_year(struct mpd_song const *song)
+{
+    char *str;
+
+    str = (char *)mpd_song_get_tag(song, MPD_TAG_DATE, 0);
+    if(str == NULL){
+        str = "-";
+    }
+
+    return str;
 }
 
 int mpd_put_state(char *buffer, int *current_song_id, unsigned *queue_version)
@@ -600,6 +612,7 @@ int mpd_put_queue(char *buffer, unsigned int offset)
     char *cur = buffer;
     const char *end = buffer + MAX_SIZE;
     struct mpd_entity *entity;
+    unsigned long totalTime = 0;
 
     if (!mpd_send_list_queue_range_meta(mpd.conn, offset, offset+MAX_ELEMENTS_PER_PAGE))
         RETURN_ERROR_AND_RECOVER("mpd_send_list_queue_meta");
@@ -608,16 +621,22 @@ int mpd_put_queue(char *buffer, unsigned int offset)
 
     while((entity = mpd_recv_entity(mpd.conn)) != NULL) {
         const struct mpd_song *song;
+        unsigned int drtn;
 
         if(mpd_entity_get_type(entity) == MPD_ENTITY_TYPE_SONG) {
             song = mpd_entity_get_song(entity);
+            drtn = mpd_song_get_duration(song);
 
             cur += json_emit_raw_str(cur, end - cur, "{\"id\":");
             cur += json_emit_int(cur, end - cur, mpd_song_get_id(song));
             cur += json_emit_raw_str(cur, end - cur, ",\"pos\":");
             cur += json_emit_int(cur, end - cur, mpd_song_get_pos(song));
             cur += json_emit_raw_str(cur, end - cur, ",\"duration\":");
-            cur += json_emit_int(cur, end - cur, mpd_song_get_duration(song));
+            cur += json_emit_int(cur, end - cur, drtn);
+            cur += json_emit_raw_str(cur, end - cur, ",\"artist\":");
+            cur += json_emit_quoted_str(cur, end - cur, mpd_get_artist(song));
+            cur += json_emit_raw_str(cur, end - cur, ",\"album\":");
+            cur += json_emit_quoted_str(cur, end - cur, mpd_get_album(song));
             cur += json_emit_raw_str(cur, end - cur, ",\"title\":");
             cur += json_emit_quoted_str(cur, end - cur, mpd_get_title(song));
             cur += json_emit_raw_str(cur, end - cur, ",\"artist\":");
@@ -625,6 +644,8 @@ int mpd_put_queue(char *buffer, unsigned int offset)
             cur += json_emit_raw_str(cur, end - cur, ",\"album\":");
             cur += json_emit_quoted_str(cur, end - cur, mpd_get_album(song));
             cur += json_emit_raw_str(cur, end - cur, "},");
+
+            totalTime += drtn;
         }
         mpd_entity_free(entity);
     }
@@ -632,7 +653,9 @@ int mpd_put_queue(char *buffer, unsigned int offset)
     /* remove last ',' */
     cur--;
 
-    cur += json_emit_raw_str(cur, end - cur, "]}");
+    cur += json_emit_raw_str(cur, end - cur, "],\"totalTime\":");
+    cur += json_emit_int(cur, end - cur, totalTime);
+    cur += json_emit_raw_str(cur, end - cur, "}");
     return cur - buffer;
 }
 
@@ -676,6 +699,10 @@ int mpd_put_browse(char *buffer, char *path, unsigned int offset)
                 song = mpd_entity_get_song(entity);
                 cur += json_emit_raw_str(cur, end - cur, "{\"type\":\"song\",\"uri\":");
                 cur += json_emit_quoted_str(cur, end - cur, mpd_song_get_uri(song));
+                cur += json_emit_raw_str(cur, end - cur, ",\"album\":");
+                cur += json_emit_quoted_str(cur, end - cur, mpd_get_album(song));
+                cur += json_emit_raw_str(cur, end - cur, ",\"artist\":");
+                cur += json_emit_quoted_str(cur, end - cur, mpd_get_artist(song));
                 cur += json_emit_raw_str(cur, end - cur, ",\"duration\":");
                 cur += json_emit_int(cur, end - cur, mpd_song_get_duration(song));
                 cur += json_emit_raw_str(cur, end - cur, ",\"title\":");
@@ -734,6 +761,10 @@ int mpd_search(char *buffer, char *searchstr)
         while((song = mpd_recv_song(mpd.conn)) != NULL) {
             cur += json_emit_raw_str(cur, end - cur, "{\"type\":\"song\",\"uri\":");
             cur += json_emit_quoted_str(cur, end - cur, mpd_song_get_uri(song));
+            cur += json_emit_raw_str(cur, end - cur, ",\"album\":");
+            cur += json_emit_quoted_str(cur, end - cur, mpd_get_album(song));
+            cur += json_emit_raw_str(cur, end - cur, ",\"artist\":");
+            cur += json_emit_quoted_str(cur, end - cur, mpd_get_artist(song));
             cur += json_emit_raw_str(cur, end - cur, ",\"duration\":");
             cur += json_emit_int(cur, end - cur, mpd_song_get_duration(song));
             cur += json_emit_raw_str(cur, end - cur, ",\"title\":");
diff --git a/src/mpd_client.h b/src/mpd_client.h
index 447dd56..7598aa4 100644
--- a/src/mpd_client.h
+++ b/src/mpd_client.h
@@ -84,8 +84,10 @@ enum mpd_conn_states {
 
 struct t_mpd {
     int port;
+	int local_port;
     char host[128];
     char *password;
+	char *gpass;
 
     struct mpd_connection *conn;
     enum mpd_conn_states conn_state;
diff --git a/src/ympd.c b/src/ympd.c
index 3aed7e6..8d3f90d 100644
--- a/src/ympd.c
+++ b/src/ympd.c
@@ -39,6 +39,9 @@ void bye()
 }
 
 static int server_callback(struct mg_connection *c, enum mg_event ev) {
+    int result = MG_FALSE;
+    FILE *fp = NULL;
+
     switch(ev) {
         case MG_CLOSE:
             mpd_close_handler(c);
@@ -57,7 +60,16 @@ static int server_callback(struct mg_connection *c, enum mg_event ev) {
                 return callback_http(c);
 #endif
         case MG_AUTH:
-            return MG_TRUE;
+            // no auth for websockets since mobile safari does not support it
+            if ( (mpd.gpass == NULL) || (c->is_websocket) || ((mpd.local_port > 0) && (c->local_port == mpd.local_port)) )
+                return MG_TRUE;
+            else {
+                if ( (fp = fopen(mpd.gpass, "r")) != NULL ) {
+                    result = mg_authorize_digest(c, fp);
+                    fclose(fp);
+                }
+            }
+            return result;
         default:
             return MG_FALSE;
     }
@@ -77,12 +89,17 @@ int main(int argc, char **argv)
     mg_set_option(server, "document_root", SRC_PATH);
 #endif
 
+    mg_set_option(server, "auth_domain", "ympd");
     mpd.port = 6600;
+    mpd.local_port = 0;
+	mpd.gpass = NULL;
     strcpy(mpd.host, "127.0.0.1");
 
     static struct option long_options[] = {
+        {"digest",       required_argument, 0, 'D'},
         {"host",         required_argument, 0, 'h'},
         {"port",         required_argument, 0, 'p'},
+        {"localport",    required_argument, 0, 'l'},
         {"webport",      required_argument, 0, 'w'},
         {"dirbletoken",  required_argument, 0, 'd'},
         {"user",         required_argument, 0, 'u'},
@@ -92,15 +109,21 @@ int main(int argc, char **argv)
         {0,              0,                 0,  0 }
     };
 
-    while((n = getopt_long(argc, argv, "h:p:w:u:vm:",
+    while((n = getopt_long(argc, argv, "D:h:p:l:w:u:d:v:m",
                 long_options, &option_index)) != -1) {
         switch (n) {
+            case 'D':
+                mpd.gpass = strdup(optarg);
+                break;
             case 'h':
                 strncpy(mpd.host, optarg, sizeof(mpd.host));
                 break;
             case 'p':
                 mpd.port = atoi(optarg);
                 break;
+            case 'l':
+                mpd.local_port = atoi(optarg);
+                break;
             case 'w':
                 webport = strdup(optarg);
                 break;
@@ -123,12 +146,15 @@ int main(int argc, char **argv)
                 break;
             default:
                 fprintf(stderr, "Usage: %s [OPTION]...\n\n"
+                        " -D, --digest <htdigest>\tpath to htdigest file for authorization\n"
+                        "                        \t(realm ympd) [no authorization]\n"
                         " -h, --host <host>\t\tconnect to mpd at host [localhost]\n"
                         " -p, --port <port>\t\tconnect to mpd at port [6600]\n"
+                        " -l, --localport <port>\t\tskip authorization for local port\n"
                         " -w, --webport [ip:]<port>\tlisten interface/port for webserver [8080]\n"
                         " -u, --user <username>\t\tdrop priviliges to user after socket bind\n"
                         " -d, --dirbletoken <apitoken>\tDirble API token\n"
-                        " -V, --version\t\t\tget version\n"
+                        " -v, --version\t\t\tget version\n"
                         " -m, --mpdpass <password>\tspecifies the password to use when connecting to mpd\n"
                         " --help\t\t\t\tthis help\n"
                         , argv[0]);