display mtime_age in webclient

webclient/app.js

@@ -94,6 +94,26 @@ matrixWebClient
             }
         };
     }])
+    .filter('duration', function() {
+        return function(time) {
+            if (!time) return;
+            var t = parseInt(time / 1000);
+            var s = t % 60;
+            var m = parseInt(t / 60) % 60;
+            var h = parseInt(t / (60 * 60)) % 24;
+            var d = parseInt(t / (60 * 60 * 24));
+            if (t < 60) {
+                return s + "s"
+            }
+            if (t < 60 * 60) {
+                return m + "m " + s + "s";
+            }
+            if (t < 24 * 60 * 60) {
+                return h + "h " + m + "m";
+            }
+            return d + "d " + h + "h";
+        }
+    })
     .filter('to_trusted', ['$sce', function($sce){
         return function(text) {
             return $sce.trustAsHtml(text);

webclient/room/room-controller.js

@@ -120,6 +120,9 @@ angular.module('RoomController', [])
             if ("state" in chunk.content) {
                 chunk.presenceState = chunk.content.state;
             }
+            if ("mtime_age" in chunk.content) {
+                chunk.mtime_age = chunk.content.mtime_age;
+            }
         
             $scope.members[chunk.target_user_id] = chunk;
             // get their display name and profile picture and set it to their
@@ -160,16 +163,14 @@ angular.module('RoomController', [])
         }
         var member = $scope.members[chunk.content.user_id];
 
+        // XXX: why not just pass the chunk straight through?
         if ("state" in chunk.content) {
-            if (chunk.content.state === "online") {
+            member.presenceState = chunk.content.state;
-                member.presenceState = "online";
-            }
-            else if (chunk.content.state === "offline") {
-                member.presenceState = "offline";
-            }
-            else if (chunk.content.state === "unavailable") {
-                member.presenceState = "unavailable";
         }
+
+        if ("mtime_age" in chunk.content) {
+            // FIXME: should probably keep updating mtime_age in realtime like FB does
+            member.mtime_age = chunk.content.mtime_age;
         }
 
         // this may also contain a new display name or avatar url, so check.

webclient/room/room.html

@@ -16,7 +16,9 @@
                     <!-- FIXME: does allowing <wbr/> to be unescaped introduce HTML injections from user IDs and display names? -->
                     <div class="userName" ng-bind-html="info.displayname || (name.substr(0, name.indexOf(':')) + '<wbr/>' + name.substr(name.indexOf(':'))) | to_trusted"></div>
                 </td>
-                <td class="userPresence" ng-class="info.presenceState === 'online' ? 'online' : (info.presenceState === 'unavailable' ? 'unavailable' : '')" />
+                <td class="userPresence" ng-class="info.presenceState === 'online' ? 'online' : (info.presenceState === 'unavailable' ? 'unavailable' : '')">
+                    {{ info.mtime_age | duration }} {{ info.mtime_age ? "ago" : "" }}
+                </td>
         </table>
     </div>