Merging into one

src/js/components/AddSeedField.js

@@ -78,12 +78,12 @@ class AddSeedField extends React.Component{
 	}
 
 	results(){
-		if (typeof(this.props.results) === 'undefined'){
+		if (this.props.results === undefined){
-			return null
+			return null;
-		} else if (typeof(this.props.results[this.id]) === 'undefined'){
+		} else if (this.props.results[this.id] === undefined){
-			return null
+			return null;
 		} else {
-			return this.props.results[this.id]
+			return this.props.results[this.id];
 		}
 	}
 
@@ -137,7 +137,7 @@ class AddSeedField extends React.Component{
 
 const mapStateToProps = (state, ownProps) => {
 	return {
-		genres: (state.ui.genres ? state.ui.genres : null),
+		genres: (state.spotify.genres ? state.spotify.genres : null),
 		results: (state.spotify.autocomplete_results ? state.spotify.autocomplete_results : {})
 	}
 }

src/js/services/spotify/actions.js

@@ -653,7 +653,7 @@ export function getAutocompleteResults(field_id, query, types = ['album','artist
                 response => {
                     var genres = []
                     if (genre_included){
-                        var available_genres = getState().ui.genres
+                        var available_genres = getState().spotify.genres
                         if (available_genres){
                             for (var i = 0; i < available_genres.length; i++){
                                 if (available_genres[i].includes(query)){
@@ -666,6 +666,35 @@ export function getAutocompleteResults(field_id, query, types = ['album','artist
                             }
                         }
                     }
+                    
+                    if (response.artists && response.artists.items){
+                        dispatch({
+                            type: 'ARTISTS_LOADED',
+                            artists: response.artists.items
+                        });
+                    }
+
+                    if (response.albums && response.albums.items){
+                        dispatch({
+                            type: 'ALBUMS_LOADED',
+                            albums: response.albums.items
+                        });
+                    }
+
+                    if (response.playlists && response.playlists.items){
+                        dispatch({
+                            type: 'PLAYLISTS_LOADED',
+                            playlists: response.playlists.items
+                        });
+                    }
+
+                    if (response.tracks && response.tracks.items){
+                        dispatch({
+                            type: 'TRACKS_LOADED',
+                            tracks: response.tracks.items
+                        });
+                    }
+
                     dispatch({
                         type: 'SPOTIFY_AUTOCOMPLETE_LOADED',
                         field_id: field_id,

src/js/services/spotify/reducer.js

@@ -162,6 +162,14 @@ export default function reducer(spotify = {}, action){
                     autocomplete_results: autocomplete_results
                 })
 
+        case 'SPOTIFY_GENRES_LOADED':
+            return Object.assign(
+                {}, 
+                spotify, 
+                {
+                    genres: action.genres
+                })
+
 
         /**
          * Library

src/js/views/discover/DiscoverRecommendations.js

@@ -108,8 +108,8 @@ class Discover extends React.Component{
 					min: 0,
 					max: 100,
 					value: {
-						min: 25,
+						min: 0,
-						max: 75
+						max: 100
 					}
 				},
 				speechiness: {
@@ -303,7 +303,6 @@ class Discover extends React.Component{
 
 		return (
 			<div className="seeds">
-				<h4 className="underline">Seeds</h4>
 				{
 					seeds_objects.map((seed,index) => {
 						var type = helpers.uriType(seed.uri)
@@ -360,7 +359,6 @@ class Discover extends React.Component{
 
 		return (
 			<div className="tunabilities">
-				<h4 className="underline">Musical properties</h4>
 				{
 					enabled_tunabilities.map(tunability => {
 						return (
@@ -390,14 +388,8 @@ class Discover extends React.Component{
 	}
 
 	renderResults(){
-		if (helpers.isLoading(this.props.load_queue,['spotify_recommendations'])){
+
-			return (
+		// Results not in
-				<div className="body-loader loading">
-					<div className="loader"></div>
-				</div>
-			)
-		}
-		
 		if (!this.props.recommendations || this.props.recommendations.albums_uris === undefined || this.props.recommendations.artists_uris === undefined){
 			return null;
 		}
@@ -432,6 +424,11 @@ class Discover extends React.Component{
 			}
 		}
 
+		// Complete records not yet in our index
+		if (tracks.length <= 0 && artists.length <= 0 && albums.length <= 0){
+			return null;
+		}
+
 		var uri = 'iris:discover';
 		if (this.state.seeds){
 			uri += ':';
@@ -475,6 +472,7 @@ class Discover extends React.Component{
 	}
 
 	render(){
+		var is_loading = helpers.isLoading(this.props.load_queue,['spotify_recommendations']);
 		var addable_tunabilities = [];
 		for (var key in this.state.tunabilities){
 			if (this.state.tunabilities.hasOwnProperty(key)){
@@ -507,10 +505,12 @@ class Discover extends React.Component{
 						<h2 className="grey-text">
 							Add seeds and musical properties below to build your sound
 						</h2>
-						{this.renderSeeds()}
+						<div className="parameters">
-						{this.renderTunabilities()}
+							{this.renderSeeds()}
+							{this.renderTunabilities()}
+						</div>
 						<div className="actions">
-							<span className="button primary large" onClick={e => this.getRecommendations()}>
+							<span className={"button primary large"+(is_loading ? " working" : "")} onClick={e => this.getRecommendations()}>
 								<FontAwesome name="compass" />&nbsp; 
 								Find recommendations
 							</span>
@@ -542,9 +542,7 @@ const mapStateToProps = (state, ownProps) => {
 		authorized: state.spotify.authorization,
 		load_queue: state.ui.load_queue,
 		quick_search_results: (state.spotify.quick_search_results ? state.spotify.quick_search_results : {artists: [], tracks: []}),
-		recommendations: (state.spotify.recommendations ? state.spotify.recommendations : {}),
+		recommendations: (state.spotify.recommendations ? state.spotify.recommendations : {})
-		favorite_artists: (state.spotify.favorite_artists ? state.spotify.favorite_artists : []),
-		favorite_tracks: (state.spotify.favorite_tracks ? state.spotify.favorite_tracks : [])
 	}
 }
 

src/scss/global/_forms.scss

@@ -168,6 +168,8 @@ input[type="submit"] {
 	&.working {
 		position: relative;
 		cursor: wait !important;
+		background: $grey;
+		color: $mid_grey;
 
 		&:after {
 			pointer-events: none;
@@ -175,7 +177,7 @@ input[type="submit"] {
 			display: block;
 			content: '';
 		    animation: slideloader 1s infinite;
-			background: rgba(200,200,200,0.4);
+			background: rgba(200,200,200,0.3);
 			top: 0;
 			left: 0;
 			bottom: 0;

src/scss/global/_variables.scss

@@ -117,9 +117,21 @@ $bp_shallow: 650px;
 }
 
 @keyframes slideloader {
-    0% { left: 0%; right: 100%; }
+    0% { 
-    50% { left: 0%; right: 0%; }
+    	left: 0%; 
-    100% { left: 100%; right: 0%; }
+    	right: 100%; 
+    	border-radius: 3px 0 0 3px;
+    }
+    50% { 
+    	left: 0%;
+    	right: 0%;
+    	border-radius: 3px;
+    }
+    100% { 
+    	left: 100%; 
+    	right: 0%; 
+    	border-radius: 0 3px 3px 0;
+    }
 }
 
 

src/scss/views/_discover.scss

@@ -31,12 +31,12 @@
 		}
 	}
 
-	.seeds,
+	.parameters {
-	.tunabilities {
 		padding-top: 30px;
 
-		h3 {
+		.seeds,
-			padding-bottom: 6px;
+		.tunabilities {
+			display: inline-block;
 		}
 	}
 
@@ -45,7 +45,7 @@
 			display: inline-block;
 			background: $blue;
 			color: $white;
-			padding: 8px 26px 8px 14px;
+			padding: 8px 26px 6px 14px;
 			font-size: 16px;
 			position: relative;
 			vertical-align: top;
@@ -118,7 +118,7 @@
 			input {
 				background: rgba(100,100,100,0.5);
 				color: $white;
-				padding: 7px 13px;
+				padding: 8px 13px 6px;
 				font-size: 16px;
 				border: 1px solid transparent;