Removing tracks; tlid in key; handling selection of ranges

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

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

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
 		

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) } />
 					</section>
 				
 				</div>

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 {