Selecting tracks where multiple instances on one playlist

src/js/components/TrackList.js

@@ -14,7 +14,7 @@ class TrackList extends React.Component{
 		super(props);
 
 		this.state = {
-			tracks: this.props.tracks,
+			tracks: this.keyifyTracks(this.props.tracks),
 			lastSelectedTrack: false
 		}
 
@@ -29,6 +29,10 @@ class TrackList extends React.Component{
 		window.removeEventListener("keyup", this.handleKeyUp, false);
 	}
 
+	componentWillReceiveProps( nextProps ){
+		this.setState({ tracks: this.keyifyTracks(nextProps.tracks) });
+	}
+
 	handleKeyUp(e){
 		if( this.selectedTracks().length <= 0 ) return;
 
@@ -44,51 +48,48 @@ class TrackList extends React.Component{
 		}
 	}
 
-	componentWillReceiveProps( nextProps ){
-		this.setState({ tracks: nextProps.tracks });
-	}
-
 	handleClick( e, index ){
-		if( this.props.context_menu.show ) this.props.uiActions.hideContextMenu();
+		if( this.props.context_menu.show ) this.props.uiActions.hideContextMenu()
 
-		var tracks = this.state.tracks;
+		var tracks = this.state.tracks
 
 		if( e.ctrlKey ){
 
-			tracks[index].selected = !tracks[index].selected;
+			tracks[index].selected = !tracks[index].selected
 
 		}else if( e.shiftKey ){
 
 			if( this.state.lastSelectedTrack < index ){
-				var start = this.state.lastSelectedTrack;
+				var start = this.state.lastSelectedTrack
-				var end = index;
+				var end = index
 			}else{
-				var start = index;
+				var start = index
-				var end = this.state.lastSelectedTrack;
+				var end = this.state.lastSelectedTrack
 			}
 
 			for( var i = start; i <= end; i++ ){
-				tracks[i].selected = true;
+				tracks[i].selected = true
 			}
 
 		}else{
 
 			for( var i = 0; i < tracks.length; i++ ){
-				tracks[i].selected = false;
+				tracks[i].selected = false
-			}
-			tracks[index].selected = !tracks[index].selected;
 			}
 
-		this.setState({ tracks: tracks, lastSelectedTrack: index });
+			tracks[index].selected = !tracks[index].selected
+		}
+
+		this.setState({ tracks: tracks, lastSelectedTrack: index })
 	}
 
 	handleDoubleClick(e, index){
-		if( this.props.context_menu.show ) this.props.uiActions.hideContextMenu();
+		if( this.props.context_menu.show ) this.props.uiActions.hideContextMenu()
 		this.playTracks()
 	}
 
 	handleDragStart(e, index){
-		this.props.uiActions.dragStart( e, 'tltracks', this.selectedTracks() )
+		this.props.uiActions.dragStart( e, this.props.context, this.selectedTracks() )
 	}
 
 	handleContextMenu(e, index){
@@ -100,6 +101,13 @@ class TrackList extends React.Component{
 		this.props.uiActions.showContextMenu( e, this.props.context, data )
 	}
 
+	keyifyTracks( tracks ){
+		for( var i = 0; i < tracks.length; i++ ){
+			tracks[i] = Object.assign({}, tracks[i], { key: i+'_'+tracks[i].uri })
+		}
+		return tracks
+	}
+
 	selectedTracks(){
 		function isSelected( track ){
 			return ( typeof(track.selected) !== 'undefined' && track.selected );
@@ -161,7 +169,7 @@ class TrackList extends React.Component{
 						(track, index) => {
 							return <Track
 									show_source_icon={ this.props.show_source_icon }
-									key={index+'_'+track.uri} 
+									key={track.key} 
 									track={track} 
 									handleDoubleClick={ e => self.handleDoubleClick(e, index)}
 									handleClick={ e => self.handleClick(e, index)}

src/js/services/localstorage/middleware.js

@@ -12,7 +12,7 @@ const localstorageMiddleware = (function(){
 
         // append our state to a global variable. This gives us access to debug the store at any point
         window._store = store
-        console.log(action)
+        //console.log(action)
 
         switch( action.type ){
 

src/js/views/Playlist.js

@@ -124,7 +124,7 @@ class Playlist extends React.Component{
 						<li>{ this.props.playlist.tracks_total } tracks, <Dater type="total-time" data={this.props.playlist.tracks} /></li>
 						{ this.props.playlist.last_modified ? <li>Updated <Dater type="ago" data={this.props.playlist.last_modified} /> ago</li> : null }
 						{ this.props.playlist.followers ? <li>{this.props.playlist.followers.total.toLocaleString()} followers</li> : null }
-						{ scheme == 'spotify' ? <li>By <Link to={'/user/'+this.props.playlist.owner.id}>{this.props.playlist.owner.id}</Link> &nbsp;{ !this.props.playlist.public ? <FontAwesome name="lock" /> : null }</li> : null }
+						{ scheme == 'spotify' && this.props.playlist.owner ? <li>By <Link to={'/user/'+this.props.playlist.owner.id}>{this.props.playlist.owner.id}</Link> &nbsp;{ !this.props.playlist.public ? <FontAwesome name="lock" /> : null }</li> : null }
 						{ scheme == 'spotify' ? <li><FontAwesome name="spotify" /> Spotify playlist</li> : null }
 						{ scheme == 'm3u' ? <li><FontAwesome name="folder" /> Local playlist</li> : null }
 					</ul>