web intf: display art correctly

diff --git a/share/lua/http/css/main.css b/share/lua/http/css/main.css
index 82cd04cd9f895988e381eb5691e81c1038708b7c..d13e04ad473881cd0b6fc808cb379813259cbaf9 100644 (file)
--- a/share/lua/http/css/main.css
+++ b/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;
+}

diff --git a/share/lua/http/js/controlers.js b/share/lua/http/js/controlers.js
index 30c143eabcbda1463dd15eb406be34ebf8d84c17..0febc4e61b52286e0fcb72e9d11d3810f4825aa9 100644 (file)
--- a/share/lua/http/js/controlers.js
+++ b/share/lua/http/js/controlers.js
@@ -1,6 +1,15 @@
 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":{