diff --git a/src/js/components/Parallax.js b/src/js/components/Parallax.js index 4d9913d6..03c85b32 100755 --- a/src/js/components/Parallax.js +++ b/src/js/components/Parallax.js @@ -1,12 +1,13 @@ import React, { PropTypes } from 'react' -import * as helpers from '../helpers' export default class Parallax extends React.Component{ constructor(props) { super(props); + this._loading = false + this.state = { scrollTop: 0, windowWidth: 0, @@ -16,7 +17,7 @@ export default class Parallax extends React.Component{ height: 0 }, image: {}, - loaded: false, + loading: false, url: false } @@ -26,33 +27,29 @@ export default class Parallax extends React.Component{ } componentDidMount(){ - var url = helpers.sizedImages( this.props.images ).huge; - this.loadImage( url ) - .then( - response => { - this.setState({ url: url, image: response, loaded: true }) - this.updateCanvas( response ) - } - ) - + this._mounted = true window.addEventListener("resize", this.handleResize); window.addEventListener("scroll", this.handleScroll); } componentWillUnmount(){ + this._mounted = false window.removeEventListener("resize", this.handleResize); window.removeEventListener("scroll", this.handleScroll); } componentWillReceiveProps( nextProps ){ - if( nextProps.images.length != this.props.images.length ){ - var url = helpers.sizedImages( nextProps.images ).huge; - this.setState({ url: url, image: false, loaded: false }) - this.loadImage( url ) + if( ( !this.props.url || nextProps.image != this.props.url ) && !this._loading ){ + this._loading = true + this.setState({ url: nextProps.image, image: false, loading: true }) + this.loadImage( nextProps.image ) .then( response => { - this.setState({ url: url, image: response, loaded: true }) - this.updateCanvas( response ) + if( this._mounted ){ + this._loading = false + this.setState({ url: nextProps.image, image: response, loading: false }) + this.updateCanvas( response ) + } } ) } @@ -70,7 +67,7 @@ export default class Parallax extends React.Component{ ) } - loadImage( url ){ + loadImage( url ){ return new Promise( (resolve, reject) => { var imageObject = new Image(); @@ -175,7 +172,7 @@ export default class Parallax extends React.Component{
diff --git a/src/js/components/Thumbnail.js b/src/js/components/Thumbnail.js index 7a454deb..616e4609 100755 --- a/src/js/components/Thumbnail.js +++ b/src/js/components/Thumbnail.js @@ -8,10 +8,7 @@ export default class Thumbnail extends React.Component{ super(props); this.state = { - small: false, - medium: false, - large: false, - huge: false + url: require('../../assets/no-image.svg') } } @@ -20,29 +17,27 @@ export default class Thumbnail extends React.Component{ } componentWillReceiveProps( nextProps ){ - this.mapImageSizes( nextProps.images ); + this.mapImageSizes( nextProps ); } - mapImageSizes( images = this.props.images ){ - var state = this.state; + mapImageSizes( props = this.props ){ - if( images.length <= 0 ){ - state = { - small: require('../../assets/no-image.svg'), - medium: require('../../assets/no-image.svg'), - large: require('../../assets/no-image.svg'), - huge: require('../../assets/no-image.svg') - } - }else{ - state = helpers.sizedImages( images ); + // single image + if( this.props.image ){ + this.setState({ url: this.props.image }) + + // multiple images + }else if( this.props.images && this.props.images.length > 0 ){ + var images = helpers.sizedImages( this.props.images ) + var size = 'medium' + if( this.props.size ) size = this.props.size + this.setState({ url: images[size] }) } - - this.setState( state ); } render(){ var style = { - backgroundImage: 'url("'+this.state[this.props.size]+'")' + backgroundImage: 'url("'+this.state.url+'")' } var className = 'thumbnail '+this.props.size; if( this.props.circle ) className += ' circle'; diff --git a/src/js/views/Artist.js b/src/js/views/Artist.js index 935a7f80..a506be47 100755 --- a/src/js/views/Artist.js +++ b/src/js/views/Artist.js @@ -140,8 +140,8 @@ class Artist extends React.Component{ if( !this.props.artist ) return null var scheme = helpers.uriSource( this.props.params.uri ); - var images = [] - if( this.props.artist.images ) images = this.props.artist.images + var image = false + if( this.props.artist.images ) image = helpers.sizedImages( this.props.artist.images ).huge return (
@@ -150,8 +150,8 @@ class Artist extends React.Component{
- - + +