display user count in browsing

public/src/client/topic/browsing.js

@@ -10,9 +10,12 @@ define('forum/topic/browsing', function() {
 
 	Browsing.onUpdateUsersInRoom = function(data) {
 		if(data && data.room.indexOf('topic_' + ajaxify.variables.get('topic_id')) !== -1) {
+			$('.browsing-users').toggleClass('hidden', !data.users.length);
 			for(var i=0; i<data.users.length; ++i) {
 				addUserIcon(data.users[i]);
 			}
+
+			updateUserCount(data.total);
 			getReplyingUsers();
 		}
 	};
@@ -22,8 +25,10 @@ define('forum/topic/browsing', function() {
 		var user = activeEl.find('a[data-uid="' + data.uid + '"]');
 		if (!user.length && activeEl.children().length < 10) {
 			addUserIcon(data);
-		} else {
+		} else if (user.length) {
 			user.attr('data-count', parseInt(user.attr('data-count'), 10) + 1);
+		} else {
+			increaseUserCount(1);
 		}
 	};
 
@@ -36,6 +41,8 @@ define('forum/topic/browsing', function() {
 			if (count <= 0) {
 				user.remove();
 			}
+		} else {
+			increaseUserCount(-1);
 		}
 	};
 
@@ -68,7 +75,13 @@ define('forum/topic/browsing', function() {
 		}
 		var activeEl = $('.thread_active_users');
 		var userEl = createUserIcon(user.uid, user.picture, user.userslug, user.username);
-		activeEl.append(userEl);
+		var isSelf = parseInt(user.uid, 10) === parseInt(app.uid, 10);
+		if (isSelf) {
+			activeEl.prepend(userEl);
+		} else {
+			activeEl.append(userEl);
+		}
+
 		activeEl.find('a[data-uid] img').tooltip({
 			placement: 'top'
 		});
@@ -91,5 +104,17 @@ define('forum/topic/browsing', function() {
 		});
 	}
 
+	function updateUserCount(count) {
+		count = parseInt(count, 10);
+		if (!count || count < 0) {
+			count = 0;
+		}
+		$('.user-count').text(count).parent().toggleClass('hidden', count === 0);
+	}
+
+	function increaseUserCount(incr) {
+		updateUserCount(parseInt($('.user-count').first().text(), 10) + incr);
+	}
+
 	return Browsing;
 });

src/socket.io/index.js

@@ -377,6 +377,7 @@ function updateRoomBrowsingText(roomName, selfUid) {
 	}
 
 	var	uids = Sockets.getUidsInRoom(roomName);
+	var total = uids.length;
 	uids = uids.slice(0, 9);
 	if (selfUid) {
 		uids = [selfUid].concat(uids);
@@ -385,16 +386,19 @@ function updateRoomBrowsingText(roomName, selfUid) {
 		return;
 	}
 	user.getMultipleUserFields(uids, ['uid', 'username', 'userslug', 'picture', 'status'], function(err, users) {
-		if(!err) {
-			users = users.filter(function(user) {
-				return user.status !== 'offline';
-			});
-
-			io.sockets.in(roomName).emit('event:update_users_in_room', {
-				users: users,
-				room: roomName
-			});
+		if (err) {
+			return;
 		}
+
+		users = users.filter(function(user) {
+			return user && user.status !== 'offline';
+		});
+
+		io.sockets.in(roomName).emit('event:update_users_in_room', {
+			users: users,
+			room: roomName,
+			total: Math.max(0, total - uids.length)
+		});
 	});
 }