Simplified localstorage handler; Duration formatter

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, 

src/js/components/SpotifyAuthenticationFrame.js

@@ -37,7 +37,7 @@ class SpotifyAuthenticationFrame extends React.Component{
 					<span>Authorizing...</span>
 				</span>
 			);
-		}else if( this.props.spotify.authorization ){
+		}else if( this.props.spotify.authorized ){
 			return (
 				<button onClick={() => this.props.actions.removeAuthorization()}>Log out</button>
 			);

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 ? <AlbumLink album={this.props.track.album} /> : null }
 					</span>
 					<span className="duration">
-						{ this.props.track.duration }
+						{ this.formatDuration() }
 					</span>
 			</div>
 		);

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

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

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

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

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

src/js/views/Artist.js

@@ -29,6 +29,7 @@ class Artist extends React.Component{
 			return (
 				<div>
 					<h3>{ this.props.spotify.artist.name }</h3>
+					<p>{ this.props.spotify.artist.followers.total.toLocaleString() } followers</p>
 				</div>
 			);
 		}