Merge pull request #125 from ttshivers/better_snackbar

refactor(snackbar): add color option to notification displays
ttshivers · Sep 6, 2020 · ccd3ddd · ccd3ddd
2 parents 4b3a3cf + 0716e44
commit ccd3ddd
Show file tree

Hide file tree

Showing 8 changed files with 69 additions and 29 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -143,13 +143,13 @@
 
             <v-snackbar
               :value="GET_SNACKBAR_OPEN"
-              color="green darken-2"
+              :color="GET_SNACKBAR_MESSAGE.color"
               bottom
               timeout="4000"
               @input="SET_SNACKBAR_OPEN"
             >
               <div style="text-align: center; width: 100%;">
-                {{ GET_SNACKBAR_MESSAGE }}
+                {{ GET_SNACKBAR_MESSAGE.text }}
               </div>
             </v-snackbar>
 
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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,15 +602,21 @@ 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;
     }
 
     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
@@ -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
@@ -18,7 +18,7 @@ const state = () => ({
   // Used to help with the crumbs
   activeMetadata: null,
 
-  snackbarMessage: null,
+  snackbarMessage: {},
   snackbarOpen: false,
   navigateToPlayer: false,
   browser: detect(),