Display album name above tracks in song queue.

3 files changed, 31 insertions, 4 deletions

diff --git a/static/player.js b/static/player.js
index 330938b..882b5ca 100644
--- a/static/player.js
+++ b/static/player.js
@@ -27,8 +27,6 @@ function MusicListing(type, path, name, track, metadata, cached) {
 		var s = '';
 		if('artist' in metadata)
 			s = metadata['artist'] + ' - ';
-		if('album' in metadata)
-			s += metadata['album'] + ' - ';
 		if('title' in metadata)
 			s += metadata['title'];
 		if(s.length > 0 && track)
diff --git a/static/playlist.js b/static/playlist.js
index 92758b0..5aeb1d3 100644
--- a/static/playlist.js
+++ b/static/playlist.js
@@ -2,6 +2,7 @@ function Playlist(pl, audio) {
 	this.pl = pl;
 	this.audio = audio;
 	this.current = null;
+	this.lastalbum = null;
 
 	this.get = function(path, track) {
 		var li = this.pl.getElementsByTagName('li')[0];
@@ -26,8 +27,15 @@ function Playlist(pl, audio) {
 		var li = document.createElement('li');
 		var pl = this;
 		a.onclick = function() {
-			while(li.previousElementSibling)
+			while(li.previousElementSibling && li.previousElementSibling.getAttribute('class') != 'album')
 				li.previousElementSibling.parentElement.removeChild(li.previousElementSibling);
+			// Remove children above the album marker.
+			// This could probably be done in a more elegant way.
+			if(li.previousElementSibling && li.previousElementSibling.previousElementSibling)
+				while(li.previousElementSibling.previousElementSibling)
+					li.previousElementSibling.previousElementSibling.parentElement.removeChild(li.previousElementSibling.previousElementSibling);
+			if(li.previousElementSibling && pl.pl.firstChild != li.previousElementSibling)
+				pl.pl.removeChild(pl.pl.firstChild);
 			a.setAttribute('class', 'playing');
 			pl.current = li;
 			ml.play();
@@ -49,6 +57,15 @@ function Playlist(pl, audio) {
 		}
 		log(a.click);
 
+		if(ml.metadata.album != this.lastalbum) {
+			var album_li = document.createElement('li');
+			album_li.appendChild(document.createTextNode(ml.metadata.album));
+			album_li.setAttribute('class', 'album');
+
+			this.pl.appendChild(album_li);
+			this.lastalbum = ml.metadata.album;
+		}
+
 		var span = document.createElement('div');
 
 		// anchor to remove track from playlist
@@ -60,7 +77,14 @@ function Playlist(pl, audio) {
 		del_img.src = '/static/icons/delete.png';
 		a_del.appendChild(del_img);
 		a_del.onclick = function() {
-			li.removeChild(span);
+			log(li.previousElementSibling);
+			log(li.nextElementSibling);
+			if(li.previousElementSibling && li.previousElementSibling.getAttribute('class') == 'album'
+					&& (!li.nextElementSibling || li.nextElementSibling.getAttribute('class') == 'album'))
+				pl.pl.removeChild(li.previousElementSibling);
+			pl.pl.removeChild(li);
+			if(pl.pl.childElementCount == 0)
+				pl.lastalbum = null;
 			return false;
 		}
 		a_del.hidden = true;
@@ -91,6 +115,7 @@ function Playlist(pl, audio) {
 			var old = this.current;
 			log('old: ' + old);
 			this.current = this.current.nextElementSibling;
+			log('new current: ' + this.current);
 			old.parentElement.removeChild(old);
 		}
 		// avoid breaking when a track has been removed
@@ -99,6 +124,9 @@ function Playlist(pl, audio) {
 		if(this.current) {
 			var a = this.current.getElementsByTagName('a')[0];
 			a.onclick();
+		} else {
+			this.lastalbum = null;
+			this.pl.removeChild(this.pl.firstChild);
 		}
 	}
 }
diff --git a/static/style.css b/static/style.css
index 1615e0c..5b2497c 100644
--- a/static/style.css
+++ b/static/style.css
@@ -16,3 +16,4 @@ span.list-header { font-size: large; }
 ul#song-links { width: 30em; overflow: auto; white-space: nowrap; resize: both; }
 a#add-dir { font-size: small; }
 span#playlist-span { position: absolute; left: 31em; right: 1em; }
+ul#playlist li.album { border-top: 1px solid; margin-bottom: .2em; color: #666; padding-left: 1em; }