From fcf44d0b28388f06bae182a747b94dfc23c8dbab Mon Sep 17 00:00:00 2001
From: James Barnsley <james@barnsley.nz>
Date: Thu, 10 Aug 2017 08:02:10 +1200
Subject: [PATCH] Lazy loading thumbnails

---
 src/js/components/AlbumGrid.js       |  1 +
 src/js/components/GridItem.js        | 29 ++++++++++++----------------
 src/js/components/Thumbnail.js       |  9 +++++++--
 src/js/services/mopidy/middleware.js |  2 ++
 4 files changed, 22 insertions(+), 19 deletions(-)

diff --git a/src/js/components/AlbumGrid.js b/src/js/components/AlbumGrid.js
index a78d393c..d5c8e417 100755
--- a/src/js/components/AlbumGrid.js
+++ b/src/js/components/AlbumGrid.js
@@ -40,6 +40,7 @@ class AlbumGrid extends React.Component{
 									type="album"
 									item={album}
 									onClick={e => {hashHistory.push(global.baseURL+'album/'+album.uri)}}
+									onLoad={() => this.handleLoad(album.uri)}
 									onContextMenu={e => this.handleContextMenu(e,album)}
 								/>
 							)}
diff --git a/src/js/components/GridItem.js b/src/js/components/GridItem.js
index 04720c5d..e4520712 100755
--- a/src/js/components/GridItem.js
+++ b/src/js/components/GridItem.js
@@ -3,7 +3,6 @@ import React, { PropTypes } from 'react'
 import ReactDOM from 'react-dom'
 import { Router, Link, hashHistory } from 'react-router'
 import FontAwesome from 'react-fontawesome'
-import LazyLoad from 'react-lazyload'
 
 import Thumbnail from './Thumbnail'
 import ArtistSentence from './ArtistSentence'
@@ -33,35 +32,35 @@ export default class GridItem extends React.Component{
 
 			case 'playlist':
 				return (
-					<span>
+					<div className="secondary">
 						{item.tracks_total ? item.tracks_total+' tracks' : null}
 						{item.can_edit ? <FontAwesome name="edit" /> : null}
-					</span>
+					</div>
 				)
 				break
 
 			case 'artist':
 				return (
-					<span>
+					<div className="secondary">
 						{item.followers ? item.followers.total.toLocaleString()+' followers' : item.albums_uris.length+' albums'}
-					</span>
+					</div>
 				)
 				break
 
 			case 'album':
 				return (
-					<span>
+					<div className="secondary">
 						{item.artists ? <ArtistSentence artists={item.artists} /> : null}
-					</span>
+					</div>
 				)
 				break
 
 			default:
 				return (
-					<span>
+					<div className="secondary">
 						{ item.artists ? <ArtistSentence artists={ item.artists } /> : null }
 						{ item.followers ? item.followers.total.toLocaleString()+' followers' : null }
-					</span>
+					</div>
 				)
 		}
 
@@ -76,7 +75,7 @@ export default class GridItem extends React.Component{
 			item.album.added_at = item.added_at;
 			item = item.album;
 		}
-		var images = []		
+		var images = null
 		if (this.props.item.images) {
 			images = this.props.item.images
 		} else if (this.props.item.icons){
@@ -85,13 +84,9 @@ export default class GridItem extends React.Component{
 
 		return (
 			<div className="grid-item" onClick={e => this.handleClick(e)} onContextMenu={e => this.handleContextMenu(e)}>
-				<LazyLoad height={10} placeholder={<Thumbnail size="medium" />}>
-					<Thumbnail size="medium" images={images} />
-				</LazyLoad>
-				<div className="name">{item.name ? item.name : item.uri}</div>
-				<div className="secondary">
-					{ this.renderSecondary(item) }
-				</div>
+				<Thumbnail size="medium" images={images} />
+				<div className="name">{item.name ? item.name : <span className="dark-grey-text">{item.uri}</span>}</div>
+				{ this.renderSecondary(item) }
 			</div>
 		);
 	}
diff --git a/src/js/components/Thumbnail.js b/src/js/components/Thumbnail.js
index e14464a3..d85fe1eb 100755
--- a/src/js/components/Thumbnail.js
+++ b/src/js/components/Thumbnail.js
@@ -3,6 +3,7 @@ import React, { PropTypes } from 'react'
 import { connect } from 'react-redux'
 import { createStore, bindActionCreators } from 'redux'
 import FontAwesome from 'react-fontawesome'
+import LazyLoad from 'react-lazyload'
 
 import * as helpers from '../helpers'
 import * as uiActions from '../services/ui/actions'
@@ -65,7 +66,6 @@ class Thumbnail extends React.Component{
 
 	render(){
 		var image = this.mapImageSizes()
-		var style = { backgroundImage: 'url("'+image+'")' }
 		var class_name = 'thumbnail '
 		if( this.props.size ) class_name += ' '+this.props.size
 		if( this.props.circle ) class_name += ' circle'
@@ -78,8 +78,13 @@ class Thumbnail extends React.Component{
 
 		return (
 			<div className={class_name}>
-				<div className="image" style={style}></div>
+
+				<LazyLoad height={10} placeholder={<div className="image"></div>}>
+					<div className="image loaded" style={{backgroundImage: 'url("'+image+'")'}}></div>
+				</LazyLoad>
+
 				{zoom_icon}
+
 			</div>
 		);
 	}
diff --git a/src/js/services/mopidy/middleware.js b/src/js/services/mopidy/middleware.js
index 1fdd1a95..3b21f9bc 100755
--- a/src/js/services/mopidy/middleware.js
+++ b/src/js/services/mopidy/middleware.js
@@ -842,10 +842,12 @@ const MopidyMiddleware = (function(){
 
                         var uris = helpers.arrayOf('uri',response)
 
+                        /*
                         store.dispatch({ 
                             type: 'MOPIDY_GET_ALBUMS',
                             uris: uris//.slice(0,50) THIS PAGINATES REQUESTS. Slow servers might need this...
                         });
+                        */
 
                         store.dispatch({ 
                             type: 'LIBRARY_ALBUMS_LOADED',