Reenabled transparent echo message. It turns to opaque without flickering now.

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

@@ -86,8 +86,15 @@ angular.module('eventHandlerService', [])
         if (isLiveEvent) {
             if (event.user_id === matrixService.config().user_id &&
                 (event.content.msgtype === "m.text" || event.content.msgtype === "m.emote") ) {
-                // assume we've already echoed it
-                // FIXME: track events by ID and ungrey the right message to show it's been delivered
+                // Assume we've already echoed it. So, there is a fake event in the messages list of the room
+                // Replace this fake event by the true one
+                var index = getRoomEventIndex(event.room_id, event.event_id);
+                if (index) {
+                    $rootScope.events.rooms[event.room_id].messages[index] = event;
+                }
+                else {
+                    $rootScope.events.rooms[event.room_id].messages.push(event);
+                }
             }
             else {
                 $rootScope.events.rooms[event.room_id].messages.push(event);
@@ -190,6 +197,29 @@ angular.module('eventHandlerService', [])
         }
     };
     
+    /**
+     * Get the index of the event in $rootScope.events.rooms[room_id].messages
+     * @param {type} room_id the room id
+     * @param {type} event_id the event id to look for
+     * @returns {Number | undefined} the index. undefined if not found.
+     */
+    var getRoomEventIndex = function(room_id, event_id) {
+        var index;
+        
+        var room = $rootScope.events.rooms[room_id];
+        if (room) {
+            for (var i = 0; i < room.messages.length; i++) {
+                var message = room.messages[i];
+                console.log(message.event_id);
+                if (event_id === message.event_id) {
+                    index = i;
+                    break;
+                }
+            }
+        }
+        return index;
+    }
+    
     return {
         ROOM_CREATE_EVENT: ROOM_CREATE_EVENT,
         MSG_EVENT: MSG_EVENT,

webclient/room/room-controller.js

@@ -513,8 +513,7 @@ angular.module('RoomController', ['ngSanitize', 'matrixFilter', 'mFileInput'])
                 room_id: $scope.room_id,
                 type: "m.room.message",
                 user_id: $scope.state.user_id,
-                // FIXME: re-enable echo_msg_state when we have a nice way to turn the field off again
-                // echo_msg_state: "messagePending"     // Add custom field to indicate the state of this fake message to HTML
+                echo_msg_state: "messagePending"     // Add custom field to indicate the state of this fake message to HTML
             };
 
             $scope.textInput = "";
@@ -527,25 +526,17 @@ angular.module('RoomController', ['ngSanitize', 'matrixFilter', 'mFileInput'])
             $scope.feedback = "";
 
             promise.then(
-                function() {
+                function(response) {
                     console.log("Request successfully sent");
-                    if (!echo) {
-                        $scope.textInput = "";
-                    }
-/*
-                    if (echoMessage) {
-                        // Remove the fake echo message from the room messages
-                        // It will be replaced by the one acknowledged by the server
-                        // ...except this causes a nasty flicker.  So don't swap messages for now. --matthew
-                        // var index = $rootScope.events.rooms[$scope.room_id].messages.indexOf(echoMessage);
-                        // if (index > -1) {
-                        //     $rootScope.events.rooms[$scope.room_id].messages.splice(index, 1);
-                        // }
+                    if (echo) {
+                        // Mark this fake message event with its allocated event_id
+                        // When the true message event will come from the events stream (in handleMessage),
+                        // we will be able to replace the fake one by the true one
+                        echoMessage.event_id = response.data.event_id;
                     }
                     else {
                         $scope.textInput = "";
                     }         
-*/                    
                 },
                 function(error) {
                     $scope.feedback = "Request failed: " + error.data.error;