From ab242e0ef2c3777e250f53ba897fd2117ee12d8b Mon Sep 17 00:00:00 2001 From: Jon Bergli Heier Date: Thu, 18 Aug 2011 14:26:10 +0200 Subject: Display album name above tracks in song queue. --- static/player.js | 2 -- static/playlist.js | 32 ++++++++++++++++++++++++++++++-- static/style.css | 1 + 3 files changed, 31 insertions(+), 4 deletions(-) (limited to 'static') 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; } -- cgit v1.2.3