Represent user power level in a room by a red bar at the bottom of his avatar image. The width of this bar depends on the power level.

webclient/app.css

@@ -268,6 +268,13 @@ a:active  { color: #000; }
     word-break: break-all;
 }
 
+.userAvatar .userPowerLevel {
+    position: absolute;
+    bottom: 20px;
+    height: 1px;
+    background-color: red;
+}
+
 .userPresence {
     text-align: center;
     font-size: 12px;

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

@@ -95,6 +95,15 @@ angular.module('eventHandlerService', [])
         $rootScope.presence[event.content.user_id] = event;
         $rootScope.$broadcast(PRESENCE_EVENT, event, isLiveEvent);
     };
+    
+    var handlePowerLevels = function(event, isLiveEvent) {
+        initRoom(event.room_id);
+
+       $rootScope.events.rooms[event.room_id][event.type] = event;
+
+        //TODO
+        //$rootScope.$broadcast(PRESENCE_EVENT, event, isLiveEvent);
+    };
 
     var handleCallEvent = function(event, isLiveEvent) {
         $rootScope.$broadcast(CALL_EVENT, event, isLiveEvent);
@@ -118,8 +127,17 @@ angular.module('eventHandlerService', [])
                 case "m.presence":
                     handlePresence(event, isLiveEvent);
                     break;
+                case 'm.room.ops_levels':
+                case 'm.room.send_event_level':
+                case 'm.room.add_state_level':
+                case 'm.room.join_rules':
+                case 'm.room.power_levels':
+                    handlePowerLevels(event, isLiveEvent);
+                    break;
+
                 default:
                     console.log("Unable to handle event type " + event.type);
+                    console.log(JSON.stringify(event, undefined, 4));
                     break;
             }
             if (event.type.indexOf('m.call.') == 0) {

webclient/components/matrix/matrix-service.js

@@ -484,6 +484,30 @@ angular.module('matrixService', [])
         
         getRoomIdToAliasMapping: function(roomId) {
             return localStorage.getItem(MAPPING_PREFIX+roomId);
+        },
+
+
+        /****** Power levels management ******/
+
+        /**
+         * Return the power level of an user in a particular room
+         * @param {String} room_id the room id
+         * @param {String} user_id the user id
+         * @returns {Number} a value between 0 and 10
+         */
+        getUserPowerLevel: function(room_id, user_id) {
+            var powerLevel = 0;
+            var room = $rootScope.events.rooms[room_id];
+            if (room && room["m.room.power_levels"]) {
+                if (user_id in room["m.room.power_levels"].content) {
+                    powerLevel = room["m.room.power_levels"].content[user_id];
+                }
+                else {
+                    // Use the room default user power
+                    powerLevel = room["m.room.power_levels"].content["default"];
+                }
+            }
+            return powerLevel;
         }
 
     };

webclient/room/room-controller.js

@@ -233,6 +233,13 @@ angular.module('RoomController', ['ngSanitize', 'mFileInput'])
         }
     };
 
+    var updateUserPowerLevel = function(user_id) {
+        var member = $scope.members[user_id];
+        if (member) {
+            member.powerLevel = matrixService.getUserPowerLevel($scope.room_id, user_id);
+        }
+    }
+
     $scope.send = function() {
         if ($scope.textInput === "") {
             return;
@@ -382,6 +389,9 @@ angular.module('RoomController', ['ngSanitize', 'mFileInput'])
                 for (var i = 0; i < response.data.chunk.length; i++) {
                     var chunk = response.data.chunk[i];
                     updateMemberList(chunk);
+
+                    // Add his power level
+                    updateUserPowerLevel(chunk.user_id);
                 }
 
                 // Arm list timing update timer

webclient/room/room.html

@@ -24,6 +24,7 @@
                          title="{{ member.id }}"
                          width="80" height="80"/>
                     <img class="userAvatarGradient" src="img/gradient.png" title="{{ member.id }}" width="80" height="24"/>
+                    <div class="userPowerLevel" ng-style="{'width': (10 * member.powerLevel) +'%'}"></div>
                     <div class="userName">{{ member.displayname || member.id.substr(0, member.id.indexOf(':')) }}<br/>{{ member.displayname ? "" : member.id.substr(member.id.indexOf(':')) }}</div>
                 </td>
                 <td class="userPresence" ng-class="(member.presence === 'online' ? 'online' : (member.presence === 'unavailable' ? 'unavailable' : '')) + ' ' + (member.membership == 'invite' ? 'invited' : '')">