Dropzones polish; Add next merged into middleware

src/js/components/ContextMenu.js

@@ -55,20 +55,7 @@ class ContextMenu extends React.Component{
 
 	playItemsNext(){
 		var selected_tracks_uris = helpers.asURIs(this.props.context_menu.data.selected_tracks)
-
-		var current_track = this.props.current_track
-		var current_track_index = -1
-		for( var i = 0; i < this.props.current_tracklist.length; i++ ){
-			if( this.props.current_tracklist[i].tlid == this.props.current_track.tlid ){
-				current_track_index = i
-				break
-			}
-		}
-
-		var at_position = null
-		if( current_track_index > -1 ) at_position = current_track_index + 1
-
-		this.props.mopidyActions.enqueueTracks(selected_tracks_uris, at_position);
+		this.props.mopidyActions.enqueueTracksNext(selected_tracks_uris);
 		this.props.uiActions.hideContextMenu();
 	}
 

src/js/components/Dropzone.js

@@ -11,17 +11,11 @@ export default class Dropzone extends React.Component{
 		super(props);
 	}
 
-	handleMouseUp(e){
-		// TODO: sanity check if this is a valid dropzone
-
-		return this.props.handleMouseUp(e)
-	}
-
 	render(){
 		if( !this.props.data ) return null
 
 		return (
-			<div className="dropzone" onMouseUp={ e => this.handleMouseUp(e) }>
+			<div className="dropzone" onMouseUp={ e => this.props.handleMouseUp(e) }>
 				<Icon className="white" name={ this.props.data.icon } />
 				<span className="title">{ this.props.data.title }</span>
 			</div>

src/js/components/Dropzones.js

@@ -20,6 +20,11 @@ class Dropzones extends React.Component{
 				icon: 'play',
 				action: 'enqueue'
 			},
+			{
+				title: 'Play next',
+				icon: 'play',
+				action: 'enqueue_next'
+			},
 			{
 				title: 'Add to playlist',
 				icon: 'playlist',
@@ -47,6 +52,10 @@ class Dropzones extends React.Component{
 				this.props.mopidyActions.enqueueTracks( uris )
 				break
 
+			case 'enqueue_next':
+				this.props.mopidyActions.enqueueTracksNext( uris )
+				break
+
 			case 'add_to_playlist':
 				this.props.uiActions.openModal( 'add_to_playlist', { tracks_uris: uris } )
 				break

src/js/services/mopidy/actions.js

@@ -56,6 +56,14 @@ export function playURIs( uris ){
 	}
 }
 
+export function enqueueTracksNext( uris ){
+	if( typeof(uris) !== 'object' ) uris = [uris]
+	return {
+		type: 'MOPIDY_ENQUEUE_TRACKS_NEXT',
+		uris: uris
+	}
+}
+
 export function enqueueTracks( uris, at_position = false ){
 	if( typeof(uris) !== 'object' ) uris = [uris];
 	var value = { uris: uris };

src/js/services/mopidy/middleware.js

@@ -229,6 +229,24 @@ const MopidyMiddleware = (function(){
                 store.dispatch({ type: 'MOPIDY_URISCHEMES_FILTERED', data: uri_schemes });
                 break;
 
+            case 'MOPIDY_ENQUEUE_TRACKS_NEXT':
+
+                var current_track = store.getState().ui.current_track
+                var current_tracklist = store.getState().ui.current_tracklist
+                var current_track_index = -1
+                for( var i = 0; i < current_tracklist.length; i++ ){
+                    if( current_tracklist[i].tlid == current_track.tlid ){
+                        current_track_index = i
+                        break
+                    }
+                }
+
+                var at_position = null
+                if( current_track_index > -1 ) at_position = current_track_index + 1
+
+                instruct( socket, store, 'tracklist.add', { uris: action.uris, at_position: at_position } )
+                break
+
             case 'MOPIDY_PLAY_URIS':
 
                 // add our first track

src/js/views/Playlist.js

@@ -79,7 +79,7 @@ class Playlist extends React.Component{
 		if( this.isEditable() ){
 			this.props.uiActions.reorderPlaylistTracks( this.props.playlist.uri, indexes, index, this.props.playlist.snapshot_id )
 		}else{
-			alert('Cannot edit a playlist you don\'t own')
+			this.props.uiActions.createNotification( "You can't edit a playlist you don't own!", 'bad' )
 		}
 	}
 

src/scss/components/_dragger.scss

@@ -39,6 +39,10 @@
 		font-size: 18px;
 		text-align: center;
 
+		& * {
+			pointer-events: none;
+		}
+
 		.icon {
 			display: block;
 			margin: 0 auto 10px;

src/scss/components/_notifications.scss

@@ -11,7 +11,7 @@
 		display: inline-block;
 		position: relative;
 		background: $dark_grey;
-		padding: 8px 28px 8px 14px;
+		padding: 12px 32px 12px 18px;
 		margin: 0 0.5px;
 		color: #FFFFFF;
 
@@ -27,9 +27,9 @@
 
 		.close-button {
 			position: absolute;
-			top: 7px;
-			right: 8px;
-			font-size: 10px;
+			top: 10px;
+			right: 11px;
+			font-size: 11px;
 			padding: 4px;
 			cursor: pointer;
 			opacity: 0.5;