Add desktop notifications

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,6 +116,13 @@ mixin us-chat
             option(value="never") Never
             option(value="onlyping") Only when I am mentioned or PMed
             option(value="always") Always
+      .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.children()[2]).text());
+        }
     },
 
     clearchat: function() {

www/js/data.js

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

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);
@@ -676,6 +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").val();
     USEROPTS.chatbtn              = $("#us-sendbtn").prop("checked");
     USEROPTS.no_emotes            = $("#us-no-emotes").prop("checked");
     USEROPTS.strip_image          = $("#us-strip-image").prop("checked");
@@ -757,6 +759,19 @@ function applyOpts() {
         $("#modflair").removeClass("label-success")
             .addClass("label-default");
     }
+
+    if (USEROPTS.notifications !== "never") {
+        if ("Notification" in window) {
+            Notification.requestPermission().then(function(permission) {
+                if (permission !== "granted") {
+                    USEROPTS.notifications = "never";
+                }
+            });
+        }
+        else {
+            USEROPTS.notifications = "never";
+        }
+    }    
 }
 
 function parseTimeout(t) {
@@ -1647,8 +1662,7 @@ function addChatMessage(data) {
         }
     }
 
-    pingMessage(isHighlight);
+    pingMessage(isHighlight, data.username, $(div.children()[2]).text());
-
 }
 
 function trimChatBuffer() {
@@ -1665,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)) {
@@ -1681,8 +1695,18 @@ function pingMessage(isHighlight) {
             isHighlight)) {
             CHATSOUND.play();
         }
+
+        if (USEROPTS.notifications === "always" || (USEROPTS.notifications === "onlyping" &&
+            isHighlight)) {
+            showDesktopNotification(notificationTitle, notificationBody);
         }
     }
+}
+
+function showDesktopNotification(notificationTitle, notificationBody)
+{
+    new Notification(notificationTitle, {body: notificationBody, icon: null});
+}
 
 /* layouts */