media app: show current song, add margin, enable tooltip

apps/media/css/music.css

@@ -9,8 +9,9 @@ div.jp-progress { position:absolute; overflow:hidden; top:.5em; left:8em; width:
 div.jp-seek-bar { background:#eee; width:0; height:100%; cursor:pointer; }
 div.jp-play-bar { background:#ccc; width:0; height:100%; }
 div.jp-seeking-bg { background:url("../img/pbar-ani.gif"); }
-div.jp-current-time,div.jp-duration { position:absolute; font-size:.64em; font-style:oblique; top:1em; left:13.5em; }
-div.jp-duration { left:33em; }
+div.jp-current-time,div.jp-duration { position:absolute; font-size:.64em; font-style:oblique; top:0.9em; left:13.5em; }
+div.jp-duration { display: none }
+div.jp-current-song { left: 33em; position: absolute; top: 0.9em; }
 div.jp-duration { text-align:right; }
 
 a.jp-mute,a.jp-unmute { left:24em; }
@@ -21,9 +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; }
 #collection li button { float:right; }
 #collection li,#playlist li { list-style-type:none; }
 .template { display:none; }
+.collection_playing { background:#eee; }
 
 #collection li { padding-right:10px; }
 #searchresults input.play, #searchresults input.add { float:left; height:1em; width:1em; }
@@ -34,6 +37,7 @@ tr td { border-top:1px solid #eee; height:2.2em; }
 tr .artist img { vertical-align:middle; }
 tr.album td.artist { padding-left:1em; }
 tr.song td.artist { padding-left:2em; }
+.add {margin: 0 0.5em 0 0; }
 
 #scan { position:absolute; right:13em; top:0em; }
 #scan .start { position:relative; display:inline; float:right; }

apps/media/js/music.js

@@ -15,7 +15,7 @@ $(document).ready(function(){
 			PlayList.play(oldSize);
 			PlayList.render();
 		});
-		var button=$('<input type="button" title="'+t('media','Add to playlist')+'" class="add"></input>');
+		var button=$('<input type="button" title="'+t('media','Add album to playlist')+'" class="add"></input>');
 		button.css('background-image','url('+OC.imagePath('core','actions/play-add')+')')
 		button.click(function(event){
 			event.stopPropagation();
@@ -24,6 +24,7 @@ $(document).ready(function(){
 		});
 		row.find('div.name').append(button);
 	}
+        $('.add').tipsy({gravity:'n', fade:true, delayIn: 400, live:true});
 	Collection.display();
 });
 

apps/media/js/player.js

@@ -39,6 +39,7 @@ var PlayList={
 					PlayList.init(items[index].type,null); // init calls load that calls play
 				}else{
 					PlayList.player.jPlayer("setMedia", items[PlayList.current]);
+                                        $(".jp-current-song").text(items[PlayList.current].name);
 					items[index].playcount++;
 					PlayList.player.jPlayer("play",time);
 					if(index>0){
@@ -67,6 +68,8 @@ var PlayList={
 				PlayList.init(items[index].type,null); // init calls load that calls play
 			}
 		}
+                $(".song").removeClass("collection_playing");
+                $(".jp-playlist-" + index).addClass("collection_playing");
 	},
 	init:function(type,ready){
 		if(!PlayList.player){

apps/media/js/playlist.js

@@ -5,6 +5,7 @@ PlayList.render=function(){
 		var item=PlayList.items[i];
 		var li=$('<li/>');
 		li.append(item.name);
+                li.attr('class', 'jp-playlist-' + i);
 		var img=$('<img class="remove svg action" src="'+OC.imagePath('core','actions/delete')+'"/>');
 		img.click(function(event){
 			event.stopPropagation();
@@ -18,6 +19,7 @@ PlayList.render=function(){
 		li.addClass('song');
 		PlayList.parent.append(li);
 	}
+        $(".jp-playlist-" + PlayList.current).addClass("collection_playing");
 }
 PlayList.getSelected=function(){
 	return $('tbody td.name input:checkbox:checked').parent().parent();

apps/media/templates/music.php

@@ -17,6 +17,7 @@
 	<div class="jp-volume-bar">
 		<div class="jp-volume-bar-value"></div>
 	</div>
+        <div class="jp-current-song"></div>
 
 	<div class="player" id="jp-player"></div>