From 90f719c8f467adf91610e4280873be35dc075169 Mon Sep 17 00:00:00 2001 From: James Barnsley Date: Wed, 28 Feb 2018 09:15:34 +1300 Subject: [PATCH] Animate closing of processes --- src/js/components/Notifications.js | 4 ++-- src/js/services/mopidy/middleware.js | 10 +++++----- src/js/services/pusher/middleware.js | 4 ++-- src/js/services/spotify/actions.js | 12 ++++++------ src/js/services/ui/actions.js | 7 +++++++ src/js/services/ui/middleware.js | 20 +++++++++++++++++--- src/js/services/ui/reducer.js | 9 ++++++++- src/js/views/Debug.js | 2 +- src/scss/components/_notifications.scss | 3 ++- 9 files changed, 50 insertions(+), 21 deletions(-) diff --git a/src/js/components/Notifications.js b/src/js/components/Notifications.js index b08c44e3..8351c4a1 100755 --- a/src/js/components/Notifications.js +++ b/src/js/components/Notifications.js @@ -56,7 +56,7 @@ export default class Notifications extends React.Component{ switch (process.status){ case 'running': return( -
+
@@ -69,7 +69,7 @@ export default class Notifications extends React.Component{ case 'cancelling': return( -
+
Cancelling
diff --git a/src/js/services/mopidy/middleware.js b/src/js/services/mopidy/middleware.js index a1ba1441..2643ca1b 100755 --- a/src/js/services/mopidy/middleware.js +++ b/src/js/services/mopidy/middleware.js @@ -587,7 +587,7 @@ const MopidyMiddleware = (function(){ // no batches means we're done here } else { - store.dispatch(uiActions.processFinished('MOPIDY_ENQUEUE_URIS_PROCESSOR')) + store.dispatch(uiActions.processFinishing('MOPIDY_ENQUEUE_URIS_PROCESSOR')) break } @@ -786,7 +786,7 @@ const MopidyMiddleware = (function(){ // No more schemes, so we're done! } else if (!action.data.uri_scheme){ - store.dispatch(uiActions.processFinished('MOPIDY_GET_SEARCH_RESULTS_PROCESSOR')) + store.dispatch(uiActions.processFinishing('MOPIDY_GET_SEARCH_RESULTS_PROCESSOR')) return } @@ -958,7 +958,7 @@ const MopidyMiddleware = (function(){ )) var continue_process = () => { - store.dispatch(uiActions.processFinished('MOPIDY_GET_SEARCH_RESULTS_PROCESSOR')) + store.dispatch(uiActions.processFinishing('MOPIDY_GET_SEARCH_RESULTS_PROCESSOR')) } instruct(socket, store, 'playlists.asList') @@ -1608,7 +1608,7 @@ const MopidyMiddleware = (function(){ )) store.dispatch(mopidyActions.getAlbums(uris_to_load, {name: 'MOPIDY_LIBRARY_ALBUMS_PROCESSOR', data: {uris: uris}})) } else { - store.dispatch(uiActions.processFinished('MOPIDY_LIBRARY_ALBUMS_PROCESSOR')) + store.dispatch(uiActions.processFinishing('MOPIDY_LIBRARY_ALBUMS_PROCESSOR')) } break @@ -1793,7 +1793,7 @@ const MopidyMiddleware = (function(){ store.dispatch(uiActions.updateProcess('MOPIDY_LIBRARY_ARTISTS_PROCESSOR', 'Loading '+uris.length+' local artists', {uris: uris})); store.dispatch(mopidyActions.getArtists(uris_to_load, {name: 'MOPIDY_LIBRARY_ARTISTS_PROCESSOR', data: {uris: uris}})); } else { - store.dispatch(uiActions.processFinished('MOPIDY_LIBRARY_ARTISTS_PROCESSOR')); + store.dispatch(uiActions.processFinishing('MOPIDY_LIBRARY_ARTISTS_PROCESSOR')); } break; diff --git a/src/js/services/pusher/middleware.js b/src/js/services/pusher/middleware.js index 7a51cea3..bf24054e 100755 --- a/src/js/services/pusher/middleware.js +++ b/src/js/services/pusher/middleware.js @@ -379,13 +379,13 @@ const PusherMiddleware = (function(){ request(store, 'change_radio', data) .then( response => { - store.dispatch(uiActions.processFinished('PUSHER_RADIO_PROCESS')); + store.dispatch(uiActions.processFinishing('PUSHER_RADIO_PROCESS')); if (response.status == 0){ store.dispatch(uiActions.createNotification({content: response.message, type: 'bad'})); } }, error => { - store.dispatch(uiActions.processFinished('PUSHER_RADIO_PROCESS')); + store.dispatch(uiActions.processFinishing('PUSHER_RADIO_PROCESS')); store.dispatch(coreActions.handleException( 'Could not change radio', error diff --git a/src/js/services/spotify/actions.js b/src/js/services/spotify/actions.js index aa952e6d..5a3ecc09 100755 --- a/src/js/services/spotify/actions.js +++ b/src/js/services/spotify/actions.js @@ -621,7 +621,7 @@ export function getSearchResults(type, query, limit = 50, offset = 0){ }); } - dispatch(uiActions.processFinished('SPOTIFY_GET_SEARCH_RESULTS_PROCESSOR')) + dispatch(uiActions.processFinishing('SPOTIFY_GET_SEARCH_RESULTS_PROCESSOR')) }, error => { dispatch(coreActions.handleException( @@ -1615,7 +1615,7 @@ export function getLibraryTracksAndPlayProcessor(data){ )) } else { dispatch(mopidyActions.playURIs(uris, data.uri)); - dispatch(uiActions.processFinished('SPOTIFY_GET_LIBRARY_TRACKS_AND_PLAY_PROCESSOR')) + dispatch(uiActions.processFinishing('SPOTIFY_GET_LIBRARY_TRACKS_AND_PLAY_PROCESSOR')) } }, error => { @@ -1695,7 +1695,7 @@ export function getPlaylistTracksAndPlayProcessor(data){ )) } else { dispatch(mopidyActions.playURIs(uris, data.uri)) - dispatch(uiActions.processFinished('SPOTIFY_GET_PLAYLIST_TRACKS_AND_PLAY_PROCESSOR')) + dispatch(uiActions.processFinishing('SPOTIFY_GET_PLAYLIST_TRACKS_AND_PLAY_PROCESSOR')) } }, error => { @@ -1870,7 +1870,7 @@ export function getLibraryPlaylistsProcessor(data){ )) dispatch(uiActions.runProcess('SPOTIFY_GET_LIBRARY_PLAYLISTS_PROCESSOR', {next: response.next})) } else { - dispatch(uiActions.processFinished('SPOTIFY_GET_LIBRARY_PLAYLISTS_PROCESSOR')) + dispatch(uiActions.processFinishing('SPOTIFY_GET_LIBRARY_PLAYLISTS_PROCESSOR')) dispatch({type: 'SPOTIFY_LIBRARY_PLAYLISTS_LOADED_ALL'}) } }, @@ -1941,7 +1941,7 @@ export function getLibraryArtistsProcessor(data){ )) dispatch(uiActions.runProcess('SPOTIFY_GET_LIBRARY_ARTISTS_PROCESSOR', {next: response.artists.next})) } else { - dispatch(uiActions.processFinished('SPOTIFY_GET_LIBRARY_ARTISTS_PROCESSOR')) + dispatch(uiActions.processFinishing('SPOTIFY_GET_LIBRARY_ARTISTS_PROCESSOR')) } }, error => { @@ -2011,7 +2011,7 @@ export function getLibraryAlbumsProcessor(data){ )) dispatch(uiActions.runProcess('SPOTIFY_GET_LIBRARY_ALBUMS_PROCESSOR', {next: response.next})) } else { - dispatch(uiActions.processFinished('SPOTIFY_GET_LIBRARY_ALBUMS_PROCESSOR')) + dispatch(uiActions.processFinishing('SPOTIFY_GET_LIBRARY_ALBUMS_PROCESSOR')) } }, error => { diff --git a/src/js/services/ui/actions.js b/src/js/services/ui/actions.js index 94e03f79..f98220f0 100755 --- a/src/js/services/ui/actions.js +++ b/src/js/services/ui/actions.js @@ -277,6 +277,13 @@ export function processCancelled(key){ } } +export function processFinishing(key){ + return { + type: 'PROCESS_FINISHING', + key: key + } +} + export function processFinished(key){ return { type: 'PROCESS_FINISHED', diff --git a/src/js/services/ui/middleware.js b/src/js/services/ui/middleware.js index 93ef5598..64d2b552 100755 --- a/src/js/services/ui/middleware.js +++ b/src/js/services/ui/middleware.js @@ -158,12 +158,26 @@ const UIMiddleware = (function(){ next(action) break + case 'PROCESS_FINISHING': + + // start a timeout to remove this notification + // This gives us time to animate out the notification before we remove the data + var timeout = setTimeout( + function(){ + store.dispatch(uiActions.processFinished(action.key)) + }, + 200 + ) + + next(action); + break; + case 'PROCESS_FINISHED': store.dispatch({ type: action.key+'_FINISHED' - }) - next(action) - break + }); + next(action); + break; // This action is irrelevant to us, pass it on to the next middleware default: diff --git a/src/js/services/ui/reducer.js b/src/js/services/ui/reducer.js index 077f53f8..1ba25143 100755 --- a/src/js/services/ui/reducer.js +++ b/src/js/services/ui/reducer.js @@ -170,10 +170,17 @@ export default function reducer(ui = {}, action){ } return Object.assign({}, ui, {processes: processes}) + case 'PROCESS_FINISHING': + var processes = Object.assign({}, (ui.processes ? ui.processes : {})) + if (processes[action.key]){ + processes[action.key] = Object.assign({}, processes[action.key], {closing: true}) + } + return Object.assign({}, ui, {processes: processes}) + case 'PROCESS_FINISHED': var processes = Object.assign({}, (ui.processes ? ui.processes : {})) if (processes[action.key]){ - processes[action.key] = Object.assign({}, processes[action.key], {status: 'finished'}) + processes[action.key] = Object.assign({}, processes[action.key], {status: 'finished', closing: false}) } return Object.assign({}, ui, {processes: processes}) diff --git a/src/js/views/Debug.js b/src/js/views/Debug.js index e2964b47..d8294221 100755 --- a/src/js/views/Debug.js +++ b/src/js/views/Debug.js @@ -114,7 +114,7 @@ class Debug extends React.Component{
diff --git a/src/scss/components/_notifications.scss b/src/scss/components/_notifications.scss index 7cc107f0..6e1f7d9e 100755 --- a/src/scss/components/_notifications.scss +++ b/src/scss/components/_notifications.scss @@ -71,7 +71,8 @@ background: $red; } - &.closing { + &.closing, + &.finishing { @include fadeout(); }