From 0716e44928a7af4b8944eb47fb798a59a2dfce31 Mon Sep 17 00:00:00 2001 From: Travis Shivers Date: Sun, 6 Sep 2020 18:05:07 -0500 Subject: [PATCH] refactor(snackbar): add color option to notification displays --- src/App.vue | 20 ++++++------- src/components/donate.vue | 5 +++- src/main.js | 9 ++++++ src/store/modules/plexclients/actions.js | 8 +++-- src/store/modules/slplayer/actions.js | 5 +++- src/store/modules/synclounge/actions.js | 29 ++++++++++++++----- src/store/modules/synclounge/eventhandlers.js | 20 +++++++++---- src/store/state.js | 2 +- 8 files changed, 69 insertions(+), 29 deletions(-) diff --git a/src/App.vue b/src/App.vue index 0d2daadd..b6c32b50 100644 --- a/src/App.vue +++ b/src/App.vue @@ -143,13 +143,13 @@
- {{ GET_SNACKBAR_MESSAGE }} + {{ GET_SNACKBAR_MESSAGE.text }}
@@ -316,7 +316,7 @@ export default { async GET_NAVIGATE_HOME(navigate) { if (navigate) { - console.log('NAVIGATE_HOME'); + console.debug('NAVIGATE_HOME'); this.$router.push('/'); this.SET_NAVIGATE_HOME(false); } @@ -336,12 +336,9 @@ export default { } catch (e) { // If these fail, then the auth token is probably invalid console.error(e); - this.SET_PLEX_AUTH_TOKEN(null); - this.$router.push({ - name: 'Signin', - query: { - redirect: this.$route.fullPathh, - }, + await this.DISPLAY_NOTIFICATION({ + text: 'Failed to connect to Plex API. Try logging out and back in.', + color: 'error', }); } } @@ -398,7 +395,10 @@ export default { }, onInviteCopied() { - return this.DISPLAY_NOTIFICATION('Copied to clipboard'); + return this.DISPLAY_NOTIFICATION({ + text: 'Copied to clipboard', + color: 'success', + }); }, onFullScreenChange() { diff --git a/src/components/donate.vue b/src/components/donate.vue index 06fc7991..e7bca4ae 100644 --- a/src/components/donate.vue +++ b/src/components/donate.vue @@ -132,7 +132,10 @@ export default { ]), onAddressCopied() { - return this.DISPLAY_NOTIFICATION('Copied'); + return this.DISPLAY_NOTIFICATION({ + text: 'Copied', + color: 'success', + }); }, }, }; diff --git a/src/main.js b/src/main.js index 7b5bc1e4..c12d0538 100644 --- a/src/main.js +++ b/src/main.js @@ -12,6 +12,15 @@ Vue.use(Clipboard); Vue.config.productionTip = false; +Vue.config.errorHandler = (err) => { + store.dispatch('DISPLAY_NOTIFICATION', { + text: err.message, + color: 'error', + }); + + console.error(err); +}; + router.beforeEach(async (to, from, next) => { if (!store.getters.GET_CONFIG) { await store.dispatch('FETCH_CONFIG'); diff --git a/src/store/modules/plexclients/actions.js b/src/store/modules/plexclients/actions.js index 7e959487..fc393065 100644 --- a/src/store/modules/plexclients/actions.js +++ b/src/store/modules/plexclients/actions.js @@ -230,11 +230,13 @@ export default { const serverName = rootGetters['plexservers/GET_PLEX_SERVER']( getters.GET_ACTIVE_SERVER_ID, ).name; - await dispatch('DISPLAY_NOTIFICATION', - `Now Playing: ${contentTitleUtils.getCombinedTitle( + + await dispatch('DISPLAY_NOTIFICATION', { + text: `Now Playing: ${contentTitleUtils.getCombinedTitle( getters.GET_ACTIVE_MEDIA_METADATA, )} from ${serverName}`, - { root: true }); + color: 'info', + }, { root: true }); } // Media changed diff --git a/src/store/modules/slplayer/actions.js b/src/store/modules/slplayer/actions.js index ada32815..5eeb620b 100644 --- a/src/store/modules/slplayer/actions.js +++ b/src/store/modules/slplayer/actions.js @@ -532,7 +532,10 @@ export default { const introEnd = rootGetters['plexclients/GET_ACTIVE_MEDIA_METADATA_INTRO_MARKER'] .endTimeOffset; console.debug('SKIP_INTRO', introEnd); - await dispatch('DISPLAY_NOTIFICATION', 'Skipping intro', { root: true }); + await dispatch('DISPLAY_NOTIFICATION', { + text: 'Skipping intro', + color: 'info', + }, { root: true }); commit('SET_OFFSET_MS', introEnd); setCurrentTimeMs(introEnd); diff --git a/src/store/modules/synclounge/actions.js b/src/store/modules/synclounge/actions.js index f78a6b32..85afdd90 100644 --- a/src/store/modules/synclounge/actions.js +++ b/src/store/modules/synclounge/actions.js @@ -136,7 +136,10 @@ export default { // Purposefully not awaited dispatch('plexclients/START_CLIENT_POLLER_IF_NEEDED', null, { root: true }); - await dispatch('DISPLAY_NOTIFICATION', `Joined room: ${getters.GET_ROOM}`, { root: true }); + await dispatch('DISPLAY_NOTIFICATION', { + text: `Joined room: ${getters.GET_ROOM}`, + color: 'success', + }, { root: true }); await dispatch('SYNC_MEDIA_AND_PLAYER_STATE'); }, @@ -528,7 +531,10 @@ export default { if (getters.GET_HOST_USER.state === 'stopped') { // First, decide if we should stop playback if (timeline.state !== 'stopped') { - await dispatch('DISPLAY_NOTIFICATION', 'The host pressed stop', { root: true }); + await dispatch('DISPLAY_NOTIFICATION', { + text: 'The host pressed stop', + color: 'info', + }, { root: true }); await dispatch('plexclients/PRESS_STOP', null, { root: true }); return; } @@ -548,10 +554,13 @@ export default { } // TODO: fix } else { - const message = `Failed to find a compatible copy of ${getters.GET_HOST_USER.media.title + const text = `Failed to find a compatible copy of ${getters.GET_HOST_USER.media.title }. If you have access to the content try manually playing it.`; - console.warn(message); - await dispatch('DISPLAY_NOTIFICATION', message, { root: true }); + console.warn(text); + await dispatch('DISPLAY_NOTIFICATION', { + text, + color: 'error', + }, { root: true }); } } @@ -593,7 +602,10 @@ export default { } if (getters.GET_HOST_USER.state === 'playing' && timeline.state === 'paused') { - await dispatch('DISPLAY_NOTIFICATION', 'Resuming..', { root: true }); + await dispatch('DISPLAY_NOTIFICATION', { + text: 'Resuming..', + color: 'info', + }, { root: true }); await dispatch('plexclients/PRESS_PLAY', cancelSignal, { root: true }); return; } @@ -601,7 +613,10 @@ export default { if ((getters.GET_HOST_USER.state === 'paused' || getters.GET_HOST_USER.state === 'buffering') && timeline.state === 'playing') { - await dispatch('DISPLAY_NOTIFICATION', 'Pausing..', { root: true }); + await dispatch('DISPLAY_NOTIFICATION', { + text: 'Pausing..', + color: 'info', + }, { root: true }); await dispatch('plexclients/PRESS_PAUSE', cancelSignal, { root: true }); return; } diff --git a/src/store/modules/synclounge/eventhandlers.js b/src/store/modules/synclounge/eventhandlers.js index a88690f4..c28ea81f 100644 --- a/src/store/modules/synclounge/eventhandlers.js +++ b/src/store/modules/synclounge/eventhandlers.js @@ -60,8 +60,10 @@ export default { HANDLE_DISCONNECT: async ({ dispatch }) => { console.log('disconnect'); - await dispatch('DISPLAY_NOTIFICATION', - 'Disconnected from the SyncLounge server', { root: true }); + await dispatch('DISPLAY_NOTIFICATION', { + text: 'Disconnected from the SyncLounge server', + color: 'info', + }, { root: true }); }, HANDLE_RECONNECT: async ({ dispatch, commit }) => { @@ -72,9 +74,12 @@ export default { try { await dispatch('JOIN_ROOM_AND_INIT'); } catch (e) { - const message = `Error reconnecting: ${e.message}`; - console.error(message); - await dispatch('DISPLAY_NOTIFICATION', message, { root: true }); + const text = `Error reconnecting: ${e.message}`; + console.error(text); + await dispatch('DISPLAY_NOTIFICATION', { + text, + color: 'error', + }, { root: true }); await dispatch('NAVIGATE_HOME', null, { root: true }); } }, @@ -136,7 +141,10 @@ export default { text, }); - await dispatch('DISPLAY_NOTIFICATION', text, { root: true }); + await dispatch('DISPLAY_NOTIFICATION', { + text, + color: 'info', + }, { root: true }); await dispatch('CANCEL_IN_PROGRESS_SYNC'); if (isPause) { diff --git a/src/store/state.js b/src/store/state.js index 77a0955a..a7dbd9af 100644 --- a/src/store/state.js +++ b/src/store/state.js @@ -18,7 +18,7 @@ const state = () => ({ // Used to help with the crumbs activeMetadata: null, - snackbarMessage: null, + snackbarMessage: {}, snackbarOpen: false, navigateToPlayer: false, browser: detect(),