Loading more artwork from LastFM... maybe

mopidy_iris/static/app.css

@@ -2831,7 +2831,7 @@ h4 {
     margin-left: 10px; }
   h4 .button {
     margin-left: 10px;
-    margin-bottom: -6px; }
+    margin-bottom: -1px; }
 
 h5 {
   font-size: 1rem;

mopidy_iris/static/index.html

@@ -98,7 +98,7 @@
 
 	// Release details
 	// These are automatically injected to built HTML
-	var build = "1550561713";
+	var build = "1550610046";
 	var version = "3.32.5";
 
 	// Construct the script tag

src/js/components/AlbumGrid.js

@@ -1,12 +1,13 @@
 
-import React from 'react'
-import { connect } from 'react-redux'
-import { createStore, bindActionCreators } from 'redux'
+import React from 'react';
+import { connect } from 'react-redux';
+import { createStore, bindActionCreators } from 'redux';
 
-import history from './history';
-import * as helpers from '../helpers'
-import * as uiActions from '../services/ui/actions'
-import GridItem from './GridItem'
+import * as helpers from '../helpers';
+import * as uiActions from '../services/ui/actions';
+import * as lastfmActions from '../services/lastfm/actions';
+
+import GridItem from './GridItem';
 
 class AlbumGrid extends React.Component{
 
@@ -43,6 +44,7 @@ class AlbumGrid extends React.Component{
 									key={album.uri}
 									type="album"
 									item={album}
+									lastfmActions={this.props.lastfmActions}
 									show_source_icon={this.props.show_source_icon}
 									onContextMenu={e => this.handleContextMenu(e,album)}
 								/>
@@ -64,7 +66,8 @@ const mapStateToProps = (state, ownProps) => {
 
 const mapDispatchToProps = (dispatch) => {
 	return {
-		uiActions: bindActionCreators(uiActions, dispatch)
+		uiActions: bindActionCreators(uiActions, dispatch),
+		lastfmActions: bindActionCreators(lastfmActions, dispatch)
 	}
 }
 

src/js/components/ArtistGrid.js

@@ -1,15 +1,14 @@
 
-import React from 'react'
-import { connect } from 'react-redux'
-import { createStore, bindActionCreators } from 'redux'
+import React from 'react';
+import { connect } from 'react-redux';
+import { createStore, bindActionCreators } from 'redux';
 
+import Thumbnail from './Thumbnail';
+import GridItem from './GridItem';
 
-import Thumbnail from './Thumbnail'
-import GridItem from './GridItem'
-
-import * as helpers from '../helpers'
-import * as uiActions from '../services/ui/actions'
-import * as lastfmActions from '../services/lastfm/actions'
+import * as helpers from '../helpers';
+import * as uiActions from '../services/ui/actions';
+import * as lastfmActions from '../services/lastfm/actions';
 
 class ArtistGrid extends React.Component{
 
@@ -17,12 +16,6 @@ class ArtistGrid extends React.Component{
 		super(props);
 	}
 
-	itemMounted(item){
-		if (!item.images){
-			this.props.lastfmActions.getArtist(item.uri, item.name);
-		}
-	}
-
 	handleContextMenu(e,item){
 		e.preventDefault();
 		var data = {
@@ -44,18 +37,17 @@ class ArtistGrid extends React.Component{
 			return (
 				<div className={className}>
 					{
-						this.props.artists.map(
-							(artist, index) => {
+						this.props.artists.map(item => {
+								var artist = helpers.collate(item, {albums: this.props.albums});
 								return (
 									<GridItem
 										key={artist.uri}
 										type="artist"
-										item={helpers.collate(artist, {albums: this.props.albums})}
+										item={artist}
 										show_source_icon={this.props.show_source_icon}
 										onClick={e => {this.props.history.push('/artist/'+encodeURIComponent(artist.uri))}}
 										lastfmActions={this.props.lastfmActions}
 										onContextMenu={e => this.handleContextMenu(e,artist)}
-										onMount={() => this.itemMounted(artist)}
 									/>
 								)
 							}

src/js/components/GridItem.js

@@ -15,11 +15,27 @@ export default class GridItem extends React.Component{
 	}
 
 	componentDidMount(){
+		if (this.props.item){
+			var item = this.props.item;
+		} else {
+			return;
+		}
 
-		// A mount callback allows us to run checks on render
-		// We use this for loading artwork, but only when it's displayed
-		if (this.props.onMount){
-			this.props.onMount();
+		// If the item that has just been mounted doesn't have images,
+		// try fetching them from LastFM
+		if (!item.images && this.props.lastfmActions){
+			switch (helpers.uriType(item.uri)){
+
+				case 'artist':
+					this.props.lastfmActions.getArtist(item.uri, item.name);
+					break;
+
+				case 'album':
+					if (item.artists && item.artists.length > 0){
+						this.props.lastfmActions.getAlbum(item.uri, item.artists[0].name, item.name, (item.mbid ? item.mbid : null));
+					}
+					break;
+			}
 		}
 	}
 
@@ -78,14 +94,16 @@ export default class GridItem extends React.Component{
 	}
 
 	render(){
-		if (!this.props.item) return null
+		if (!this.props.item){
+			return null;
+		}
 
 		var item = this.props.item;
 		if (item.album !== undefined){
 			item.album.added_at = item.added_at;
 			item = item.album;
 		}
-		var images = null
+		var images = null;
 		if (this.props.item.images){
 			if (Array.isArray(this.props.item.images)){
 				images = this.props.item.images[0];

src/js/services/lastfm/actions.js

@@ -259,7 +259,7 @@ export function getArtist(uri, artist, mbid = false){
     }
 }
 
-export function getAlbum(artist, album, mbid = false){
+export function getAlbum(uri, artist, album, mbid = false){
     return (dispatch, getState) => {
         if (mbid){
             var params = 'method=album.getInfo&mbid='+mbid;
@@ -272,7 +272,23 @@ export function getAlbum(artist, album, mbid = false){
             .then(
                 response => {
                     if (response.album){
-                        dispatch(coreActions.albumLoaded(response.album));
+                    	var album = {
+                            uri: uri,
+                            images: response.album.image,
+                            listeners: response.album.listeners,
+                            play_count: response.album.playcount,
+                            mbid: response.album.mbid
+                        };
+
+                        if (response.album.wiki){
+                            album.wiki = response.album.wiki.content;
+
+	                        if (response.album.wiki.published){
+	                            album.wiki_publish_date = response.album.wiki.published;
+	                        }
+                        }
+
+                        dispatch(coreActions.albumLoaded(album));
                     }
                 }
             );

src/js/views/Artist.js

@@ -94,14 +94,16 @@ class Artist extends React.Component{
 	}
 
 	setSort(value){
-		var reverse = false
-		if (this.props.sort == value ) reverse = !this.props.sort_reverse
+		var reverse = false;
+		if (value !== null && this.props.sort == value){
+			reverse = !this.props.sort_reverse;
+		}
 
 		var data = {
 			artist_albums_sort_reverse: reverse,
 			artist_albums_sort: value
 		}
-		this.props.uiActions.set(data)
+		this.props.uiActions.set(data);
 	}
 
 	setFilter(value){

src/js/views/library/LibraryAlbums.js

@@ -171,10 +171,9 @@ class LibraryAlbums extends React.Component{
 				}
 
 				if (this.props.albums.hasOwnProperty(uri)){
-					album = this.props.albums[uri]
+					albums.push(this.props.albums[uri]);
 				}
 
-				albums.push(album)
 			}
 		}
 

src/scss/global/_core.scss

@@ -253,7 +253,7 @@ h4 {
 
 	.button {
 		margin-left: 10px;
-		margin-bottom: -6px;
+		margin-bottom: -1px;
 	}
 }