initial work on the media player interface rework

it looks bad atm bu should work enough to be stylable

3 files changed, 92 insertions, 90 deletions

diff --git a/apps/media/js/collection.js b/apps/media/js/collection.js
index 520ce7d1129..df7b79e332d 100644
--- a/apps/media/js/collection.js
+++ b/apps/media/js/collection.js
@@ -49,68 +49,106 @@ Collection={
 			Collection.load(Collection.display)
 		}else{
 			if(Collection.parent){
-				Collection.parent.children('li.artist').remove();
-				var template=Collection.parent.children('li.template');
-				for(var i=0;i<Collection.artists.length;i++){
-					var artist=Collection.artists[i];
-					var li=template.clone();
-					li.data('artist',artist);
-					li.removeClass('template');
-					li.addClass('artist');
-					li.data('type','artist');
-					li.children('span').text(artist.artist_name);
-					Collection.addButtons(li);
-					Collection.parent.append(li);
-				}
+				Collection.parent.find('tr:not(.template)').remove();
+				var template=Collection.parent.find('tr.template');
+				var lastArtist='';
+				var lastAlbum='';
+				$.each(Collection.artists,function(index,artist){
+					$.each(artist.albums,function(index,album){
+						$.each(album.songs,function(index,song){
+							var tr=template.clone().removeClass('template');
+							tr.find('td.title a').text(song.song_name);
+							tr.find('td.title a').click(function(event){
+								event.preventDefault();
+								PlayList.add(song);
+								PlayList.render();
+							});
+							if(artist.artist_name!=lastArtist){
+								tr.find('td.artist a').click(function(event){
+									event.preventDefault();
+									PlayList.add(artist);
+									PlayList.render();
+								});
+								tr.find('td.artist a').text(artist.artist_name);
+								if(artist.albums.length>1){
+									var expander=$('<a class="expander">&gt;</a>');
+									expander.data('expanded',true);
+									expander.click(function(event){
+										var tr=$(this).parent().parent();
+										if(expander.data('expanded')){
+											Collection.hideArtist(tr.data('artist'));
+										}else{
+											Collection.showArtist(tr.data('artist'));
+										}
+									});
+									tr.children('td.artist').append(expander);
+								}
+							}
+							if(album.album_name!=lastAlbum){
+								tr.find('td.album a').click(function(event){
+									event.preventDefault();
+									PlayList.add(album);
+									PlayList.render();
+								});
+								tr.find('td.album a').text(album.album_name);
+								if(album.songs.length>1){
+									var expander=$('<a class="expander">&gt;</a>');
+									expander.data('expanded',true);
+									expander.click(function(event){
+										var tr=$(this).parent().parent();
+										if(expander.data('expanded')){
+											Collection.hideAlbum(tr.data('album'));
+										}else{
+											Collection.showAlbum(tr.data('album'));
+										}
+									});
+									tr.children('td.album').append(expander);
+								}
+							}
+							tr.attr('data-artist',artist.artist_name);
+							tr.attr('data-album',album.album_name);
+							lastArtist=artist.artist_name;
+							lastAlbum=album.album_name;
+							
+							Collection.parent.find('tbody').append(tr);
+						});
+						Collection.hideAlbum(artist.artist_name,album.album_name);
+					});
+					Collection.hideArtist(artist.artist_name);
+				});
 			}
 		}
 	},
+	showArtist:function(artist){
+		Collection.parent.find('tr[data-artist="'+artist+'"]').show();
+		Collection.parent.find('tr[data-artist="'+artist+'"]').first().removeClass('collapsed');
+		Collection.parent.find('tr[data-artist="'+artist+'"] a.expander').data('expanded',true);
+		Collection.parent.find('tr[data-artist="'+artist+'"] a.expander').addClass('expanded');
+		Collection.parent.find('tr[data-artist="'+artist+'"] a.expander').text('v');
+	},
+	hideArtist:function(artist){
+		if(Collection.parent.find('tr[data-artist="'+artist+'"]').length>1){
+			Collection.parent.find('tr[data-artist="'+artist+'"]').hide();
+			Collection.parent.find('tr[data-artist="'+artist+'"]').first().show();
+			Collection.parent.find('tr[data-artist="'+artist+'"]').first().addClass('collapsed');
+			Collection.parent.find('tr[data-artist="'+artist+'"] a.expander').data('expanded',false);
+			Collection.parent.find('tr[data-artist="'+artist+'"] a.expander').removeClass('expanded');
+			Collection.parent.find('tr[data-artist="'+artist+'"] a.expander').text('>');
+		}
+	},
+	showAlbum:function(artist,album){
+		Collection.parent.find('tr[data-artist="'+artist+'"][data-album="'+album+'"]').show();
+	},
+	hideAlbum:function(artist,album){
+		Collection.parent.find('tr[data-artist="'+artist+'"][data-album="'+album+'"]').hide();
+		Collection.parent.find('tr[data-artist="'+artist+'"][data-album="'+album+'"]').last().show();
+	},
 	parent:null,
 	hide:function(){
 		if(Collection.parent){
 			Collection.parent.hide();
 		}
 	},
-	showAlbums:function(artistLi){
-		$('ul.albums').parent().removeClass('active');
-		$('ul.albums').remove();
-		var artist=artistLi.data('artist');
-		if(artist){
-			var template=Collection.parent.children('li.template');
-			var ul=$('<ul class="albums"></ul>');
-			for(var i=0;i<artist.albums.length;i++){
-				var li=template.clone();
-				var album=artist.albums[i];
-				li.removeClass('template');
-				li.addClass('album');
-				li.data('album',album);
-				li.data('type','album');
-				li.children('span').text(album.album_name);
-				Collection.addButtons(li);
-				ul.append(li);
-			}
-			artistLi.append(ul);
-		}
-	},
-	showSongs:function(albumLi){
-		$('ul.songs').parent().removeClass('active');
-		$('ul.songs').remove();
-		var album=albumLi.data('album');
-		var template=Collection.parent.children('li.template');
-		var ul=$('<ul class="songs"></ul>');
-		for(var i=0;i<album.songs.length;i++){
-			var li=template.clone();
-			var song=album.songs[i];
-			li.removeClass('template');
-			li.addClass('song');
-			li.data('song',song);
-			li.data('type','song');
-			li.children('span').text(song.song_name);
-			Collection.addButtons(li);
-			ul.append(li);
-		}
-		albumLi.append(ul);
-	},
 	registerPlay:function(){
 		var item=PlayList.items[PlayList.current];
 		var song=Collection.findSong(item.artist,item.album,item.name);
@@ -198,14 +236,6 @@ Collection={
 $(document).ready(function(){
 	Collection.parent=$('#collection');
 	Collection.load();
-	$('#collection li.artist>span').live('click',function(){
-		$(this).parent().toggleClass('active');
-		Collection.showAlbums($(this).parent());
-	});
-	$('#collection li.album>span').live('click',function(){
-		$(this).parent().toggleClass('active');
-		Collection.showSongs($(this).parent());
-	});
 	Collection.parent.hide();
 	$('#scan input.start').click(function(){
 		$('#scan input.start').hide();
diff --git a/apps/media/js/music.js b/apps/media/js/music.js
index 4e11b2951be..7034824cad8 100644
--- a/apps/media/js/music.js
+++ b/apps/media/js/music.js
@@ -1,23 +1,4 @@
 $(document).ready(function(){
-	//load the collection
-	$('#navigation a[href="#collection"]').click(function(){
-		$('#navigation li.subentry a.active').removeClass('active');
-		$(this).addClass('active');
-		PlayList.hide();
-		Collection.display();
-	});
-	$('#navigation a[href="#playlist"]').click(function(){
-		$('#navigation li.subentry a.active').removeClass('active');
-		$(this).addClass('active');
-		PlayList.render();
-		Collection.hide();
-	});
-	var tab=window.location.href.slice(window.location.href.indexOf('#') + 1);
-	PlayList.init('mp3',function(){
-		if(tab=='collection'){
-			$('#navigation a[href="#collection"]').trigger('click');
-		}
-	});
 	OC.search.customResults.Music=function(row,item){
 		var parts=item.link.substr(item.link.indexOf('#')+1).split('&');
 		var data={};
@@ -43,6 +24,7 @@ $(document).ready(function(){
 		});
 		row.find('div.name').append(button);
 	}
+	Collection.display();
 });
 
 
diff --git a/apps/media/js/playlist.js b/apps/media/js/playlist.js
index a15c34f93f9..636ae29c555 100644
--- a/apps/media/js/playlist.js
+++ b/apps/media/js/playlist.js
@@ -10,19 +10,9 @@ PlayList.render=function(){
 		tr.removeClass('template');
 		tr.data('name',item.name);
 		tr.data('artist',item.artist);
-		tr.data('album',item.album);
-		tr.data('time',item.length);
-		tr.data('plays',item.playcount);
 		tr.children('td.name').children('span').text(item.name);
 		tr.children('td.artist').text(item.artist);
 		tr.children('td.album').text(item.album);
-		var secconds=(item.length%60);
-		if(secconds<10){
-			secconds='0'+secconds;
-		}
-		var length=Math.floor(item.length/60)+':'+secconds;
-		tr.children('td.time').text(length);
-		tr.children('td.plays').text(item.playcount);
 		tr.data('index',i);
 		tr.click(function(){
 			PlayList.play($(this).data('index'));