Add a 'connection lost' bar.

src/controllers/organisms/RoomView.js

@@ -41,6 +41,7 @@ module.exports = {
             draggingFile: false,
             searching: false,
             searchResults: null,
+            syncState: MatrixClientPeg.get().getSyncState()
         }
     },
 
@@ -50,6 +51,7 @@ module.exports = {
         MatrixClientPeg.get().on("Room.name", this.onRoomName);
         MatrixClientPeg.get().on("RoomMember.typing", this.onRoomMemberTyping);
         MatrixClientPeg.get().on("RoomState.members", this.onRoomStateMember);
+        MatrixClientPeg.get().on("sync", this.onSyncStateChange);
         this.atBottom = true;
     },
 
@@ -67,6 +69,7 @@ module.exports = {
             MatrixClientPeg.get().removeListener("Room.name", this.onRoomName);
             MatrixClientPeg.get().removeListener("RoomMember.typing", this.onRoomMemberTyping);
             MatrixClientPeg.get().removeListener("RoomState.members", this.onRoomStateMember);
+            MatrixClientPeg.get().removeListener("sync", this.onSyncStateChange);
         }
     },
 
@@ -102,6 +105,12 @@ module.exports = {
         }
     },
 
+    onSyncStateChange: function(state) {
+        this.setState({
+            syncState: state
+        });
+    },
+
     // MatrixRoom still showing the messages from the old room?
     // Set the key to the room_id. Sadly you can no longer get at
     // the key from inside the component, or we'd check this in code.

src/skins/vector/css/organisms/RoomView.css

@@ -185,6 +185,30 @@ limitations under the License.
     vertical-align: middle;
 }
 
+.mx_RoomView_connectionLostBar {
+    margin-top: 5px;
+}
+
+.mx_RoomView_connectionLostBar img {
+    padding-left: 10px;
+    padding-right: 22px;
+    vertical-align: middle;
+    float: left;
+}
+
+.mx_RoomView_connectionLostBar_textArea {
+    float: left;
+}
+
+.mx_RoomView_connectionLostBar_title {
+    color: #f00;
+}
+
+.mx_RoomView_connectionLostBar_desc {
+    color: #ddd;
+    font-size: 12px;
+}
+
 .mx_RoomView_typingBar {
     margin-top: 10px;
     margin-left: 54px;

src/skins/vector/views/organisms/RoomView.js

@@ -197,9 +197,26 @@ module.exports = React.createClass({
             } else {
                 var typingString = this.getWhoIsTypingString();
                 var unreadMsgs = this.getUnreadMessagesString();
+                // no conn bar trumps unread count since you can't get unread messages
+                // without a connection! (technically may already have some but meh)
+                if (this.state.syncState === "ERROR") {
+                    statusBar = (
+                        <div className="mx_RoomView_connectionLostBar">
+                            <img src="img/cancel.png" width="10" height="12" alt=""/>
+                            <div className="mx_RoomView_connectionLostBar_textArea">
+                                <span className="mx_RoomView_connectionLostBar_title">
+                                Internet connection has been lost.
+                                </span>
+                                <div className="mx_RoomView_connectionLostBar_desc">
+                                Sent messages will be stored until your connection has resumed.
+                                </div>
+                            </div>
+                        </div>
+                    );
+                }
                 // unread count trumps who is typing since the unread count is only
                 // set when you've scrolled up
-                if (unreadMsgs) {
+                else if (unreadMsgs) {
                     statusBar = (
                         <div className="mx_RoomView_unreadMessagesBar" onClick={ this.scrollToBottom }>
                             <img src="img/newmessages.png" width="24" height="24" alt=""/>