Removing tracks

src/js/bootstrap.js

@@ -8,6 +8,7 @@ import lastfm from './services/lastfm/reducer'
 import spotify from './services/spotify/reducer'
 
 import thunk from 'redux-thunk'
+import uiMiddleware from './services/ui/middleware'
 import pusherMiddleware from './services/pusher/middleware'
 import mopidyMiddleware from './services/mopidy/middleware'
 import spotifyMiddleware from './services/spotify/middleware'
@@ -91,7 +92,7 @@ console.log('Bootstrapping', initialState)
 let store = createStore(
 	reducers, 
 	initialState, 
-	applyMiddleware( thunk, localstorageMiddleware, mopidyMiddleware, pusherMiddleware, spotifyMiddleware )
+	applyMiddleware( thunk, localstorageMiddleware, uiMiddleware, mopidyMiddleware, pusherMiddleware, spotifyMiddleware )
 );
 
 export default store;

src/js/services/ui/middleware.js

@@ -0,0 +1,46 @@
+
+
+var actions = require('./actions.js')
+var spotifyActions = require('../spotify/actions.js')
+var helpers = require('../../helpers.js')
+
+const UIMiddleware = (function(){
+
+    /**
+     * The actual middleware inteceptor
+     **/
+    return store => next => action => {
+        var state = store.getState();
+
+        switch(action.type){
+
+            case 'REMOVE_TRACKS_FROM_PLAYLIST':
+                var playlist = store.getState().ui.playlist
+                switch( helpers.uriSource( playlist.uri ) ){
+
+                    case 'spotify':
+                        if( !store.getState().spotify.authorized ){
+                            alert('Must be logged in to Spotify to do this')
+                            return
+                        }
+                        if( !store.getState().spotify.me || store.getState().spotify.me.id != playlist.owner.id ){
+                            alert('You can only modify tracks you own')
+                            return
+                        }
+                        store.dispatch( spotifyActions.deleteTracksFromPlaylist( playlist.uri, playlist.snapshot_id, action.track_indexes ))
+                        break
+
+                    case 'm3u':
+                        alert('TODO: delete from M3U')
+                        break
+                }
+
+            // This action is irrelevant to us, pass it on to the next middleware
+            default:
+                return next(action);
+        }
+    }
+
+})();
+
+export default UIMiddleware

src/js/views/App.js

@@ -35,7 +35,7 @@ class App extends React.Component{
 		this.props.pusherActions.connect();
 		this.props.mopidyActions.connect();
 		this.props.spotifyActions.connect();
-		this.props.spotifyActions.getAllLibraryPlaylists();
+		if( this.props.spotify_authorized ) this.props.spotifyActions.getAllLibraryPlaylists();
 	}
 
 	componentWillReceiveProps(nextProps){

src/js/views/Artist.js

@@ -65,7 +65,7 @@ class Artist extends React.Component{
 					<ul className="details">
 						{ this.props.artist.followers ? <li>{ this.props.artist.followers.total.toLocaleString() } followers</li> : null }
 						{ this.props.artist.popularity ? <li>{ this.props.artist.popularity }% popularity</li> : null }
-						<li>{ this.props.artist.albums.length.toLocaleString() } albums</li>
+						{ scheme == 'local' ? <li>{ this.props.artist.albums.length.toLocaleString() } albums</li> : null }
 						{ scheme == 'spotify' ? <li><FontAwesome name='spotify' /> Spotify artist</li> : null }
 						{ scheme == 'local' ? <li><FontAwesome name='folder' /> Local artist</li> : null }
 					</ul>

src/scss/views/_album.scss

@@ -41,10 +41,7 @@
 				margin: 0;
 				width: 50%;
 				position: relative;
-
-				.thumbnail .image {
-					background-color: $secondary_grey;
-				}
+				background: #000000;
 
 				.name {
 					@include animate();
@@ -56,7 +53,8 @@
 					color: #FFFFFF;
 					opacity: 0;
 					z-index: 2;
-					font-weight: bold;
+					font-weight: bold;;
+					font-size: 14px;
 				}
 
 				.secondary {
@@ -64,6 +62,10 @@
 				}
 
 				&:hover {
+					.thumbnail {
+						opacity: 0.3;
+					}
+
 					.name {
 						opacity: 1;
 					}