fix:Retrieve album images using new mopidy.library.getImages format.

Fall back to using track artist if album artist is not available.

Fixes #128.

README.rst

@@ -77,6 +77,7 @@ v2.2.0 (UNRELEASED)
 - Scrolling now works in full screen mode for Chrome and Safari as well. (Fixes: `#53 <https://github.com/pimusicbox/mopidy-musicbox-webclient/issues/53>`_).
 - No longer interferes with changes to Mopidy's volume levels that are triggered externally. (Fixes: `#162 <https://github.com/pimusicbox/mopidy-musicbox-webclient/issues/162>`_).
 - Volume slider now works with Mopidy-ALSAMixer again. (Fixes: `#168 <https://github.com/pimusicbox/mopidy-musicbox-webclient/issues/168>`_).
+- Now falls back to track artist if album artist is not available for rendering cover art. (Fixes: `#128 <https://github.com/pimusicbox/mopidy-musicbox-webclient/issues/128>`_).
 
 v2.1.1 (2016-02-04)
 -------------------

mopidy_musicbox_webclient/static/js/functionsvars.js

@@ -224,7 +224,7 @@ function resultsToTables(results, target, uri) {
 
     var newalbum = [];
     var newtlids = [];
-    //keep a list of albums for retreiving of covers
+    //keep a list of track URIs for retrieving of covers
     var coversList = [];
     var nextname = '';
     var count = 0;
@@ -343,12 +343,9 @@ function resultsToTables(results, target, uri) {
                     }
                     newalbum = [];
                     newtlids = [];
-                    if (results[i].album) {
-                        coversList.push([results[i].album, i]);
-                    }
                 } //newalbum length
                 if (results[i].album) {
-                    coversList.push([results[i].album, i]);
+                    coversList.push([results[i].uri, i]);
                 }
             } //albums name
         }
@@ -356,7 +353,7 @@ function resultsToTables(results, target, uri) {
     tableid = "#" + tableid;
     $(target).html(html);
     $(target).attr('data', uri);
-    //retreive albumcovers
+    //retrieve albumcovers
     for (i = 0; i < coversList.length; i++) {
         getCover(coversList[i][0], target + '-cover-' + coversList[i][1], 'small');
     }

mopidy_musicbox_webclient/static/js/gui.js

@@ -129,7 +129,7 @@ function setSongInfo(data) {
     }
     if (data.track.album && data.track.album.name) {
         $("#modalalbum").html('<a href="#" onclick="return showAlbum(\'' + data.track.album.uri + '\');">' + data.track.album.name + '</a>');
-        getCover(data.track.album, '#infocover, #controlspopupimage', 'extralarge');
+        getCover(data.track.uri, '#infocover, #controlspopupimage', 'extralarge');
     } else {
         $("#modalalbum").html('');
         $("#infocover").attr('src', 'images/default_cover.png');

mopidy_musicbox_webclient/static/js/images.js

@@ -19,22 +19,58 @@ $(window).load(function () {
     });
 });
 
-function getCover(album, images, size) {
+function getCover(uri, images, size) {
     var defUrl = 'images/default_cover.png';
     $(images).attr('src', defUrl);
-    if (!album) {
+    if (!uri) {
         return;
     }
-    var albumname = album.name || '';
-    var artistname = '';
-    if ( album.artists && (album.artists.length > 0) ) {
-        artistname = album.artists[0].name;
-    }
-    if (album.images && (album.images.length > 0) ) {
-        $(images).attr('src', album.images[0]);
+
+    mopidy.library.getImages({'uris': [uri]}).then(function(imageResults) {
+        var uri = Object.keys(imageResults)[0];
+        if (imageResults[uri].length > 0) {
+            $(images).attr('src', imageResults[uri][0].uri);
         } else {
+            // Also check deprecated 'album.images' in case backend does not
+            // implement mopidy.library.getImages yet...
+            getCoverFromAlbum(uri, images, size);
+        }
+    });
+}
+
+// Note that this approach has been deprecated in Mopidy
+// TODO: Remove when Mopidy no longer supports getting images
+//       with 'album.images'.
+function getCoverFromAlbum(uri, images, size) {
+    mopidy.library.lookup({'uris': [uri]}).then(function(resultDict) {
+        var uri = Object.keys(resultDict)[0];
+        var track = resultDict[uri][0];
+        if (track.album && track.album.images && (track.album.images.length > 0) ) {
+            $(images).attr('src', track.album.images[0]);
+        } else {
+            // Fallback to last.fm
+            getCoverFromLastFm(track, images, size);
+        }
+    });
+}
+
+function getCoverFromLastFm(track, images, size) {
+    var defUrl = 'images/default_cover.png';
+    if (!(track.album || track.artist)) {
+        return;
+    }
+    var albumname = track.album.name || '';
+    var artistname = '';
+    if ( track.album.artists && (track.album.artists.length > 0) ) {
+        // First look for the artist in the album
+        artistname = track.album.artists[0].name;
+    } else if (track.artists && (track.artists.length > 0) ) {
+        // Fallback to using artists for specific track
+        artistname = track.artists[0].name;
+    }
+
     lastfm.album.getInfo( {artist: artistname, album: albumname},
-            { success: function(data){
+        { success: function(data) {
             for (var i = 0; i < data.album.image.length; i++) {
                 if ( data.album.image[i]['size'] == size) {
                     $(images).attr('src', data.album.image[i]['#text'] || defUrl);
@@ -42,8 +78,6 @@ function getCover(album, images, size) {
             }
         }
     });
-
-   }
 }
 
 function getArtistImage(nwartist, image, size) {

mopidy_musicbox_webclient/static/js/process_ws.js

@@ -115,9 +115,9 @@ function processBrowseDir(resultArr) {
         if (resultArr[i].type == 'track') {
             //console.log(resultArr[i]);
             mopidy.library.lookup({'uris': [resultArr[i].uri]}).then(function (resultDict) {
-                var lookup_uri = Object.keys(resultDict)[0];
-                popupData[lookup_uri] = resultDict[lookup_uri][0];
-                browseTracks.push(resultDict[lookup_uri][0]);
+                var lookupUri = Object.keys(resultDict)[0];
+                popupData[lookupUri] = resultDict[lookupUri][0];
+                browseTracks.push(resultDict[lookupUri][0]);
             }, console.error);
             child += '<li class="song albumli" id="browselisttracks-' + resultArr[i].uri + '">' +
                      '<a href="#" class="moreBtn" onclick="return popupTracks(event, \'' + uri + '\', \'' + resultArr[i].uri + '\', \'' + index + '\');">' +
@@ -249,6 +249,6 @@ function processAlbumResults(resultArr) {
     $('#h_albumartist').html(artistname);
     $('#coverpopupalbumname').html(albumname);
     $('#coverpopupartist').html(artistname);
-    getCover(resultArr[0].album, '#albumviewcover, #coverpopupimage', 'extralarge');
+    getCover(resultArr[0].uri, '#albumviewcover, #coverpopupimage', 'extralarge');
     showLoading(false);
 }