Hangouts: use iconified HTML5 notifications

Author: kfix

sites/Hangouts/app.js

@@ -5,8 +5,8 @@
 var hangouts = {
 	transparent: true,
 	postinject: ["notifier"],
-	preinject: ["styler"],
-	subscribeTo: ['receivedHangoutsMessage', 'unhideApp', 'HangoutsRosterReady'],
+	preinject: ["styler", 'shim_html5_notifications'],
+	subscribeTo: ['receivedHTML5DesktopNotification','receivedHangoutsMessage', 'unhideApp', 'HangoutsRosterReady'],
 	url: "https://plus.google.com/hangouts"
 };
 $.browser.addShortcut("Google Hangouts", hangouts);
@@ -95,6 +95,11 @@ delegate.receivedHangoutsMessage = function(tab, msg) {
 	console.log(Date() + ' [posted user notification] ' + msg);
 };
 
+delegate.receivedHTML5DesktopNotification = function(tab, note) {
+	console.log(Date() + ' [posted HTML5 notification] ' + note);
+	$.app.postHTML5Notification(note);
+};
+
 delegate.handleClickedNotification = function(title, subtitle, msg, id) {
 	console.log("JS: opening notification for: "+ [title, subtitle, msg, id]);
 	$.browser.tabSelected = hangoutsTab;

sites/Hangouts/styler.js

@@ -1,29 +1,5 @@
 /* eslint-env browser */
-/* eslint builtins */
-
-if (~window.name.indexOf('h_gtn_')) { //this is an incoming phone call notifcation
-	webkit.messageHandlers.unhideApp.postMessage([]); //get the app in the user's face right now!!
-	window.addEventListener('DOMSubtreeModified', function(e){
-		if (btn = document.querySelector('button + button')) { //answer button
-			document.removeEventListener('DOMSubtreeModified', this, false);
-			btn.autofocus = true //hafta apply this before .onload
-		}
-	});
-	window.addEventListener("keypress", function (e) {
-		switch (e.which) {
-			case 13: //Enter
-			case 32: //Space
-				document.querySelector('button + button').click(); //Answer call
-				break;
-			case 27: //Esc
-			case 9: //Tab
-			case 8: //Bksp
-				document.querySelector('button').click(); //Decline call
-				break;
-			default:
-		}
-	});
-};
+/*eslint eqeqeq:0, quotes:0, space-infix-ops:0, curly:0*/
 
 if (window == top)
 (function(){ //IIFE
@@ -49,7 +25,7 @@ if (window == top)
 
 			var css = document.createElement("style");
 			css.type = 'text/css';
-			css.id = 'unSocialSpam'
+			css.id = 'unSocialSpam';
 		    css.innerHTML = "\
 			    body, #content { overflow: hidden; background-color: transparent !important; }\
 			    #contentPane, #gb, #gba, #notify-widget-pane { display: none; }\
@@ -90,14 +66,41 @@ if (window.name == 'preld') { //frame-id ^gtn_ this is a chatbox iframe
 				css.type = 'text/css';
 				css.id = 'appleEmoji'
 			    css.innerHTML = "\
-					span[data-emo] span { opacity: 1.0 !important; width: auto !important; } \
+					span[data-emo] span { opacity: 1.0 !important; width: auto !important; font-size: 12pt; } \
 					span[data-emo] div { display: none !important; } \
 				\
 				";
 				document.head.appendChild(css);
 			}
 		}
 		document.addEventListener('DOMSubtreeModified', injectCSS, false); //mutation events are deprecated
+
+		document.addEventListener('DOMSubtreeModified', function(e){
+			// enable keyboard to quickly take/reject phone calls
+			if (btn = document.querySelector('button[title="Answer call"]')) { //answer button
+				var from = document.QuerySelector('div[googlevoice]').innerText;
+				console.log(Date() + " [Incoming phone call from:] " + from);
+				document.removeEventListener('DOMSubtreeModified', this, false);
+				btn.autofocus = true //hafta apply this before .onload
+				window.addEventListener("keypress", function (e) {
+					switch (e.which) {
+						case 13: //Enter
+						case 32: //Space
+							document.querySelector('button[title="Answer call"]').click();
+							document.removeEventListener('keypress', this, false);
+							break;
+						case 27: //Esc
+						case 9: //Tab
+						case 8: //Bksp
+							document.querySelector('button[title="Decline call"]').click();
+							document.removeEventListener('keypress', this, false);
+							break;
+						default:
+					}
+				});
+				webkit.messageHandlers.unhideApp.postMessage([]); //get the app in the user's face right now!!
+			}
+		});
 	})();
 
 	// watch for pop-out button to appear