From ad0ec888f67e1e2c5663997d9154b5ff35c82b5b Mon Sep 17 00:00:00 2001
From: James Barnsley <james@barnsley.nz>
Date: Tue, 1 Aug 2017 14:59:59 +1200
Subject: [PATCH] Fullscreen in modal; Chrome nicer scrollbars

---
 src/js/components/PlaybackControls.js | 11 +++++++++++
 src/js/services/ui/actions.js         |  4 +++-
 src/js/views/Debug.js                 |  7 ++++---
 src/scss/global/_core.scss            | 19 +++++++++++++++++++
 4 files changed, 37 insertions(+), 4 deletions(-)

diff --git a/src/js/components/PlaybackControls.js b/src/js/components/PlaybackControls.js
index d6885ec6..f1f9a7c1 100755
--- a/src/js/components/PlaybackControls.js
+++ b/src/js/components/PlaybackControls.js
@@ -60,6 +60,17 @@ class PlaybackControls extends React.Component{
 	handleThumbnailClick(e){
 		e.preventDefault();
 		this.props.uiActions.openModal('kiosk_mode')
+
+		let app = document.documentElement
+		if (app.requestFullscreen){
+			app.requestFullscreen()
+		} else if (app.webkitRequestFullscreen){
+			app.webkitRequestFullscreen()
+		} else if (app.mozRequestFullScreen){
+			app.mozRequestFullScreen()
+		} else if (app.msRequestFullscreen){
+			app.msRequestFullscreen()
+		}
 	}
 
 	render(){
diff --git a/src/js/services/ui/actions.js b/src/js/services/ui/actions.js
index 0b416d38..81361a81 100755
--- a/src/js/services/ui/actions.js
+++ b/src/js/services/ui/actions.js
@@ -299,7 +299,9 @@ export function openModal( name, data ){
 }
 
 export function closeModal(){
-    return { type: 'CLOSE_MODAL' }
+    return { 
+        type: 'CLOSE_MODAL' 
+    }
 }
 
 
diff --git a/src/js/views/Debug.js b/src/js/views/Debug.js
index 296b5119..d6998416 100755
--- a/src/js/views/Debug.js
+++ b/src/js/views/Debug.js
@@ -25,7 +25,8 @@ class Debug extends React.Component{
 		this.state = {
 			mopidy_call: 'playlists.asList',
 			mopidy_data: '{}',
-			pusher_data: '{"method":"get_config"}'
+			pusher_data: '{"method":"get_config"}',
+			access_token: this.props.access_token
 		}
 	}
 
@@ -116,8 +117,8 @@ class Debug extends React.Component{
 						<div className="input">
 							<input
 								type="text"
-								readOnly
-								value={ this.props.access_token } />
+								onBlur={e => this.props.spotifyActions.authorizationGranted({access_token: e.target.value})}
+								value={this.state.access_token} />
 						</div>
 					</div>
 
diff --git a/src/scss/global/_core.scss b/src/scss/global/_core.scss
index c4fd01a1..3783fd33 100755
--- a/src/scss/global/_core.scss
+++ b/src/scss/global/_core.scss
@@ -15,6 +15,25 @@ body {
 	overflow-y: scroll;
 	overflow-x: hidden;
 
+	&::-webkit-scrollbar{
+		width: 8px;
+		height: 8px;
+	}
+
+	&::-webkit-scrollbar-track {
+		background: $dark_grey;
+	}
+
+	&::-webkit-scrollbar-thumb {
+		@include animate();
+		background: $grey;
+		border-radius: 3px;
+
+		&:hover {
+			background: $mid_grey;
+		}
+	}
+
 	&.touch-dragging,
 	&.modal-open {
 		overflow-y: hidden;