forked from MirrorHub/synapse
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:
parent
43369cbe06
commit
584591c3e3
3 changed files with 55 additions and 5 deletions
|
@ -417,6 +417,13 @@ a:active { color: #000; }
|
|||
text-align: left ! important;
|
||||
}
|
||||
|
||||
.bubble .messagePending {
|
||||
opacity: 0.3
|
||||
}
|
||||
.messageUnSent {
|
||||
color: #F00;
|
||||
}
|
||||
|
||||
#room-fullscreen-image {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
|
|
|
@ -32,7 +32,7 @@ angular.module('RoomController', ['ngSanitize', 'matrixFilter', 'mFileInput'])
|
|||
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
|
||||
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.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
|
||||
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) {
|
||||
promise.then(
|
||||
function() {
|
||||
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) {
|
||||
$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";
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
|
|
|
@ -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>
|
||||
<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="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 class="avatar">
|
||||
<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 }}
|
||||
</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.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-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 }}"/>
|
||||
|
|
Loading…
Reference in a new issue