From 5f07e855bd31074a8ef15db7a6e14b199a68ee02 Mon Sep 17 00:00:00 2001
From: James Barnsley <james@barnsley.nz>
Date: Wed, 30 Nov 2016 09:32:46 +1300
Subject: [PATCH] Responsive adjustments; Removing library dropzone; Sidebar
 hide on navigation

---
 src/js/components/Dropzones.js             |  6 -----
 src/js/services/localstorage/middleware.js |  5 ++--
 src/js/services/spotify/actions.js         |  2 ++
 src/js/services/spotify/reducer.js         |  3 ++-
 src/js/services/ui/actions.js              |  8 +++---
 src/js/services/ui/reducer.js              |  4 ++-
 src/js/views/Album.js                      |  2 +-
 src/js/views/App.js                        |  9 ++++++-
 src/js/views/Playlist.js                   |  2 +-
 src/scss/views/_album.scss                 | 17 +++++++++++--
 src/scss/views/_playlist.scss              | 29 ++++++++++++++++++++--
 11 files changed, 66 insertions(+), 21 deletions(-)

diff --git a/src/js/components/Dropzones.js b/src/js/components/Dropzones.js
index 62089ab7..64a36ace 100755
--- a/src/js/components/Dropzones.js
+++ b/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',
diff --git a/src/js/services/localstorage/middleware.js b/src/js/services/localstorage/middleware.js
index 7180f5c3..8e66d6ac 100755
--- a/src/js/services/localstorage/middleware.js
+++ b/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));
diff --git a/src/js/services/spotify/actions.js b/src/js/services/spotify/actions.js
index ec57d0dd..fd329779 100755
--- a/src/js/services/spotify/actions.js
+++ b/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);
diff --git a/src/js/services/spotify/reducer.js b/src/js/services/spotify/reducer.js
index 19bd84f9..b30fa2ed 100755
--- a/src/js/services/spotify/reducer.js
+++ b/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':
diff --git a/src/js/services/ui/actions.js b/src/js/services/ui/actions.js
index 12fa1bd7..89996332 100755
--- a/src/js/services/ui/actions.js
+++ b/src/js/services/ui/actions.js
@@ -40,10 +40,10 @@ export function lazyLoading( start ){
     }
 }
 
-export function toggleSidebar(){
-    return {
-        type: 'TOGGLE_SIDEBAR'
-    }
+export function toggleSidebar( new_state = 'toggle' ){
+    var action = { type: 'TOGGLE_SIDEBAR' }
+    if( new_state != 'toggle' ) action.new_state = new_state
+    return action
 }
 
 export function dragStart( e, context, victims, victims_indexes = false ){
diff --git a/src/js/services/ui/reducer.js b/src/js/services/ui/reducer.js
index 112095af..b3b60c83 100755
--- a/src/js/services/ui/reducer.js
+++ b/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 })
 
 
         /**
diff --git a/src/js/views/Album.js b/src/js/views/Album.js
index 5e322cf1..0b402ad3 100755
--- a/src/js/views/Album.js
+++ b/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 }
diff --git a/src/js/views/App.js b/src/js/views/App.js
index f61de99a..c624ee67 100755
--- a/src/js/views/App.js
+++ b/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){
diff --git a/src/js/views/Playlist.js b/src/js/views/Playlist.js
index 25e13158..08c5104d 100755
--- a/src/js/views/Playlist.js
+++ b/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 }
diff --git a/src/scss/views/_album.scss b/src/scss/views/_album.scss
index f2bab1db..691f712b 100755
--- a/src/scss/views/_album.scss
+++ b/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;
+				}
+			}
 		}
 	}
 }
diff --git a/src/scss/views/_playlist.scss b/src/scss/views/_playlist.scss
index 9c6c7a26..4062ff64 100755
--- a/src/scss/views/_playlist.scss
+++ b/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;
+				}
+			}
+		}
+	}
 }