Merge pull request #221 from aviraldg/feature-sync-status

Display sync status in favicon and title.

src/components/structures/MatrixChat.js

@@ -630,7 +630,7 @@ module.exports = React.createClass({
         var cli = MatrixClientPeg.get();
         var self = this;
         cli.on('sync', function(state, prevState) {
-            self.updateFavicon();
+            self.updateFavicon(state, prevState);
             if (state === "SYNCING" && prevState === "SYNCING") {
                 return;
             }
@@ -924,7 +924,7 @@ module.exports = React.createClass({
         });
     },
 
-    updateFavicon: function() {
+    updateFavicon: function(state, prevState) {
         var notifCount = 0;
 
         var rooms = MatrixClientPeg.get().getRooms();
@@ -939,11 +939,21 @@ module.exports = React.createClass({
             // This needs to be in in a try block as it will throw
             // if there are more than 100 badge count changes in
             // its internal queue
-            this.favicon.badge(notifCount);
+            var bgColor = "#0d0",
+                notif = notifCount;
+
+            if(state === "ERROR") {
+                notif = notif || "×";
+                bgColor = "#d00";
+            }
+
+            this.favicon.badge(notif, {
+                bgColor: bgColor
+            });
         } catch (e) {
             console.warn("Failed to set badge count: "+e.message);
         }
-        document.title = "Vector"+(notifCount > 0 ? " ["+notifCount+"]" : "");
+        document.title = `Vector ${state === "ERROR" ? " [offline]" : ""}${notifCount > 0 ? ` [${notifCount}]` : ""}`;
     },
 
     onUserSettingsClose: function() {