Skip to content

Commit c3385d5

Browse files
kegsaykegsay
committed
Merge pull request element-hq#332 from vector-im/kegan/syncing
Implement connection lost bar + resend all
2 parents 752f8bd + eaa2f94 commit c3385d5

7 files changed

Lines changed: 132 additions & 19 deletions

File tree

‎src/Resend.js‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
var MatrixClientPeg = require('matrix-react-sdk/lib/MatrixClientPeg');
2+
var dis = require('matrix-react-sdk/lib/dispatcher');
3+
4+
module.exports = {
5+
resend: function(event) {
6+
MatrixClientPeg.get().resendEvent(
7+
event, MatrixClientPeg.get().getRoom(event.getRoomId())
8+
).done(function() {
9+
dis.dispatch({
10+
action: 'message_sent',
11+
event: event
12+
});
13+
}, function() {
14+
dis.dispatch({
15+
action: 'message_send_failed',
16+
event: event
17+
});
18+
});
19+
dis.dispatch({
20+
action: 'message_resend_started',
21+
event: event
22+
});
23+
},
24+
};

‎src/controllers/organisms/RoomView.js‎

Lines changed: 36 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ var Modal = require("matrix-react-sdk/lib/Modal");
2424
var sdk = require('matrix-react-sdk/lib/index');
2525
var CallHandler = require('matrix-react-sdk/lib/CallHandler');
2626
var VectorConferenceHandler = require('../../modules/VectorConferenceHandler');
27+
var Resend = require("../../Resend");
2728

2829
var dis = require("matrix-react-sdk/lib/dispatcher");
2930

@@ -32,15 +33,18 @@ var INITIAL_SIZE = 20;
3233

3334
module.exports = {
3435
getInitialState: function() {
36+
var room = this.props.roomId ? MatrixClientPeg.get().getRoom(this.props.roomId) : null;
3537
return {
36-
room: this.props.roomId ? MatrixClientPeg.get().getRoom(this.props.roomId) : null,
38+
room: room,
3739
messageCap: INITIAL_SIZE,
3840
editingRoomSettings: false,
3941
uploadingRoomSettings: false,
4042
numUnreadMessages: 0,
4143
draggingFile: false,
4244
searching: false,
4345
searchResults: null,
46+
syncState: MatrixClientPeg.get().getSyncState(),
47+
hasUnsentMessages: this._hasUnsentMessages(room)
4448
}
4549
},
4650

@@ -50,6 +54,7 @@ module.exports = {
5054
MatrixClientPeg.get().on("Room.name", this.onRoomName);
5155
MatrixClientPeg.get().on("RoomMember.typing", this.onRoomMemberTyping);
5256
MatrixClientPeg.get().on("RoomState.members", this.onRoomStateMember);
57+
MatrixClientPeg.get().on("sync", this.onSyncStateChange);
5358
this.atBottom = true;
5459
},
5560

@@ -67,13 +72,17 @@ module.exports = {
6772
MatrixClientPeg.get().removeListener("Room.name", this.onRoomName);
6873
MatrixClientPeg.get().removeListener("RoomMember.typing", this.onRoomMemberTyping);
6974
MatrixClientPeg.get().removeListener("RoomState.members", this.onRoomStateMember);
75+
MatrixClientPeg.get().removeListener("sync", this.onSyncStateChange);
7076
}
7177
},
7278

7379
onAction: function(payload) {
7480
switch (payload.action) {
7581
case 'message_send_failed':
7682
case 'message_sent':
83+
this.setState({
84+
hasUnsentMessages: this._hasUnsentMessages(this.state.room)
85+
});
7786
case 'message_resend_started':
7887
this.setState({
7988
room: MatrixClientPeg.get().getRoom(this.props.roomId)
@@ -102,6 +111,12 @@ module.exports = {
102111
}
103112
},
104113

114+
onSyncStateChange: function(state) {
115+
this.setState({
116+
syncState: state
117+
});
118+
},
119+
105120
// MatrixRoom still showing the messages from the old room?
106121
// Set the key to the room_id. Sadly you can no longer get at
107122
// the key from inside the component, or we'd check this in code.
@@ -173,6 +188,19 @@ module.exports = {
173188
this._updateConfCallNotification();
174189
},
175190

191+
_hasUnsentMessages: function(room) {
192+
return this._getUnsentMessages(room).length > 0;
193+
},
194+
195+
_getUnsentMessages: function(room) {
196+
if (!room) { return []; }
197+
// TODO: It would be nice if the JS SDK provided nicer constant-time
198+
// constructs rather than O(N) (N=num msgs) on this.
199+
return room.timeline.filter(function(ev) {
200+
return ev.status === Matrix.EventStatus.NOT_SENT;
201+
});
202+
},
203+
176204
_updateConfCallNotification: function() {
177205
var room = MatrixClientPeg.get().getRoom(this.props.roomId);
178206
if (!room) return;
@@ -265,6 +293,13 @@ module.exports = {
265293
return false;
266294
},
267295

296+
onResendAllClick: function() {
297+
var eventsToResend = this._getUnsentMessages(this.state.room);
298+
eventsToResend.forEach(function(event) {
299+
Resend.resend(event);
300+
});
301+
},
302+
268303
onJoinButtonClicked: function(ev) {
269304
var self = this;
270305
MatrixClientPeg.get().joinRoom(this.props.roomId).then(function() {

‎src/skins/vector/css/molecules/EventTile.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -78,7 +78,7 @@ limitations under the License.
7878
}
7979

8080
.mx_EventTile_notSent {
81-
color: #f11;
81+
color: #ddd;
8282
}
8383

8484
.mx_EventTile_highlight {

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

Lines changed: 31 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -158,13 +158,14 @@ limitations under the License.
158158
order: 4;
159159

160160
width: 100%;
161-
-webkit-flex: 0 0 36px;
162-
flex: 0 0 36px;
161+
-webkit-flex: 0 0 auto;
162+
flex: 0 0 auto;
163163
}
164164

165165
.mx_RoomView_statusAreaBox {
166166
max-width: 960px;
167167
margin: auto;
168+
min-height: 36px;
168169
}
169170

170171
.mx_RoomView_statusAreaBox_line {
@@ -185,6 +186,34 @@ limitations under the License.
185186
vertical-align: middle;
186187
}
187188

189+
.mx_RoomView_connectionLostBar {
190+
margin-top: 19px;
191+
height: 58px;
192+
}
193+
194+
.mx_RoomView_connectionLostBar img {
195+
padding-left: 10px;
196+
padding-right: 22px;
197+
vertical-align: middle;
198+
float: left;
199+
}
200+
201+
.mx_RoomView_connectionLostBar_title {
202+
color: #ff0064;
203+
}
204+
205+
.mx_RoomView_connectionLostBar_desc {
206+
color: #454545;
207+
font-size: 14px;
208+
opacity: 0.5;
209+
}
210+
211+
.mx_RoomView_resend_link {
212+
color: #454545 ! important;
213+
text-decoration: underline ! important;
214+
cursor: pointer;
215+
}
216+
188217
.mx_RoomView_typingBar {
189218
margin-top: 10px;
190219
margin-left: 54px;

‎src/skins/vector/img/warning2.png‎

1.39 KB
Loading

‎src/skins/vector/views/molecules/MessageContextMenu.js‎

Lines changed: 2 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -22,25 +22,13 @@ var MatrixClientPeg = require('matrix-react-sdk/lib/MatrixClientPeg');
2222
var dis = require('matrix-react-sdk/lib/dispatcher');
2323
var sdk = require('matrix-react-sdk')
2424
var Modal = require('matrix-react-sdk/lib/Modal');
25+
var Resend = require("../../../../Resend");
2526

2627
module.exports = React.createClass({
2728
displayName: 'MessageContextMenu',
2829

2930
onResendClick: function() {
30-
MatrixClientPeg.get().resendEvent(
31-
this.props.mxEvent, MatrixClientPeg.get().getRoom(
32-
this.props.mxEvent.getRoomId()
33-
)
34-
).done(function() {
35-
dis.dispatch({
36-
action: 'message_sent'
37-
});
38-
}, function() {
39-
dis.dispatch({
40-
action: 'message_send_failed'
41-
});
42-
});
43-
dis.dispatch({action: 'message_resend_started'});
31+
Resend.resend(this.props.mxEvent);
4432
if (this.props.onFinished) this.props.onFinished();
4533
},
4634

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

Lines changed: 38 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -197,9 +197,46 @@ module.exports = React.createClass({
197197
} else {
198198
var typingString = this.getWhoIsTypingString();
199199
var unreadMsgs = this.getUnreadMessagesString();
200+
// no conn bar trumps unread count since you can't get unread messages
201+
// without a connection! (technically may already have some but meh)
202+
// It also trumps the "some not sent" msg since you can't resend without
203+
// a connection!
204+
if (this.state.syncState === "ERROR") {
205+
statusBar = (
206+
<div className="mx_RoomView_connectionLostBar">
207+
<img src="img/warning2.png" width="30" height="30" alt="/!\"/>
208+
<div className="mx_RoomView_connectionLostBar_textArea">
209+
<div className="mx_RoomView_connectionLostBar_title">
210+
Connectivity to the server has been lost.
211+
</div>
212+
<div className="mx_RoomView_connectionLostBar_desc">
213+
Sent messages will be stored until your connection has returned.
214+
</div>
215+
</div>
216+
</div>
217+
);
218+
}
219+
else if (this.state.hasUnsentMessages) {
220+
statusBar = (
221+
<div className="mx_RoomView_connectionLostBar">
222+
<img src="img/warning2.png" width="30" height="30" alt="/!\"/>
223+
<div className="mx_RoomView_connectionLostBar_textArea">
224+
<div className="mx_RoomView_connectionLostBar_title">
225+
Some of your messages have not been sent.
226+
</div>
227+
<div className="mx_RoomView_connectionLostBar_desc">
228+
<a className="mx_RoomView_resend_link"
229+
onClick={ this.onResendAllClick }>
230+
Resend all now
231+
</a> or select individual messages to re-send.
232+
</div>
233+
</div>
234+
</div>
235+
);
236+
}
200237
// unread count trumps who is typing since the unread count is only
201238
// set when you've scrolled up
202-
if (unreadMsgs) {
239+
else if (unreadMsgs) {
203240
statusBar = (
204241
<div className="mx_RoomView_unreadMessagesBar" onClick={ this.scrollToBottom }>
205242
<img src="img/newmessages.png" width="24" height="24" alt=""/>

0 commit comments

Comments
 (0)