Store messages in $rootScope so they can be accessed from multiple controllers without duplicated storage for each. This also gives updates.

webclient/components/matrix/event-handler-service.js

@@ -32,15 +32,37 @@ angular.module('eventHandlerService', [])
     var MEMBER_EVENT = "MEMBER_EVENT";
     var PRESENCE_EVENT = "PRESENCE_EVENT";
     
+    $rootScope.events = {
+        rooms: {}, // will contain roomId: { messages:[], members:[] }
+    };
+    
+    var initRoom = function(room_id) {
+        console.log("Creating new handler entry for " + room_id);
+        $rootScope.events.rooms[room_id] = {};
+        $rootScope.events.rooms[room_id].messages = [];
+        $rootScope.events.rooms[room_id].members = [];
+    }
+    
     var handleMessage = function(event, isLiveEvent) {
         if ("membership_target" in event.content) {
-            // event.user_id = event.content.membership_target;
+            event.user_id = event.content.membership_target;
         }
+        if (!(event.room_id in $rootScope.events.rooms)) {
+            initRoom(event.room_id);
+        }
+        
+        if (isLiveEvent) {
+            $rootScope.events.rooms[event.room_id].messages.push(event);
+        }
+        else {
+            $rootScope.events.rooms[event.room_id].messages.unshift(event);
+        }
+        
+        // TODO send delivery receipt if isLiveEvent
         
         // $broadcast this, as controllers may want to do funky things such as
         // scroll to the bottom, etc which cannot be expressed via simple $scope
         // updates.
-        console.log("Bcast " + JSON.stringify(event));
         $rootScope.$broadcast(MSG_EVENT, event, isLiveEvent);
     };
     

webclient/room/room-controller.js

@@ -28,7 +28,6 @@ angular.module('RoomController', [])
         can_paginate: true, // this is toggled off when we run out of items
         stream_failure: undefined // the response when the stream fails
     };
-    $scope.messages = [];
     $scope.members = {};
     $scope.stopPoll = false;
 
@@ -43,13 +42,9 @@ angular.module('RoomController', [])
     };
     
     $scope.$on(eventHandlerService.MSG_EVENT, function(ngEvent, event, isLive) {
-        if (isLive) {
-            $scope.messages.push(event);
+        if (isLive && event.room_id === $scope.room_id) {
             scrollToBottom();
         }
-        else {
-            $scope.messages.unshift(event);
-        }
     });
     
     $scope.$on(eventHandlerService.MEMBER_EVENT, function(ngEvent, event, isLive) {

webclient/room/room.html

@@ -22,14 +22,14 @@
     
     <div class="messageTableWrapper">
         <table class="messageTable">
-            <tr ng-repeat="msg in messages" ng-class="msg.user_id === state.user_id ? 'mine' : ''">
+            <tr ng-repeat="msg in events.rooms[room_id].messages" ng-class="msg.user_id === state.user_id ? 'mine' : ''">
                 <td class="leftBlock">
-                    <div class="sender" ng-hide="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 | date:'MMM d HH:mm:ss' }}</div>
                 </td>
                 <td class="avatar">
                     <img ng-src="{{ members[msg.user_id].avatar_url || 'img/default-profile.jpg' }}" width="32" height="32"
-                         ng-hide="messages[$index - 1].user_id === msg.user_id || msg.user_id === state.user_id"/>
+                         ng-hide="events.rooms[room_id].messages[$index - 1].user_id === msg.user_id || msg.user_id === state.user_id"/>
                 </td>
                 <td ng-class="!msg.content.membership_target ? (msg.content.msgtype === 'm.emote' ? 'emote text' : 'text') : ''">
                     <div class="bubble">
@@ -40,7 +40,7 @@
                 </td>
                 <td class="rightBlock">
                     <img ng-src="{{ members[msg.user_id].avatar_url || 'img/default-profile.jpg' }}" width="32" height="32"
-                         ng-hide="messages[$index - 1].user_id === msg.user_id || msg.user_id !== state.user_id"/>
+                         ng-hide="events.rooms[room_id].messages[$index - 1].user_id === msg.user_id || msg.user_id !== state.user_id"/>
                 </td>
             </tr>
         </table>