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
);
}