Radio on Queue; Context menu extremities

src/js/components/ContextMenu.js

@@ -128,13 +128,11 @@ class ContextMenu extends React.Component{
 		)
 	}
 
-	renderItems(trigger){
+	getItems(trigger){
-		var items = []
+		switch (this.props.context_menu.context) {
-
-		switch( this.props.context_menu.context ){
 
 			case 'queue':
-				items = [
+				var items = [
 					{ handleClick: 'playQueueItem', label: 'Play', icon: 'play' },
 					{ handleClick: 'addToPlaylist', label: 'Add to playlist', icon: 'plus', playlists: true },
 					{ handleClick: 'copyURIs', label: 'Copy URIs', icon: 'copy' },
@@ -143,7 +141,7 @@ class ContextMenu extends React.Component{
 				break
 
 			case 'editable-playlist':
-				items = [
+				var items = [
 					{ handleClick: 'playItems', label: 'Play', icon: 'play' },
 					{ handleClick: 'playItemsNext', label: 'Play next', icon: 'play' },
 					{ handleClick: 'addToQueue', label: 'Add to queue', icon: 'plus' },
@@ -154,7 +152,7 @@ class ContextMenu extends React.Component{
 				break
 
 			default:
-				items = [
+				var items = [
 					{ handleClick: 'playItems', label: 'Play', icon: 'play' },
 					{ handleClick: 'playItemsNext', label: 'Play next', icon: 'play' },
 					{ handleClick: 'addToQueue', label: 'Add to queue', icon: 'plus' },
@@ -164,6 +162,12 @@ class ContextMenu extends React.Component{
 				break
 		}
 
+		return items
+	}
+
+	renderItems(trigger){
+		var items = this.getItems(trigger)
+
 		var closeItem = (
 			<span className="menu-item-wrapper cancel">
 				<a className="menu-item" onClick={ (e) => this.closeAndDeselectTracks(e) }>
@@ -222,8 +226,18 @@ class ContextMenu extends React.Component{
 			className += ' '+this.props.context_menu.trigger
 		}
 
+		var items = this.getItems(trigger)
+		var height = 0
+		if (items) height = items.length * 34
+
+		console.log(style.top, height)
+
 		if (this.props.context_menu.position_x > (window.innerWidth - 154)) className += ' right-align'
 		if (this.props.context_menu.position_x > (window.innerWidth - 308)) className += ' right-align-submenu'
+		if (this.props.context_menu.position_y > (window.innerHeight - height)){
+			style.top = style.top - height
+			className += ' bottom-align-submenu'
+		}
 
 		return (
 			<div className={className} style={style}>

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 ){
 

src/js/services/mopidy/middleware.js

@@ -211,7 +211,6 @@ const MopidyMiddleware = (function(){
                 })
                 break;
 
-            // send an instruction to the websocket
             case 'MOPIDY_URISCHEMES':
                 var uri_schemes = action.data
                 var remove = ['http','https','mms','rtmp','rtmps','rtsp','sc','spotify']
@@ -250,12 +249,17 @@ const MopidyMiddleware = (function(){
 
             case 'MOPIDY_PLAY_URIS':
 
+                // stop the radio
+                if (store.getState().ui.radio && store.getState().ui.radio.enabled){
+                    store.dispatch( pusherActions.stopRadio() )
+                }
+
                 // add our first track
                 instruct( socket, store, 'tracklist.add', { uri: action.uris[0], at_position: 0 } )
                     .then( response => {
 
                         if( !response || response.length <= 0 ){
-                            console.error('Could not add URI to tracklist', action.uris[0])
+                            store.dispatch( uiActions.createNotification('Could not add URI(s) to tracklist', 'error') )
                         }else{
                             // play it
                             store.dispatch( mopidyActions.changeTrack( response[0].tlid ) );                            

src/js/services/pusher/middleware.js

@@ -190,6 +190,7 @@ const PusherMiddleware = (function(){
                 break
 
             case 'PUSHER_STOP_RADIO':
+                store.dispatch( uiActions.createNotification('Stopping radio') )
                 var data = {
                     action: 'stop_radio',
                     seed_artists: [],

src/js/views/Queue.js

@@ -2,8 +2,8 @@
 import React, { PropTypes } from 'react'
 import { connect } from 'react-redux'
 import { bindActionCreators } from 'redux'
-
 import FontAwesome from 'react-fontawesome'
+
 import TrackList from '../components/TrackList'
 import Track from '../components/Track'
 import SidebarToggleButton from '../components/SidebarToggleButton'
@@ -45,10 +45,15 @@ class Queue extends React.Component{
 	renderRadio(){
 		if (!this.props.radio || !this.props.radio.enabled) return null
 
+		var seed_sentence = 'nothing'
+		if (this.props.radio.seed_artists.length > 0) seed_sentence = this.props.radio.seed_artists.length+' artists'
+		if (this.props.radio.seed_genres.length > 0) seed_sentence =this.props.radio.seed_artists.length+' genres'
+		if (this.props.radio.seed_tracks.length > 0) seed_sentence =this.props.radio.seed_artists.length+' tracks'
+
 		return (
 			<div className="radio">
-				Playing radio
+				Playing radio based on {seed_sentence}
-				<a onClick={ e => this.props.pusherActions.stopRadio() }>Stop radio</a>
+				<a className="text-button destructive pull-right" onClick={ e => this.props.pusherActions.stopRadio() }><FontAwesome name="close" />&nbsp; Stop radio</a>
 			</div>
 		)
 	}

src/scss/components/_context-menu.scss

@@ -16,6 +16,11 @@
 		right: 140px !important;
 	}
 
+	&.bottom-align-submenu .submenu {
+		top: auto !important;
+		bottom: 0 !important;
+	}
+
 	.menu-item-wrapper {
 		display: block;
 		position: relative;

src/scss/components/_player.scss

@@ -56,7 +56,7 @@
 		position: fixed;
 		bottom: 0;
 		left: 0;
-		width: 200px;
+		width: 220px;
 		box-sizing: border-box;
 		z-index: 97;
 		padding: 14px;

src/scss/global/_forms.scss

@@ -22,6 +22,14 @@ input[type="date"] {
 	}
 }
 
+.text-button {
+	cursor: pointer;
+
+	&.destructive {		
+		color: $red;
+	}
+}
+
 .button,
 button,
 input[type="button"],

src/scss/views/_queue.scss

@@ -41,4 +41,12 @@
 			}
 		}
 	}
+
+	.radio {
+		margin: 20px auto 0;
+		padding: 10px 12px;
+		max-width: 400px;
+		background: $faint_grey;
+		box-sizing: border-box;
+	}
 }