Addded notifs.

src/snek/static/app.js

@@ -263,7 +263,12 @@ class NotificationAudio {
         this.schedule = new Schedule(timeout);
     }
 
-    sounds = ["/audio/soundfx.d_beep3.mp3"];
+    sounds = {
+        "message": "/audio/soundfx.d_beep3.mp3",
+        "mention":  "/audio/750607__deadrobotmusic__notification-sound-1.wav",
+        "messageOtherChannel":  "/audio/750608__deadrobotmusic__notification-sound-2.wav",
+        "ping":  "/audio/750609__deadrobotmusic__notification-sound-3.wav",
+    }
 
     play(soundIndex = 0) {
         this.schedule.delay(() => {

src/snek/templates/web.html

@@ -116,11 +116,33 @@
 
     setInterval(updateTimes, 1000);
 
-    app.addEventListener("channel-message", (data) => {
+    function isMentionToMe(message){
-        if (data.channel_uid !== channelUid) return;
+        const mentionText = '@{{ user.username.value }}';
+        return message.toLowerCase().includes(mentionText);
+    }
+    function extractMentions(message) {
+        return [...new Set(message.match(/@\w+/g) || [])];
+    }
+    function isMentionForSomeoneElse(message){
+        const mentions = extractMentions(message);
+        const mentionText = '@{{ user.username.value }}';
+        return mentions.length > 0 && mentions.indexOf(mentionText) == -1;
+    }
     
+    app.addEventListener("channel-message", (data) => {
+        if (data.channel_uid !== channelUid) {
+            if(!isMentionForSomeoneElse(data.message)){
+                app.playSound("messageOtherChannel");
+            }
+            
+            return;
+        }
         if (data.username !== "{{ user.username.value }}") {
-            app.playSound(0);
+            if(isMentionToMe(data.message)){
+                app.playSound("mention");
+            }else if (!isMentionForSomeoneElse(data.message)){
+                app.playSound("message");
+            }
         }
         
         const messagesContainer = document.querySelector(".chat-messages");
@@ -128,10 +150,6 @@
         const doScrollDownBecauseLastMessageIsVisible = !lastMessage || isElementVisible(lastMessage);
 
         const message = document.createElement("div");
-        message.dataset.color = data.color;
-        message.dataset.created_at = data.created_at;
-        message.dataset.user_nick = data.user_nick;
-        message.dataset.uid = data.uid;
         message.innerHTML = data.html;
         document.querySelector(".chat-messages").appendChild(message.firstChild);
         updateLayout(doScrollDownBecauseLastMessageIsVisible);