diff --git a/src/Resend.js b/src/Resend.js
new file mode 100644
index 00000000..52b7c936
--- /dev/null
+++ b/src/Resend.js
@@ -0,0 +1,24 @@
+var MatrixClientPeg = require('matrix-react-sdk/lib/MatrixClientPeg');
+var dis = require('matrix-react-sdk/lib/dispatcher');
+
+module.exports = {
+ resend: function(event) {
+ MatrixClientPeg.get().resendEvent(
+ event, MatrixClientPeg.get().getRoom(event.getRoomId())
+ ).done(function() {
+ dis.dispatch({
+ action: 'message_sent',
+ event: event
+ });
+ }, function() {
+ dis.dispatch({
+ action: 'message_send_failed',
+ event: event
+ });
+ });
+ dis.dispatch({
+ action: 'message_resend_started',
+ event: event
+ });
+ },
+};
\ No newline at end of file
diff --git a/src/controllers/organisms/RoomView.js b/src/controllers/organisms/RoomView.js
index b60941c2..83d44864 100644
--- a/src/controllers/organisms/RoomView.js
+++ b/src/controllers/organisms/RoomView.js
@@ -24,6 +24,7 @@ var Modal = require("matrix-react-sdk/lib/Modal");
var sdk = require('matrix-react-sdk/lib/index');
var CallHandler = require('matrix-react-sdk/lib/CallHandler');
var VectorConferenceHandler = require('../../modules/VectorConferenceHandler');
+var Resend = require("../../Resend");
var dis = require("matrix-react-sdk/lib/dispatcher");
@@ -32,8 +33,9 @@ var INITIAL_SIZE = 20;
module.exports = {
getInitialState: function() {
+ var room = this.props.roomId ? MatrixClientPeg.get().getRoom(this.props.roomId) : null;
return {
- room: this.props.roomId ? MatrixClientPeg.get().getRoom(this.props.roomId) : null,
+ room: room,
messageCap: INITIAL_SIZE,
editingRoomSettings: false,
uploadingRoomSettings: false,
@@ -41,6 +43,8 @@ module.exports = {
draggingFile: false,
searching: false,
searchResults: null,
+ syncState: MatrixClientPeg.get().getSyncState(),
+ hasUnsentMessages: this._hasUnsentMessages(room)
}
},
@@ -50,6 +54,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 +72,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);
}
},
@@ -74,6 +80,9 @@ module.exports = {
switch (payload.action) {
case 'message_send_failed':
case 'message_sent':
+ this.setState({
+ hasUnsentMessages: this._hasUnsentMessages(this.state.room)
+ });
case 'message_resend_started':
this.setState({
room: MatrixClientPeg.get().getRoom(this.props.roomId)
@@ -102,6 +111,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.
@@ -173,6 +188,19 @@ module.exports = {
this._updateConfCallNotification();
},
+ _hasUnsentMessages: function(room) {
+ return this._getUnsentMessages(room).length > 0;
+ },
+
+ _getUnsentMessages: function(room) {
+ if (!room) { return []; }
+ // TODO: It would be nice if the JS SDK provided nicer constant-time
+ // constructs rather than O(N) (N=num msgs) on this.
+ return room.timeline.filter(function(ev) {
+ return ev.status === Matrix.EventStatus.NOT_SENT;
+ });
+ },
+
_updateConfCallNotification: function() {
var room = MatrixClientPeg.get().getRoom(this.props.roomId);
if (!room) return;
@@ -265,6 +293,13 @@ module.exports = {
return false;
},
+ onResendAllClick: function() {
+ var eventsToResend = this._getUnsentMessages(this.state.room);
+ eventsToResend.forEach(function(event) {
+ Resend.resend(event);
+ });
+ },
+
onJoinButtonClicked: function(ev) {
var self = this;
MatrixClientPeg.get().joinRoom(this.props.roomId).then(function() {
diff --git a/src/skins/vector/css/molecules/EventTile.css b/src/skins/vector/css/molecules/EventTile.css
index eb59711e..f9c8551b 100644
--- a/src/skins/vector/css/molecules/EventTile.css
+++ b/src/skins/vector/css/molecules/EventTile.css
@@ -78,7 +78,7 @@ limitations under the License.
}
.mx_EventTile_notSent {
- color: #f11;
+ color: #ddd;
}
.mx_EventTile_highlight {
diff --git a/src/skins/vector/css/organisms/RoomView.css b/src/skins/vector/css/organisms/RoomView.css
index d564b086..508e3457 100644
--- a/src/skins/vector/css/organisms/RoomView.css
+++ b/src/skins/vector/css/organisms/RoomView.css
@@ -158,13 +158,14 @@ limitations under the License.
order: 4;
width: 100%;
- -webkit-flex: 0 0 36px;
- flex: 0 0 36px;
+ -webkit-flex: 0 0 auto;
+ flex: 0 0 auto;
}
.mx_RoomView_statusAreaBox {
max-width: 960px;
margin: auto;
+ min-height: 36px;
}
.mx_RoomView_statusAreaBox_line {
@@ -185,6 +186,34 @@ limitations under the License.
vertical-align: middle;
}
+.mx_RoomView_connectionLostBar {
+ margin-top: 19px;
+ height: 58px;
+}
+
+.mx_RoomView_connectionLostBar img {
+ padding-left: 10px;
+ padding-right: 22px;
+ vertical-align: middle;
+ float: left;
+}
+
+.mx_RoomView_connectionLostBar_title {
+ color: #ff0064;
+}
+
+.mx_RoomView_connectionLostBar_desc {
+ color: #454545;
+ font-size: 14px;
+ opacity: 0.5;
+}
+
+.mx_RoomView_resend_link {
+ color: #454545 ! important;
+ text-decoration: underline ! important;
+ cursor: pointer;
+}
+
.mx_RoomView_typingBar {
margin-top: 10px;
margin-left: 54px;
diff --git a/src/skins/vector/img/warning2.png b/src/skins/vector/img/warning2.png
new file mode 100644
index 00000000..db0fd4a8
Binary files /dev/null and b/src/skins/vector/img/warning2.png differ
diff --git a/src/skins/vector/views/molecules/MessageContextMenu.js b/src/skins/vector/views/molecules/MessageContextMenu.js
index 995c2c4b..b36d4ccb 100644
--- a/src/skins/vector/views/molecules/MessageContextMenu.js
+++ b/src/skins/vector/views/molecules/MessageContextMenu.js
@@ -22,25 +22,13 @@ var MatrixClientPeg = require('matrix-react-sdk/lib/MatrixClientPeg');
var dis = require('matrix-react-sdk/lib/dispatcher');
var sdk = require('matrix-react-sdk')
var Modal = require('matrix-react-sdk/lib/Modal');
+var Resend = require("../../../../Resend");
module.exports = React.createClass({
displayName: 'MessageContextMenu',
onResendClick: function() {
- MatrixClientPeg.get().resendEvent(
- this.props.mxEvent, MatrixClientPeg.get().getRoom(
- this.props.mxEvent.getRoomId()
- )
- ).done(function() {
- dis.dispatch({
- action: 'message_sent'
- });
- }, function() {
- dis.dispatch({
- action: 'message_send_failed'
- });
- });
- dis.dispatch({action: 'message_resend_started'});
+ Resend.resend(this.props.mxEvent);
if (this.props.onFinished) this.props.onFinished();
},
diff --git a/src/skins/vector/views/organisms/RoomView.js b/src/skins/vector/views/organisms/RoomView.js
index 4f15ea61..c07a890c 100644
--- a/src/skins/vector/views/organisms/RoomView.js
+++ b/src/skins/vector/views/organisms/RoomView.js
@@ -197,9 +197,46 @@ 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)
+ // It also trumps the "some not sent" msg since you can't resend without
+ // a connection!
+ if (this.state.syncState === "ERROR") {
+ statusBar = (
+ <div className="mx_RoomView_connectionLostBar">
+ <img src="img/warning2.png" width="30" height="30" alt="/!\"/>
+ <div className="mx_RoomView_connectionLostBar_textArea">
+ <div className="mx_RoomView_connectionLostBar_title">
+ Connectivity to the server has been lost.
+ </div>
+ <div className="mx_RoomView_connectionLostBar_desc">
+ Sent messages will be stored until your connection has returned.
+ </div>
+ </div>
+ </div>
+ );
+ }
+ else if (this.state.hasUnsentMessages) {
+ statusBar = (
+ <div className="mx_RoomView_connectionLostBar">
+ <img src="img/warning2.png" width="30" height="30" alt="/!\"/>
+ <div className="mx_RoomView_connectionLostBar_textArea">
+ <div className="mx_RoomView_connectionLostBar_title">
+ Some of your messages have not been sent.
+ </div>
+ <div className="mx_RoomView_connectionLostBar_desc">
+ <a className="mx_RoomView_resend_link"
+ onClick={ this.onResendAllClick }>
+ Resend all now
+ </a> or select individual messages to re-send.
+ </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=""/>