web intf: display art correctly

share/lua/http/css/main.css

@@ -59,7 +59,7 @@ body{
 }
 #controlTable{
 	position:relative;
-	height: 140px;
+	height: 150px;
 }
 #controlButtons{
 	position: absolute;
@@ -87,19 +87,20 @@ body{
 #volumesliderzone{
 	position: absolute;
 	top: 20px;
-	left: 440px;
-	width: 205px;
+	left: 435px;
+	width: 210px;
 }
 
 #volumeSlider{
-	width: 200px;
+	width: 208px;
 }
 
 #artszone{
 	position: absolute;
 	top: 0;
-	left: 650px;
-	width: 141px;
+	left: 648px;
+	width: 150px;
+	height: 150px;
 	vertical-align: top;
 }
 
@@ -107,7 +108,7 @@ body{
 	position:absolute;
 	left: 0;
 	top: 100px;
-	width: 650px;
+	width: 645px;
 	vertical-align: bottom;
 }
 
@@ -208,3 +209,8 @@ div.centered{
 	margin-left: auto;
 	margin-right: auto;
 }
+
+.hidden{
+	visibility: hidden;
+	display: none;
+}

share/lua/http/js/controlers.js

 var current_id	=	1;
 var currentArt	=	null;
 var current_que	=	'main';
+function updateArt(url)
+{
+	$('#albumArt').fadeOut(500, function(){
+		$(this).addClass('hidden')
+		.removeAttr('height')
+		.removeAttr('width')
+		.attr('src',url);
+	});
+}
 function updateStatus(){
 	$.ajax({
 		url: 'requests/status.xml',
@@ -50,16 +59,18 @@ function updateStatus(){
 					$('#buttonRepeat').addClass('ui-state-default');
 					$('#buttonRepeat').removeClass('ui-state-active');
 				}
-				if($('[name="artwork_url"]',data).text()!=currentArt){
+
+				if($('[name="artwork_url"]',data).text()!=currentArt
+					&& $('[name="artwork_url"]',data).text()!="")
+				{
 					var tmp	=	new Date();
-					$('#albumArt').attr('src','/art?'+tmp.getTime());
 					currentArt	=	$('[name="artwork_url"]',data).text();
-					$('#albumArt').css({
-						'visibility':'visible',
-						'display':'block'
-					});
-				}else if($('[name="artwork_url"]',data).text()==""){
-					$('#albumArt').attr('src','images/vlc-48.png');
+					updateArt('/art?'+tmp.getTime());
+				}else if($('[name="artwork_url"]',data).text()==""
+						 &&	currentArt!='images/vlc-48.png')
+				{
+					currentArt='images/vlc-48.png';
+					updateArt(currentArt);
 				}
 				if(pollStatus){
 					setTimeout( updateStatus, 1000 );
@@ -422,6 +433,23 @@ function sendEQCmd(params){
 }
 
 $(function(){
+	$('#albumArt').load(function(){
+		var width=$(this).width();
+		var height=$(this).height();
+		var max=Math.max(width,height);
+		if(max>150)
+		{
+			var ratio=150/max;
+			width=Math.floor(width*ratio);
+			height=Math.floor(height*ratio);
+		}
+		$(this).attr('width',width)
+		.attr('height',height)
+		.css('margin-left', Math.floor((150 - width)/2))
+		.css('margin-top', Math.floor((150 - height)/2))
+		.removeClass('hidden')
+		.fadeIn();
+	});
 	$('#libraryTree').jstree({
 		"xml_data":{
 			"ajax":{