mirror of
https://mau.dev/maunium/synapse.git
synced 2024-08-28 13:11:56 +00:00
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
@ -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;
|
||||||
|
@ -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";
|
||||||
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
@ -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 }}"/>
|
||||||
|
Loading…
Reference in New Issue
Block a user