Discover sections

src/js/components/ArtistGrid.js

@@ -17,8 +17,7 @@ export default class ArtistGrid extends React.Component{
 					{
 						this.props.artists.map(
 							(artist, index) => {
-								var link = artist.uri;
-								return <GridItem item={artist} key={index} link={'/artist/'+link} />
+								return <GridItem item={artist} key={index} link={'/artist/'+artist.uri} />
 							}
 						)
 					}

src/js/components/CategoryGrid.js

@@ -0,0 +1,30 @@
+
+import React, { PropTypes } from 'react'
+import GridItem from './GridItem'
+
+export default class CategoryGrid extends React.Component{
+
+	constructor(props) {
+		super(props);
+	}
+
+	render(){
+		if( this.props.categories ){
+			var className = "grid category-grid"
+			if( this.props.className ) className += ' '+this.props.className
+			return (
+				<div className={className}>
+					{
+						this.props.categories.map(
+							(category, index) => {
+								return <GridItem item={category} key={index} link={'/discover/categories/'+category.id} />
+							}
+						)
+					}
+				</div>
+			);
+		}
+		return null;
+	}
+}
+

src/js/components/GridItem.js

@@ -25,10 +25,12 @@ export default class GridItem extends React.Component{
 		}
 		return (
 			<div className="grid-item" onClick={ (e) => this.handleClick(e) }>
-				{ item.images ? <Thumbnail size="medium" images={item.images} /> : item.name }
+				{ item.images ? <Thumbnail size="medium" images={item.images} /> : null }
+				{ item.icons ? <Thumbnail size="medium" images={item.icons} /> : null }
 				<div className="name">{ item.name }</div>
 				<div className="secondary">
 					{ item.artists ? <ArtistSentence artists={ item.artists } /> : null }
+					{ item.type == 'playlist' ? item.tracks.total+' tracks' : null }
 				</div>
 			</div>
 		);

src/js/components/Parallax.js

@@ -15,10 +15,12 @@ export default class Parallax extends React.Component{
 				width: 0,
 				height: 0
 			},
-			original: {},
 			image: {},
-			imageObject: {}
+			loaded: false
 		}
+
+		// we need to manually bind this as eventListener doesn't work with anonymous functions
+		this.handleResize = this.handleResize.bind(this);
 	}
 
 	componentDidMount(){
@@ -26,14 +28,22 @@ export default class Parallax extends React.Component{
 		this.loadImage( url )
 			.then(
 				response => {
-					this.setState({ image: response })
+					this.setState({ image: response, loaded: true })
 					this.updateCanvas( response )
 				}
 			)
 
-		$(window).resize(() => this.updateCanvas( this.state.image ));
+        window.addEventListener("resize", this.handleResize);
 	}
 
+    componentWillUnmount() {
+        window.removeEventListener("resize", this.handleResize);
+    }
+
+    handleResize(){
+    	this.updateCanvas( this.state.image );
+    }
+
 	loadImage( url ){		
 		return new Promise( (resolve, reject) => {
 
@@ -137,7 +147,12 @@ export default class Parallax extends React.Component{
 	render(){
 		return (
 			<div className="parallax">
-				<canvas id="parallax-canvas" width={this.state.canvas.width} height={this.state.canvas.height}></canvas>
+				<canvas 
+					id="parallax-canvas" 
+					className={ this.state.loaded ? 'loaded' : null } 
+					width={this.state.canvas.width} 
+					height={this.state.canvas.height}>
+				</canvas>
 			</div>
 		);
 	}

src/js/components/PlaylistGrid.js

@@ -0,0 +1,30 @@
+
+import React, { PropTypes } from 'react'
+import GridItem from './GridItem'
+
+export default class PlaylistGrid extends React.Component{
+
+	constructor(props) {
+		super(props);
+	}
+
+	render(){
+		if( this.props.playlists ){
+			var className = "grid playlist-grid"
+			if( this.props.className ) className += ' '+this.props.className
+			return (
+				<div className={className}>
+					{
+						this.props.playlists.map(
+							(playlist, index) => {
+								return <GridItem item={playlist} key={index} link={'/playlist/'+playlist.uri} />
+							}
+						)
+					}
+				</div>
+			);
+		}
+		return null;
+	}
+}
+

src/js/components/Sidebar.js

@@ -38,6 +38,18 @@ class Sidebar extends React.Component{
 
 					<section>
 						<title>Discover</title>
+						<Link activeClassName="active" to="/discover">
+							<Icon name="compass" className="white" />
+							Discover
+						</Link>
+						<Link activeClassName="active" to="/discover/categories">
+							<Icon name="grid" className="white" />
+							Genre / Mood
+						</Link>
+						<Link activeClassName="active" to="/discover/featured">
+							<Icon name="star" className="white" />
+							Featured playlists
+						</Link>
 					</section>
 
 					<section>

src/js/index.js

@@ -19,6 +19,11 @@ import Playlist from './views/Playlist'
 import Queue from './views/Queue'
 import Settings from './views/Settings'
 
+import Discover from './views/discover/Discover'
+import DiscoverFeatured from './views/discover/DiscoverFeatured'
+import DiscoverCategories from './views/discover/DiscoverCategories'
+import DiscoverCategory from './views/discover/DiscoverCategory'
+
 import LibraryArtists from './views/library/LibraryArtists'
 import LibraryAlbums from './views/library/LibraryAlbums'
 import LibraryTracks from './views/library/LibraryTracks'
@@ -32,15 +37,20 @@ ReactDOM.render(
      			<IndexRoute component={Queue} />
 				<Route path="/queue" component={Queue} />
 	
-				<Route path="library/artists" component={LibraryArtists} />
-				<Route path="library/albums" component={LibraryAlbums} />
-				<Route path="library/tracks" component={LibraryTracks} />
-				<Route path="library/playlists" component={LibraryPlaylists} />
+				<Route path="/discover" component={Discover} />
+				<Route path="/discover/featured" component={DiscoverFeatured} />
+				<Route path="/discover/categories" component={DiscoverCategories} />
+				<Route path="/discover/categories/:id" component={DiscoverCategory} />
+
+				<Route path="/library/artists" component={LibraryArtists} />
+				<Route path="/library/albums" component={LibraryAlbums} />
+				<Route path="/library/tracks" component={LibraryTracks} />
+				<Route path="/library/playlists" component={LibraryPlaylists} />
 				
-				<Route path="album/:uri" component={Album} />
-				<Route path="artist/:uri" component={Artist} />
-				<Route path="playlist/:uri" component={Playlist} />
-				<Route path="settings" component={Settings} />
+				<Route path="/album/:uri" component={Album} />
+				<Route path="/artist/:uri" component={Artist} />
+				<Route path="/playlist/:uri" component={Playlist} />
+				<Route path="/settings" component={Settings} />
 
 			</Route>
 		</Router>

src/js/services/spotify/actions.js

@@ -330,7 +330,7 @@ export function getLibraryAlbums(){
 }
 
 export function getLibraryTracks(){
-	return (dispatch, getState) => {
+    return (dispatch, getState) => {
 
         dispatch({ type: 'SPOTIFY_LIBRARY_TRACKS_LOADED', data: false });
 
@@ -341,6 +341,81 @@ export function getLibraryTracks(){
                     data: response
                 });
             });
+    }
+}
+
+export function getFeaturedPlaylists(){
+    return (dispatch, getState) => {
+
+        dispatch({ type: 'SPOTIFY_FEATURED_PLAYLISTS_LOADED', data: false });
+
+        var date = new Date();
+        var year = date.getFullYear();
+        var month = date.getMonth();
+        if( month < 10 ) month = '0'+month;
+        var day = date.getDay();
+        if( day < 10 ) day = '0'+day;
+        var hour = date.getHours();
+        if( hour < 10 ) hour = '0'+hour;
+        var min = date.getMinutes();
+        if( min < 10 ) min = '0'+min;
+        var sec = date.getSeconds();
+        if( sec < 10 ) sec = '0'+sec;
+
+        var timestamp = year+'-'+month+'-'+day+'T'+hour+':'+min+':'+sec;
+
+        sendRequest( dispatch, getState, 'browse/featured-playlists?timestamp='+timestamp+'&country='+getState().spotify.country+'&limit=50' )
+            .then( response => {
+                dispatch({
+                    type: 'SPOTIFY_FEATURED_PLAYLISTS_LOADED',
+                    data: response
+                });
+            });
+    }
+}
+
+export function getCategories(){
+    return (dispatch, getState) => {
+
+        dispatch({ type: 'SPOTIFY_CATEGORIES_LOADED', data: false });
+
+        sendRequest( dispatch, getState, 'browse/categories?limit=50' )
+            .then( response => {
+                dispatch({
+                    type: 'SPOTIFY_CATEGORIES_LOADED',
+                    data: response.categories
+                });
+            });
+    }
+}
+
+export function getCategory( id ){
+    return (dispatch, getState) => {
+
+        dispatch({ type: 'SPOTIFY_CATEGORY_LOADED', data: false });
+
+        sendRequest( dispatch, getState, 'browse/categories/'+id )
+            .then( response => {
+                dispatch({
+                    type: 'SPOTIFY_CATEGORY_LOADED',
+                    data: response
+                });
+            });
+    }
+}
+
+export function getCategoryPlaylists( id ){
+	return (dispatch, getState) => {
+
+        dispatch({ type: 'SPOTIFY_CATEGORY_PLAYLISTS_LOADED', data: false });
+
+        sendRequest( dispatch, getState, 'browse/categories/'+id+'/playlists?limit=50' )
+            .then( response => {
+                dispatch({
+                    type: 'SPOTIFY_CATEGORY_PLAYLISTS_LOADED',
+                    data: response.playlists
+                });
+            });
 	}
 }
 

src/js/services/spotify/reducer.js

@@ -59,16 +59,28 @@ export default function reducer(spotify = {}, action){
             return Object.assign({}, spotify, { artist_albums: action.data });
 
         case 'SPOTIFY_LIBRARY_PLAYLISTS_LOADED':
-            return Object.assign({}, spotify, { libraryPlaylists: action.data });
+            return Object.assign({}, spotify, { library_playlists: action.data });
 
         case 'SPOTIFY_LIBRARY_ARTISTS_LOADED':
-            return Object.assign({}, spotify, { libraryArtists: action.data });
+            return Object.assign({}, spotify, { library_artists: action.data });
 
         case 'SPOTIFY_LIBRARY_ALBUMS_LOADED':
-            return Object.assign({}, spotify, { libraryAlbums: action.data });
+            return Object.assign({}, spotify, { library_albums: action.data });
 
         case 'SPOTIFY_LIBRARY_TRACKS_LOADED':
-            return Object.assign({}, spotify, { libraryTracks: action.data });
+            return Object.assign({}, spotify, { library_tracks: action.data });
+
+        case 'SPOTIFY_FEATURED_PLAYLISTS_LOADED':
+            return Object.assign({}, spotify, { featured_playlists: action.data });
+
+        case 'SPOTIFY_CATEGORIES_LOADED':
+            return Object.assign({}, spotify, { categories: action.data });
+
+        case 'SPOTIFY_CATEGORY_LOADED':
+            return Object.assign({}, spotify, { category: action.data });
+
+        case 'SPOTIFY_CATEGORY_PLAYLISTS_LOADED':
+            return Object.assign({}, spotify, { category_playlists: action.data });
 
         default:
             return spotify

src/js/views/Album.js

@@ -30,7 +30,7 @@ class Album extends React.Component{
 	render(){
 		if( this.props.spotify.album ){
 			return (
-				<div>
+				<div className="view album-view">
 					<Header
 						icon="cd"
 						title={ this.props.spotify.album.name }

src/js/views/Artist.js

@@ -33,7 +33,7 @@ class Artist extends React.Component{
 	render(){
 		if( this.props.spotify.artist ){
 			return (
-				<div>
+				<div className="view artist-view">
 					<Parallax images={ this.props.spotify.artist.images } />
 
 					<div className="intro">
@@ -49,11 +49,13 @@ class Artist extends React.Component{
 
 					<div className="col w5"></div>
 
-					<div className="col w25 cf">
+					<div className="col w25">
 						<h3>Related artists</h3>
 						{ this.props.spotify.artist.related_artists ? <ArtistList artists={ this.props.spotify.artist.related_artists.slice(0,6) } /> : null }
 					</div>
 
+					<div className="cf"></div>
+
 					<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>

src/js/views/Playlist.js

@@ -30,7 +30,7 @@ class Playlist extends React.Component{
 	render(){
 		if( this.props.spotify.playlist ){
 			return (
-				<div>
+				<div className="view playlist-view">
 					<Header icon="playlist" title={ this.props.spotify.playlist.name } />
 					<TrackList tracks={this.props.spotify.playlist.tracks.items} />
 				</div>

src/js/views/Queue.js

@@ -61,7 +61,7 @@ class Queue extends React.Component{
 
 	render(){
 		return (
-			<div>
+			<div className="view queue-view">
 				<Header
 					icon="play"
 					title="Now playing"

src/js/views/Settings.js

@@ -40,7 +40,7 @@ class Settings extends React.Component{
 
 	render(){
 		return (
-			<div>
+			<div className="view settings-view">
 				<Header
 					icon="cog"
 					title="Settings"

src/js/views/discover/Discover.js

@@ -0,0 +1,58 @@
+
+import React, { PropTypes } from 'react'
+import { connect } from 'react-redux'
+import { bindActionCreators } from 'redux'
+
+import Header from '../../components/Header'
+
+import * as spotifyActions from '../../services/spotify/actions'
+
+class Discover extends React.Component{
+
+	constructor(props) {
+		super(props);
+	}
+
+	// on render
+	componentDidMount(){
+		this.props.spotifyActions.getPlaylist( this.props.params.uri );
+	}
+
+	// when props changed
+	componentWillReceiveProps( nextProps ){
+		if( nextProps.params.uri != this.props.params.uri ){
+			this.props.spotifyActions.getPlaylist( nextProps.params.uri );
+		}
+	}
+
+	render(){
+		if( this.props.spotify.playlist ){
+			return (
+				<div className="view discover-view">
+					<Header icon="compass" title="Discover" />
+					<h1>To come</h1>
+				</div>
+			);
+		}
+		return null;
+	}
+}
+
+
+/**
+ * Export our component
+ *
+ * We also integrate our global store, using connect()
+ **/
+
+const mapStateToProps = (state, ownProps) => {
+	return state;
+}
+
+const mapDispatchToProps = (dispatch) => {
+	return {
+		spotifyActions: bindActionCreators(spotifyActions, dispatch)
+	}
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(Discover)

src/js/views/discover/DiscoverCategories.js

@@ -0,0 +1,49 @@
+
+import React, { PropTypes } from 'react'
+import { connect } from 'react-redux'
+import { bindActionCreators } from 'redux'
+
+import Header from '../../components/Header'
+import CategoryGrid from '../../components/CategoryGrid'
+
+import * as spotifyActions from '../../services/spotify/actions'
+
+class DiscoverCategories extends React.Component{
+
+	constructor(props) {
+		super(props);
+	}
+
+	// on render
+	componentDidMount(){
+		this.props.spotifyActions.getCategories();
+	}
+
+	render(){
+		return (
+			<div className="view discover-categories-view">
+				<Header icon="grid" title="Genre / Mood" />
+				{ this.props.spotify.categories ? <CategoryGrid categories={this.props.spotify.categories.items} /> : null }
+			</div>
+		);
+	}
+}
+
+
+/**
+ * Export our component
+ *
+ * We also integrate our global store, using connect()
+ **/
+
+const mapStateToProps = (state, ownProps) => {
+	return state;
+}
+
+const mapDispatchToProps = (dispatch) => {
+	return {
+		spotifyActions: bindActionCreators(spotifyActions, dispatch)
+	}
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(DiscoverCategories)

src/js/views/discover/DiscoverCategory.js

@@ -0,0 +1,58 @@
+
+import React, { PropTypes } from 'react'
+import { connect } from 'react-redux'
+import { bindActionCreators } from 'redux'
+
+import Header from '../../components/Header'
+import PlaylistGrid from '../../components/PlaylistGrid'
+
+import * as spotifyActions from '../../services/spotify/actions'
+
+class DiscoverCategory extends React.Component{
+
+	constructor(props) {
+		super(props);
+	}
+
+	componentDidMount(){
+		this.props.spotifyActions.getCategory( this.props.params.id );
+		this.props.spotifyActions.getCategoryPlaylists( this.props.params.id );
+	}
+
+	componentWillReceiveProps( nextProps ){
+		if( nextProps.params.id != this.props.params.id ){
+			this.props.spotifyActions.getCategory( nextProps.params.id );
+			this.props.spotifyActions.getCategoryPlaylists( nextProps.params.id );
+		}
+	}
+
+	render(){
+		if( !this.props.spotify.category ) return null;
+
+		return (
+			<div className="view discover-categories-view">
+				<Header icon="grid" title={this.props.spotify.category.name} />
+				{ this.props.spotify.category_playlists ? <PlaylistGrid playlists={this.props.spotify.category_playlists.items} /> : null }
+			</div>
+		);
+	}
+}
+
+
+/**
+ * Export our component
+ *
+ * We also integrate our global store, using connect()
+ **/
+
+const mapStateToProps = (state, ownProps) => {
+	return state;
+}
+
+const mapDispatchToProps = (dispatch) => {
+	return {
+		spotifyActions: bindActionCreators(spotifyActions, dispatch)
+	}
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(DiscoverCategory)

src/js/views/discover/DiscoverFeatured.js

@@ -0,0 +1,49 @@
+
+import React, { PropTypes } from 'react'
+import { connect } from 'react-redux'
+import { bindActionCreators } from 'redux'
+
+import Header from '../../components/Header'
+import PlaylistGrid from '../../components/PlaylistGrid'
+
+import * as spotifyActions from '../../services/spotify/actions'
+
+class DiscoverFeatured extends React.Component{
+
+	constructor(props) {
+		super(props);
+	}
+
+	// on render
+	componentDidMount(){
+		this.props.spotifyActions.getFeaturedPlaylists();
+	}
+
+	render(){
+		return (
+			<div className="view discover-featured-view">
+				<Header icon="star" title="Featured playlists" />
+				{ this.props.spotify.featuredPlaylists ? <PlaylistGrid playlists={this.props.spotify.featuredPlaylists.playlists.items} /> : null }
+			</div>
+		);
+	}
+}
+
+
+/**
+ * Export our component
+ *
+ * We also integrate our global store, using connect()
+ **/
+
+const mapStateToProps = (state, ownProps) => {
+	return state;
+}
+
+const mapDispatchToProps = (dispatch) => {
+	return {
+		spotifyActions: bindActionCreators(spotifyActions, dispatch)
+	}
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(DiscoverFeatured)

src/js/views/library/LibraryAlbums.js

@@ -22,18 +22,15 @@ class LibraryAlbums extends React.Component{
 	}
 
 	render(){
-		if( this.props.spotify.libraryAlbums ){
-			return (
-				<div>
-					<Header
-						icon="cd"
-						title="My albums"
-						/>
-					<AlbumGrid albums={this.props.spotify.libraryAlbums.items} />
-				</div>
-			);
-		}
-		return null;
+		return (
+			<div className="view library-albums-view">
+				<Header
+					icon="cd"
+					title="My albums"
+					/>
+				{ this.props.spotify.library_albums ? <AlbumGrid albums={this.props.spotify.library_albums.items} /> : null }
+			</div>
+		);
 	}
 }
 

src/js/views/library/LibraryArtists.js

@@ -22,18 +22,15 @@ class LibraryArtists extends React.Component{
 	}
 
 	render(){
-		if( this.props.spotify.libraryArtists ){
-			return (
-				<div>
-					<Header
-						icon="mic"
-						title="My artists"
-						/>
-					<ArtistGrid artists={this.props.spotify.libraryArtists.artists.items} />
-				</div>
-			);
-		}
-		return null;
+		return (
+			<div className="view library-artists-view">
+				<Header
+					icon="mic"
+					title="My artists"
+					/>
+				{ this.props.spotify.library_artists ? <ArtistGrid artists={this.props.spotify.library_artists.artists.items} /> : null }
+			</div>
+		);
 	}
 }
 

src/js/views/library/LibraryPlaylists.js

@@ -37,8 +37,8 @@ class LibraryPlaylists extends React.Component{
 			Object.assign(playlists, this.props.mopidy.playlists)
 		}
 
-		if( this.props.spotify.libraryPlaylists ){
-			Object.assign(playlists, this.props.spotify.libraryPlaylists.items)
+		if( this.props.spotify.library_playlists ){
+			Object.assign(playlists, this.props.spotify.library_playlists.items)
 		}
 
 		return playlists;
@@ -67,7 +67,7 @@ class LibraryPlaylists extends React.Component{
 
 	render(){
 		return (
-			<div>
+			<div className="view library-playlists-view">
 				<Header
 					icon="playlist"
 					title="My playlists"

src/js/views/library/LibraryTracks.js

@@ -22,15 +22,12 @@ class LibraryTracks extends React.Component{
 	}
 
 	render(){
-		if( this.props.spotify.libraryTracks ){
-			return (
-				<div>
-					<Header icon="music" title="My tracks" />
-					<TrackList tracks={this.props.spotify.libraryTracks.items} />
-				</div>
-			);
-		}
-		return null;
+		return (
+			<div className="view library-tracks-view">
+				<Header icon="music" title="My tracks" />
+				{ this.props.spotify.library_tracks ? <TrackList tracks={this.props.spotify.library_tracks.items} /> : null }
+			</div>
+		);
 	}
 }
 

src/scss/components/_grid.scss

@@ -34,4 +34,21 @@
 			opacity: 0.75;
 		}
 	}
+
+	&.category-grid {
+		.grid-item {
+			position: relative;
+
+			.name {
+				position: absolute;
+				bottom: 15%;
+				left: 0;
+				right: 0;
+				text-align: center;
+				font-size: 14px;
+				font-weight: 600;
+				color: #FFFFFF;
+			}
+		}
+	}
 }

src/scss/components/_images.scss

@@ -28,10 +28,16 @@
 	height: 50vh;
 	width: 100%;
 	overflow: hidden;
-	background: $light_grey;
+	background: $dark_grey;
 
 	canvas {
 		width: 100%;
 		height: 100%;
+		opacity: 0;
+		@include animate( 0.4s );
+
+		&.loaded {
+			opacity: 0.5;
+		}
 	}
 }

src/scss/global/_variables.scss

@@ -1,6 +1,7 @@
 
 $turquoise: #08d58f;
 $light_grey: #DDDDDD;
+$dark_grey: #333333;
 $secondary_grey: #888888;
 
 @mixin one_line_text {
@@ -15,4 +16,11 @@ $secondary_grey: #888888;
 		clear: both;
 		display: block;
 	}
+}
+
+@mixin animate( $speed: 0.2s ){
+	-webkit-transition: all $speed ease-in-out;
+	   -moz-transition: all $speed ease-in-out;
+		 -o-transition: all $speed ease-in-out;
+		    transition: all $speed ease-in-out; 
 }

src/scss/views/_artist.scss

@@ -1 +1,14 @@
 
+.artist-view {
+	.intro {
+		position: relative;
+		margin-bottom: 20px;
+		@include clearfix;
+
+		.thumbnail {
+			max-width: 200px;
+			margin: -100px 20px 0 40px;
+			float: left;
+		}
+	}
+}