From 768508a99fdc4ce8b0f5e425a71b4ef8f24015d9 Mon Sep 17 00:00:00 2001 From: James Barnsley Date: Thu, 25 Jan 2018 17:04:19 +1300 Subject: [PATCH] Merging into one --- src/js/components/AddSeedField.js | 12 +++---- src/js/services/spotify/actions.js | 31 ++++++++++++++++- src/js/services/spotify/reducer.js | 8 +++++ .../views/discover/DiscoverRecommendations.js | 34 +++++++++---------- src/scss/global/_forms.scss | 4 ++- src/scss/global/_variables.scss | 18 ++++++++-- src/scss/views/_discover.scss | 12 +++---- 7 files changed, 84 insertions(+), 35 deletions(-) diff --git a/src/js/components/AddSeedField.js b/src/js/components/AddSeedField.js index 01d04b5e..05ae6a81 100755 --- a/src/js/components/AddSeedField.js +++ b/src/js/components/AddSeedField.js @@ -78,12 +78,12 @@ class AddSeedField extends React.Component{ } results(){ - if (typeof(this.props.results) === 'undefined'){ - return null - } else if (typeof(this.props.results[this.id]) === 'undefined'){ - return null + if (this.props.results === undefined){ + return null; + } else if (this.props.results[this.id] === undefined){ + 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 : {}) } } diff --git a/src/js/services/spotify/actions.js b/src/js/services/spotify/actions.js index 3efb824f..2adefa2d 100755 --- a/src/js/services/spotify/actions.js +++ b/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, diff --git a/src/js/services/spotify/reducer.js b/src/js/services/spotify/reducer.js index cdf1410a..825a80c7 100755 --- a/src/js/services/spotify/reducer.js +++ b/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 diff --git a/src/js/views/discover/DiscoverRecommendations.js b/src/js/views/discover/DiscoverRecommendations.js index b1ea985e..798bdaf6 100755 --- a/src/js/views/discover/DiscoverRecommendations.js +++ b/src/js/views/discover/DiscoverRecommendations.js @@ -108,8 +108,8 @@ class Discover extends React.Component{ min: 0, max: 100, value: { - min: 25, - max: 75 + min: 0, + max: 100 } }, speechiness: { @@ -303,7 +303,6 @@ class Discover extends React.Component{ return (
-

Seeds

{ seeds_objects.map((seed,index) => { var type = helpers.uriType(seed.uri) @@ -360,7 +359,6 @@ class Discover extends React.Component{ return (
-

Musical properties

{ 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 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{

Add seeds and musical properties below to build your sound

- {this.renderSeeds()} - {this.renderTunabilities()} +
+ {this.renderSeeds()} + {this.renderTunabilities()} +
- this.getRecommendations()}> + this.getRecommendations()}>   Find recommendations @@ -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 : {}), - favorite_artists: (state.spotify.favorite_artists ? state.spotify.favorite_artists : []), - favorite_tracks: (state.spotify.favorite_tracks ? state.spotify.favorite_tracks : []) + recommendations: (state.spotify.recommendations ? state.spotify.recommendations : {}) } } diff --git a/src/scss/global/_forms.scss b/src/scss/global/_forms.scss index 32ec152a..ddb7b7e0 100755 --- a/src/scss/global/_forms.scss +++ b/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; diff --git a/src/scss/global/_variables.scss b/src/scss/global/_variables.scss index 994cbb2b..c9bc837f 100755 --- a/src/scss/global/_variables.scss +++ b/src/scss/global/_variables.scss @@ -117,9 +117,21 @@ $bp_shallow: 650px; } @keyframes slideloader { - 0% { left: 0%; right: 100%; } - 50% { left: 0%; right: 0%; } - 100% { left: 100%; right: 0%; } + 0% { + left: 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; + } } diff --git a/src/scss/views/_discover.scss b/src/scss/views/_discover.scss index 35aa8dbe..879b9a9b 100755 --- a/src/scss/views/_discover.scss +++ b/src/scss/views/_discover.scss @@ -31,12 +31,12 @@ } } - .seeds, - .tunabilities { + .parameters { padding-top: 30px; - h3 { - padding-bottom: 6px; + .seeds, + .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;