Reduce blur on responsive for better performance; Testing touch start

src/js/components/Track.js

@@ -13,10 +13,6 @@ export default class Track extends React.Component{
 		super(props);
 	}
 
-	handleDoubleClick(e){
-		return this.props.handleDoubleClick(e);
-	}
-
 	handleMouseDown(e){
 		var target = $(e.target);
 		if( !target.is('a') && target.closest('a').length <= 0 ){
@@ -24,10 +20,6 @@ export default class Track extends React.Component{
 		}
 	}
 
-	handleMouseUp(e){
-		this.props.handleMouseUp(e)
-	}
-
 	handleContextMenu(e){
 		e.preventDefault();
 		this.props.handleContextMenu(e);
@@ -53,9 +45,11 @@ export default class Track extends React.Component{
 		return (
 			<div
 				className={className}
+				onTouchStart={ e => this.props.handleTouchStart(e) }
+				onTouchEnd={ e => this.props.handleTouchEnd(e) }
 				onMouseDown={ e => this.handleMouseDown(e) }
-				onMouseUp={ e => this.handleMouseUp(e) }
-				onDoubleClick={ e => this.handleDoubleClick(e) }
+				onMouseUp={ e => this.props.handleMouseUp(e) }
+				onDoubleClick={ e => this.props.handleDoubleClick(e) }
 				onContextMenu={ e => this.handleContextMenu(e) }>
 					{ this.props.track.selected ? <FontAwesome name="check" className="select-state" fixedWidth /> : null }
 					<span className="col name">

src/js/components/TrackList.js

@@ -13,6 +13,9 @@ class TrackList extends React.Component{
 	constructor(props) {
 		super(props);
 
+		this._touch_x = null
+		this._touch_y = null
+
 		this.state = {
 			tracks: this.keyifyTracks(this.props.tracks),
 			lastSelectedTrack: false
@@ -48,12 +51,27 @@ class TrackList extends React.Component{
 		}
 	}
 
+	handleTouchStart(e, index){		
+		alert( 'touchStart '+ this._touch_x +'  '+ e.page )
+		this._touch_x = e.pageX
+		this._touch_y = e.pageY
+		e.preventDefault()
+	}
+
+	handleTouchEnd(e, index){
+		var tracks = this.state.tracks
+		tracks[index].selected = !tracks[index].selected
+		this.setState({ tracks: tracks, lastSelectedTrack: index })
+		e.preventDefault()
+	}
+
 	handleDoubleClick(e, index){
 		if( this.props.context_menu.show ) this.props.uiActions.hideContextMenu()
 		this.playTracks()
 	}
 
 	handleMouseDown(e, index){
+
 		if( this.props.context_menu.show ) this.props.uiActions.hideContextMenu()
 
 		if( !this.state.tracks[index].selected && !this.isRightClick(e) && !e.ctrlKey ) this.toggleTrackSelections(e, index)
@@ -208,9 +226,10 @@ class TrackList extends React.Component{
 									key={track.key} 
 									track={track} 
 									handleDoubleClick={ e => self.handleDoubleClick(e, index)}
-									handleClick={ e => self.handleClick(e, index)}
 									handleMouseUp={ e => self.handleMouseUp(e, index)}
 									handleMouseDown={ e => self.handleMouseDown(e, index)}
+									handleTouchStart={ e => self.handleTouchStart(e, index)}
+									handleTouchEnd={ e => self.handleTouchEnd(e, index)}
 									handleContextMenu={ e => self.handleContextMenu(e, index)} />
 						}
 					)

src/js/services/mopidy/middleware.js

@@ -392,11 +392,7 @@ const MopidyMiddleware = (function(){
                         var playlist = Object.assign({}, response, { name: action.name })
                         instruct( socket, store, 'playlists.save', { playlist: playlist } )
                             .then( response => {
-
-                                // TODO: changing the name changes the URI, so essentially invalidates our url...
-                                // need to figure out how to handle this
-
-                                store.dispatch({ type: 'PLAYLIST_UPDATED', playlist: playlist });
+                                store.dispatch({ type: 'PLAYLIST_UPDATED', playlist: playlist })
                             })
                     });
                 break

src/js/services/ui/actions.js

@@ -33,6 +33,13 @@ export function searchStarted(){
 	}
 }
 
+export function debugResponse( response ){
+    return {
+        type: 'DEBUG',
+        response: response
+    }
+}
+
 export function lazyLoading( start ){
     return {
         type: 'LAZY_LOADING',

src/js/views/Debug.js

@@ -55,6 +55,7 @@ class Debug extends React.Component{
 		e.preventDefault()
 		console.info('Pusher Debugger', this.state.pusher_call, JSON.parse(this.state.pusher_data) )
 		this.props.pusherActions.debug( this.state.pusher_call, JSON.parse(this.state.pusher_data) )
+		this.props.uiActions.debugResponse({ status: 1, message: 'Sent', call: this.state.pusher_call, data: this.state.pusher_data })
 	}
 
 	render(){

src/js/views/Playlist.js

@@ -58,21 +58,21 @@ class Playlist extends React.Component{
 	}
 
 	play(){
-		this.props.mopidyActions.playURIs([this.props.params.uri])
+		this.props.mopidyActions.playURIs([this.props.playlist.uri])
 	}
 
 	follow(){
-		this.props.spotifyActions.toggleFollowingPlaylist( this.props.params.uri, 'PUT' )
+		this.props.spotifyActions.toggleFollowingPlaylist( this.props.playlist.uri, 'PUT' )
 	}
 
 	// TODO: Once unfollowing occurs, remove playlist from global playlists list
 	unfollow(){
-		this.props.spotifyActions.toggleFollowingPlaylist( this.props.params.uri, 'DELETE' )
+		this.props.spotifyActions.toggleFollowingPlaylist( this.props.playlist.uri, 'DELETE' )
 	}
 
 	// TODO: Once deletion occurs, remove playlist from global playlists list
 	delete(){
-		this.props.mopidyActions.deletePlaylist( this.props.params.uri )
+		this.props.mopidyActions.deletePlaylist( this.props.playlist.uri )
 	}
 
 	reorderTracks( indexes, index ){
@@ -88,7 +88,7 @@ class Playlist extends React.Component{
 	}
 
 	isEditable(){
-		if( helpers.uriSource( this.props.params.uri ) == 'spotify' ){
+		if( helpers.uriSource( this.props.playlist.uri ) == 'spotify' ){
 			if( !this.props.spotify_authorized ) return false
 
 			return ( this.props.playlist && 
@@ -101,7 +101,7 @@ class Playlist extends React.Component{
 	}
 
 	renderExtraButtons(){
-		switch( helpers.uriSource( this.props.params.uri ) ){
+		switch( helpers.uriSource( this.props.playlist.uri ) ){
 
 			case 'm3u':
 				return (
@@ -120,14 +120,14 @@ class Playlist extends React.Component{
 						</span>
 					)
 				}
-				return <FollowButton uri={this.props.params.uri} addText="Add to library" removeText="Remove from library" />
+				return <FollowButton uri={this.props.playlist.uri} addText="Add to library" removeText="Remove from library" />
 
 		}
 	}
 
 	render(){
 		if( !this.props.playlist || !this.props.playlist.name ) return null;
-		var scheme = helpers.uriSource( this.props.params.uri );
+		var scheme = helpers.uriSource( this.props.playlist.uri );
 
 		return (
 			<div className="view playlist-view">

src/scss/global/_core.scss

@@ -75,6 +75,7 @@ main {
 	pre {
 		padding: 20px;
 		background: $faint_grey;
+		white-space: pre-wrap;
 	}
 }
 

src/scss/views/_artist.scss

@@ -91,7 +91,7 @@
 			.parallax {
 				height: 100%;
 				canvas {
-					@include blur( 30px );
+					@include blur( 10px );
 				}
 			}