Add desktop notifications, overridable in the same way as other components (although it's not a react component). Also extend the flux dispatcher a little to be less dumb about dispatching while something else is already dispatching.

src/ComponentBroker.js

@@ -42,6 +42,7 @@ module.exports = {
 // Must be in this file (because the require is file-specific) and
 // must be at the end because the components include this file.
 require('../skins/base/views/atoms/LogoutButton');
+require('../skins/base/views/atoms/EnableNotificationsButton');
 require('../skins/base/views/atoms/MessageTimestamp');
 require('../skins/base/views/molecules/MatrixToolbar');
 require('../skins/base/views/molecules/RoomTile');
@@ -60,3 +61,4 @@ require('../skins/base/views/molecules/MemberTile');
 require('../skins/base/views/organisms/RoomList');
 require('../skins/base/views/organisms/RoomView');
 require('../skins/base/views/templates/Login');
+require('../skins/base/views/organisms/Notifier');

src/controllers/atoms/EnableNotificationsButton.js

@@ -0,0 +1,64 @@
+/*
+Copyright 2015 OpenMarket Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+'use strict';
+
+module.exports = {
+    notificationsAvailable: function() {
+        return !!global.Notification;
+    },
+
+    havePermission: function() {
+        return global.Notification.permission == 'granted';
+    },
+
+    enabled: function() {
+        if (!this.havePermission()) return false;
+
+        if (!global.localStorage) return true;
+
+        var enabled = global.localStorage.getItem('notifications_enabled');
+        if (enabled === null) return true;
+        return enabled === 'true';
+    },
+
+    disable: function() {
+        if (!global.localStorage) return;
+        global.localStorage.setItem('notifications_enabled', 'false');
+        this.forceUpdate();
+    },
+
+    enable: function() {
+        if (!this.havePermission()) {
+            global.Notification.requestPermission();
+        }
+
+        if (!global.localStorage) return;
+        global.localStorage.setItem('notifications_enabled', 'true');
+        this.forceUpdate();
+    },
+
+    onClick: function() {
+        if (!this.notificationsAvailable()) {
+            return;
+        }
+        if (!this.enabled()) {
+            this.enable();
+        } else {
+            this.disable();
+        }
+    },
+};

src/controllers/organisms/Notifier.js

@@ -0,0 +1,46 @@
+/*
+Copyright 2015 OpenMarket Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+'use strict';
+
+var MatrixClientPeg = require("../../MatrixClientPeg");
+
+module.exports = {
+    start: function() {
+        this.boundOnRoomTimeline = this.onRoomTimeline.bind(this);
+        MatrixClientPeg.get().on('Room.timeline', this.boundOnRoomTimeline);
+    },
+
+    stop: function() {
+        if (MatrixClientPeg.get()) {
+            MatrixClientPeg.get().removeListener('Room.timeline', this.boundOnRoomTimeline);
+        }
+    },
+
+    onRoomTimeline: function(ev, room, toStartOfTimeline) {
+        if (toStartOfTimeline) return;
+        if (ev.sender.userId == MatrixClientPeg.get().credentials.userId) return;
+
+        var enabled = global.localStorage.getItem('notifications_enabled');
+        if (enabled === 'false') return;
+
+        var actions = MatrixClientPeg.get().getPushActionsForEvent(ev);
+        if (actions && actions.notify) {
+            this.displayNotification(ev, room);
+        }
+    }
+};
+

src/controllers/pages/MatrixChat.js

@@ -23,10 +23,14 @@ var MatrixClientPeg = require("../../MatrixClientPeg");
 
 var dis = require("../../dispatcher");
 
+var ComponentBroker = require('../../ComponentBroker');
+
+var Notifier = ComponentBroker.get('organisms/Notifier');
+
 module.exports = {
     getInitialState: function() {
         return {
-            logged_in: !!(MatrixClientPeg.get() && mxCliPeg.get().credentials),
+            logged_in: !!(MatrixClientPeg.get() && MatrixClientPeg.get().credentials),
             ready: false
         };
     },
@@ -61,14 +65,15 @@ module.exports = {
                     logged_in: false,
                     ready: false
                 });
+                Notifier.stop();
                 MatrixClientPeg.get().removeAllListeners();
                 MatrixClientPeg.replace(null);
                 break;
             case 'view_room':
+                this.focusComposer = true;
                 this.setState({
                     currentRoom: payload.room_id
                 });
-                this.focusComposer = true;
                 break;
             case 'view_prev_room':
                 roomIndexDelta = -1;
@@ -105,6 +110,7 @@ module.exports = {
             that.setState({ready: true, currentRoom: firstRoom});
             dis.dispatch({action: 'focus_composer'});
         });
+        Notifier.start();
         cli.startClient();
     },
 

src/dispatcher.js

@@ -17,4 +17,21 @@ limitations under the License.
 'use strict';
 
 var flux = require("flux");
-module.exports = new flux.Dispatcher();
+var extend = require("./extend");
+
+var MatrixDispatcher = function() {
+    flux.Dispatcher.call(this);
+};
+
+extend(MatrixDispatcher.prototype, flux.Dispatcher.prototype);
+MatrixDispatcher.prototype.dispatch = function(payload) {
+    if (this.dispatching) {
+        setTimeout(flux.Dispatcher.prototype.dispatch.bind(this, payload), 0);
+    } else {
+        this.dispatching = true;
+        flux.Dispatcher.prototype.dispatch.call(this, payload);
+        this.dispatching = false;
+    }
+}
+
+module.exports = new MatrixDispatcher();

src/extend.js

@@ -0,0 +1,8 @@
+module.exports = function(dest, src) {
+    for (var i in src) {
+        if (src.hasOwnProperty(i)) {
+            dest[i] = src[i];
+        }
+    }
+    return dest;
+}