Modified how capitalization is handled. Added code to clean up localStorage of old script's remnants. Added sorting and capitalization of the viewer list.

src/ember/line.js

@@ -47,24 +47,36 @@ FFZ.prototype.setup_line = function() {
 // ---------------------
 
 FFZ.capitalization = {};
+FFZ._cap_fetching = 0;
 
-FFZ.prototype.capitalize = function(view, user) {
-	if ( FFZ.capitalization[user] )
-		return view.$('.from').text(FFZ.capitalization[user]);
+FFZ.get_capitalization = function(name, callback) {
+	name = name.toLowerCase();
+	var old_data = FFZ.capitalization[name];
+	if ( old_data ) {
+		if ( Date.now() - old_data[1] < 3600000 )
+			return old_data[0];
+	}
 
-	var f = this;
-	jQuery.getJSON("https://api.twitch.tv/kraken/channels/" + user + "?callback=?")
-		.always(function(data) {
-			if ( data.display_name == undefined )
-				FFZ.capitalization[user] = user;
-			else
-				FFZ.capitalization[user] = data.display_name;
+	if ( FFZ._cap_fetching < 5 ) {
+		FFZ._cap_fetching++;
+		Twitch.api.get("users/" + name)
+			.always(function(data) {
+				var cap_name = data.display_name || name;
+				FFZ.capitalization[name] = [cap_name, Date.now()];
+				FFZ._cap_fetching--;
+				callback && callback(cap_name);
+			});
+	}
 
-			f.capitalize(view, user);
-		});
+	return old_data ? old_data[0] : name;
 }
 
 
+FFZ.prototype.capitalize = function(view, user) {
+	var name = FFZ.get_capitalization(user, this.capitalize.bind(this, view));
+	if ( name )
+		view.$('.from').text(name);
+}
 
 
 // ---------------------

src/ember/viewers.js

@@ -0,0 +1,89 @@
+var FFZ = window.FrankerFaceZ;
+
+
+// --------------------
+// Initialization
+// --------------------
+
+FFZ.prototype.setup_viewers = function() {
+	this.log("Hooking the Ember Viewers controller.");
+
+	var Viewers = App.__container__.resolve('controller:viewers');
+	this._modify_viewers(Viewers);
+}
+
+
+FFZ.prototype._modify_viewers = function(controller) {
+	var f = this;
+
+	controller.reopen({
+		lines: function() {
+			var viewers = this._super(),
+				categories = [],
+				data = {},
+				last_category = null;
+
+			// Get the broadcaster name.
+			var Channel = App.__container__.lookup('controller:channel'),
+				room_id = this.get('parentController.model.id'),
+				broadcaster = Channel && Channel.get('id');
+
+			// We can get capitalization for the broadcaster from the channel.
+			if ( broadcaster ) {
+				var display_name = Channel.get('display_name');
+				if ( display_name )
+					FFZ.capitalization[broadcaster] = [display_name, Date.now()];
+			}
+
+			// If the current room isn't the channel's chat, then we shouldn't
+			// display them as the broadcaster.
+			if ( room_id != broadcaster )
+				broadcaster = null;
+
+			// Now, break the viewer array down into something we can use.
+			for(var i=0; i < viewers.length; i++) {
+				var entry = viewers[i];
+				if ( entry.category ) {
+					last_category = entry.category;
+					categories.push(last_category);
+					data[last_category] = [];
+
+				} else {
+					var viewer = entry.chatter.toLowerCase();
+					if ( ! viewer )
+						continue;
+
+					// If the viewer is the broadcaster, give them their own
+					// group. Don't put them with normal mods!
+					if ( viewer == broadcaster ) {
+						categories.unshift("Broadcaster");
+						data["Broadcaster"] = [viewer];
+
+					} else if ( data.hasOwnProperty(last_category) )
+						data[last_category].push(viewer);
+				}
+			}
+
+			// Now, rebuild the viewer list. However, we're going to actually
+			// sort it this time.
+			viewers = [];
+			for(var i=0; i < categories.length; i++) {
+				var category = categories[i],
+					chatters = data[category];
+
+				if ( ! chatters || ! chatters.length )
+					continue;
+
+				viewers.push({category: category});
+				viewers.push({chatter: ""});
+
+				// Push the chatters, capitalizing them as we go.
+				chatters.sort();
+				while(chatters.length)
+					viewers.push({chatter: FFZ.get_capitalization(chatters.shift())});
+			}
+
+			return viewers;
+		}.property("content.chatters")
+	});
+}