Parallax refinement; Album responsive; Pusher browser notifications

src/js/components/Parallax.js

@@ -31,6 +31,22 @@ export default class Parallax extends React.Component{
         this._mounted = true
         window.addEventListener("resize", this.handleResize);
         window.addEventListener("scroll", this.handleScroll);
+
+        if( this.props.image ){
+			this._loading = true
+			this.setState({ url: this.props.image, image: false, loading: true })
+			this.loadImage( this.props.image )
+				.then(
+					response => {
+						if( this._mounted ){
+							this._loading = false
+							this._loaded = true
+							this.setState({ url: this.props.image, image: response, loading: false })
+							this.updateCanvas( response )
+						}
+					}
+				)
+		}
 	}
 
     componentWillUnmount(){

src/js/components/PusherConnectionList.js

@@ -15,30 +15,30 @@ class PusherConnectionList extends React.Component{
 	}
 
 	componentDidMount(){
-		if( this.props.pusher.connected ){
+		if( this.props.connected ){
 			this.props.pusherActions.getConnectionList();
 		}
 	}
 
 	componentWillReceiveProps(newProps){
-		if( !this.props.pusher.connected && newProps.pusher.connected ){
+		if( !this.props.connected && newProps.connected ){
 			this.props.pusherActions.getConnectionList();
 		}
 	}
 
 	render(){
-		if( !this.props.pusher.connected ) return null;
-		if( typeof(this.props.pusher.connections) == 'undefined' || this.props.pusher.connections.length <= 0 ) return null;
+		if( !this.props.connected ) return null;
+		if( typeof(this.props.connections) == 'undefined' || this.props.connections.length <= 0 ) return null;
 
 		return (
 			<div className="pusher-connection-list">
 				{
-					this.props.pusher.connections.map( (connection, index) => {
-						var isMe = false;
-						if( connection.connectionid == this.props.pusher.connectionid ) isMe = true;
+					this.props.connections.map( (connection, index) => {
+						var is_me = false;
+						if( connection.connectionid == this.props.connectionid ) is_me = true;
 						return (
-							<div className="connection cf" key={connection.connectionid}>
-								<div className="col w30">{ connection.username } { isMe ? <span>(you)</span> : null }</div>
+							<div className={ is_me ? 'connection cf me': 'connection cf'} key={connection.connectionid}>
+								<div className="col w30">{ connection.username } { is_me ? <span>(you)</span> : null }</div>
 								<div className="col w70">
 									{ connection.ip }
 									<span className="grey-text"> ({ connection.connectionid })</span>
@@ -53,7 +53,11 @@ class PusherConnectionList extends React.Component{
 }
 
 const mapStateToProps = (state, ownProps) => {
-	return state;
+	return {
+		connected: state.pusher.connected,
+		connectionid: state.pusher.connectionid,
+		connections: state.pusher.connections
+	}
 }
 
 const mapDispatchToProps = (dispatch) => {

src/js/components/SpotifyAuthenticationFrame.js

@@ -59,20 +59,6 @@ class SpotifyAuthenticationFrame extends React.Component{
 		})
 	}
 
-	renderMe(){
-		if( !this.props.authorized || !this.props.me ) return null;
-
-		return (
-			<div className="me">
-				<Thumbnail circle={true} size="small" images={this.props.me.images} />
-				<div className="user-name">
-					Logged in as {this.props.me.display_name ? this.props.me.display_name : null }
-					&nbsp;(<Link to={'/user/'+this.props.me.uri}>{ this.props.me.id }</Link>)
-				</div>
-			</div>
-		)
-	}
-
 	renderAuthorizeButton(){
 		if( this.state.authorizing ){
 			return (
@@ -114,7 +100,6 @@ class SpotifyAuthenticationFrame extends React.Component{
 	render(){
 		return (
 			<div>
-				{ this.renderMe() }
 				{ this.renderAuthorizeButton() }
 				&nbsp;&nbsp;
 				{ this.renderRefreshButton() }
@@ -128,8 +113,7 @@ const mapStateToProps = (state, ownProps) => {
 	return {
 		authorized: state.spotify.authorized,
 		authorizing: state.spotify.authorizing,
-		refreshing_token: state.spotify.refreshing_token,
-		me: state.spotify.me
+		refreshing_token: state.spotify.refreshing_token
 	}
 }
 

src/js/components/Thumbnail.js

@@ -20,10 +20,14 @@ export default class Thumbnail extends React.Component{
 		this.mapImageSizes( nextProps );
 	}
 
-	mapImageSizes( props = this.props ){		
+	mapImageSizes( props = this.props ){
+
+		// no images
+		if( !this.props.image && !this.props.images ){
+			this.setState({ url: require('../../assets/no-image.svg') })
 
 		// single image
-		if( this.props.image ){
+		}else if( this.props.image ){
 			this.setState({ url: this.props.image })
 
 		// multiple images
@@ -36,9 +40,7 @@ export default class Thumbnail extends React.Component{
 	}
 
 	render(){
-		var style = {
-			backgroundImage: 'url("'+this.state.url+'")'
-		}
+		var style = { backgroundImage: 'url("'+this.state.url+'")' }
 		var className = 'thumbnail '+this.props.size;
 		if( this.props.circle ) className += ' circle';