From a50c8b454eb3294d4f1aa9a485bbfb25e884e5ac Mon Sep 17 00:00:00 2001 From: James Barnsley Date: Sat, 4 Nov 2017 14:03:59 +1300 Subject: [PATCH] No need for tiles, just service status --- src/js/components/FollowButton.js | 2 +- src/js/components/URILink.js | 2 +- src/js/index.js | 1 + src/js/services/lastfm/actions.js | 42 +++++++++++++++---- src/js/services/spotify/actions.js | 21 ++-------- src/js/services/spotify/middleware.js | 5 +-- src/js/views/Settings.js | 50 ++++++++--------------- src/scss/views/_settings.scss | 59 +++++++++++---------------- 8 files changed, 83 insertions(+), 99 deletions(-) diff --git a/src/js/components/FollowButton.js b/src/js/components/FollowButton.js index 99fed99f..195f9df4 100755 --- a/src/js/components/FollowButton.js +++ b/src/js/components/FollowButton.js @@ -41,7 +41,7 @@ class FollowButton extends React.Component{ } if (!this.props.spotify_authorized){ - return + return } else if (this.props.is_following === true){ return } else { diff --git a/src/js/components/URILink.js b/src/js/components/URILink.js index 09d05333..e6824f5d 100755 --- a/src/js/components/URILink.js +++ b/src/js/components/URILink.js @@ -39,7 +39,7 @@ export default class URILink extends React.Component{ break; default: - return null; + to = null; } return ( diff --git a/src/js/index.js b/src/js/index.js index fcbc4678..96d3b2b1 100755 --- a/src/js/index.js +++ b/src/js/index.js @@ -65,6 +65,7 @@ ReactDOM.render( + diff --git a/src/js/services/lastfm/actions.js b/src/js/services/lastfm/actions.js index 8c4c3805..4379ce7f 100755 --- a/src/js/services/lastfm/actions.js +++ b/src/js/services/lastfm/actions.js @@ -4,13 +4,14 @@ var uiActions = require('../ui/actions') var helpers = require('../../helpers') /** - * Send an ajax request to the Spotify API + * Send an ajax request to the LastFM API * - * @param dispatch obj - * @param getState obj - * @param endpoint params = the url params to send + * @param dispatch = obj + * @param getState = obj + * @param params = string, the url params to send + * @param signed = boolean **/ -const sendRequest = (dispatch, getState, params ) => { +const sendRequest = (dispatch, getState, params, signed) => { return new Promise((resolve, reject) => { var loader_key = helpers.generateGuid() @@ -75,11 +76,11 @@ export function connect(){ dispatch({ type: 'LASTFM_CONNECTING' }); - // Authorized, dual-purpose our connection to get the current user + // Authorized? Multi-purpose our connection test to get the current user if (getState().lastfm.session){ dispatch(getMe()); - // Not authorized, just use a generic lookup to test our connection + // Not authorized? Just use a generic lookup to test our connection } else { sendRequest(dispatch, getState, 'method=artist.getInfo&artist=') .then( @@ -91,6 +92,33 @@ export function connect(){ } } + +/** + * Signed requests + * TODO + **/ + +export function loveTrack(artist, track){ + return (dispatch, getState) => { + var params = 'method=track.love&artist='+artist+'&track='+track + sendRequest(dispatch, getState, params, true) + .then( + response => { + dispatch({ + type: 'LASTFM_TRACK_LOVED', + artist: artist, + track: track + }); + } + ) + } +} + + +/** + * Non-signed requests + **/ + export function getMe(){ return (dispatch, getState) => { var params = 'method=user.getInfo&user='+getState().lastfm.session.name diff --git a/src/js/services/spotify/actions.js b/src/js/services/spotify/actions.js index 31b8c5dd..4c0cf64a 100755 --- a/src/js/services/spotify/actions.js +++ b/src/js/services/spotify/actions.js @@ -192,25 +192,8 @@ export function set(data){ export function connect(){ return (dispatch, getState) => { - dispatch({ type: 'SPOTIFY_CONNECTING' }); - - // send a generic request to ensure spotify is up and running - // there is no 'test' or 'ping' endpoint on the Spotify API - sendRequest(dispatch, getState, 'browse/categories?limit=1' ) - .then( - response => { - dispatch({ - type: 'SPOTIFY_CONNECTED' - }); - }, - error => { - dispatch(coreActions.handleException( - 'Could not connect to Spotify', - error - )); - } - ); + dispatch(getMe()); } } @@ -260,12 +243,14 @@ export function getMe(){ type: 'SPOTIFY_ME_LOADED', data: response }); + dispatch({ type: 'SPOTIFY_CONNECTED' }); }, error => { dispatch(coreActions.handleException( 'Could not load your profile', error )); + dispatch({ type: 'SPOTIFY_DISCONNECTED' }); } ); } diff --git a/src/js/services/spotify/middleware.js b/src/js/services/spotify/middleware.js index 2aae8678..716da34f 100755 --- a/src/js/services/spotify/middleware.js +++ b/src/js/services/spotify/middleware.js @@ -27,10 +27,7 @@ const SpotifyMiddleware = (function(){ store.dispatch(spotifyActions.getAllLibraryPlaylists()) } - // Get the current logged-in user - store.dispatch(spotifyActions.getMe()) - - next(action) + next(action); break case 'SPOTIFY_AUTHORIZATION_GRANTED': diff --git a/src/js/views/Settings.js b/src/js/views/Settings.js index cf18c62c..56cede47 100755 --- a/src/js/views/Settings.js +++ b/src/js/views/Settings.js @@ -115,6 +115,7 @@ class Settings extends React.Component { {user.display_name ? user.display_name : user.id} + {!this.props.spotify.authorization ?   (Limited access) : null} ) @@ -165,20 +166,11 @@ class Settings extends React.Component { } renderServiceStatus(service){ - - let colour = 'red'; - let icon = 'close'; - let name = service.charAt(0).toUpperCase() + service.slice(1).toLowerCase(); - let text = 'Disconnected'; - let tooltip = null; - let logo = service; - - if (logo == 'mopidy'){ - logo = 'database'; - } else if (logo == 'pusher'){ - logo = 'rss'; - } - + let colour = 'red' + let icon = 'close' + let name = service.charAt(0).toUpperCase() + service.slice(1).toLowerCase() + let text = 'Disconnected' + let tooltip = null service = this.props[service] if (service.connecting){ @@ -190,11 +182,6 @@ class Settings extends React.Component { colour = 'red' text = 'Not installed' tooltip = 'Mopidy-Spotify is not installed or enabled' - } else if (service.connected && name == 'Spotify' && !service.authorization){ - icon = 'lock' - colour = 'orange' - text = 'Limited access' - tooltip = 'Authorize Iris for full Spotify functionality' } else if (service.connected){ icon = 'check' colour = 'green' @@ -202,20 +189,17 @@ class Settings extends React.Component { } return ( -
-
-
- -

- {name} -

-
- - {text} -
- {tooltip ? {tooltip} : null} -
+
+

+ {name} +

+
+
+
+ {text} +
+ {tooltip ? {tooltip} : null}
) } @@ -248,6 +232,8 @@ class Settings extends React.Component {
+

Services

+
{this.renderServiceStatus('mopidy')} {this.renderServiceStatus('pusher')} diff --git a/src/scss/views/_settings.scss b/src/scss/views/_settings.scss index fceb143c..9e9bb44c 100755 --- a/src/scss/views/_settings.scss +++ b/src/scss/views/_settings.scss @@ -35,46 +35,33 @@ @include clearfix(); margin-bottom: -20px; - .service-wrapper { + .service { + margin-right: 20px; + margin-bottom: 20px; + padding-left: 46px; + box-sizing: border-box; + position: relative; float: left; - width: 16.6667%; + min-width: 150px; - .service { - padding-bottom: 100%; - position: relative; + .title { + margin: 0; + padding: 0; + } - .liner { - position: absolute; - top: 0; - left: 0; - bottom: 0; - right: 0; - margin: 5px; - box-sizing: border-box; - border-radius: 3px; - border: 3px solid rgba(255,255,255,0.1); - text-align: center; + .icon { + position: absolute; + top: 2px; + left: 0; + width: 34px; + height: 25px; + padding-top: 9px; + border: 2px solid $grey; + text-align: center; + border-radius: 50%; - .logo { - font-size: 80px; - position: absolute; - top: 20%; - left: 0; - right: 0; - opacity: 0.05; - } - - .title { - padding-top: 55%; - margin-bottom: 0px; - } - - .status { - .fa { - font-size: 12px; - margin-right: 4px; - } - } + .fa { + font-size: 16px; } } }