2 files changed, 16 insertions, 4 deletions
diff --git a/apps/media/css/music.css b/apps/media/css/music.css
index a6738058be3..41ade44a66f 100644
--- a/apps/media/css/music.css
+++ b/apps/media/css/music.css
@@ -22,11 +22,11 @@ div.jp-volume-bar-value { background:#ccc; width:0; height:0.4em; }
 #collection li.album,#collection li.song { margin-left:3em; }
 #leftcontent img.remove { display:none; float:right; cursor:pointer; }
 #leftcontent li:hover img.remove { display:inline; }
-#leftcontent li {white-space: normal; }
+#leftcontent li div.label { float: left; width: 200px; overflow: hidden; text-overflow: ellipsis; }
 #collection li button { float:right; }
 #collection li,#playlist li { list-style-type:none; }
 .template { display:none; }
-.collection_playing { background:#eee; }
+.collection_playing { background:#eee; font-weight: bold; }
 
 #collection li { padding-right:10px; }
 #searchresults input.play, #searchresults input.add { float:left; height:1em; width:1em; }
diff --git a/apps/media/js/playlist.js b/apps/media/js/playlist.js
index 57180b3be7b..089065989ae 100644
--- a/apps/media/js/playlist.js
+++ b/apps/media/js/playlist.js
@@ -1,11 +1,23 @@
 PlayList.render=function(){
 	$('#playlist').show();
+
+	/*
+	 * We should not empty() PlayList.parent() but thorougly manage its
+	 * elements instead because some code might be attached to those.
+	 * JQuery tipsies are one of them. The following line make sure they
+	 * are all removed before we delete the associated <li/>.
+	 */
+	$(".tipsy").remove();
+
 	PlayList.parent.empty();
 	for(var i=0;i<PlayList.items.length;i++){
 		var item=PlayList.items[i];
 		var li=$('<li/>');
-		li.append(item.name);
-                li.attr('class', 'jp-playlist-' + i);
+		li.attr('class', 'jp-playlist-' + i);
+		li.attr('title', item.artist + ' - ' + item.name + '<br/>(' + item.album + ')');
+		var div = $('<div class="label">' + item.name + '</div>');
+		li.append(div);
+		$('.jp-playlist-' + i).tipsy({gravity:'w', fade:true, live:true, html:true});
 		var img=$('<img class="remove svg action" src="'+OC.imagePath('core','actions/delete')+'"/>');
 		img.click(function(event){
 			event.stopPropagation();