From 1c95334691f1446b66bd9bcd6ef7d81eef83857f Mon Sep 17 00:00:00 2001 From: James Barnsley Date: Tue, 6 Dec 2016 16:54:48 +1300 Subject: [PATCH] Reduce blur on responsive for better performance; Testing touch start --- src/js/components/Track.js | 14 ++++---------- src/js/components/TrackList.js | 21 ++++++++++++++++++++- src/js/services/mopidy/middleware.js | 6 +----- src/js/services/ui/actions.js | 7 +++++++ src/js/views/Debug.js | 1 + src/js/views/Playlist.js | 16 ++++++++-------- src/scss/global/_core.scss | 1 + src/scss/views/_artist.scss | 2 +- 8 files changed, 43 insertions(+), 25 deletions(-) diff --git a/src/js/components/Track.js b/src/js/components/Track.js index 52348f2c..8962878b 100755 --- a/src/js/components/Track.js +++ b/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 (
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 ? : null } diff --git a/src/js/components/TrackList.js b/src/js/components/TrackList.js index 5861679a..113175ba 100755 --- a/src/js/components/TrackList.js +++ b/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)} /> } ) diff --git a/src/js/services/mopidy/middleware.js b/src/js/services/mopidy/middleware.js index 922591f1..8fb6e815 100755 --- a/src/js/services/mopidy/middleware.js +++ b/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 diff --git a/src/js/services/ui/actions.js b/src/js/services/ui/actions.js index 89996332..c3246e68 100755 --- a/src/js/services/ui/actions.js +++ b/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', diff --git a/src/js/views/Debug.js b/src/js/views/Debug.js index 9c19ff67..29a1dcd7 100755 --- a/src/js/views/Debug.js +++ b/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(){ diff --git a/src/js/views/Playlist.js b/src/js/views/Playlist.js index 08c5104d..104768fa 100755 --- a/src/js/views/Playlist.js +++ b/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{ ) } - return + return } } 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 (
diff --git a/src/scss/global/_core.scss b/src/scss/global/_core.scss index 476c4e2e..7dcc5d6b 100755 --- a/src/scss/global/_core.scss +++ b/src/scss/global/_core.scss @@ -75,6 +75,7 @@ main { pre { padding: 20px; background: $faint_grey; + white-space: pre-wrap; } } diff --git a/src/scss/views/_artist.scss b/src/scss/views/_artist.scss index d86261e4..e7fde8e3 100755 --- a/src/scss/views/_artist.scss +++ b/src/scss/views/_artist.scss @@ -91,7 +91,7 @@ .parallax { height: 100%; canvas { - @include blur( 30px ); + @include blur( 10px ); } }