secstate/Iris
Public Access
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Adding lazy-loader for images on-demand

Browse Source
This commit is contained in:
James Barnsley
2017-08-09 08:52:49 +12:00
parent 0825039d04
commit 160a9ad700
5 changed files with 71 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
src/js/components/AlbumGrid.js
View File

@ -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>

17
src/js/components/CategoryGrid.js
View File

@ -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>
);

47
src/js/components/GridItem.js
View File

@ -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>

34
src/js/components/PlaylistGrid.js
View File

@ -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>