mirror of
https://github.com/element-hq/synapse
synced 2024-09-04 14:50:06 +00:00
room.html now displays messages from model-service. Add debugging fields. Hook up the room member *at the time* to the message so it can display the right historical member info.
This commit is contained in:
parent
ea80b9208d
commit
b0f0b7b75e
5 changed files with 31 additions and 17 deletions
|
@ -96,7 +96,7 @@ function(matrixService, $rootScope, $q, $timeout, mPresence, notificationService
|
||||||
__room.old_room_state.storeStateEvents(room.state);
|
__room.old_room_state.storeStateEvents(room.state);
|
||||||
__room.old_room_state.pagination_token = room.messages.start;
|
__room.old_room_state.pagination_token = room.messages.start;
|
||||||
|
|
||||||
__room.addMessageEvents(room.messages.chunk);
|
$rootScope["debug_"+room_id] = __room;
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -589,6 +589,10 @@ function(matrixService, $rootScope, $q, $timeout, mPresence, notificationService
|
||||||
|
|
||||||
// Store how far back we've paginated
|
// Store how far back we've paginated
|
||||||
$rootScope.events.rooms[room_id].pagination.earliest_token = messages.end;
|
$rootScope.events.rooms[room_id].pagination.earliest_token = messages.end;
|
||||||
|
|
||||||
|
var __room = modelService.getRoom(room_id);
|
||||||
|
__room.old_room_state.pagination_token = messages.end;
|
||||||
|
|
||||||
}
|
}
|
||||||
else {
|
else {
|
||||||
// InitialSync returns messages in chronological order
|
// InitialSync returns messages in chronological order
|
||||||
|
@ -597,6 +601,9 @@ function(matrixService, $rootScope, $q, $timeout, mPresence, notificationService
|
||||||
}
|
}
|
||||||
// Store where to start pagination
|
// Store where to start pagination
|
||||||
$rootScope.events.rooms[room_id].pagination.earliest_token = messages.start;
|
$rootScope.events.rooms[room_id].pagination.earliest_token = messages.start;
|
||||||
|
|
||||||
|
var __room = modelService.getRoom(room_id);
|
||||||
|
__room.old_room_state.pagination_token = messages.start;
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
|
@ -33,7 +33,7 @@ angular.module('modelService', [])
|
||||||
this.room_id = room_id;
|
this.room_id = room_id;
|
||||||
this.old_room_state = new RoomState();
|
this.old_room_state = new RoomState();
|
||||||
this.current_room_state = new RoomState();
|
this.current_room_state = new RoomState();
|
||||||
this.messages = []; // events which can be displayed on the UI. TODO move?
|
this.events = []; // events which can be displayed on the UI. TODO move?
|
||||||
};
|
};
|
||||||
Room.prototype = {
|
Room.prototype = {
|
||||||
addMessageEvents: function addMessageEvents(events, toFront) {
|
addMessageEvents: function addMessageEvents(events, toFront) {
|
||||||
|
@ -43,22 +43,26 @@ angular.module('modelService', [])
|
||||||
},
|
},
|
||||||
|
|
||||||
addMessageEvent: function addMessageEvent(event, toFront) {
|
addMessageEvent: function addMessageEvent(event, toFront) {
|
||||||
|
// every message must reference the RoomMember which made it *at
|
||||||
|
// that time* so things like display names display correctly.
|
||||||
if (toFront) {
|
if (toFront) {
|
||||||
this.messages.unshift(event);
|
event.room_member = this.old_room_state.getStateEvent("m.room.member", event.user_id);
|
||||||
|
this.events.unshift(event);
|
||||||
}
|
}
|
||||||
else {
|
else {
|
||||||
this.messages.push(event);
|
event.room_member = this.current_room_state.getStateEvent("m.room.member", event.user_id);
|
||||||
|
this.events.push(event);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
addOrReplaceMessageEvent: function addOrReplaceMessageEvent(event, toFront) {
|
addOrReplaceMessageEvent: function addOrReplaceMessageEvent(event, toFront) {
|
||||||
// Start looking from the tail since the first goal of this function
|
// Start looking from the tail since the first goal of this function
|
||||||
// is to find a message among the latest ones
|
// is to find a message among the latest ones
|
||||||
for (var i = this.messages.length - 1; i >= 0; i--) {
|
for (var i = this.events.length - 1; i >= 0; i--) {
|
||||||
var storedEvent = this.messages[i];
|
var storedEvent = this.events[i];
|
||||||
if (storedEvent.event_id === event.event_id) {
|
if (storedEvent.event_id === event.event_id) {
|
||||||
// It's clobbering time!
|
// It's clobbering time!
|
||||||
this.messages[i] = event;
|
this.events[i] = event;
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -13,7 +13,7 @@
|
||||||
|
|
||||||
<script type='text/javascript' src='js/jquery-1.8.3.min.js'></script>
|
<script type='text/javascript' src='js/jquery-1.8.3.min.js'></script>
|
||||||
<script type="text/javascript" src="https://www.google.com/recaptcha/api/js/recaptcha_ajax.js"></script>
|
<script type="text/javascript" src="https://www.google.com/recaptcha/api/js/recaptcha_ajax.js"></script>
|
||||||
<script src="js/angular.min.js"></script>
|
<script src="js/angular.js"></script>
|
||||||
<script src="js/angular-route.min.js"></script>
|
<script src="js/angular-route.min.js"></script>
|
||||||
<script src="js/angular-sanitize.min.js"></script>
|
<script src="js/angular-sanitize.min.js"></script>
|
||||||
<script src="js/angular-animate.min.js"></script>
|
<script src="js/angular-animate.min.js"></script>
|
||||||
|
|
|
@ -15,8 +15,8 @@ limitations under the License.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
angular.module('RoomController', ['ngSanitize', 'matrixFilter', 'mFileInput'])
|
angular.module('RoomController', ['ngSanitize', 'matrixFilter', 'mFileInput'])
|
||||||
.controller('RoomController', ['$modal', '$filter', '$scope', '$timeout', '$routeParams', '$location', '$rootScope', 'matrixService', 'mPresence', 'eventHandlerService', 'mFileUpload', 'matrixPhoneService', 'MatrixCall', 'notificationService',
|
.controller('RoomController', ['$modal', '$filter', '$scope', '$timeout', '$routeParams', '$location', '$rootScope', 'matrixService', 'mPresence', 'eventHandlerService', 'mFileUpload', 'matrixPhoneService', 'MatrixCall', 'notificationService', 'modelService',
|
||||||
function($modal, $filter, $scope, $timeout, $routeParams, $location, $rootScope, matrixService, mPresence, eventHandlerService, mFileUpload, matrixPhoneService, MatrixCall, notificationService) {
|
function($modal, $filter, $scope, $timeout, $routeParams, $location, $rootScope, matrixService, mPresence, eventHandlerService, mFileUpload, matrixPhoneService, MatrixCall, notificationService, modelService) {
|
||||||
'use strict';
|
'use strict';
|
||||||
var MESSAGES_PER_PAGINATION = 30;
|
var MESSAGES_PER_PAGINATION = 30;
|
||||||
var THUMBNAIL_SIZE = 320;
|
var THUMBNAIL_SIZE = 320;
|
||||||
|
@ -254,11 +254,11 @@ angular.module('RoomController', ['ngSanitize', 'matrixFilter', 'mFileInput'])
|
||||||
$scope.state.paginating = true;
|
$scope.state.paginating = true;
|
||||||
}
|
}
|
||||||
|
|
||||||
console.log("paginateBackMessages from " + $rootScope.events.rooms[$scope.room_id].pagination.earliest_token + " for " + numItems);
|
console.log("paginateBackMessages from " + $scope.room.old_room_state.pagination_token + " for " + numItems);
|
||||||
var originalTopRow = $("#messageTable>tbody>tr:first")[0];
|
var originalTopRow = $("#messageTable>tbody>tr:first")[0];
|
||||||
|
|
||||||
// Paginate events from the point in cache
|
// Paginate events from the point in cache
|
||||||
matrixService.paginateBackMessages($scope.room_id, $rootScope.events.rooms[$scope.room_id].pagination.earliest_token, numItems).then(
|
matrixService.paginateBackMessages($scope.room_id, $scope.room.old_room_state.pagination_token, numItems).then(
|
||||||
function(response) {
|
function(response) {
|
||||||
|
|
||||||
eventHandlerService.handleRoomMessages($scope.room_id, response.data, false, 'b');
|
eventHandlerService.handleRoomMessages($scope.room_id, response.data, false, 'b');
|
||||||
|
@ -717,6 +717,9 @@ angular.module('RoomController', ['ngSanitize', 'matrixFilter', 'mFileInput'])
|
||||||
|
|
||||||
var onInit2 = function() {
|
var onInit2 = function() {
|
||||||
console.log("onInit2");
|
console.log("onInit2");
|
||||||
|
// =============================
|
||||||
|
$scope.room = modelService.getRoom($scope.room_id);
|
||||||
|
// =============================
|
||||||
|
|
||||||
// Scroll down as soon as possible so that we point to the last message
|
// Scroll down as soon as possible so that we point to the last message
|
||||||
// if it already exists in memory
|
// if it already exists in memory
|
||||||
|
|
|
@ -123,10 +123,10 @@
|
||||||
ng-style="{ 'visibility': state.messages_visibility }"
|
ng-style="{ 'visibility': state.messages_visibility }"
|
||||||
keep-scroll>
|
keep-scroll>
|
||||||
<table id="messageTable" infinite-scroll="paginateMore()">
|
<table id="messageTable" infinite-scroll="paginateMore()">
|
||||||
<tr ng-repeat="msg in events.rooms[room_id].messages"
|
<tr ng-repeat="msg in room.events track by $index"
|
||||||
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="(room.events[$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"> {{ msg.user_id | mUserDisplayName: room_id }}</div>
|
<div class="sender" ng-hide="room.events[$index - 1].user_id === msg.user_id"> {{ msg.user_id | mUserDisplayName: room_id }}</div>
|
||||||
<div class="timestamp"
|
<div class="timestamp"
|
||||||
ng-class="msg.echo_msg_state">
|
ng-class="msg.echo_msg_state">
|
||||||
{{ (msg.origin_server_ts) | date:'MMM d HH:mm' }}
|
{{ (msg.origin_server_ts) | date:'MMM d HH:mm' }}
|
||||||
|
@ -134,7 +134,7 @@
|
||||||
</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" title="{{msg.user_id}}"
|
<img class="avatarImage" ng-src="{{ members[msg.user_id].avatar_url || 'img/default-profile.png' }}" width="32" height="32" title="{{msg.user_id}}"
|
||||||
ng-hide="events.rooms[room_id].messages[$index - 1].user_id === msg.user_id || msg.user_id === state.user_id"/>
|
ng-hide="room.events[$index - 1].user_id === msg.user_id || msg.user_id === state.user_id"/>
|
||||||
</td>
|
</td>
|
||||||
<td ng-class="(!msg.content.membership && ('m.room.topic' !== msg.type && 'm.room.name' !== msg.type))? (msg.content.msgtype === 'm.emote' ? 'emote text' : 'text') : 'membership text'">
|
<td ng-class="(!msg.content.membership && ('m.room.topic' !== msg.type && 'm.room.name' !== msg.type))? (msg.content.msgtype === 'm.emote' ? 'emote text' : 'text') : 'membership text'">
|
||||||
<div class="bubble" ng-click="openJson(msg)">
|
<div class="bubble" ng-click="openJson(msg)">
|
||||||
|
@ -204,7 +204,7 @@
|
||||||
</td>
|
</td>
|
||||||
<td class="rightBlock">
|
<td class="rightBlock">
|
||||||
<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"
|
||||||
ng-hide="events.rooms[room_id].messages[$index - 1].user_id === msg.user_id || msg.user_id !== state.user_id"/>
|
ng-hide="room.events[$index - 1].user_id === msg.user_id || msg.user_id !== state.user_id"/>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
</table>
|
</table>
|
||||||
|
|
Loading…
Reference in a new issue