fixed notification dismiss bug

src/components/app/MainNav.vue

@@ -113,15 +113,6 @@ export default {
       this.drag = true;
       this.$store.dispatch("setAllPopout", { show: false });
     },
-    dismissNotification(channelID) {
-      const notifications = this.$store.getters.notifications.find(function(e) {
-        return e.channelID === channelID;
-      });
-
-      if (notifications && notifications.count >= 1 && document.hasFocus()) {
-        this.$socket.client.client.emit("notification:dismiss", { channelID });
-      }
-    },
     openServer(serverID) {
       const server = this.servers[serverID];
       const lastSelectedChannel = JSON.parse(
@@ -134,7 +125,6 @@ export default {
         channel = channels[defaultChannelID];
       }
 
-      this.dismissNotification(channel.channelID);
       this.$store.dispatch("servers/setSelectedServerID", serverID);
       this.$store.dispatch("openChannel", channel);
     },

src/components/app/MessageLogs.vue

@@ -224,6 +224,14 @@ export default {
         });
       }
       this.backToBottomLoading = false;
+    },
+    dismissNotification(channelID) {
+      const notifications = this.channelNotifications;
+      if (notifications && notifications.count >= 1 && document.hasFocus()) {
+        setTimeout(() => {
+          this.$socket.client.emit("notification:dismiss", { channelID });
+        }, 500);
+      }
     }
   },
 
@@ -253,11 +261,22 @@ export default {
   },
 
   watch: {
-    selectedChannelMessages() {
+    selectedChannelMessages(newVal) {
       this.$set(this.loadMoreTop, "show", true);
       this.$nextTick(function() {
         this.scrollDown();
       });
+
+      const lastMessage = newVal[newVal.length - 1];
+      if (!lastMessage) return;
+      if (!this.selectedChannelID) return;
+      if (lastMessage.creator.uniqueID != this.user.uniqueID) {
+        this.dismissNotification(this.selectedChannelID);
+      }
+    },
+    selectedChannelID(channelID) {
+      if (!channelID) return;
+      this.dismissNotification(channelID);
     },
     uploadQueue() {
       this.$nextTick(function() {
@@ -276,6 +295,11 @@ export default {
     }
   },
   computed: {
+    channelNotifications() {
+      return this.$store.getters.notifications.find(e => {
+        return e.channelID === this.selectedChannelID;
+      });
+    },
     isServer() {
       return this.$store.getters.currentTab === 2;
     },

src/components/app/MessagePanel.vue

@@ -714,9 +714,11 @@ export default {
         return notification.channelID === this.$store.getters.selectedChannelID;
       });
       if (find && find.count >= 1) {
-        this.$socket.client.emit("notification:dismiss", {
-          channelID: this.$store.getters.selectedChannelID
-        });
+        setTimeout(() => {
+          this.$socket.client.emit("notification:dismiss", {
+            channelID: this.$store.getters.selectedChannelID
+          });
+        }, 500);
       }
     },
     backToTopButton() {

src/components/app/MessageTemplate.vue

@@ -686,6 +686,9 @@ $message-color: rgba(0, 0, 0, 0.3);
   border-radius: 50%;
   cursor: default;
 }
-@media (max-width: 468px) {
+@media (max-width: 830px) {
+  audio {
+    width: initial;
+  }
 }
 </style>

src/components/app/Navigation.vue

@@ -86,15 +86,6 @@ export default {
       this.drag = true;
       this.$store.dispatch("setAllPopout", { show: false });
     },
-    dismissNotification(channelID) {
-      const notifications = this.$store.getters.notifications.find(function(e) {
-        return e.channelID === channelID;
-      });
-
-      if (notifications && notifications.count >= 1 && document.hasFocus()) {
-        this.$socket.client.emit("notification:dismiss", { channelID });
-      }
-    },
     openServer(serverID) {
       this.switchTab(2);
       const server = this.servers[serverID];
@@ -107,8 +98,6 @@ export default {
       if (!channel) {
         channel = channels[defaultChannelID];
       }
-
-      this.dismissNotification(channel.channelID);
       this.$store.dispatch("servers/setSelectedServerID", serverID);
       this.$store.dispatch("openChannel", channel);
       this.$store.dispatch("selectedChannelID", channel.channelID);

src/components/app/ServerTemplate/ChannelsList.vue

@@ -58,17 +58,6 @@ export default {
         "selectedChannels",
         JSON.stringify(selectedChannels)
       );
-
-      const notificationExists = this.$store.getters.notifications.find(
-        n => n.channelID === channel.channelID
-      );
-
-      if (notificationExists && document.hasFocus()) {
-        this.$socket.client.emit("notification:dismiss", {
-          channelID: channel.channelID
-        });
-      }
-
       bus.$emit("closeLeftMenu");
       this.$store.dispatch("openChannel", channel);
       this.$store.dispatch("selectedChannelID", channel.channelID);

src/components/app/relationships/FriendsTemplate.vue

@@ -64,12 +64,20 @@ export default {
         return e.sender.uniqueID === recipient.uniqueID;
       });
 
-      if (
-        !notifications ||
-        (this.friend.channelID === this.$store.getters.selectedChannelID &&
-          document.hasFocus())
-      )
-        return;
+      let isSelectedUser = false;
+      if (this.friend.recipient) {
+        isSelectedUser =
+          this.friend.recipient.uniqueID ===
+          this.$store.getters.selectedUserUniqueID;
+      } else {
+        isSelectedUser =
+          this.friend.recipients[0].uniqueID ===
+          this.$store.getters.selectedUserUniqueID;
+      }
+
+      if (!notifications) return;
+
+      if (isSelectedUser && document.hasFocus()) return;
       return notifications.count;
     },
     userAvatar() {
@@ -112,17 +120,6 @@ export default {
       )
         return;
       bus.$emit("closeLeftMenu");
-      // dismiss notification if exists
-      // TODO move this into openchat or something :/
-      if (
-        this.notifications &&
-        this.notifications >= 1 &&
-        document.hasFocus()
-      ) {
-        this.$socket.client.emit("notification:dismiss", {
-          channelID: this.friend.channelID
-        });
-      }
       this.$store.dispatch("openChat", {
         uniqueID: this.recipient.uniqueID,
         channelID: this.friend.channelID,
@@ -243,8 +240,6 @@ export default {
   transition: 0.3s;
 }
 
-
-
 .status-name {
   opacity: 0;
   font-size: 13px;
@@ -265,5 +260,4 @@ export default {
 .close-button:hover {
   color: white;
 }
-
 </style>

src/store/modules/socketIOModule.js

@@ -198,16 +198,12 @@ const actions = {
       });
     }
     const currentTab = context.rootGetters.currentTab;
-    if (
-      context.rootState.channelModule.selectedChannelID ==
-        data.message.channelID &&
-      document.hasFocus() &&
-      (currentTab === 1 || currentTab === 2)
-    ) {
-      this._vm.$socket.client.emit("notification:dismiss", {
-        channelID: data.message.channelID
-      });
-    } else {
+    const selectedChannelID = context.rootState.channelModule.selectedChannelID;
+
+    const isSelectedChannel = selectedChannelID == data.message.channelID;
+    const isCurrentTabDMOrSrvrs = currentTab === 1 || currentTab === 2;
+
+    if (!isSelectedChannel || !document.hasFocus() || !isCurrentTabDMOrSrvrs) {
       // send notification if other users message the recipient
       if (data.message.creator.uniqueID === context.getters.user.uniqueID)
         return;

src/views/App.vue

@@ -88,15 +88,6 @@ export default {
     };
   },
   methods: {
-    dismissNotification(channelID) {
-      const notifications = this.$store.getters.notifications.find(function(e) {
-        return e.channelID === channelID;
-      });
-
-      if (notifications && notifications.count >= 1 && document.hasFocus()) {
-        this.$socket.client.emit("notification:dismiss", { channelID });
-      }
-    },
     switchChannel(isServer) {
       const serverChannelID = this.$store.state.channelModule.serverChannelID;
       const DMChannelID = this.$store.state.channelModule.DMChannelID;
@@ -107,7 +98,6 @@ export default {
           serverChannelID
         ];
         this.$store.dispatch("setChannelName", channel ? channel.name : "");
-        this.dismissNotification(serverChannelID);
       } else {
         const channel = this.$store.state.channelModule.channels[DMChannelID];
         this.$store.dispatch(
@@ -115,7 +105,6 @@ export default {
           channel ? channel.recipients[0].username : ""
         );
         this.$store.dispatch("selectedChannelID", DMChannelID);
-        this.dismissNotification(DMChannelID);
       }
     },
     switchTab(index) {