Remove Notification toggle. Make desktop notification setting tri-state. Add desktop notifications on PM too.

templates/channel.pug

@@ -43,7 +43,6 @@ html(lang="en")
                 i#userlisttoggle.glyphicon.glyphicon-chevron-down.pull-left.pointer(title="Show/Hide Userlist")
                 span#usercount.pointer Not Connected
                 span#modflair.label.label-default.pull-right.pointer Name Color
-                span#notifications.label.label-default.pull-right.pointer Notifications
               #userlist
               #messagebuffer.linewrap
               input#chatline.form-control(type="text", maxlength="240", style="display: none")

templates/useroptions.pug

@@ -101,7 +101,7 @@ mixin us-chat
       +rcheckbox("us-sort-afk", "Sort AFKers to bottom")
       .col-sm-4
       .col-sm-8
-        p.text-info The following 2 options apply to how and when you will be notified if a new chat message is received while CyTube is not the active window.
+        p.text-info The following 3 options apply to how and when you will be notified if a new chat message is received while CyTube is not the active window.
       .form-group
         label.control-label.col-sm-4(for="#us-blink-title") Blink page title on new messages
         .col-sm-8
@@ -116,7 +116,13 @@ mixin us-chat
             option(value="never") Never
             option(value="onlyping") Only when I am mentioned or PMed
             option(value="always") Always
-      +rcheckbox("us-notifications", "Use notifications")
+      .form-group
+        label.control-label.col-sm-4(for="#us-notifications") Desktop notifications on new messages
+        .col-sm-8
+          select#us-notifications.form-control
+            option(value="never") Never
+            option(value="onlyping") Only when I am mentioned or PMed
+            option(value="always") Always
       +rcheckbox("us-sendbtn", "Add a send button to chat")
       +rcheckbox("us-no-emotes", "Disable chat emotes")
       +rcheckbox("us-strip-image", "Remove images from chat")

www/js/callbacks.js

@@ -472,10 +472,12 @@ Callbacks = {
             return;
         }
 
+        var ping = false;
+
         if (data.username === CLIENT.name) {
             name = data.to;
         } else {
-            pingMessage(true);
+            ping = true;
         }
         var pm = initPm(name);
         var msg = formatChatMessage(data, pm.data("last"));
@@ -485,6 +487,10 @@ Callbacks = {
         if (pm.find(".panel-body").is(":hidden")) {
             pm.removeClass("panel-default").addClass("panel-primary");
         }
+
+        if (ping) {
+            pingMessage(true, "PM: " + name, msg.last().text());
+        }
     },
 
     clearchat: function() {

www/js/data.js

@@ -132,7 +132,7 @@ var USEROPTS = {
     no_emotes            : getOrDefault("no_emotes", false),
     strip_image          : getOrDefault("strip_image", false),
     chat_tab_method      : getOrDefault("chat_tab_method", "Cycle options"),
-    notifications        : getOrDefault("notifications", false)
+    notifications        : getOrDefault("notifications", "never")
 };
 
 /* Backwards compatibility check */

www/js/ui.js

@@ -48,35 +48,6 @@ $("#modflair").click(function () {
     setOpt('modhat', USEROPTS.modhat);
 });
 
-$("#notifications").click(function() {
-    var m = $("#notifications");
-    if (m.hasClass("label-success")) {
-        USEROPTS.notifications = false;
-        m.removeClass("label-success")
-            .addClass("label-default");
-        $("#us-notifications").prop("checked", USEROPTS.notifications);
-        setOpt("notifications", USEROPTS.notifications);
-    } else {
-        if ("Notification" in window) {
-            Notification.requestPermission().then(function (permission) {
-                USEROPTS.notifications = permission === "granted";
-                if (USEROPTS.notifications) {
-                    m.removeClass("label-default")
-                        .addClass("label-success");
-                }
-                $("#us-notifications").prop("checked", USEROPTS.notifications);
-                setOpt("notifications", USEROPTS.notifications);
-            });
-        } else {
-            USEROPTS.notifications = false;
-            m.removeClass("label-success")
-                .addClass("label-default");
-            $("#us-notifications").prop("checked", USEROPTS.notifications);
-            setOpt("notifications", USEROPTS.notifications);
-        }
-    }
-});
-
 $("#usercount").mouseenter(function (ev) {
     var breakdown = calcUserBreakdown();
     // re-using profile-box class for convenience

www/js/util.js

@@ -642,6 +642,7 @@ function showUserOptions() {
     $("#us-sort-afk").prop("checked", USEROPTS.sort_afk);
     $("#us-blink-title").val(USEROPTS.blink_title);
     $("#us-ping-sound").val(USEROPTS.boop);
+    $("#us-notifications").val(USEROPTS.notifications);
     $("#us-sendbtn").prop("checked", USEROPTS.chatbtn);
     $("#us-no-emotes").prop("checked", USEROPTS.no_emotes);
     $("#us-strip-image").prop("checked", USEROPTS.strip_image);
@@ -649,7 +650,6 @@ function showUserOptions() {
 
     $("#us-modflair").prop("checked", USEROPTS.modhat);
     $("#us-shadowchat").prop("checked", USEROPTS.show_shadowchat);
-    $("#us-notifications").prop("checked", USEROPTS.notifications);
 
     formatScriptAccessPrefs();
 
@@ -677,7 +677,7 @@ function saveUserOptions() {
     USEROPTS.sort_afk             = $("#us-sort-afk").prop("checked");
     USEROPTS.blink_title          = $("#us-blink-title").val();
     USEROPTS.boop                 = $("#us-ping-sound").val();
-    USEROPTS.notifications        = $("#us-notifications").prop("checked");
+    USEROPTS.notifications        = $("#us-notifications").val();
     USEROPTS.chatbtn              = $("#us-sendbtn").prop("checked");
     USEROPTS.no_emotes            = $("#us-no-emotes").prop("checked");
     USEROPTS.strip_image          = $("#us-strip-image").prop("checked");
@@ -760,26 +760,18 @@ function applyOpts() {
             .addClass("label-default");
     }
 
-    if (USEROPTS.notifications) {
-        if ("Notification" in window)
-        {
+    if (USEROPTS.notifications !== "never") {
+        if ("Notification" in window) {
             Notification.requestPermission().then(function(permission) {
-                USEROPTS.notifications = permission === "granted";
-                if (USEROPTS.notifications) {
-                    $("#notifications").removeClass("label-default")
-                        .addClass("label-success");
-                } else {
-                    $("#notifications").removeClass("label-success")
-                        .addClass("label-default");
+                if (permission !== "granted") {
+                    USEROPTS.notifications = "never";
                 }
             });
         }
         else {
-            USEROPTS.notifications = false;
+            USEROPTS.notifications = "never";
         }
-    }
-
-    
+    }    
 }
 
 function parseTimeout(t) {
@@ -1670,12 +1662,7 @@ function addChatMessage(data) {
         }
     }
 
-    pingMessage(isHighlight);
-
-    if (USEROPTS.notifications && document.hidden)
-    {
-        new Notification(data.username, {body: data.msg.replace(/<[^>]+>/g, ''), icon: null});
-    }
+    pingMessage(isHighlight, data.username, div.text());
 }
 
 function trimChatBuffer() {
@@ -1692,7 +1679,7 @@ function trimChatBuffer() {
     return count;
 }
 
-function pingMessage(isHighlight) {
+function pingMessage(isHighlight, notificationTitle, notificationBody) {
     if (!FOCUSED) {
         if (!TITLE_BLINK && (USEROPTS.blink_title === "always" ||
             USEROPTS.blink_title === "onlyping" && isHighlight)) {
@@ -1708,9 +1695,19 @@ function pingMessage(isHighlight) {
             isHighlight)) {
             CHATSOUND.play();
         }
+
+        if (USEROPTS.notifications === "always" || (USEROPTS.notifications === "onlyping" &&
+            isHighlight)) {
+            showDesktopNotification(notificationTitle, notificationBody.replace(/\[[^\]]+\]/g, ''));
+        }
     }
 }
 
+function showDesktopNotification(notificationTitle, notificationBody)
+{
+    new Notification(notificationTitle, {body: notificationBody, icon: null});
+}
+
 /* layouts */
 
 function undoHDLayout() {