Keyboard selecting of tracks, now native

src/js/components/ConfirmationButton.js

@@ -13,6 +13,10 @@ export default class ConfirmationButton extends React.Component{
 		this.unconfirmTimer = false;
 	}
 
+	componentWillUnmount(){
+		clearTimeout( this.unconfirmTimer );
+	}
+
 	handleClick(e){
 		if( this.state.confirming ){
 			this.setState({ confirming: false });
@@ -27,12 +31,14 @@ export default class ConfirmationButton extends React.Component{
 	}
 
 	handleMouseLeave(e){
-		this.unconfirmTimer = setTimeout(
-			function(){
-				this.setState({ confirming: false });
-			}.bind(this),
-			1500
-		);
+		if( this.state.confirming ){
+			this.unconfirmTimer = setTimeout(
+				function(){
+					this.setState({ confirming: false });
+				}.bind(this),
+				1500
+			);
+		}
 	}
 
 	render(){

src/js/components/Track.js

@@ -10,12 +10,15 @@ export default class Track extends React.Component{
 		super(props);
 	}
 
-	toggleSelected( e ){
-		return this.props.toggleSelected();
+	handleClick( e ){
+		var target = $(e.target);
+		if( !target.is('a') && target.closest('a').length <= 0 ){
+			this.props.handleClick(e);
+		}
 	}
 
-	playTrack( e ){
-		return this.props.playTrack();
+	handleDoubleClick( e ){
+		return this.props.handleDoubleClick(e);
 	}
 
 	render(){
@@ -28,11 +31,21 @@ export default class Track extends React.Component{
 		return (
 			<div
 				className="track"
-				onDoubleClick={ (e) => this.playTrack(e) }>
-					<FontAwesome name={selectedIcon} fixedWidth onClick={ (e) => this.toggleSelected(e) } />
-					{this.props.track.name}
-					<ArtistList artists={this.props.track.artists} />
-					{ this.props.track.album ? <AlbumLink album={this.props.track.album} /> : null }
+				onDoubleClick={ (e) => this.handleDoubleClick(e) }
+				onClick={ (e) => this.handleClick(e) }>
+					<FontAwesome name={selectedIcon} fixedWidth />
+					<span className="name">
+						{this.props.track.name}
+					</span>
+					<span className="artists">
+						<ArtistList artists={this.props.track.artists} />
+					</span>
+					<span className="album">
+						{ this.props.track.album ? <AlbumLink album={this.props.track.album} /> : null }
+					</span>
+					<span className="duration">
+						{ this.props.track.duration }
+					</span>
 			</div>
 		);
 	}

src/js/components/TrackList.js

@@ -12,17 +12,44 @@ class TrackList extends React.Component{
 		super(props);
 
 		this.state = {
-			tracks: this.props.tracks
+			tracks: this.props.tracks,
+			lastSelectedTrack: false
 		}
 	}
 
-	toggleSelected( index ){
+	handleClick( e, index ){
 		var tracks = this.state.tracks;
-		tracks[index].selected = !tracks[index].selected;
-		this.setState({ tracks: tracks });
+
+		if( e.ctrlKey ){
+
+			tracks[index].selected = !tracks[index].selected;
+
+		}else if( e.shiftKey ){
+
+			if( this.state.lastSelectedTrack < index ){
+				var start = this.state.lastSelectedTrack;
+				var end = index;
+			}else{
+				var start = index;
+				var end = this.state.lastSelectedTrack;
+			}
+
+			for( var i = start; i <= end; i++ ){
+				tracks[i].selected = true;
+			}
+
+		}else{
+
+			for( var i = 0; i < tracks.length; i++ ){
+				tracks[i].selected = false;
+			}
+			tracks[index].selected = !tracks[index].selected;
+		}
+
+		this.setState({ tracks: tracks, lastSelectedTrack: index });
 	}
 
-	playTrack( index ){
+	handleDoubleClick( e, index ){
 		var tracks = this.state.tracks;
 		this.props.actions.changeTrack( tracks[index].tlid )
 	}
@@ -67,8 +94,8 @@ class TrackList extends React.Component{
 									return <Track
 											key={index+'_'+track.uri} 
 											track={track} 
-											playTrack={() => self.playTrack(index)}
-											toggleSelected={() => self.toggleSelected(index)} />
+											handleDoubleClick={(e) => self.handleDoubleClick(e, index)}
+											handleClick={(e) => self.handleClick(e, index)} />
 								}
 							)
 						}