Thumbnails; Refresh button

src/js/components/AlbumGrid.js

@@ -10,8 +10,10 @@ export default class AlbumGrid extends React.Component{
 
 	render(){
 		if( this.props.albums ){
+			var className = "grid album-grid"
+			if( this.props.className ) className += ' '+this.props.className
 			return (
-				<ul className="grid album-grid">
+				<div className={className}>
 					{
 						this.props.albums.map(
 							(album, index) => {
@@ -21,7 +23,7 @@ export default class AlbumGrid extends React.Component{
 							}
 						)
 					}
-				</ul>
+				</div>
 			);
 		}
 		return null;

src/js/components/ArtistGrid.js

@@ -10,8 +10,10 @@ export default class ArtistGrid extends React.Component{
 
 	render(){
 		if( this.props.artists ){
+			var className = "grid artist-grid"
+			if( this.props.className ) className += ' '+this.props.className
 			return (
-				<ul className="grid artist-grid">
+				<div className={className}>
 					{
 						this.props.artists.map(
 							(artist, index) => {
@@ -20,7 +22,7 @@ export default class ArtistGrid extends React.Component{
 							}
 						)
 					}
-				</ul>
+				</div>
 			);
 		}
 		return null;

src/js/components/Parallax.js

@@ -11,24 +11,27 @@ export default class Parallax extends React.Component{
 			scrollTop: 0,
 			windowWidth: 0,
 			windowHeight: 0,
-			source: {},
 			canvas: {
 				width: 0,
 				height: 0
 			},
-			image: {}
+			original: {},
+			image: {},
+			imageObject: {}
 		}
 	}
 
 	componentDidMount(){
-
-		this.loadImage( helpers.SizedImages( this.props.images ).huge )
+		var url = helpers.SizedImages( this.props.images ).huge;
+		this.loadImage( url )
 			.then(
-				response => this.setState({ image: response, source: {} })
+				response => {
+					this.setState({ image: response })
+					this.updateCanvas( response )
+				}
 			)
 
-		this.updateCanvas()
-		$(window).resize(() => this.updateCanvas());
+		$(window).resize(() => this.updateCanvas( this.state.image ));
 	}
 
 	loadImage( url ){		
@@ -38,12 +41,19 @@ export default class Parallax extends React.Component{
 			imageObject.src = url;
 
 			imageObject.onload = function(){
-				resolve( imageObject )
+				var image = {
+					width: imageObject.naturalWidth,
+					height: imageObject.naturalHeight,
+					original_width: imageObject.naturalWidth,
+					original_height: imageObject.naturalHeight,
+					object: imageObject
+				}
+				resolve( image )
 			}
 		})
 	}
 
-	updateCanvas(){
+	updateCanvas( image ){
 		var canvasWidth = $('.parallax').outerWidth();
 		var canvasHeight = $('.parallax').outerHeight();
 		if( this.state.canvas.width != canvasWidth || this.state.canvas.height != canvasHeight ){
@@ -54,53 +64,40 @@ export default class Parallax extends React.Component{
 				}
 			})
 		}
-		console.log( this.state );
+		this.renderCanvas( image );
 	}
 
-	update(){
+	renderCanvas( image ){
 
 		let self = this;
-			
-		var parallax = $('.parallax');
 		var canvasDOM = document.getElementById('parallax-canvas');
 		var context = canvasDOM.getContext('2d');
 		
-
-		var image = {};
-		Object.assign(image, self.state.source);
-
-		// set our canvas dimensions (if necessary)
-		var canvasWidth = $('#parallax-canvas').outerWidth();
-		var canvasHeight = $('#parallax-canvas').outerHeight();
-		if( context.canvas.width != canvasWidth || context.canvas.height != canvasHeight ){
-			context.canvas.width = canvasWidth;
-			context.canvas.height = canvasHeight;
-		}
-		
 		// zoom image to fill canvas, widthwise
-		if( image.width < canvasWidth || image.width > canvasWidth ){
-			var scale = canvasWidth / image.width;
+		if( image.width < this.state.canvas.width || image.width > this.state.canvas.width ){
+			var scale = this.state.canvas.width / image.width;
 			image.width = image.width * scale;
 			image.height = image.height * scale;
 		}
 		
 		// now check for fill heightwise, and zoom in if necessary
-		if( image.height < canvasHeight ){
-			var scale = canvasHeight / image.height;
+		if( image.height < this.state.canvas.height ){
+			var scale = this.state.canvas.height / image.height;
 			image.width = image.width * scale;
 			image.height = image.height * scale;
 		}
 		
 		// figure out where we want the image to be, based on scroll position
-		var percent = Math.round( self.state.scrollTop / canvasHeight * 100 );
-		var position = Math.round( (canvasHeight / 2) * (percent/100) ) - 100;
+		var percent = Math.round( self.state.scrollTop / this.state.canvas.height * 100 );
+		var position = Math.round( (this.state.canvas.height / 2) * (percent/100) ) - 100;
 		
-		image.x = ( canvasWidth / 2 ) - ( image.width / 2 );
-		image.y = ( ( canvasHeight / 2 ) - ( image.height / 2 ) ) + ( ( percent / 100 ) * 100);
+		image.x = ( this.state.canvas.width / 2 ) - ( image.width / 2 );
+		image.y = ( ( this.state.canvas.height / 2 ) - ( image.height / 2 ) ) + ( ( percent / 100 ) * 100);
 
 		// actually draw the image on the canvas
-		context.drawImage(imageObject, image.x, image.y, image.width, image.height);
+		context.drawImage(image.object, image.x, image.y, image.width, image.height);
 
+		// now update our component
 		self.setState({ image: image });
 		
 		// poll for scroll changes

src/js/components/SpotifyAuthenticationFrame.js

@@ -1,8 +1,11 @@
 
 import React, { PropTypes } from 'react'
 import { connect } from 'react-redux'
+import { Link } from 'react-router'
 import { createStore, bindActionCreators } from 'redux'
+
 import FontAwesome from 'react-fontawesome'
+import Thumbnail from './Thumbnail'
 
 import * as actions from '../services/spotify/actions'
 
@@ -51,11 +54,13 @@ class SpotifyAuthenticationFrame extends React.Component{
 	renderMe(){
 		if( !this.props.spotify.me ) return null;
 
-		if( this.props.spotify.me.display_name ){
-			return <span>Logged in as { this.props.spotify.me.display_name }</span>
-		}else{
-			return <span>Logged in as { this.props.spotify.me.id }</span>
-		}
+		return (
+			<div>
+				<Thumbnail circle={true} size="small" images={this.props.spotify.me.images} />
+				Logged in as {this.props.spotify.me.display_name ? this.props.spotify.me.display_name : null }
+				<Link to={'/user/'+this.props.spotify.me.id}>{ this.props.spotify.me.id }</Link>
+			</div>
+		)
 	}
 
 	renderAuthorizeButton(){
@@ -92,7 +97,7 @@ class SpotifyAuthenticationFrame extends React.Component{
 			);
 		}else{
 			return (
-				<button onClick={() => this.props.actions.refreshToken()}>Refresh token</button>
+				<button onClick={() => this.props.actions.refreshingToken()}>Refresh token</button>
 			);
 		}
 	}

src/js/views/Artist.js

@@ -35,20 +35,27 @@ class Artist extends React.Component{
 			return (
 				<div>
 					<Parallax images={ this.props.spotify.artist.images } />
+
 					<div className="intro">
 						<Thumbnail size="huge" images={ this.props.spotify.artist.images } />
 						<h1>{ this.props.spotify.artist.name }</h1>
 						<p>{ this.props.spotify.artist.followers.total.toLocaleString() } followers</p>
 					</div>
-					<div className="col c3w2">
-						<h3>Top tracks</h3>
+
+					<div className="col w70">
+						<h3 className="left-padding">Top tracks</h3>
 						{ this.props.spotify.artist.tracks ? <TrackList tracks={ this.props.spotify.artist.tracks } /> : null }
 					</div>
-					<div className="col c3w1 cf">
+
+					<div className="col w5"></div>
+
+					<div className="col w25 cf">
 						<h3>Related artists</h3>
 						{ this.props.spotify.artist.related_artists ? <ArtistList artists={ this.props.spotify.artist.related_artists.slice(0,6) } /> : null }
 					</div>
-					{ this.props.spotify.artist_albums ? <AlbumGrid albums={ this.props.spotify.artist_albums.items } /> : null }
+
+					<h3 className="left-padding">Albums</h3>
+					{ this.props.spotify.artist_albums ? <AlbumGrid className="no-top-padding" albums={ this.props.spotify.artist_albums.items } /> : null }
 				</div>
 			);
 		}