Added notifications and sound alerts in client.js

3 files changed, 151 insertions, 13 deletions

diff --git a/client/audio/notify.ogg b/client/audio/notify.ogg
new file mode 100644
index 0000000..20c1a35
--- /dev/null
+++ b/client/audio/notify.ogg
diff --git a/client/client.js b/client/client.js
index 2e9a255..26974e3 100644
--- a/client/client.js
+++ b/client/client.js
@@ -67,13 +67,126 @@ var myChannel = window.location.search.replace(/^\?/, '');
 var lastSent = [""];
 var lastSentPos = 0;
 
+
+/** Notification switch and local storage behavior **/
+var notifySwitch = document.getElementById("notify-switch")
+var notifySetting = localStorageGet("notify-api")
+
+// Update localStorage with value of checkbox
+notifySwitch.addEventListener('change', () => {
+	localStorageSet("notify-api", notifySwitch.checked)
+})
+// Check if localStorage value is set, defaults to ON
+if (notifySetting === null) {
+	localStorageSet("notify-api", "true")
+	notifySwitch.checked = true
+}
+// Configure notifySwitch checkbox element
+if (notifySetting === "true" || notifySetting === true) {
+	notifySwitch.checked = true
+} else if (notifySetting === "false" || notifySetting === false) {
+	notifySwitch.checked = false
+}
+
+
+/** Sound switch and local storage behavior **/
+var soundSwitch = document.getElementById("sound-switch")
+var notifySetting = localStorageGet("notify-sound")
+
+// Update localStorage with value of checkbox
+soundSwitch.addEventListener('change', () => {
+	localStorageSet("notify-sound", soundSwitch.checked)
+})
+// Check if localStorage value is set, defaults to OFF
+if (notifySetting === null) {
+	localStorageSet("notify-sound", "false")
+	soundSwitch.checked = false
+}
+// Configure soundSwitch checkbox element
+if (notifySetting === "true" || notifySetting === true) {
+	soundSwitch.checked = true
+} else if (notifySetting === "false" || notifySetting === false) {
+	soundSwitch.checked = false
+}
+
+
+
+// Create a new notification after checking if permission has been granted
+function spawnNotification(title, body) {
+	// Let's check if the browser supports notifications
+	if (!("Notification" in window)) {
+		console.error("This browser does not support desktop notification");
+	}
+	// Let's check whether notification permissions have already been granted
+	else if (Notification.permission === "granted") {
+		// If it's okay let's create a notification
+		var options = {
+			body: body,
+			icon: "/favicon-96x96.png"
+		};
+		var n = new Notification(title, options);
+	}
+	// Otherwise, we need to ask the user for permission
+	else if (Notification.permission !== "denied") {
+		Notification.requestPermission().then(function (permission) {
+			// If the user accepts, let's create a notification
+			if (permission === "granted") {
+				var options = {
+					body: body,
+					icon: "/favicon-96x96.png"
+				};
+				var n = new Notification(title, options);
+			}
+		});
+	}
+	// At last, if the user has denied notifications, and you 
+	// want to be respectful, there is no need to bother them any more.
+}
+
+// Inital request for notifications permission
+try {
+	Notification.requestPermission().then(function (result) {
+		console.log("Hack.Chat notification permission: " + result);
+		if (result === "granted") {
+			pushMessage({
+				cmd: "chat",
+				nick: "*",
+				text: "Notifications enabled.",
+				time: null
+			});
+		} else {
+			pushMessage({
+				cmd: "chat",
+				nick: "*",
+				text: "Notifications disabled. You will not be notified if someone @'s you.",
+				time: null
+			});
+		}
+	});
+} catch (error) {
+	console.error("An error occured trying to request notification permissions. This browser might not support desktop notifications.\nDetails:")
+	console.error(error)
+}
+
+function notify(args) {
+	// Spawn notification if enabled
+	if (notifySwitch.checked) {
+		spawnNotification("?" + myChannel + "  —  " + args.nick, args.text)
+	}
+
+	// Play sound if enabled
+	if (soundSwitch.checked) {
+		document.getElementById("notify-sound").play()
+	}
+}
+
 function join(channel) {
 	if (document.domain == 'hack.chat') {
 		// For https://hack.chat/
 		ws = new WebSocket('wss://hack.chat/chat-ws');
 	} else {
 		// for local installs
- 		var protocol = location.protocol === 'https:' ? 'wss:' : 'ws:'
+		var protocol = location.protocol === 'https:' ? 'wss:' : 'ws:'
 		// if you changed the port during the server config, change 'wsPath'
 		// to the new port (example: ':8080')
 		// if you are reverse proxying, change 'wsPath' to the new location
@@ -125,18 +238,32 @@ var COMMANDS = {
 			return;
 		}
 
-		pushMessage(args);
+		if (args.text.toLowerCase().includes("@" + myNick.toLowerCase().split("#")[0])) {
+			notify(args);
+			pushMessage(args);
+			// Indicate the message which was just added via style
+			document.getElementById("messages").lastChild.style.fontWeight = "bold"
+		} else {
+			pushMessage(args);
+		}
 	},
 
 	info: function (args) {
 		args.nick = '*';
 
-		pushMessage(args);
+		if (args.from != null && (args.type.toLowerCase() == "whisper" || args.type.toLowerCase() == "invite")) {
+			notify(args);
+			pushMessage(args);
+			// Make the message bold to stand out as a @mention
+			document.getElementById("messages").lastChild.style.fontWeight = "bold"
+		} else {
+			pushMessage(args);
+		}
 	},
 
 	warn: function (args) {
 		args.nick = '!';
-
+		notify(args);
 		pushMessage(args);
 	},
 
@@ -177,7 +304,7 @@ function pushMessage(args) {
 	// Message container
 	var messageEl = document.createElement('div');
 
-	if (typeof(myNick) === 'string' && args.text.includes('@' + myNick.split('#')[0] + ' ')) {
+	if (typeof (myNick) === 'string' && args.text.includes('@' + myNick.split('#')[0] + ' ')) {
 		messageEl.classList.add('refmessage');
 	} else {
 		messageEl.classList.add('message');
@@ -396,18 +523,18 @@ $('#chatinput').onkeydown = function (e) {
 		updateInputSize();
 	} else if (e.keyCode == 9 /* TAB */) {
 		// Tab complete nicknames starting with @
-		
+
 		if (e.ctrlKey) {
 			// Skip autocompletion and tab insertion if user is pressing ctrl
 			// ctrl-tab is used by browsers to cycle through tabs
-			return;	
+			return;
 		}
 		e.preventDefault();
 
 		var pos = e.target.selectionStart || 0;
 		var text = e.target.value;
 		var index = text.lastIndexOf('@', pos);
-		
+
 		var autocompletedNick = false;
 
 		if (index >= 0) {
@@ -416,7 +543,7 @@ $('#chatinput').onkeydown = function (e) {
 			var nicks = onlineUsers.filter(function (nick) {
 				return nick.toLowerCase().indexOf(stub) == 0
 			});
-			
+
 			if (nicks.length > 0) {
 				autocompletedNick = true;
 				if (nicks.length == 1) {
@@ -424,7 +551,7 @@ $('#chatinput').onkeydown = function (e) {
 				}
 			}
 		}
-		
+
 		// Since we did not insert a nick, we insert a tab character
 		if (!autocompletedNick) {
 			insertAtCursor('\t');
@@ -456,14 +583,14 @@ updateInputSize();
 
 $('#sidebar').onmouseenter = $('#sidebar').ontouchstart = function (e) {
 	$('#sidebar-content').classList.remove('hidden');
-        $('#sidebar').classList.add('expand');
+	$('#sidebar').classList.add('expand');
 	e.stopPropagation();
 }
 
 $('#sidebar').onmouseleave = document.ontouchstart = function () {
 	if (!$('#pin-sidebar').checked) {
 		$('#sidebar-content').classList.add('hidden');
-                $('#sidebar').classList.remove('expand');
+		$('#sidebar').classList.remove('expand');
 	}
 }
 
diff --git a/client/index.html b/client/index.html
index 9238c66..86a4c29 100644
--- a/client/index.html
+++ b/client/index.html
@@ -16,6 +16,9 @@
 </head>
 
 <body>
+  <audio style="display: none" id="notify-sound" preload="auto" src="audio/notify.ogg">
+    <source src="audio/notify.ogg" type="audio/ogg">
+  </audio>
   <article class="container">
     <div id="messages" class="messages"></div>
   </article>
@@ -34,6 +37,14 @@
       </p>
       <h4>Settings</h4>
       <p>
+        <input id="sound-switch" type="checkbox">
+        <label for="sound-switch">Sound notifications</label>
+      </p>
+      <p>
+        <input id="notify-switch" type="checkbox">
+        <label for="notify-switch">Screen notifcations</label>
+      </p>
+      <p>
         <input id="joined-left" type="checkbox" checked>
         <label for="joined-left">Join/left notify</label>
       </p>
@@ -42,7 +53,7 @@
         <label for="parse-latex">Parse LaTeX</label>
       </p>
       <p>
-        <button id="clear-messages">Clear messages</button>
+        <button id="clear-messages">Clear all messages</button>
       </p>
       <h4>Color scheme</h4>
       <select id="scheme-selector"></select>