Fixed duplicated messages sending in slow network condition.

Show the message sending flow state in the messages list:
  - While sending, the message appears semi transparent in the chat.
  - If successfully sent, it appears as before, ie normal
  - In case of failure, it appears in red with an Unsent text.
This commit is contained in:
Emmanuel ROHEE 2014-09-05 14:09:14 +02:00
parent 43369cbe06
commit 584591c3e3
3 changed files with 55 additions and 5 deletions

View File

@ -417,6 +417,13 @@ a:active { color: #000; }
text-align: left ! important; text-align: left ! important;
} }
.bubble .messagePending {
opacity: 0.3
}
.messageUnSent {
color: #F00;
}
#room-fullscreen-image { #room-fullscreen-image {
position: absolute; position: absolute;
top: 0px; top: 0px;

View File

@ -32,7 +32,7 @@ angular.module('RoomController', ['ngSanitize', 'matrixFilter', 'mFileInput'])
first_pagination: true, // this is toggled off when the first pagination is done first_pagination: true, // this is toggled off when the first pagination is done
can_paginate: true, // this is toggled off when we run out of items can_paginate: true, // this is toggled off when we run out of items
paginating: false, // used to avoid concurrent pagination requests pulling in dup contents paginating: false, // used to avoid concurrent pagination requests pulling in dup contents
stream_failure: undefined, // the response when the stream fails stream_failure: undefined // the response when the stream fails
}; };
$scope.members = {}; $scope.members = {};
$scope.autoCompleting = false; $scope.autoCompleting = false;
@ -395,17 +395,55 @@ angular.module('RoomController', ['ngSanitize', 'matrixFilter', 'mFileInput'])
// By default send this as a message unless it's an IRC-style command // By default send this as a message unless it's an IRC-style command
if (!promise && !isCmd) { if (!promise && !isCmd) {
promise = matrixService.sendTextMessage($scope.room_id, $scope.textInput); var message = $scope.textInput;
$scope.textInput = "";
// Echo the message to the room
// To do so, create a minimalist fake text message event and add it to the in-memory list of room messages
var echoMessage = {
content: {
body: message,
hsob_ts: "Sending...", // Hack timestamp to display this text in place of the message time
msgtype: "m.text"
},
room_id: $scope.room_id,
type: "m.room.message",
user_id: $scope.state.user_id,
echo_msg_state: "messagePending" // Add custom field to indicate the state of this fake message to HTML
};
$rootScope.events.rooms[$scope.room_id].messages.push(echoMessage);
scrollToBottom();
// Make the request
promise = matrixService.sendTextMessage($scope.room_id, message);
} }
if (promise) { if (promise) {
promise.then( promise.then(
function() { function() {
console.log("Request successfully sent"); console.log("Request successfully sent");
$scope.textInput = "";
if (echoMessage) {
// Remove the fake echo message from the room messages
// It will be replaced by the one acknowledged by the server
var index = $rootScope.events.rooms[$scope.room_id].messages.indexOf(echoMessage);
if (index > -1) {
$rootScope.events.rooms[$scope.room_id].messages.splice(index, 1);
}
}
else {
$scope.textInput = "";
}
}, },
function(error) { function(error) {
$scope.feedback = "Request failed: " + error.data.error; $scope.feedback = "Request failed: " + error.data.error;
if (echoMessage) {
// Mark the message as unsent for the rest of the page life
echoMessage.content.hsob_ts = "Unsent";
echoMessage.echo_msg_state = "messageUnSent";
}
}); });
} }
}; };

View File

@ -40,7 +40,10 @@
ng-class="(events.rooms[room_id].messages[$index + 1].user_id !== msg.user_id ? 'differentUser' : '') + (msg.user_id === state.user_id ? ' mine' : '')" scroll-item> ng-class="(events.rooms[room_id].messages[$index + 1].user_id !== msg.user_id ? 'differentUser' : '') + (msg.user_id === state.user_id ? ' mine' : '')" scroll-item>
<td class="leftBlock"> <td class="leftBlock">
<div class="sender" ng-hide="events.rooms[room_id].messages[$index - 1].user_id === msg.user_id">{{ members[msg.user_id].displayname || msg.user_id }}</div> <div class="sender" ng-hide="events.rooms[room_id].messages[$index - 1].user_id === msg.user_id">{{ members[msg.user_id].displayname || msg.user_id }}</div>
<div class="timestamp">{{ (msg.content.hsob_ts || msg.ts) | date:'MMM d HH:mm' }}</div> <div class="timestamp"
ng-class="msg.echo_msg_state">
{{ (msg.content.hsob_ts || msg.ts) | date:'MMM d HH:mm' }}
</div>
</td> </td>
<td class="avatar"> <td class="avatar">
<img class="avatarImage" ng-src="{{ members[msg.user_id].avatar_url || 'img/default-profile.png' }}" width="32" height="32" <img class="avatarImage" ng-src="{{ members[msg.user_id].avatar_url || 'img/default-profile.png' }}" width="32" height="32"
@ -67,7 +70,9 @@
{{ members[msg.state_key].displayname || msg.state_key }} {{ members[msg.state_key].displayname || msg.state_key }}
</span> </span>
<span ng-show='msg.content.msgtype === "m.emote"' ng-bind-html="'* ' + (members[msg.user_id].displayname || msg.user_id) + ' ' + msg.content.body | linky:'_blank'"/> <span ng-show='msg.content.msgtype === "m.emote"' ng-bind-html="'* ' + (members[msg.user_id].displayname || msg.user_id) + ' ' + msg.content.body | linky:'_blank'"/>
<span ng-show='msg.content.msgtype === "m.text"' ng-bind-html="((msg.content.msgtype === 'm.text') ? msg.content.body : '') | linky:'_blank'"/> <span ng-show='msg.content.msgtype === "m.text"'
ng-class="msg.echo_msg_state"
ng-bind-html="((msg.content.msgtype === 'm.text') ? msg.content.body : '') | linky:'_blank'"/>
<div ng-show='msg.content.msgtype === "m.image"'> <div ng-show='msg.content.msgtype === "m.image"'>
<div ng-hide='msg.content.thumbnail_url' ng-style="msg.content.body.h && { 'height' : (msg.content.body.h < 320) ? msg.content.body.h : 320}"> <div ng-hide='msg.content.thumbnail_url' ng-style="msg.content.body.h && { 'height' : (msg.content.body.h < 320) ? msg.content.body.h : 320}">
<img class="image" ng-src="{{ msg.content.url }}"/> <img class="image" ng-src="{{ msg.content.url }}"/>