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 (
{
- this.props.albums.map(
- (album, index) => {
- return (
-
this.handleClick(e,global.baseURL+'album/'+album.uri) }
- onContextMenu={e => this.handleContextMenu(e,album)}>
-
- {album.name ?
- {album.name}
- {this.props.show_source_icon ? : null}
-
:
{album.uri}
}
-
- {album.artists ?
: null}
-
-
- )
- }
+ this.props.albums.map(album => {
+ return (
+
{hashHistory.push(global.baseURL+'album/'+album.uri)}}
+ onContextMenu={e => this.handleContextMenu(e,album)}
+ />
+ )}
)
}
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 (
{
- this.props.categories.map(
- (category, index) => {
- return
- }
- )
+ this.props.categories.map(category => {
+ return (
+ {hashHistory.push(global.baseURL+'discover/categories/'+category.id)}}
+ />
+ )
+ })
}
);
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
- if( this.props.item.icons ) return
- return
+ 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 (
- { item.tracks_total ? item.tracks_total+' tracks' : null }
- { item.can_edit ? : null }
+ {item.tracks_total ? item.tracks_total+' tracks' : null}
+ {item.can_edit ? : null}
)
break
@@ -41,7 +43,15 @@ export default class GridItem extends React.Component{
case 'artist':
return (
- { item.followers ? item.followers.total.toLocaleString()+' followers' : item.albums_uris.length+' albums' }
+ {item.followers ? item.followers.total.toLocaleString()+' followers' : item.albums_uris.length+' albums'}
+
+ )
+ break
+
+ case 'album':
+ return (
+
+ {item.artists ? : null}
)
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 (
- this.handleClick(e) }>
- { this.renderThumbnail() }
-
{ item.name }
+
this.handleClick(e)} onContextMenu={e => this.handleContextMenu(e)}>
+
}>
+
+
+
{item.name ? item.name : item.uri}
{ this.renderSecondary(item) }
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 (
{
- this.props.playlists.map(
- (playlist, index) => {
- return (
-
this.handleContextMenu(e,playlist)}>
-
-
- {playlist.name}
- {this.props.show_source_icon ? : null}
-
-
- {playlist.tracks_total ? playlist.tracks_total+' tracks' : 0 tracks}
-
-
- )
- }
+ this.props.playlists.map(playlist => {
+ return (
+
{hashHistory.push(global.baseURL+'playlist/'+playlist.uri)}}
+ onContextMenu={e => this.handleContextMenu(e,playlist)}
+ />
+ )}
)
}