diff --git a/src/js/App.js b/src/js/App.js index f661585e..b51fea12 100755 --- a/src/js/App.js +++ b/src/js/App.js @@ -61,8 +61,11 @@ class App extends React.Component{ // when we navigate to a new route hashHistory.listen( location => { - // hide our sidebar + // Hide our sidebar this.props.uiActions.toggleSidebar( false ) + + // Unselect any tracks + this.props.uiActions.setSelectedTracks([]) }); // Check our slim_mode diff --git a/src/js/components/ContextMenu.js b/src/js/components/ContextMenu.js index 84373b4c..98feeb88 100755 --- a/src/js/components/ContextMenu.js +++ b/src/js/components/ContextMenu.js @@ -161,7 +161,7 @@ class ContextMenu extends React.Component{ for( var i = 0; i < tracks.length; i++ ){ tracks_tlids.push( tracks[i].tlid ); } - this.props.mopidyActions.removeTracks( tracks_tlids ); + this.props.mopidyActions.removeTracks( tracks_tlids ) } playURIs(e){ diff --git a/src/js/components/TrackList.js b/src/js/components/TrackList.js index 4014ab92..61791ff7 100755 --- a/src/js/components/TrackList.js +++ b/src/js/components/TrackList.js @@ -35,42 +35,6 @@ class TrackList extends React.Component{ window.removeEventListener("touchend", this.handleTouchEnd, false) } - /** - * Figure out if our click/touch event is valid and we can act accordingly - * - * @param e = event obj - * @return string - **/ - triggerType(e){ - var target = $(e.target) - - // Wide screen, so no worries - if (!this.props.slim_mode){ - return 'default' - } else if (target.is('.select-zone') || target.closest('.select-zone').length > 0){ - return 'mobile' - } - - return false - } - - - /** - * Build the track key - * This is our unique reference to a track in a particular tracklist - * - * @param track = Track obj - * @param index = int (position of track in tracklist) - * @return string - **/ - buildTrackKey(track, index){ - let key = index - key += '_'+track.uri - key += '_'+(this.props.uri ? this.props.uri : 'none') - key += '_'+(this.props.context ? this.props.context : 'none') - return key - } - handleKeyUp(e){ if (!this.digestTracksKeys()) return @@ -216,6 +180,7 @@ class TrackList extends React.Component{ } handleSelection(e,track_key){ + console.log('handleSelection',track_key) let selected_tracks = this.props.selected_tracks if (e.ctrlKey || this.props.slim_mode){ @@ -232,8 +197,10 @@ class TrackList extends React.Component{ } else if (e.shiftKey){ - let last_selected_track_index = selected_tracks[selected_tracks.length-1].split('_')[0] - let newly_selected_track_index = track_key.split('_')[0] + let last_selected_track = this.digestTracksKeys(selected_tracks[selected_tracks.length-1]) + let last_selected_track_index = last_selected_track.index + let newly_selected_track = this.digestTracksKeys(track_key) + let newly_selected_track_index = newly_selected_track.index // We've selected a track further down the list, // so proceed normally @@ -270,48 +237,13 @@ class TrackList extends React.Component{ return false } - - /** - * Digest our selected tracks - * - * @param tracks = array (defaults to stored value) - * @param indexex_only = boolean (do we just want an array of indexes) - * @return mixed - **/ - digestTracksKeys(keys = this.props.selected_tracks, indexes_only = false){ - if (!keys || keys.length <= 0){ - return false - } - - // Construct a basic track object, based on our unique track key - // This is enough to perform interactions (dragging, selecting, etc) - let array = [] - for (let i = 0; i < keys.length; i++){ - let key = keys[i].split('_') - - if (indexes_only){ - array.push(key[0]) - - } else { - array.push({ - index: parseInt(key[0]), - uri: key[1], - context: key[2], - context_uri: key[3] - }) - } - } - - return array - } - playTracks(){ let selected_tracks = this.digestTracksKeys() let selected_tracks_indexes = helpers.arrayOf('index',selected_tracks) // Our parent handles playing if (this.props.playTracks !== undefined){ - return this.props.playTracks( selected_tracks ) + return this.props.playTracks(selected_tracks) // Default to playing the URIs } else { @@ -332,6 +264,71 @@ class TrackList extends React.Component{ // By default, do nothing } + + /** + * Build the track key + * This is our unique reference to a track in a particular tracklist + * + * @param track = Track obj + * @param index = int (position of track in tracklist) + * @return string + **/ + buildTrackKey(track, index){ + let key = index + key += '_'+(track.tlid ? track.tlid : 'none') + key += '_'+track.uri + key += '_'+(this.props.uri ? this.props.uri : 'none') + key += '_'+(this.props.context ? this.props.context : 'none') + return key + } + + + /** + * Digest our selected tracks + * + * @param tracks = mixed (defaults to stored value) + * @param indexex_only = boolean (do we just want an array of indexes) + * @return mixed + **/ + digestTracksKeys(keys = this.props.selected_tracks, indexes_only = false){ + if (!keys){ + return false + } + + // Accommodate a single key + let singleton = false + if (!(keys instanceof Array)){ + singleton = true + keys = [keys] + } + + // Construct a basic track object, based on our unique track key + // This is enough to perform interactions (dragging, selecting, etc) + let array = [] + for (let i = 0; i < keys.length; i++){ + let key = keys[i].split('_') + + if (indexes_only){ + array.push(key[0]) + + } else { + array.push({ + index: parseInt(key[0]), + tlid: parseInt(key[1]), + uri: key[2], + context: key[3], + context_uri: key[4] + }) + } + } + + if (singleton && array.length > 0){ + return array[0] + } else { + return array + } + } + renderHeader(){ if( this.props.noheader ) return null diff --git a/src/js/views/Queue.js b/src/js/views/Queue.js index dc72422d..be5e1afd 100755 --- a/src/js/views/Queue.js +++ b/src/js/views/Queue.js @@ -25,10 +25,10 @@ class Queue extends React.Component{ super(props) } - removeTracks( tracks_indexes ){ - var tlids = []; - for( var i = 0; i < tracks_indexes.length; i++ ){ - tlids.push( this.props.current_tracklist[tracks_indexes[i]].tlid ) + removeTracks(track_indexes){ + var tlids = [] + for (var i = 0; i < track_indexes.length; i++){ + tlids.push( this.props.current_tracklist[track_indexes[i]].tlid ) } this.props.mopidyActions.removeTracks( tlids ) } @@ -128,10 +128,10 @@ class Queue extends React.Component{ context="queue" className="queue-track-list" tracks={this.props.current_tracklist} - removeTracks={ tracks => this.removeTracks( tracks ) } - playTracks={ tracks => this.playTracks( tracks ) } - playTrack={ track => this.playTrack( track ) } - reorderTracks={ (indexes, index) => this.reorderTracks(indexes, index) } /> + removeTracks={tracks => this.removeTracks( tracks )} + playTracks={tracks => this.playTracks( tracks )} + playTrack={track => this.playTrack( track )} + reorderTracks={(indexes, index) => this.reorderTracks(indexes, index) } /> diff --git a/src/scss/components/_playback-controls.scss b/src/scss/components/_playback-controls.scss index d1967a9d..31055a01 100755 --- a/src/scss/components/_playback-controls.scss +++ b/src/scss/components/_playback-controls.scss @@ -5,9 +5,9 @@ bottom: 0; right: 0; left: 0; - height: 49px; - background: lighten($dark_grey, 3%); - border-top: 1px solid lighten($dark_grey, 8%); + height: 50px; + background: lighten($dark_grey, 8%); + border-top: 1px solid lighten($dark_grey, 10%); color: $white; .current-track {