Responsive adjustments; Removing library dropzone; Sidebar hide on navigation

src/js/components/Dropzones.js

@@ -20,12 +20,6 @@ class Dropzones extends React.Component{
 				icon: 'play',
 				action: 'enqueue'
 			},
-			{
-				title: 'Add to library',
-				icon: 'music',
-				action: 'add_to_library',
-				accepts: ['track','album','playlist','artist']
-			},
 			{
 				title: 'Add to playlist',
 				icon: 'playlist',

src/js/services/localstorage/middleware.js

@@ -12,7 +12,7 @@ const localstorageMiddleware = (function(){
 
         // append our state to a global variable. This gives us access to debug the store at any point
         window._store = store
-        console.log(action)
+        //console.log(action)
 
         switch( action.type ){
 
@@ -98,7 +98,8 @@ const localstorageMiddleware = (function(){
                 Object.assign(
                     spotify,{
                         access_token: action.data.access_token,
-                        token_expiry: action.data.token_expiry
+                        token_expiry: action.data.token_expiry,
+                        provider: action.provider
                     }
                 );
                 localStorage.setItem('spotify', JSON.stringify(spotify));

src/js/services/spotify/actions.js

@@ -85,6 +85,7 @@ function refreshToken( dispatch, getState ){
                         response.source = 'spotify';
                         dispatch({
                             type: 'SPOTIFY_TOKEN_REFRESHED',
+                            provider: 'spotify-http-api',
                             data: response
                         });
                         resolve(response);
@@ -109,6 +110,7 @@ function refreshToken( dispatch, getState ){
                         response.source = 'mopidy';
                         dispatch({
                             type: 'SPOTIFY_TOKEN_REFRESHED',
+                            provider: 'mopidy-spotify',
                             data: response
                         });
                         resolve(response);

src/js/services/spotify/reducer.js

@@ -48,7 +48,8 @@ export default function reducer(spotify = {}, action){
                 refreshing_token: false,
                 authorization: action.data,
                 access_token: action.data.access_token,
-                token_expiry: action.data.token_expiry
+                token_expiry: action.data.token_expiry,
+                provider: action.provider
             });
 
         case 'SPOTIFY_DISCONNECTED':

src/js/services/ui/actions.js

@@ -40,10 +40,10 @@ export function lazyLoading( start ){
     }
 }
 
-export function toggleSidebar(){
+export function toggleSidebar( new_state = 'toggle' ){
-    return {
+    var action = { type: 'TOGGLE_SIDEBAR' }
-        type: 'TOGGLE_SIDEBAR'
+    if( new_state != 'toggle' ) action.new_state = new_state
-    }
+    return action
 }
 
 export function dragStart( e, context, victims, victims_indexes = false ){

src/js/services/ui/reducer.js

@@ -16,7 +16,9 @@ export default function reducer(ui = {}, action){
             return Object.assign({}, ui, action.view)
 
         case 'TOGGLE_SIDEBAR':
-            return Object.assign({}, ui, { sidebar_open : !ui.sidebar_open })
+            var new_state = !ui.sidebar_open
+            if( typeof(action.new_state) !== 'undefined' ) new_state = action.new_state
+            return Object.assign({}, ui, { sidebar_open : new_state })
 
 
         /**

src/js/views/Album.js

@@ -82,7 +82,7 @@ class Album extends React.Component{
 
 					<ul className="details">
 						<li>
-							{ this.props.album.tracks_total } tracks, 
+							{ this.props.album.tracks_total } tracks,&nbsp;
 							{ this.props.album.tracks ? <Dater type="total-time" data={this.props.album.tracks} /> : null }
 						</li>
 						{ this.props.album.release_date ? <li>Released <Dater type="date" data={ this.props.album.release_date } /></li> : null }

src/js/views/App.js

@@ -2,7 +2,7 @@
 import React, { PropTypes } from 'react';
 import ReactDOM from 'react-dom';
 import { createStore, bindActionCreators } from 'redux'
-import { Link } from 'react-router'
+import { browserHistory, Link } from 'react-router'
 import { connect } from 'react-redux'
 
 import Sidebar from '../components/Sidebar'
@@ -38,6 +38,13 @@ class App extends React.Component{
 		this.props.mopidyActions.connect();
 		this.props.spotifyActions.connect();
 		if( this.props.spotify_authorized ) this.props.spotifyActions.getAllLibraryPlaylists();
+
+		// when we navigate to a new route
+		browserHistory.listen( location => {
+
+			// hide our sidebar
+			this.props.uiActions.toggleSidebar( false )
+		});
 	}
 
 	componentWillReceiveProps(nextProps){

src/js/views/Playlist.js

@@ -145,7 +145,7 @@ class Playlist extends React.Component{
 
 					<ul className="details">
 						<li>
-							{ this.props.playlist.tracks_total } tracks, 
+							{ this.props.playlist.tracks_total } tracks,&nbsp;
 							{ this.props.playlist.tracks ? <Dater type="total-time" data={this.props.playlist.tracks} /> : null }
 						</li>
 						{ this.props.playlist.last_modified ? <li>Updated <Dater type="ago" data={this.props.playlist.last_modified} /> ago</li> : null }

src/scss/views/_album.scss

@@ -1,7 +1,7 @@
 
 .album-view {
 	.main {
-		padding-left: 35%;
+		padding-left: 300px;
 
 		.title {
 			padding: 30px 40px;
@@ -20,7 +20,7 @@
 		top: 0;
 		left: 0;
 		bottom: 0;
-		width: 35%;
+		width: 300px;
 		background: $faint_grey;
 
 		.thumbnail {
@@ -78,6 +78,10 @@
 
 		.main {
 			padding-left: 0;
+
+			.title {
+				padding: 20px;
+			}
 		}
 
 		.intro {
@@ -87,6 +91,15 @@
 			.artist-grid {
 				display: none;
 			}
+
+			.details {
+				padding: 20px;
+
+				li {
+					display: inline-block;
+					padding-right: 15px;
+				}
+			}
 		}
 	}
 }

src/scss/views/_playlist.scss

@@ -1,7 +1,7 @@
 
 .playlist-view {
 	.main {
-		padding-left: 35%;
+		padding-left: 300px;
 
 		.title {
 			padding: 30px 40px;
@@ -20,7 +20,7 @@
 		top: 0;
 		left: 0;
 		bottom: 0;
-		width: 35%;
+		width: 300px;
 		background: $faint_grey;
 
 		> .thumbnail {
@@ -75,4 +75,29 @@
 			padding: 30px;
 		}
 	}
+
+	@include responsive( $bp_medium ){
+
+		.main {
+			padding-left: 0px;
+
+			.title {
+				padding: 20px;
+			}
+		}
+
+		.intro {
+			width: auto;
+			position: static;
+
+			.details {
+				padding: 20px;
+
+				li {
+					display: inline-block;
+					padding-right: 15px;
+				}
+			}
+		}
+	}
 }