implement html5 notifications. (have to be explicitly requested under Config)

4 files changed, 37 insertions, 3 deletions

diff --git a/webclient/app-controller.js b/webclient/app-controller.js
index 7fa87e30c1..ff4cb6e69e 100644
--- a/webclient/app-controller.js
+++ b/webclient/app-controller.js
@@ -45,6 +45,12 @@ angular.module('MatrixWebClientController', ['matrixService'])
             $scope.config = matrixService.config();        
         }
     };
+    
+    $scope.closeConfig = function() {
+        if ($scope.config) {
+            $scope.config = undefined;
+        }
+    };
 
     if (matrixService.config()) {
         eventStreamService.resume();
@@ -69,6 +75,15 @@ angular.module('MatrixWebClientController', ['matrixService'])
         console.log("Invalid access token -> log user out");
         $scope.logout();
     });
+    
+    $scope.requestNotifications = function() {
+        if (window.Notification) {
+            console.log("Notification.permission: " + window.Notification.permission);
+            window.Notification.requestPermission(function(){});
+        }
+    };
+    
+    
 }]);
 
    
diff --git a/webclient/app.css b/webclient/app.css
index 3d8d7dd72b..4e4cfffc48 100644
--- a/webclient/app.css
+++ b/webclient/app.css
@@ -260,8 +260,8 @@ h1 {
     z-index: 100;
     top: 100px;
     left: 50%;
-    width: 400px;
-    margin-left: -200px;
+    width: 500px;
+    margin-left: -250px;
     text-align: center;
     padding: 20px;
     background-color: #aaa;
diff --git a/webclient/index.html b/webclient/index.html
index ee77dd2faa..455eff4a13 100644
--- a/webclient/index.html
+++ b/webclient/index.html
@@ -39,6 +39,8 @@
         <div>Home server: {{ config.homeserver }} </div>
         <div>User ID: {{ config.user_id }} </div>
         <div>Access token: {{ config.access_token }} </div>
+        <div><button ng-click="requestNotifications()">Request notifications</button></div>
+        <div><button ng-click="closeConfig()">Close</button></div>
     </div>
 
 
diff --git a/webclient/room/room-controller.js b/webclient/room/room-controller.js
index 304b06c1f1..30f66de458 100644
--- a/webclient/room/room-controller.js
+++ b/webclient/room/room-controller.js
@@ -137,6 +137,23 @@ angular.module('RoomController', ['ngSanitize'])
     $scope.$on(eventHandlerService.MSG_EVENT, function(ngEvent, event, isLive) {
         if (isLive && event.room_id === $scope.room_id) {
             scrollToBottom();
+            
+            if (window.Notification) {
+                // FIXME: we should also notify based on a timer or other heuristics
+                // rather than the window being minimised
+                if (document.hidden) {
+                    var notification = new window.Notification(
+                        ($scope.members[event.user_id].displayname || event.user_id) +
+                        " (" + $scope.room_alias + ")",
+                    {
+                        "body": event.content.body,
+                        "icon": $scope.members[event.user_id].avatar_url,
+                    });
+                    $timeout(function() {
+                        notification.close();
+                    }, 5 * 1000);
+                }
+            }
         }
     });
     
@@ -154,7 +171,7 @@ angular.module('RoomController', ['ngSanitize'])
             paginate(MESSAGES_PER_PAGINATION);
         }
     };
-    
+        
     var paginate = function(numItems) {
         // console.log("paginate " + numItems);
         if ($scope.state.paginating) {