diff options
Diffstat (limited to 'webclient')
| -rw-r--r-- | webclient/app-controller.js | 2 | ||||
| -rw-r--r-- | webclient/app.js | 8 | ||||
| -rw-r--r-- | webclient/components/matrix/event-handler-service.js | 30 | ||||
| -rw-r--r-- | webclient/components/matrix/event-stream-service.js | 22 | ||||
| -rw-r--r-- | webclient/components/matrix/matrix-service.js | 86 | ||||
| -rw-r--r-- | webclient/home/home-controller.js | 14 | ||||
| -rw-r--r-- | webclient/recents/recents-controller.js | 47 | ||||
| -rw-r--r-- | webclient/recents/recents.html | 5 | ||||
| -rw-r--r-- | webclient/room/room-controller.js | 84 | ||||
| -rw-r--r-- | webclient/room/room.html | 8 |
10 files changed, 194 insertions, 112 deletions
diff --git a/webclient/app-controller.js b/webclient/app-controller.js index 5d3fa6ddc8..80474bb8df 100644 --- a/webclient/app-controller.js +++ b/webclient/app-controller.js @@ -33,7 +33,7 @@ angular.module('MatrixWebClientController', ['matrixService', 'mPresence', 'even }); if (matrixService.isUserLoggedIn()) { - // eventStreamService.resume(); + eventStreamService.resume(); mPresence.start(); } diff --git a/webclient/app.js b/webclient/app.js index b52479babe..02695c3ae6 100644 --- a/webclient/app.js +++ b/webclient/app.js @@ -81,13 +81,11 @@ matrixWebClient.config(['$routeProvider', '$provide', '$httpProvider', $httpProvider.interceptors.push('AccessTokenInterceptor'); }]); -matrixWebClient.run(['$location', 'matrixService', 'eventStreamService', function($location, matrixService, eventStreamService) { +matrixWebClient.run(['$location', 'matrixService', function($location, matrixService) { + // If user auth details are not in cache, go to the login page if (!matrixService.isUserLoggedIn()) { - eventStreamService.stop(); $location.path("login"); } - else { - // eventStreamService.resume(); - } + }]); diff --git a/webclient/components/matrix/event-handler-service.js b/webclient/components/matrix/event-handler-service.js index 7514770583..2f7580d682 100644 --- a/webclient/components/matrix/event-handler-service.js +++ b/webclient/components/matrix/event-handler-service.js @@ -27,13 +27,15 @@ Typically, this service will store events or broadcast them to any listeners if typically all the $on method would do is update its own $scope. */ angular.module('eventHandlerService', []) -.factory('eventHandlerService', ['matrixService', '$rootScope', function(matrixService, $rootScope) { +.factory('eventHandlerService', ['matrixService', '$rootScope', '$q', function(matrixService, $rootScope, $q) { var MSG_EVENT = "MSG_EVENT"; var MEMBER_EVENT = "MEMBER_EVENT"; var PRESENCE_EVENT = "PRESENCE_EVENT"; + + var InitialSyncDeferred = $q.defer(); $rootScope.events = { - rooms: {}, // will contain roomId: { messages:[], members:{userid1: event} } + rooms: {} // will contain roomId: { messages:[], members:{userid1: event} } }; $rootScope.presence = {}; @@ -47,11 +49,11 @@ angular.module('eventHandlerService', []) } } - var reInitRoom = function(room_id) { - $rootScope.events.rooms[room_id] = {}; - $rootScope.events.rooms[room_id].messages = []; - $rootScope.events.rooms[room_id].members = {}; - } + var resetRoomMessages = function(room_id) { + if ($rootScope.events.rooms[room_id]) { + $rootScope.events.rooms[room_id].messages = []; + } + }; var handleMessage = function(event, isLiveEvent) { initRoom(event.room_id); @@ -124,8 +126,18 @@ angular.module('eventHandlerService', []) } }, - reInitRoom: function(room_id) { - reInitRoom(room_id); + handleInitialSyncDone: function() { + console.log("# handleInitialSyncDone"); + InitialSyncDeferred.resolve($rootScope.events, $rootScope.presence); }, + + // Returns a promise that resolves when the initialSync request has been processed + waitForInitialSyncCompletion: function() { + return InitialSyncDeferred.promise; + }, + + resetRoomMessages: function(room_id) { + resetRoomMessages(room_id); + } }; }]); diff --git a/webclient/components/matrix/event-stream-service.js b/webclient/components/matrix/event-stream-service.js index a1a98b2a36..441148670e 100644 --- a/webclient/components/matrix/event-stream-service.js +++ b/webclient/components/matrix/event-stream-service.js @@ -25,7 +25,8 @@ the eventHandlerService. angular.module('eventStreamService', []) .factory('eventStreamService', ['$q', '$timeout', 'matrixService', 'eventHandlerService', function($q, $timeout, matrixService, eventHandlerService) { var END = "END"; - var TIMEOUT_MS = 30000; + var SERVER_TIMEOUT_MS = 30000; + var CLIENT_TIMEOUT_MS = 40000; var ERR_TIMEOUT_MS = 5000; var settings = { @@ -55,7 +56,7 @@ angular.module('eventStreamService', []) deferred = deferred || $q.defer(); // run the stream from the latest token - matrixService.getEventStream(settings.from, TIMEOUT_MS).then( + matrixService.getEventStream(settings.from, SERVER_TIMEOUT_MS, CLIENT_TIMEOUT_MS).then( function(response) { if (!settings.isActive) { console.log("[EventStream] Got response but now inactive. Dropping data."); @@ -80,7 +81,7 @@ angular.module('eventStreamService', []) } }, function(error) { - if (error.status == 403) { + if (error.status === 403) { settings.shouldPoll = false; } @@ -96,7 +97,7 @@ angular.module('eventStreamService', []) ); return deferred.promise; - } + }; var startEventStream = function() { settings.shouldPoll = true; @@ -110,18 +111,17 @@ angular.module('eventStreamService', []) for (var i = 0; i < rooms.length; ++i) { var room = rooms[i]; if ("state" in room) { - for (var j = 0; j < room.state.length; ++j) { - eventHandlerService.handleEvents(room.state[j], false); - } + eventHandlerService.handleEvents(room.state, false); } } var presence = response.data.presence; - for (var i = 0; i < presence.length; ++i) { - eventHandlerService.handleEvent(presence[i], false); - } + eventHandlerService.handleEvents(presence, false); + + // Initial sync is done + eventHandlerService.handleInitialSyncDone(); - settings.from = response.data.end + settings.from = response.data.end; doEventStream(deferred); }, function(error) { diff --git a/webclient/components/matrix/matrix-service.js b/webclient/components/matrix/matrix-service.js index 2feddac5d8..b56eef6af5 100644 --- a/webclient/components/matrix/matrix-service.js +++ b/webclient/components/matrix/matrix-service.js @@ -41,7 +41,7 @@ angular.module('matrixService', []) var prefixPath = "/matrix/client/api/v1"; var MAPPING_PREFIX = "alias_for_"; - var doRequest = function(method, path, params, data) { + var doRequest = function(method, path, params, data, $httpParams) { if (!config) { console.warn("No config exists. Cannot perform request to "+path); return; @@ -58,7 +58,7 @@ angular.module('matrixService', []) path = prefixPath + path; } - return doBaseRequest(config.homeserver, method, path, params, data, undefined); + return doBaseRequest(config.homeserver, method, path, params, data, undefined, $httpParams); }; var doBaseRequest = function(baseUrl, method, path, params, data, headers, $httpParams) { @@ -343,15 +343,31 @@ angular.module('matrixService', []) return doBaseRequest(config.homeserver, "POST", path, params, file, headers, $httpParams); }, - - // start listening on /events - getEventStream: function(from, timeout) { + + /** + * Start listening on /events + * @param {String} from the token from which to listen events to + * @param {Integer} serverTimeout the time in ms the server will hold open the connection + * @param {Integer} clientTimeout the timeout in ms used at the client HTTP request level + * @returns a promise + */ + getEventStream: function(from, serverTimeout, clientTimeout) { var path = "/events"; var params = { from: from, - timeout: timeout + timeout: serverTimeout }; - return doRequest("GET", path, params); + + var $httpParams; + if (clientTimeout) { + // If the Internet connection is lost, this timeout is used to be able to + // cancel the current request and notify the client so that it can retry with a new request. + $httpParams = { + timeout: clientTimeout + }; + } + + return doRequest("GET", path, params, undefined, $httpParams); }, // Indicates if user authentications details are stored in cache @@ -420,34 +436,38 @@ angular.module('matrixService', []) /****** Room aliases management ******/ /** - * Enhance data returned by rooms() and publicRooms() by adding room_alias - * & room_display_name which are computed from data already retrieved from the server. - * @param {Array} data the response of rooms() and publicRooms() - * @returns {Array} the same array with enriched objects + * Get the room_alias & room_display_name which are computed from data + * already retrieved from the server. + * @param {Room object} room one element of the array returned by the response + * of rooms() and publicRooms() + * @returns {Object} {room_alias: "...", room_display_name: "..."} */ - assignRoomAliases: function(data) { - for (var i=0; i<data.length; i++) { - var alias = this.getRoomIdToAliasMapping(data[i].room_id); - if (alias) { - // use the existing alias from storage - data[i].room_alias = alias; - data[i].room_display_name = alias; - } - else if (data[i].aliases && data[i].aliases[0]) { - // save the mapping - // TODO: select the smarter alias from the array - this.createRoomIdToAliasMapping(data[i].room_id, data[i].aliases[0]); - data[i].room_display_name = data[i].aliases[0]; - } - else if (data[i].membership == "invite" && "inviter" in data[i]) { - data[i].room_display_name = data[i].inviter + "'s room" - } - else { - // last resort use the room id - data[i].room_display_name = data[i].room_id; - } + getRoomAliasAndDisplayName: function(room) { + var result = { + room_alias: undefined, + room_display_name: undefined + }; + + var alias = this.getRoomIdToAliasMapping(room.room_id); + if (alias) { + // use the existing alias from storage + result.room_alias = alias; + result.room_display_name = alias; + } + else if (room.aliases && room.aliases[0]) { + // save the mapping + // TODO: select the smarter alias from the array + this.createRoomIdToAliasMapping(room.room_id, room.aliases[0]); + result.room_display_name = room.aliases[0]; + } + else if (room.membership === "invite" && "inviter" in room) { + result.room_display_name = room.inviter + "'s room"; + } + else { + // last resort use the room id + result.room_display_name = room.room_id; } - return data; + return result; }, createRoomIdToAliasMapping: function(roomId, alias) { diff --git a/webclient/home/home-controller.js b/webclient/home/home-controller.js index e8e91eede7..547a5c5603 100644 --- a/webclient/home/home-controller.js +++ b/webclient/home/home-controller.js @@ -17,8 +17,8 @@ limitations under the License. 'use strict'; angular.module('HomeController', ['matrixService', 'eventHandlerService', 'RecentsController']) -.controller('HomeController', ['$scope', '$location', 'matrixService', 'eventHandlerService', 'eventStreamService', - function($scope, $location, matrixService, eventHandlerService, eventStreamService) { +.controller('HomeController', ['$scope', '$location', 'matrixService', + function($scope, $location, matrixService) { $scope.config = matrixService.config(); $scope.public_rooms = []; @@ -42,11 +42,15 @@ angular.module('HomeController', ['matrixService', 'eventHandlerService', 'Recen matrixService.publicRooms().then( function(response) { - $scope.public_rooms = matrixService.assignRoomAliases(response.data.chunk); + $scope.public_rooms = response.data.chunk; + for (var i = 0; i < $scope.public_rooms.length; i++) { + var room = $scope.public_rooms[i]; + + // Add room_alias & room_display_name members + angular.extend(room, matrixService.getRoomAliasAndDisplayName(room)); + } } ); - - eventStreamService.resume(); }; $scope.createNewRoom = function(room_id, isPrivate) { diff --git a/webclient/recents/recents-controller.js b/webclient/recents/recents-controller.js index bf6a1b8874..d33d41a922 100644 --- a/webclient/recents/recents-controller.js +++ b/webclient/recents/recents-controller.js @@ -17,21 +17,34 @@ 'use strict'; angular.module('RecentsController', ['matrixService', 'eventHandlerService']) -.controller('RecentsController', ['$scope', 'matrixService', 'eventHandlerService', 'eventStreamService', - function($scope, matrixService, eventHandlerService, eventStreamService) { +.controller('RecentsController', ['$scope', 'matrixService', 'eventHandlerService', + function($scope, matrixService, eventHandlerService) { $scope.rooms = {}; // $scope of the parent where the recents component is included can override this value // in order to highlight a specific room in the list $scope.recentsSelectedRoomID; - // Refresh the list on matrix invitation and message event - $scope.$on(eventHandlerService.MEMBER_EVENT, function(ngEvent, event, isLive) { - refresh(); - }); - $scope.$on(eventHandlerService.MSG_EVENT, function(ngEvent, event, isLive) { - refresh(); - }); + var listenToEventStream = function() { + // Refresh the list on matrix invitation and message event + $scope.$on(eventHandlerService.MEMBER_EVENT, function(ngEvent, event, isLive) { + var config = matrixService.config(); + if (isLive && event.state_key === config.user_id && event.content.membership === "invite") { + console.log("Invited to room " + event.room_id); + // FIXME push membership to top level key to match /im/sync + event.membership = event.content.membership; + // FIXME bodge a nicer name than the room ID for this invite. + event.room_display_name = event.user_id + "'s room"; + $scope.rooms[event.room_id] = event; + } + }); + $scope.$on(eventHandlerService.MSG_EVENT, function(ngEvent, event, isLive) { + if (isLive) { + $scope.rooms[event.room_id].lastMsg = event; + } + }); + }; + var refresh = function() { // List all rooms joined or been invited to @@ -42,13 +55,16 @@ angular.module('RecentsController', ['matrixService', 'eventHandlerService']) // Reset data $scope.rooms = {}; - var data = matrixService.assignRoomAliases(response.data.rooms); - for (var i=0; i<data.length; i++) { - $scope.rooms[data[i].room_id] = data[i]; + var rooms = response.data.rooms; + for (var i=0; i<rooms.length; i++) { + var room = rooms[i]; + + // Add room_alias & room_display_name members + $scope.rooms[room.room_id] = angular.extend(room, matrixService.getRoomAliasAndDisplayName(room)); // Create a shortcut for the last message of this room - if (data[i].messages && data[i].messages.chunk && data[i].messages.chunk[0]) { - $scope.rooms[data[i].room_id].lastMsg = data[i].messages.chunk[0]; + if (room.messages && room.messages.chunk && room.messages.chunk[0]) { + $scope.rooms[room.room_id].lastMsg = room.messages.chunk[0]; } } @@ -56,6 +72,9 @@ angular.module('RecentsController', ['matrixService', 'eventHandlerService']) for (var i = 0; i < presence.length; ++i) { eventHandlerService.handleEvent(presence[i], false); } + + // From now, update recents from the stream + listenToEventStream(); }, function(error) { $scope.feedback = "Failure: " + error.data; diff --git a/webclient/recents/recents.html b/webclient/recents/recents.html index 6fda6c5c6b..3f025a98d8 100644 --- a/webclient/recents/recents.html +++ b/webclient/recents/recents.html @@ -39,6 +39,11 @@ {{ room.lastMsg.user_id }} sent an image </div> + <div ng-switch-when="m.emote"> + <span ng-bind-html="'* ' + (room.lastMsg.user_id) + ' ' + room.lastMsg.content.body | linky:'_blank'"> + </span> + </div> + <div ng-switch-default> {{ room.lastMsg.content }} </div> diff --git a/webclient/room/room-controller.js b/webclient/room/room-controller.js index c596af820c..15710d2ba3 100644 --- a/webclient/room/room-controller.js +++ b/webclient/room/room-controller.js @@ -14,9 +14,9 @@ See the License for the specific language governing permissions and limitations under the License. */ -angular.module('RoomController', ['ngSanitize', 'mFileInput', 'mUtilities']) -.controller('RoomController', ['$scope', '$http', '$timeout', '$routeParams', '$location', 'matrixService', 'eventStreamService', 'eventHandlerService', 'matrixPhoneService', 'mFileUpload', 'MatrixCall', 'mUtilities', '$rootScope', - function($scope, $http, $timeout, $routeParams, $location, matrixService, eventStreamService, eventHandlerService, matrixPhoneService, mFileUpload, MatrixCall, mUtilities, $rootScope) { +angular.module('RoomController', ['ngSanitize', 'mFileInput']) +.controller('RoomController', ['$scope', '$timeout', '$routeParams', '$location', '$rootScope', 'matrixService', 'eventHandlerService', 'mFileUpload', 'matrixPhoneService', 'MatrixCall', + function($scope, $timeout, $routeParams, $location, $rootScope, matrixService, eventHandlerService, mFileUpload, matrixPhoneService, MatrixCall) { 'use strict'; var MESSAGES_PER_PAGINATION = 30; var THUMBNAIL_SIZE = 320; @@ -298,7 +298,7 @@ angular.module('RoomController', ['ngSanitize', 'mFileInput', 'mUtilities']) } if (room_id_or_alias && '!' === room_id_or_alias[0]) { - // Yes. We can start right now + // Yes. We can go on right now $scope.room_id = room_id_or_alias; $scope.room_alias = matrixService.getRoomIdToAliasMapping($scope.room_id); onInit2(); @@ -329,7 +329,7 @@ angular.module('RoomController', ['ngSanitize', 'mFileInput', 'mUtilities']) $scope.room_id = response.data.room_id; console.log(" -> Room ID: " + $scope.room_id); - // Now, we can start + // Now, we can go on onInit2(); }, function () { @@ -339,37 +339,61 @@ angular.module('RoomController', ['ngSanitize', 'mFileInput', 'mUtilities']) }); } }; - + var onInit2 = function() { - eventHandlerService.reInitRoom($scope.room_id); - - // Make recents highlight the current room - $scope.recentsSelectedRoomID = $scope.room_id; - - // Join the room - matrixService.join($scope.room_id).then( + console.log("onInit2"); + + // Make sure the initialSync has been before going further + eventHandlerService.waitForInitialSyncCompletion().then( function() { - console.log("Joined room "+$scope.room_id); + var needsToJoin = true; + + // The room members is available in the data fetched by initialSync + if ($rootScope.events.rooms[$scope.room_id]) { + var members = $rootScope.events.rooms[$scope.room_id].members; + + // Update the member list + for (var i in members) { + var member = members[i]; + updateMemberList(member); + } - // Get the current member list - matrixService.getMemberList($scope.room_id).then( - function(response) { - for (var i = 0; i < response.data.chunk.length; i++) { - var chunk = response.data.chunk[i]; - updateMemberList(chunk); + // Check if the user has already join the room + if ($scope.state.user_id in members) { + if ("join" === members[$scope.state.user_id].membership) { + needsToJoin = false; } - eventStreamService.resume(); - }, - function(error) { - $scope.feedback = "Failed get member list: " + error.data.error; } - ); + } - paginate(MESSAGES_PER_PAGINATION); - }, - function(reason) { - $scope.feedback = "Can't join room: " + reason; - }); + // Do we to join the room before starting? + if (needsToJoin) { + matrixService.join($scope.room_id).then( + function() { + console.log("Joined room "+$scope.room_id); + onInit3(); + }, + function(reason) { + $scope.feedback = "Can't join room: " + reason; + }); + } + else { + onInit3(); + } + } + ); + }; + + var onInit3 = function() { + console.log("onInit3"); + + // TODO: We should be able to keep them + eventHandlerService.resetRoomMessages($scope.room_id); + + // Make recents highlight the current room + $scope.recentsSelectedRoomID = $scope.room_id; + + paginate(MESSAGES_PER_PAGINATION); }; $scope.inviteUser = function(user_id) { diff --git a/webclient/room/room.html b/webclient/room/room.html index bc3eefaf34..572c52e64e 100644 --- a/webclient/room/room.html +++ b/webclient/room/room.html @@ -45,13 +45,13 @@ </td> <td ng-class="!msg.content.membership ? (msg.content.msgtype === 'm.emote' ? 'emote text' : 'text') : 'membership text'"> <div class="bubble"> - <span ng-hide='msg.type !== "m.room.member"'> + <span ng-show='msg.type === "m.room.member"'> {{ members[msg.user_id].displayname || msg.user_id }} {{ {"join": "joined", "leave": "left", "invite": "invited"}[msg.content.membership] }} {{ msg.content.membership === "invite" ? (msg.state_key || '') : '' }} </span> - <span ng-hide='msg.content.msgtype !== "m.emote"' ng-bind-html="'* ' + (members[msg.user_id].displayname || msg.user_id) + ' ' + msg.content.body | linky:'_blank'"/> - <span ng-hide='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.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'"/> <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 }}"/> @@ -109,7 +109,7 @@ </div> {{ feedback }} - <div ng-hide="!state.stream_failure"> + <div ng-show="state.stream_failure"> {{ state.stream_failure.data.error || "Connection failure" }} </div> </div> |