From f3eca08181a8d8624dcb76be0b70d97679e5333f Mon Sep 17 00:00:00 2001 From: James Barnsley Date: Tue, 13 Dec 2016 15:55:30 +1300 Subject: [PATCH] Dropzones polish; Add next merged into middleware --- src/js/components/ContextMenu.js | 15 +-------------- src/js/components/Dropzone.js | 8 +------- src/js/components/Dropzones.js | 9 +++++++++ src/js/services/mopidy/actions.js | 8 ++++++++ src/js/services/mopidy/middleware.js | 18 ++++++++++++++++++ src/js/views/Playlist.js | 2 +- src/scss/components/_dragger.scss | 4 ++++ src/scss/components/_notifications.scss | 8 ++++---- 8 files changed, 46 insertions(+), 26 deletions(-) diff --git a/src/js/components/ContextMenu.js b/src/js/components/ContextMenu.js index 0623ad20..83210176 100755 --- a/src/js/components/ContextMenu.js +++ b/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(); } diff --git a/src/js/components/Dropzone.js b/src/js/components/Dropzone.js index eb5e625e..f6525781 100755 --- a/src/js/components/Dropzone.js +++ b/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 ( -
this.handleMouseUp(e) }> +
this.props.handleMouseUp(e) }> { this.props.data.title }
diff --git a/src/js/components/Dropzones.js b/src/js/components/Dropzones.js index 64a36ace..c215e617 100755 --- a/src/js/components/Dropzones.js +++ b/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 diff --git a/src/js/services/mopidy/actions.js b/src/js/services/mopidy/actions.js index 242d943d..13954f9c 100755 --- a/src/js/services/mopidy/actions.js +++ b/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 }; diff --git a/src/js/services/mopidy/middleware.js b/src/js/services/mopidy/middleware.js index 8fb6e815..cc349223 100755 --- a/src/js/services/mopidy/middleware.js +++ b/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 diff --git a/src/js/views/Playlist.js b/src/js/views/Playlist.js index 104768fa..631eda1f 100755 --- a/src/js/views/Playlist.js +++ b/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' ) } } diff --git a/src/scss/components/_dragger.scss b/src/scss/components/_dragger.scss index 37392423..7c8dc2eb 100755 --- a/src/scss/components/_dragger.scss +++ b/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; diff --git a/src/scss/components/_notifications.scss b/src/scss/components/_notifications.scss index ab928bb7..70cd7f78 100755 --- a/src/scss/components/_notifications.scss +++ b/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;