Shortcut key notifications; Fullscreen now ctrl+fwdslash

src/js/components/Notifications.js

@@ -19,12 +19,20 @@ class Notifications extends React.Component{
 			<div className="notifications">
 				{
 					this.props.notifications.map( notification => {
-						return (
-							<div className={ notification.type+" notification" } key={ notification.id }>
-								<FontAwesome name="close" className="close-button" onClick={ e => this.props.actions.removeNotification(notification.id) } />
-								{ notification.content }
-							</div>
-						)
+						if (notification.is_shortcut){
+							return (
+								<div className="shortcut-notification" key={notification.id}>
+									<FontAwesome name={notification.type} />
+								</div>
+							)
+						} else {
+							return (
+								<div className={notification.type+" notification"} key={notification.id}>
+									<FontAwesome name="close" className="close-button" onClick={ e => this.props.actions.removeNotification(notification.id) } />
+									{ notification.content }
+								</div>
+							)
+						}
 					})
 				}
 			</div>

src/js/services/ui/actions.js

@@ -222,13 +222,14 @@ export function createBrowserNotification( data ){
     }
 }
 
-export function createNotification( content, type = 'default' ){
+export function createNotification(content, type = 'default', is_shortcut = false){
     return { 
         type: 'CREATE_NOTIFICATION',
         notification: {
             id: helpers.generateGuid(),
             type: type,
-            content: content
+            content: content,
+            is_shortcut: is_shortcut
         }
     }
 }

src/js/views/App.js

@@ -82,7 +82,7 @@ class App extends React.Component{
 
 	shouldTriggerShortcut(e){
 		var ignoreNodes = ['INPUT', 'TEXTAREA'];
-		var keyCodes = [32,27];
+		var keyCodes = [32,27,191];
 
 		if( ignoreNodes.indexOf(e.target.nodeName) > -1 ){
 			return false;
@@ -104,19 +104,31 @@ class App extends React.Component{
 		switch(e.keyCode){	
 
 			case 32: // spacebar
-				if( this.props.play_state == 'playing' ){
-					this.props.mopidyActions.pause();
+				if (this.props.play_state == 'playing'){
+					this.props.mopidyActions.pause()
+					this.props.uiActions.createNotification(null, 'pause', true)
 				}else{
-					this.props.mopidyActions.play();
+					this.props.mopidyActions.play()
+					this.props.uiActions.createNotification(null, 'play', true)
 				}
-				break;	
+				break;
 
 			case 27: // esc
-				if( this.props.dragger && this.props.dragger.dragging ){
-					this.props.uiActions.dragCancel();
+				if (this.props.dragger && this.props.dragger.dragging){
+					this.props.uiActions.dragCancel()
 				}
-				if( this.props.modal ){
-					this.props.uiActions.closeModal();
+				if (this.props.modal){
+					this.props.uiActions.closeModal()
+				}
+				break;
+
+			case 191: // "/"
+				if (e.ctrlKey){
+					if (this.props.modal){
+						this.props.uiActions.closeModal()
+					} else {
+						this.props.uiActions.openModal('kiosk_mode')
+					}
 				}
 				break;
 		}

src/js/views/Playlist.js

@@ -70,7 +70,8 @@ class Playlist extends React.Component{
 
 	play(){
         ReactGA.event({ category: 'Playlist', action: 'Play', label: this.props.playlist.uri })
-		this.props.mopidyActions.playURIs([this.props.playlist.uri], this.props.params.uri)
+        var track_uris = helpers.asURIs(this.props.playlist.tracks)
+        this.props.mopidyActions.playURIs(track_uris, this.props.params.uri)
 	}
 
 	follow(){

src/js/views/Queue.js

@@ -63,10 +63,6 @@ class Queue extends React.Component{
 					<FontAwesome name="podcast" />&nbsp;
 					Radio
 				</button>
-				<button onClick={e => this.props.uiActions.openModal('kiosk_mode')}>
-					<FontAwesome name="expand" />&nbsp;
-					Fullscreen
-				</button>
 				<button onClick={e => hashHistory.push(global.baseURL+'queue-history')}>
 					<FontAwesome name="history" />&nbsp;
 					History

src/scss/components/_context-menu.scss

@@ -89,7 +89,7 @@
 			.menu-item {
 				cursor: pointer;
 				display: block;
-				padding: 8px 12px;
+				padding: 12px 14px;
 				box-sizing: border-box;
 
 				.notouch &:hover {

src/scss/components/_notifications.scss

@@ -55,4 +55,21 @@
 			background: $red;
 		}
 	}
+
+	.shortcut-notification {
+		position: fixed;
+		top: 50vh;
+		left: 50vw;
+		height: 400px;
+		width: 400px;
+		margin: -200px 0 0 -200px;
+		background: rgba(10, 10, 10, 0.95);
+		color: $white;
+		border-radius: 10px;
+
+		.fa {
+			font-size: 140px;
+			line-height: 400px;
+		}
+	}
 }

src/scss/global/_variables.scss

@@ -7,6 +7,8 @@ $mid_grey: #AAAAAA;
 $dark_grey: #333333;
 $darkest_grey: #111111;
 $secondary_grey: #888888;
+$white: #FFFFFF;
+$black: #000000;
 $red: #cf2d2d;
 $green: #47af2a;
 $blue: #32b5f2;