From 160a9ad700098ac5ee61eff2296307589e83b92b Mon Sep 17 00:00:00 2001
From: James Barnsley <james@barnsley.nz>
Date: Wed, 9 Aug 2017 08:52:49 +1200
Subject: [PATCH] Adding lazy-loader for images on-demand

---
 package.json                      |  3 +-
 src/js/components/AlbumGrid.js    | 40 ++++++++------------------
 src/js/components/CategoryGrid.js | 17 +++++++----
 src/js/components/GridItem.js     | 47 ++++++++++++++++++++++---------
 src/js/components/PlaylistGrid.js | 34 ++++++++--------------
 5 files changed, 71 insertions(+), 70 deletions(-)

diff --git a/package.json b/package.json
index d2b56e0c..215aa18f 100755
--- a/package.json
+++ b/package.json
@@ -37,7 +37,8 @@
 		"style-loader": "^0.13.2",
 		"url-loader": "^0.5.8",
 		"webpack": "^3.3.0",
-		"webpack-strip": "0.1.0"
+		"webpack-strip": "0.1.0",
+		"react-lazyload": "2.2.7"
 	},
 	"scripts": {
 		"dev": "./build.sh && NODE_ENV=development webpack --watch",
diff --git a/src/js/components/AlbumGrid.js b/src/js/components/AlbumGrid.js
index 51fb8c7a..a78d393c 100755
--- a/src/js/components/AlbumGrid.js
+++ b/src/js/components/AlbumGrid.js
@@ -5,22 +5,14 @@ import { createStore, bindActionCreators } from 'redux'
 import { hashHistory } from 'react-router'
 import FontAwesome from 'react-fontawesome'
 
-import Thumbnail from './Thumbnail'
-import ArtistSentence from './ArtistSentence'
-
 import * as helpers from '../helpers'
 import * as uiActions from '../services/ui/actions'
+import GridItem from './GridItem'
 
 class AlbumGrid extends React.Component{
 
 	constructor(props) {
-		super(props);
-	}
-
-	handleClick(e,link){
-		if( e.target.tagName.toLowerCase() !== 'a' ){
-			hashHistory.push(link)
-		}
+		super(props)
 	}
 
 	handleContextMenu(e,item){
@@ -41,24 +33,16 @@ class AlbumGrid extends React.Component{
 			return (
 				<div className={className}>
 					{
-						this.props.albums.map(
-							(album, index) => {
-								return (
-									<div className="grid-item" 
-										key={index} 
-										onClick={ (e) => this.handleClick(e,global.baseURL+'album/'+album.uri) }
-										onContextMenu={e => this.handleContextMenu(e,album)}>
-											<Thumbnail size="medium" images={album.images} />
-											{album.name ? <div className="name">
-												{album.name}
-												{this.props.show_source_icon ? <FontAwesome name={helpers.sourceIcon(album.uri)} className="source" fixedWidth /> : null}
-											</div> : <div className="name dark-grey-text">{album.uri}</div>}
-											<div className="secondary">
-												{album.artists ? <ArtistSentence artists={album.artists} /> : null}
-											</div>
-									</div>
-								)
-							}
+						this.props.albums.map(album => {
+							return (
+								<GridItem
+									key={album.uri}
+									type="album"
+									item={album}
+									onClick={e => {hashHistory.push(global.baseURL+'album/'+album.uri)}}
+									onContextMenu={e => this.handleContextMenu(e,album)}
+								/>
+							)}
 						)
 					}
 				</div>
diff --git a/src/js/components/CategoryGrid.js b/src/js/components/CategoryGrid.js
index b4a92770..417bf8e2 100755
--- a/src/js/components/CategoryGrid.js
+++ b/src/js/components/CategoryGrid.js
@@ -1,4 +1,6 @@
 
+import { hashHistory } from 'react-router'
+
 import React, { PropTypes } from 'react'
 import GridItem from './GridItem'
 
@@ -16,11 +18,16 @@ export default class CategoryGrid extends React.Component{
 		return (
 			<div className={className}>
 				{
-					this.props.categories.map(
-						(category, index) => {
-							return <GridItem item={category} key={index} link={global.baseURL+'discover/categories/'+category.id} />
-						}
-					)
+					this.props.categories.map(category => {
+						return (
+							<GridItem 
+								key={category.id}
+								type="category"
+								item={category}
+								onClick={e => {hashHistory.push(global.baseURL+'discover/categories/'+category.id)}}
+							/>
+						)
+					})
 				}
 			</div>
 		);
diff --git a/src/js/components/GridItem.js b/src/js/components/GridItem.js
index 2cfe84ca..04720c5d 100755
--- a/src/js/components/GridItem.js
+++ b/src/js/components/GridItem.js
@@ -1,7 +1,9 @@
 
 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'
@@ -9,19 +11,19 @@ import ArtistSentence from './ArtistSentence'
 export default class GridItem extends React.Component{
 
 	constructor(props) {
-		super(props);
+		super(props)
 	}
 
 	handleClick(e){
-		if( e.target.tagName.toLowerCase() !== 'a' ){
-			hashHistory.push(this.props.link)
+		if (this.props.onClick && e.target.tagName.toLowerCase() !== 'a'){
+			this.props.onClick(e)
 		}
 	}
 
-	renderThumbnail(){
-		if( this.props.item.images ) return <Thumbnail size="medium" images={this.props.item.images} />
-		if( this.props.item.icons ) return <Thumbnail size="medium" images={this.props.item.icons} />
-		return <Thumbnail size="medium" images={[]} />
+	handleContextMenu(e){
+		if (this.props.onContextMenu){
+			this.props.onContextMenu(e)
+		}
 	}
 
 	renderSecondary(item){
@@ -32,8 +34,8 @@ export default class GridItem extends React.Component{
 			case 'playlist':
 				return (
 					<span>
-						{ item.tracks_total ? item.tracks_total+' tracks' : null }
-						{ item.can_edit ? <FontAwesome name="edit" /> : null }
+						{item.tracks_total ? item.tracks_total+' tracks' : null}
+						{item.can_edit ? <FontAwesome name="edit" /> : null}
 					</span>
 				)
 				break
@@ -41,7 +43,15 @@ export default class GridItem extends React.Component{
 			case 'artist':
 				return (
 					<span>
-						{ item.followers ? item.followers.total.toLocaleString()+' followers' : item.albums_uris.length+' albums' }
+						{item.followers ? item.followers.total.toLocaleString()+' followers' : item.albums_uris.length+' albums'}
+					</span>
+				)
+				break
+
+			case 'album':
+				return (
+					<span>
+						{item.artists ? <ArtistSentence artists={item.artists} /> : null}
 					</span>
 				)
 				break
@@ -59,17 +69,26 @@ 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( typeof(item.album) !== 'undefined' ){
 			item.album.added_at = item.added_at;
 			item = item.album;
 		}
+		var images = []		
+		if (this.props.item.images) {
+			images = this.props.item.images
+		} else if (this.props.item.icons){
+			images = this.props.item.icons
+		}
+
 		return (
-			<div className="grid-item" onClick={ (e) => this.handleClick(e) }>
-				{ this.renderThumbnail() }
-				<div className="name">{ item.name }</div>
+			<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>
diff --git a/src/js/components/PlaylistGrid.js b/src/js/components/PlaylistGrid.js
index 1287a1de..880b5ae4 100755
--- a/src/js/components/PlaylistGrid.js
+++ b/src/js/components/PlaylistGrid.js
@@ -2,13 +2,12 @@
 import React, { PropTypes } from 'react'
 import { connect } from 'react-redux'
 import { createStore, bindActionCreators } from 'redux'
-import { Link } from 'react-router'
+import { Link, hashHistory } from 'react-router'
 import FontAwesome from 'react-fontawesome'
 
-import Thumbnail from './Thumbnail'
-
 import * as helpers from '../helpers'
 import * as uiActions from '../services/ui/actions'
+import GridItem from './GridItem'
 
 class PlaylistGrid extends React.Component{
 
@@ -35,25 +34,16 @@ class PlaylistGrid extends React.Component{
 		return (
 			<div className={className}>
 				{
-					this.props.playlists.map(
-						(playlist, index) => {							
-							return (
-								<Link 
-									className="grid-item"
-									to={global.baseURL+'playlist/'+playlist.uri}
-									key={index} 
-									onContextMenu={e => this.handleContextMenu(e,playlist)}>
-										<Thumbnail size="medium" images={playlist.images} />
-										<div className="name">
-											{playlist.name}
-											{this.props.show_source_icon ? <FontAwesome name={helpers.sourceIcon(playlist.uri)} className="source" fixedWidth /> : null}
-										</div>
-										<div className="secondary">
-											{playlist.tracks_total ? playlist.tracks_total+' tracks' : <span>0 tracks</span>}
-										</div>
-								</Link>
-							)
-						}
+					this.props.playlists.map(playlist => {							
+						return (
+							<GridItem
+								key={playlist.uri}
+								type="playlist"
+								item={playlist}
+								onClick={e => {hashHistory.push(global.baseURL+'playlist/'+playlist.uri)}}
+								onContextMenu={e => this.handleContextMenu(e,playlist)}
+							/>
+						)}
 					)
 				}
 			</div>