diff --git a/src/js/bootstrap.js b/src/js/bootstrap.js index d4cc7f96..0e89943b 100755 --- a/src/js/bootstrap.js +++ b/src/js/bootstrap.js @@ -30,6 +30,12 @@ if( localStorage.getItem('mopidy') ){ Object.assign(initialState, { mopidy: storedMopidy } ); } +// if we've got a stored version of spotify state, load and merge +if( localStorage.getItem('spotify') ){ + var storedSpotify = JSON.parse( localStorage.getItem('spotify') ); + Object.assign(initialState, { spotify: storedSpotify } ); +} + let store = createStore( reducers, initialState, diff --git a/src/js/components/SpotifyAuthenticationFrame.js b/src/js/components/SpotifyAuthenticationFrame.js index cee24220..28557396 100755 --- a/src/js/components/SpotifyAuthenticationFrame.js +++ b/src/js/components/SpotifyAuthenticationFrame.js @@ -37,7 +37,7 @@ class SpotifyAuthenticationFrame extends React.Component{ Authorizing... ); - }else if( this.props.spotify.authorization ){ + }else if( this.props.spotify.authorized ){ return ( ); diff --git a/src/js/components/Track.js b/src/js/components/Track.js index cfe8758b..26e68dec 100755 --- a/src/js/components/Track.js +++ b/src/js/components/Track.js @@ -21,6 +21,22 @@ export default class Track extends React.Component{ return this.props.handleDoubleClick(e); } + formatDuration(){ + if( typeof(this.props.track.duration_ms) !== 'undefined' ){ + var ms = this.props.track.duration_ms; + }else if( typeof(this.props.track.length) !== 'undefined' ){ + var ms = this.props.track.length; + }else{ + return null; + } + + var time = new Date(ms); + var min = time.getMinutes(); + var sec = time.getSeconds(); + if( sec < 10 ) sec = '0'+sec; + return min+':'+sec; + } + render(){ var selectedIcon = 'square-o'; @@ -44,7 +60,7 @@ export default class Track extends React.Component{ { this.props.track.album ? : null } - { this.props.track.duration } + { this.formatDuration() } ); diff --git a/src/js/components/VolumeSlider.js b/src/js/components/VolumeSlider.js index 7cc45261..c82b5244 100755 --- a/src/js/components/VolumeSlider.js +++ b/src/js/components/VolumeSlider.js @@ -6,6 +6,13 @@ export default class VolumeSlider extends React.Component{ constructor(props) { super(props); + this.state = { + volume: 0 + } + } + + componentWillReceiveProps( nextProps ){ + this.setState({ volume: nextProps.volume }) } handleChange(e){ diff --git a/src/js/services/localstorage/middleware.js b/src/js/services/localstorage/middleware.js index 06544156..952f1572 100755 --- a/src/js/services/localstorage/middleware.js +++ b/src/js/services/localstorage/middleware.js @@ -10,9 +10,25 @@ const localstorageMiddleware = (function(){ // this way, any reducers and middleware do their thing BEFORE we store our new state next(action); - // get the state, and plug it in to our localStorage - var state = store.getState(); - //localStorage.setItem('state', JSON.stringify(state)); + switch( action.type ){ + + case 'MOPIDY_SET_CONFIG': + var mopidy = { + host: action.host, + port: action.port + }; + localStorage.setItem('mopidy', JSON.stringify(mopidy)); + break; + + case 'SPOTIFY_COMPLETE_AUTHORIZATION': + var spotify = { + authorized: true, + access_token: action.data.access_token, + refresh_token: action.data.refresh_token + }; + localStorage.setItem('spotify', JSON.stringify(spotify)); + break; + } } })(); diff --git a/src/js/services/mopidy/middleware.js b/src/js/services/mopidy/middleware.js index 5bd9bcfa..2b02185b 100755 --- a/src/js/services/mopidy/middleware.js +++ b/src/js/services/mopidy/middleware.js @@ -128,11 +128,6 @@ const MopidyMiddleware = (function(){ instruct( socket, store, action.call, action.value ) break; - case 'MOPIDY_SET_CONFIG': - next(action); - localStorage.setItem('mopidy', JSON.stringify({ host: action.host, port: action.port })); - break; - // This action is irrelevant to us, pass it on to the next middleware default: return next(action); diff --git a/src/js/services/spotify/middleware.js b/src/js/services/spotify/middleware.js index d6d23ea4..74d74269 100755 --- a/src/js/services/spotify/middleware.js +++ b/src/js/services/spotify/middleware.js @@ -42,7 +42,13 @@ const SpotifyMiddleware = (function(){ var id = action.uri.replace('spotify:album:',''); sendRequest( false, 'albums/'+id ) - .then( (response) => { + .then( (response) => { + for( var i = 0; i < response.tracks.items.length; i++ ){ + response.tracks.items[i].album = { + name: response.name, + uri: response.uri + } + } store.dispatch({ type: 'SPOTIFY_ALBUM_LOADED', data: response }) }); break; @@ -63,7 +69,7 @@ const SpotifyMiddleware = (function(){ case 'SPOTIFY_LOAD_LIBRARY_ARTISTS': store.dispatch({ type: 'SPOTIFY_LIBRARY_ARTISTS_LOADED', data: false }) - var token = store.getState().spotify.token; + var token = store.getState().spotify.access_token; sendRequest( token, 'me/following?type=artist' ) .then( (response) => { @@ -80,11 +86,6 @@ const SpotifyMiddleware = (function(){ console.log('Spotify wants to DISconnect') break; - case 'SPOTIFY_COMPLETE_AUTHORIZATION': - next(action); - localStorage.setItem('spotify', JSON.stringify({ access_token: action.data.access_token, refresh_token: action.data.refresh_token })); - break; - // This action is irrelevant to us, pass it on to the next middleware default: return next(action); diff --git a/src/js/services/spotify/reducer.js b/src/js/services/spotify/reducer.js index c36f5436..ef72ab0d 100755 --- a/src/js/services/spotify/reducer.js +++ b/src/js/services/spotify/reducer.js @@ -9,10 +9,19 @@ export default function reducer(spotify = {}, action){ return Object.assign({}, spotify, { authorizing: true }); case 'SPOTIFY_COMPLETE_AUTHORIZATION': - return Object.assign({}, spotify, { authorizing: false, authorization: action.data, token: action.data.access_token }); + return Object.assign({}, spotify, { + authorizing: false, + authorized: true, + authorization: action.data, + token: action.data.access_token + }); case 'SPOTIFY_REMOVE_AUTHORIZATION': - return Object.assign({}, spotify, { authorizing: false, authorization: false }); + return Object.assign({}, spotify, { + authorizing: false, + authorization: false, + authorized: false + }); case 'SPOTIFY_CONNECTED': return Object.assign({}, spotify, { connected: true, connecting: false }); diff --git a/src/js/views/Artist.js b/src/js/views/Artist.js index 5d9cc94d..4939d039 100755 --- a/src/js/views/Artist.js +++ b/src/js/views/Artist.js @@ -29,6 +29,7 @@ class Artist extends React.Component{ return (

{ this.props.spotify.artist.name }

+

{ this.props.spotify.artist.followers.total.toLocaleString() } followers

); }