Added album remove buttons to song queue.

3 files changed, 61 insertions, 16 deletions

diff --git a/static/player.js b/static/player.js
index 882b5ca..3f98dce 100644
--- a/static/player.js
+++ b/static/player.js
@@ -191,9 +191,9 @@ function event_handler(event) {
 					if(li == playlist.current)
 						a.onclick();
 					else
-						a.setAttribute('class', '');
+						a.setAttribute('class', 'song');
 				} else {
-					a.setAttribute('class', 'file-recoding');
+					a.setAttribute('class', 'song file-recoding');
 				}
 			}
 			break;
diff --git a/static/playlist.js b/static/playlist.js
index e5513d1..3590f2c 100644
--- a/static/playlist.js
+++ b/static/playlist.js
@@ -8,7 +8,7 @@ function Playlist(pl, audio) {
 		var li = this.pl.getElementsByTagName('li')[0];
 		while(li) {
 			var as = li.getElementsByTagName('a');
-			if(as.length > 0) {
+			if(as.length == 2) {
 				var a = as[0];
 				if(a.ml.path == path && (!track || a.ml.track == track))
 					return li;
@@ -20,6 +20,7 @@ function Playlist(pl, audio) {
 
 	this.add = function(ml) {
 		var a = document.createElement('a');
+		a.setAttribute('class', 'song');
 		a.setAttribute('href', '#');
 		var name = ml.get_text();
 		a.appendChild(document.createTextNode(name));
@@ -36,7 +37,7 @@ function Playlist(pl, audio) {
 					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');
+			a.setAttribute('class', 'song playing');
 			pl.current = li;
 			ml.play();
 
@@ -59,11 +60,43 @@ function Playlist(pl, audio) {
 			album_li.appendChild(document.createTextNode(ml.metadata.album));
 			album_li.setAttribute('class', 'album');
 
+			var a_del = document.createElement('a');
+			a_del.setAttribute('class', 'delete');
+			a_del.setAttribute('href', '#');
+			a_del.setAttribute('title', 'Remove');
+			var del_img = new Image();
+			del_img.src = '/static/icons/delete.png';
+			a_del.appendChild(del_img);
+			a_del.onclick = (function(album_li) {
+				return function() {
+					while(album_li.nextElementSibling && album_li.nextElementSibling.getAttribute('class') != 'album')
+						pl.pl.removeChild(album_li.nextElementSibling);
+					pl.pl.removeChild(album_li);
+					return false;
+				}
+			})(album_li);
+
+			var span = document.createElement('span');
+			span.style.display = 'none';
+
+			album_li.onmouseover = (function(span) {
+				return function() {
+					span.style.display = '';
+				}
+			})(span);
+			album_li.onmouseout = (function(span) {
+				return function() {
+					span.style.display = 'none';
+				}
+			})(span);
+			span.appendChild(a_del);
+			album_li.appendChild(span);
+
 			this.pl.appendChild(album_li);
 			this.lastalbum = ml.metadata.album;
 		}
 
-		var span = document.createElement('div');
+		var div = document.createElement('div');
 
 		// anchor to remove track from playlist
 		var a_del = document.createElement('a');
@@ -92,20 +125,29 @@ function Playlist(pl, audio) {
 
 			return false;
 		}
-		a_del.hidden = true;
+		var span = document.createElement('span');
+		span.style.display = 'none';
 
-		span.onmouseover = function() {
-			a_del.hidden = false;
-		}
-		span.onmouseout = function() {
-			a_del.hidden = true;
-		}
+		div.onmouseover = (function(span) {
+			return function() {
+				span.style.display = '';
+			}
+		})(span);
+		div.onmouseout = (function(span) {
+			return function() {
+				span.style.display = 'none';
+			}
+		})(span);
+
+		div.appendChild(a);
+		div.appendChild(document.createTextNode(' '));
 
-		span.appendChild(a);
-		span.appendChild(document.createTextNode(' '));
 		span.appendChild(a_del);
+		span.setAttribute('class', 'right');
+
+		div.appendChild(span);
 
-		li.appendChild(span);
+		li.appendChild(div);
 		this.pl.appendChild(li);
 
 		if(this.get_next() == li)
diff --git a/static/style.css b/static/style.css
index 5b2497c..3213dec 100644
--- a/static/style.css
+++ b/static/style.css
@@ -4,7 +4,7 @@ ul#song-links a:hover, ul#playlist a:hover { text-decoration: underline; }
 a.dir { background-image: url('/static/icons/folder.png'); }
 a.file { background-image: url('/static/icons/music.png'); }
 a.file-cached { background-image: url('/static/icons/music-cached.png'); }
-a.dir, a.file, ul#playlist li a:first-child { background-repeat: no-repeat; padding-left: 20px; }
+a.dir, a.file, ul#playlist a.song { background-repeat: no-repeat; padding-left: 20px; }
 ul#playlist img { vertical-align: middle; }
 a.file-recoding { background-image: url('/static/icons/loading.gif'); }
 a.file-queued { background-image: url('/static/icons/music-queued.png'); }
@@ -17,3 +17,6 @@ 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; }
+ul#playlist li.album span { margin-left: 1em; }
+.right { float: right; }
+ul#playlist li div:hover { background: #eee; }