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

webclient/app-controller.js

@@ -46,6 +46,12 @@ angular.module('MatrixWebClientController', ['matrixService'])
         }
     };
     
+    $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(){});
+        }
+    };
+    
+    
 }]);
 
    

webclient/app.css

@@ -260,8 +260,8 @@ h1 {
     z-index: 100;
     top: 100px;
     left: 50%;
-    width: 400px;
+    width: 500px;
-    margin-left: -200px;
+    margin-left: -250px;
     text-align: center;
     padding: 20px;
     background-color: #aaa;

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>
 
 

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);
+                }
+            }
         }
     });