3.5.78 to 3.5.83. It's been so long since I've commited. I'm a bad person. Added grouping for hosted channels, and a menu to select which channel you visit. Added weights for selecting which socket server to use. Added server time offset calculations. Refactored a LOT of how chat badges and chat line rendering and history processing works behind the scenes. Removed a ton of duplicate code. Added basic adjacent chat message lookups. Need better server support.

.gitignore

@@ -6,6 +6,7 @@ Extension Building
 *.iml
 script.js
 script.min.js
+*.min.css
 credentials.json
 
 /socketserver/cmd/socketserver/socketserver

dark.css

@@ -142,6 +142,7 @@
 .ffz-dark .whatisthis,
 .ffz-dark .ui-menu,
 .ffz-dark .dropmenu,
+.ffz-dark .sort-contain .sort-options,
 .ffz-dark .top-dropdown,
 .ffz-dark form.js-new_panel_form,
 .ffz-dark .js-new_panel_btn,
@@ -902,6 +903,15 @@
 
 /* Conversations */
 
+.ffz-dark .ignore-cta {
+	background-color: #333;
+	box-shadow: 0 3px 0 #000;
+}
+
+.ffz-dark .ignore-cta .conversation-system-message {
+	color: #ccc;
+}
+
 .ffz-dark .conversation-input-bar .emoticon-selector-toggle svg path {
 	fill: rgba(255,255,255,0.2);
 }

gulpfile.js

@@ -24,6 +24,7 @@ var ftp = require('vinyl-ftp'),
 
 // Server Dependencies
 var http = require("http"),
+	//https = require("https"),
 	path = require("path"),
 	request = require("request"),
 	url = require("url");
@@ -87,12 +88,10 @@ gulp.task('scripts', ['styles'], function() {
 		.pipe(header('(function(window) {'))
 		.pipe(footer(';window.ffz = new FrankerFaceZ()}(window));'))
 		.pipe(gulp.dest(__dirname))
-		.pipe(uglify())
-		.pipe(rename('script.min.js'))
-		.pipe(gulp.dest(__dirname))
 		.on('error', util.log);
 });
 
+
 gulp.task('watch', ['default', 'server'], function() {
 	return gulp.watch('src/**/*', ['default']);
 });
@@ -102,7 +101,28 @@ gulp.task('default', ['scripts']);
 
 // Deploy
 
-gulp.task('upload', ['default'], function() {
+gulp.task('minify_script', ['scripts'], function() {
+	return gulp.src(['script.js'])
+		.pipe(uglify())
+		.pipe(rename('script.min.js'))
+		.pipe(gulp.dest(__dirname))
+		.on('error', util.log);
+});
+
+gulp.task('minify_style', function() {
+	return gulp.src(['style.css', 'dark.css'])
+		.pipe(minifyCss())
+		.pipe(rename(function(path) {
+			path.basename += '.min';
+		}))
+		.pipe(gulp.dest(__dirname))
+		.on('error', util.log);
+});
+
+gulp.task('minify', ['minify_script', 'minify_style']);
+
+
+gulp.task('upload', ['minify'], function() {
 	// Load credentials from an external file.
 	var contents = fs.readFileSync('credentials.json', 'utf8'),
 		cred = JSON.parse(contents);
@@ -117,8 +137,8 @@ gulp.task('upload', ['default'], function() {
 
 		globs = [
 			"script.min.js",
-			"style.css",
+			"style.min.css",
-			"dark.css",
+			"dark.min.css",
 			"changelog.html"
 		];
 
@@ -140,8 +160,8 @@ gulp.task('clear_cache', ['upload'], function(cb) {
 		files = [],
 		globs = [
 			"script.min.js",
-			"style.css",
+			"style.min.css",
-			"dark.css",
+			"dark.min.css",
 			"changelog.html"
 		];
 
@@ -177,7 +197,7 @@ gulp.task('deploy', ['upload', 'clear_cache']);
 // Server
 
 gulp.task('server', function() {
-	http.createServer(function(req, res) {
+	var handle_req = function(req, res) {
 		var uri = url.parse(req.url).pathname,
 			lpath = path.join(uri).split(path.sep);
 
@@ -220,6 +240,10 @@ gulp.task('server', function() {
 			fs.createReadStream(file).pipe(res);
 		});
 
-	}).listen(8000, "localhost");
+	};
+
+	http.createServer(handle_req).listen(8000, "localhost");
+	//https.createServer(handle_req).listen(8000, "localhost");
+
 	util.log("[" + util.colors.cyan("HTTP") + "] Listening on Port: " + util.colors.magenta("8000"));
 });

src/badges.js

@@ -1,6 +1,20 @@
 var FFZ = window.FrankerFaceZ,
 	constants = require('./constants'),
-	utils = require('./utils');
+	utils = require('./utils'),
+
+	MOD_BADGES = [
+		['staff', 'staff', 'Staff'],
+		['admin', 'admin', 'Admin'],
+		['global_mod', 'global-moderator', 'Global Moderator'],
+		['mod', 'moderator', 'Moderator']
+	],
+
+	badge_css = function(badge) {
+		var out = ".badges .ffz-badge-" + badge.id + " { background-color: " + badge.color + '; background-image: url("' + badge.image + '"); ' + (badge.extra_css || "") + '}';
+		if ( badge.transparent_image )
+			out += ".badges .badge.alpha.ffz-badge-" + badge.id + ",.ffz-transparent-badges .badges .ffz-badge-" + badge.id + ' { background-image: url("' + badge.transparent_image + '"); }';
+		return out;
+	};
 
 
 // --------------------
@@ -151,14 +165,99 @@ FFZ.ws_commands.set_badge = function(data) {
 
 
 // --------------------
-// Badge CSS
+// Badge Selection
 // --------------------
 
-var badge_css = function(badge) {
+FFZ.prototype.get_badges = function(user, room_id, badges, msg) {
-	var out = ".badges .ffz-badge-" + badge.id + " { background-color: " + badge.color + '; background-image: url("' + badge.image + '"); ' + (badge.extra_css || "") + '}';
+	var data = this.users[user];
-	if ( badge.transparent_image )
+	if ( ! data || ! data.badges || ! this.settings.show_badges )
-		out += ".ffz-transparent-badges .badges .ffz-badge-" + badge.id + ' { background-image: url("' + badge.transparent_image + '"); }';
+		return badges;
-	return out;
+
+	for(var slot in data.badges) {
+		if ( ! data.badges.hasOwnProperty(slot) )
+			continue;
+
+		var badge = data.badges[slot],
+			full_badge = this.badges[badge.id] || {},
+			old_badge = badges[slot];
+
+		if ( full_badge.visible !== undefined ) {
+			var visible = full_badge.visible;
+			if ( typeof visible === "function" )
+				visible = visible.bind(this)(room_id, user, msg, badges);
+
+			if ( ! visible )
+				continue;
+		}
+
+		if ( old_badge ) {
+			var replaces = badge.hasOwnProperty('replaces') ? badge.replaces : full_badge.replaces;
+			if ( ! replaces )
+				continue;
+
+			old_badge.image = badge.image || full_badge.image;
+			old_badge.klass += ' ffz-badge-replacement';
+			old_badge.title += ', ' + (badge.title || full_badge.title);
+			continue;
+		}
+
+		badges[slot] = {
+			klass: 'ffz-badge-' + badge.id,
+			title: badge.title || full_badge.title,
+			image: badge.image,
+			color: badge.color,
+			extra_css: badge.extra_css
+		};
+	}
+
+	return badges;
+}
+
+
+FFZ.prototype.get_line_badges = function(msg) {
+	var badges = {};
+
+	if ( msg.room && msg.from === msg.room )
+		badges[0] = {klass: 'broadcaster', title: 'Broadcaster'};
+	else if ( msg.labels )
+		for(var i=0, l = MOD_BADGES.length; i < l; i++) {
+			var mb = MOD_BADGES[i];
+			if ( msg.labels.indexOf(mb[0]) !== -1 ) {
+				badges[0] = {klass: mb[1], title: mb[2]}
+				break;
+			}
+		}
+
+	if ( msg.labels.indexOf('subscriber') !== -1 )
+		badges[10] = {klass: 'subscriber', title: 'Subscriber'}
+	if ( msg.labels.indexOf('turbo') !== -1 )
+		badges[15] = {klass: 'turbo', title: 'Turbo'};
+
+	// FFZ Badges
+	return this.get_badges(msg.from, msg.room, badges, msg);
+}
+
+
+FFZ.prototype.get_other_badges = function(user_id, room_id, user_type, has_sub, has_turbo) {
+	var badges = {};
+
+	if ( room_id && user_id === room_id )
+		badges[0] = {klass: 'broadcaster', title: 'Broadcaster'};
+	else
+		for(var i=0, l = MOD_BADGES.length; i < l; i++) {
+			var mb = MOD_BADGES[i];
+			if ( user_type === mb[0] ) {
+				badges[0] = {klass: mb[1], title: mb[2]};
+				break;
+			}
+		}
+
+	if ( has_sub )
+		badges[10] = {klass: 'subscriber', title: 'Subscriber'}
+	if ( has_turbo )
+		badges[15] = {klass: 'turbo', title: 'Turbo'}
+
+	return this.get_badges(user_id, room_id, badges, null);
 }
 
 
@@ -166,6 +265,29 @@ var badge_css = function(badge) {
 // Render Badge
 // --------------------
 
+FFZ.prototype.render_badges = function(badges) {
+	var out = [];
+	for(var key in badges) {
+		var badge = badges[key],
+			css = badge.image ? 'background-image:url("' + utils.quote_attr(badge.image) + '");' : '';
+
+		if ( badge.color )
+			css += 'background-color:' + badge.color + ';'
+
+		if ( badge.extra_css )
+			css += badge.extra_css;
+
+		out.push('<div class="badge float-left tooltip ' + utils.quote_attr(badge.klass) + '"' + (css ? ' style="' + utils.quote_attr(css) + '"' : '') + ' title="' + utils.quote_attr(badge.title) + '"></div>');
+	}
+
+	return out.join("");
+}
+
+
+// --------------------
+// Extension Support
+// --------------------
+
 FFZ.prototype.bttv_badges = function(data) {
 	if ( ! this.settings.show_badges )
 		return;
@@ -216,7 +338,7 @@ FFZ.prototype.bttv_badges = function(data) {
 				if ( b.type === full_badge.replaces_type ) {
 					b.type = "ffz-badge-replacement " + b.type;
 					b.description += ", " + (badge.title || full_badge.title) +
-						'" style="background-image: url(&quot;' + (badge.image || full_badge.image) + "&quot;)";
+						'" style="background-image: url("' + utils.quote_attr(badge.image || full_badge.image) + '")';
 					replaced = true;
 					break;
 				}
@@ -226,14 +348,16 @@ FFZ.prototype.bttv_badges = function(data) {
 				continue;
 		}
 
-		if ( badge.image )
+		if ( alpha && badge.transparent_image )
-			style += 'background-image: url(&quot;' + badge.image + '&quot;); ';
+			style += 'background-image: url("' + utils.quote_attr(badge.transparent_image) + '");';
+		else if ( badge.image )
+			style += 'background-image: url("' + utils.quote_attr(badge.image) + '");';
 
 		if ( badge.color && ! alpha )
-			style += 'background-color: ' + badge.color + '; ';
+			style += 'background-color: ' + utils.quote_attr(badge.color) + '; ';
 
 		if ( badge.extra_css )
-			style += badge.extra_css;
+			style += utils.quote_attr(badge.extra_css);
 
 		if ( style )
 			desc += '" style="' + style;
@@ -253,149 +377,6 @@ FFZ.prototype.bttv_badges = function(data) {
 }
 
 
-FFZ.prototype.render_badges = function(component, badges) {
-	if ( ! this.settings.show_badges )
-		return badges;
-
-	var user = component.get('msgObject.from') || component.get('message.from.username'),
-		room_id = component.get('msgObject.room') || App.__container__.lookup('controller:chat').get('currentRoom.id');
-
-	return this._render_badges(user, room_id, badges, component);
-}
-
-FFZ.prototype._render_badges = function(user, room_id, badges, component) {
-	var data = this.users[user];
-	if ( ! data || ! data.badges )
-		return badges;
-
-	for(var slot in data.badges) {
-		if ( ! data.badges.hasOwnProperty(slot) )
-			continue;
-
-		var badge = data.badges[slot],
-			full_badge = this.badges[badge.id] || {},
-			old_badge = badges[slot];
-
-		if ( full_badge.visible !== undefined ) {
-			var visible = full_badge.visible;
-			if ( typeof visible === "function" )
-				visible = visible.bind(this)(room_id, user, component, badges);
-
-			if ( ! visible )
-				continue;
-		}
-
-		if ( old_badge ) {
-			var replaces = badge.hasOwnProperty('replaces') ? badge.replaces : full_badge.replaces;
-			if ( ! replaces )
-				continue;
-
-			old_badge.image = badge.image || full_badge.image;
-			old_badge.klass += ' ffz-badge-replacement';
-			old_badge.title += ', ' + (badge.title || full_badge.title);
-			continue;
-		}
-
-		badges[slot] = {
-			klass: 'ffz-badge-' + badge.id,
-			title: badge.title || full_badge.title,
-			image: badge.image,
-			color: badge.color,
-			extra_css: badge.extra_css
-		};
-	}
-
-	return badges;
-}
-
-
-FFZ.prototype.render_badge = function(component) {
-	if ( ! this.settings.show_badges )
-		return;
-
-	var user = component.get('msgObject.from'),
-		room_id = App.__container__.lookup('controller:chat').get('currentRoom.id'),
-		badges = component.$('.badges');
-
-	var data = this.users[user];
-	if ( ! data || ! data.badges )
-		return;
-
-	// If we don't have badges, add them.
-	if ( ! badges.length ) {
-		var b_cont = document.createElement('span'),
-			from = component.$('.from');
-
-		b_cont.className = 'badges float-left';
-
-		if ( ! from )
-			return;
-
-		from.before(b_cont);
-		badges = $(b_cont);
-	}
-
-	// Figure out where to place our badge(s).
-	var before = badges.find('.badge').filter(function(i) {
-		var t = this.title.toLowerCase();
-		return t == "subscriber" || t == "turbo";
-	}).first();
-
-	var badges_out = [], reverse = !(!before.length);
-	for ( var slot in data.badges ) {
-		if ( ! data.badges.hasOwnProperty(slot) )
-			continue;
-
-		var badge = data.badges[slot],
-			full_badge = this.badges[badge.id] || {};
-
-		if ( full_badge.visible !== undefined ) {
-			var visible = full_badge.visible;
-			if ( typeof visible == "function" )
-				visible = visible.bind(this)(room_id, user);
-
-			if ( ! visible )
-				continue;
-		}
-
-		if ( full_badge.replaces ) {
-			var el = badges[0].querySelector('.badge.' + full_badge.replaces);
-			if ( el ) {
-				el.style.backgroundImage = 'url("' + (badge.image || full_badge.image) + '")';
-				el.classList.add("ffz-badge-replacement");
-				el.title += ", " + (badge.title || full_badge.title);
-				continue;
-			}
-		}
-
-		var el = document.createElement('div');
-		el.className = 'badge float-left tooltip ffz-badge-' + badge.id;
-		el.setAttribute('title', badge.title || full_badge.title);
-
-		if ( badge.image )
-			el.style.backgroundImage = 'url("' + badge.image + '")';
-
-		if ( badge.color )
-			el.style.backgroundColor = badge.color;
-
-		if ( badge.extra_css )
-			el.style.cssText += badge.extra_css;
-
-		badges_out.push([((reverse ? 1 : -1) * slot), el]);
-	}
-
-	badges_out.sort(function(a,b){return a[0] - b[0]});
-
-	if ( reverse ) {
-		while(badges_out.length)
-			before.before(badges_out.shift()[1]);
-	} else {
-		while(badges_out.length)
-			badges.append(badges_out.shift()[1]);
-	}
-}
-
-
 // --------------------
 // Legacy Support
 // --------------------

src/constants.js

@@ -13,8 +13,12 @@ module.exports = {
 	API_SERVER_2: "//direct-api.frankerfacez.com/",
 
 	WS_SERVER_POOLS: {
-		1: ["ws://catbag.frankerfacez.com/", "ws://andknuckles.frankerfacez.com/"],
+		1: [
-		2: ["ws://localhost:8001/"]
+			["ws://catbag.frankerfacez.com/", 0.5],
+			["ws://andknuckles.frankerfacez.com/", 1],
+			["ws://tuturu.frankerfacez.com/", 1]],
+		2: [
+			["ws://localhost:8001/", 1]]
 	},
 
 	TOOLTIP_DISTANCE: 50,

src/ember/channel.js

@@ -600,10 +600,12 @@ FFZ.prototype._modify_cindex = function(view) {
 			this._ffz_update_uptime = setTimeout(this.ffzUpdateUptime.bind(this), 1000);
 
 			// Determine when the channel last went live.
-			var online = this.get("controller.content.stream.created_at");
+			var online = this.get("controller.content.stream.created_at"),
+				now = Date.now() - (f._ws_server_offset || 0);
+
 			online = online && utils.parse_date(online);
 
-			var uptime = online && Math.floor((Date.now() - online.getTime()) / 1000) || -1;
+			var uptime = online && Math.floor((now - online.getTime()) / 1000) || -1;
 			if ( uptime < 0 ) {
 				var el = this.get('element').querySelector('#ffz-uptime-display');
 				if ( el )

src/ember/chatview.js

@@ -426,7 +426,7 @@ FFZ.prototype._modify_cview = function(view) {
 				if ( f.settings.group_tabs && f._chatv && f._chatv._ffz_tabs )
 					f._chatv.$('.chat-room').css('top', f._chatv._ffz_tabs.offsetHeight + "px");
 
-				var controller = f._chatv.get('controller');
+				var controller = f._chatv && f._chatv.get('controller');
 				controller && controller.set('showList', false);
 			}, 1000);
 		},
@@ -444,6 +444,10 @@ FFZ.prototype._modify_cview = function(view) {
 		ffzChangeRoom: Ember.observer('controller.currentRoom', function() {
 			f.update_ui_link();
 
+			// Close mod cards when changing to a new room.
+			if ( f._mod_card )
+				f._mod_card.send('close');
+
 			var room = this.get('controller.currentRoom'), rows;
 			room && room.resetUnreadCount();
 

src/ember/conversations.js

@@ -64,66 +64,19 @@ FFZ.prototype._modify_conversation_window = function(component) {
 	component.reopen({
 		headerBadges: Ember.computed("thread.participants", "currentUsername", function() {
 			var e = this.get("thread.participants").rejectBy("username", this.get("currentUsername")).objectAt(0),
-				badges = {},
 
-				ut = e.get("userType");
+				badges = f.get_other_badges(e.get('username'), null, e.get('userType'), false, e.get('hasTurbo')),
+				out = [];
 
-			if ( ut === "staff" )
+			// It wants slightly different output from us.
-				badges[0] = {classes: 'badge staff', title: 'Staff'};
+			for(var slot in badges) {
-			else if ( ut === 'admin' )
+				var badge = badges[slot];
-				badges[0] = {classes: 'badge admin', title: 'Admin'};
+				out.push({
-			else if ( ut === 'global_mod' )
+					classes: 'badge ' + badge.klass,
-				badges[0] = {classes: 'badge global-moderator', title: 'Global Moderator'};
+					title: badge.title
-
+				});
-			if ( e.get('hasTurbo') )
-				badges[15] = {classes: 'badge turbo', title: 'Turbo'}
-
-			// FFZ Badges
-			var data = f.users[e.get('username')];
-			if ( data && data.badges ) {
-				for(var slot in data.badges) {
-					if ( ! data.badges.hasOwnProperty(slot) )
-						continue;
-
-					var badge = data.badges[slot],
-						full_badge = f.badges[badge.id] || {},
-						old_badge = badges[slot];
-
-					if ( full_badge.visible !== undefined ) {
-						var visible = full_badge.visible;
-						if ( typeof visible === "function" )
-							try {
-								visible = visible.bind(f)(null, e.get('username'), null, badges);
-							} catch(err) {
-								f.error("badge " + badge.id + " visible: " + err);
-								continue;
 			}
 
-						if ( ! visible )
-							continue;
-					}
-
-					if ( old_badge ) {
-						var replaces = badge.hasOwnProperty('replaces') ? badge.replaces : full_badge.replaces;
-						if ( ! replaces )
-							continue;
-
-						old_badge.klass = 'badge ffz-badge-' + badge.id;
-						old_badge.title += ', ' + (badge.title || full_badge.title);
-						continue;
-					}
-
-					badges[slot] = {
-						classes: 'badge ffz-badge-' + badge.id,
-						title: badge.title || full_badge.title
-					}
-				}
-			}
-
-			var out = [];
-			for(var slot in badges)
-				out.push(badges[slot]);
-
 			return out;
 		}),
 
@@ -143,6 +96,7 @@ FFZ.prototype._modify_conversation_window = function(component) {
 				header_name.setAttribute('data-color', raw_color);
 			}
 
+			jQuery('.badge', el).tipsy({gravity: utils.tooltip_placement(constants.TOOLTIP_DISTANCE, 'n')});
 			jQuery(el).find('.html-tooltip').tipsy({live: true, html: true, gravity: utils.tooltip_placement(2*constants.TOOLTIP_DISTANCE, 'n')});
 		}
 	});

src/ember/directory.js

@@ -1,30 +1,176 @@
 var FFZ = window.FrankerFaceZ,
 	utils = require('../utils'),
-	constants = require('../constants');
+	constants = require('../constants'),
+
+	NO_LOGO = "http://static-cdn.jtvnw.net/jtv_user_pictures/xarth/404_user_150x150.png";
 
 
 // --------------------
 // Settings
 // --------------------
 
-FFZ.settings_info.directory_logos = {
+FFZ.settings_info.sidebar_followed_games = {
-	type: "boolean",
+	type: "select",
-	value: false,
+	options: {
+		0: "Disabled",
+		5: "Normal (5)",
+		10: "Large (10)",
+		999: "No Limit"
+	},
+
+	value: 5,
+	process_value: function(val) {
+		if ( typeof val === "string" )
+			return parseInt(val) || 0;
+		return val;
+	},
 
 	category: "Appearance",
 	no_mobile: true,
 
-	name: "Directory Logos",
+	name: "Sidebar Followed Games",
+	help: "Display this number of followed games on the sidebar.",
+
+	on_update: function(val) {
+			var controller = App.__container__.lookup('controller:games-following');
+			if ( controller )
+				controller.set('ffz_sidebar_games', val);
+		}
+	}
+
+FFZ.settings_info.directory_creative_all_tags = {
+	type: "boolean",
+	value: false,
+
+	category: "Directory",
+	no_mobile: true,
+
+	name: "Display All Creative Tags",
+	help: "Alter the creative tags display to list them all in a cloud rather than having to scroll.",
+
+	on_update: function(val) {
+			document.body.classList.toggle('ffz-creative-tags', val);
+		}
+	};
+
+
+FFZ.settings_info.directory_creative_showcase = {
+	type: "boolean",
+	value: true,
+
+	category: "Directory",
+	no_mobile: true,
+
+	name: "Creative Showcase",
+	help: "Display the showcase on the Creative directory page.",
+
+	on_update: function(val) {
+			document.body.classList.toggle('ffz-creative-showcase', val);
+		}
+	};
+
+
+FFZ.settings_info.directory_logos = {
+	type: "boolean",
+	value: false,
+
+	category: "Directory",
+	no_mobile: true,
+
+	name: "Channel Logos",
 	help: "Display channel logos in the Twitch directory."
 	};
 
 
+FFZ.settings_info.directory_group_hosts = {
+	type: "boolean",
+	value: true,
+
+	category:"Directory",
+	no_mobile: true,
+
+	name: "Group Hosts",
+	help: "Only show a given hosted channel once in the directory.",
+
+	on_update: function() {
+			var f = this,
+				HostModel = App.__container__.resolve('model:host'),
+				Following = HostModel && HostModel.collections[HostModel.collectionId("following")];
+
+			if ( ! Following )
+				return;
+
+			Following.clear();
+			Following.load();
+		}
+	};
+
+
+FFZ.settings_info.directory_host_menus = {
+	type: "select",
+	options: {
+		0: "Disabled",
+		1: "When Multiple are Hosting",
+		2: "Always"
+	},
+
+	value: 1,
+	process_value: function(val) {
+		if ( typeof val === "string" )
+			return parseInt(val) || 0;
+		return val;
+	},
+
+	category: "Directory",
+	no_mobile: true,
+
+	name: "Hosted Channel Menus",
+	help: "Display a menu to select which channel to visit when clicking a hosted channel in the directory.",
+
+	on_update: function() {
+			var f = this,
+				HostModel = App.__container__.resolve('model:host'),
+				Following = HostModel && HostModel.collections[HostModel.collectionId("following")];
+
+			if ( ! Following )
+				return;
+
+			Following.clear();
+			Following.load();
+		}
+	};
+
+
 // --------------------
 // Initialization
 // --------------------
 
 FFZ.prototype.setup_directory = function() {
-	this.log("Hooking the Ember Directory View.");
+	document.body.classList.toggle('ffz-creative-tags', this.settings.directory_creative_all_tags);
+	document.body.classList.toggle('ffz-creative-showcase', this.settings.directory_creative_showcase);
+
+	this.log("Hooking the Ember games-following controller.");
+	var GamesFollowing = App.__container__.lookup('controller:games-following');
+	if ( GamesFollowing ) {
+		GamesFollowing.reopen({
+			ffz_sidebar_games: this.settings.sidebar_followed_games,
+
+			sidePanelFollowing: function() {
+				var content = this.get('liveFollowing.sortedContent'),
+					limit = this.get('ffz_sidebar_games');
+
+				return limit === 999 ? content : _.first(content, limit);
+			}.property("liveFollowing.@each", "ffz_sidebar_games")
+		});
+
+		Ember.propertyDidChange(GamesFollowing, 'sidePanelFollowing');
+	}
+
+
+	this.log("Attempting to modify the Following collection.");
+	this._modify_following();
+
+	this.log("Hooking the Ember Directory views.");
 
 	var ChannelView = App.__container__.resolve('view:channel');
 	if ( ChannelView )
@@ -55,6 +201,93 @@ FFZ.prototype.setup_directory = function() {
 }
 
 
+FFZ.prototype._modify_following = function() {
+	var HostModel = App.__container__.resolve('model:host'),
+		f = this;
+
+	if ( HostModel ) {
+		var Following = HostModel.collections[HostModel.collectionId("following")];
+		if ( Following ) {
+			this.log("Found Following model.");
+			Following.reopen({
+				ffz_streams: {},
+				ffz_skipped: 0,
+
+				empty: function() {
+					this._super();
+					this.set("ffz_streams", {});
+					this.set("ffz_skipped", 0);
+				},
+
+				request: function(e) {
+					// We have to override request with nearly the same logic
+					// to prevent infinitely trying to load more streams.
+					if (!Twitch.user.isLoggedIn() || window.App.get("disableFollowingDirectory")) return RSVP.resolve({
+        				hosts: [], _total: 0
+					});
+
+					var t = {
+						limit: this.limit,
+						offset: this.get('content.length') + this.get('ffz_skipped')
+					};
+
+					return Twitch.api.get("/api/users/:login/followed/hosting", t);
+				},
+
+				afterSuccess: function(e) {
+					var valid_hosts = [],
+						streams = this.get('ffz_streams'),
+						skipped = this.get('ffz_skipped'),
+						t = this;
+
+					for(var i=0; i < e.hosts.length; i++) {
+						var host = e.hosts[i],
+							target = host && host.target && host.target.id;
+
+						if ( f.settings.directory_group_hosts && streams[target] ) {
+							skipped++;
+							streams[target].ffz_hosts && streams[target].ffz_hosts.push({logo: host.logo, name: host.name, display_name: host.display_name});
+							continue;
+						}
+
+						streams[target] = host;
+						host.ffz_hosts = [{logo: host.logo, name: host.name, display_name: host.display_name}];
+
+						valid_hosts.push(host);
+					}
+
+					this.set('ffz_skipped', skipped);
+					this.setContent(valid_hosts);
+
+					// We could get non-empty results even with no new hosts.
+					this.set('gotNonEmptyResults', e.hosts && e.hosts.length);
+					this.set('total', e._total - skipped);
+				}
+			});
+
+			// Filter the streams immediately.
+			if ( true && ! Following.get('isLoading') ) {
+				var content = Following.get('content'),
+					total = Following.get('total'),
+					host_copy = [];
+
+				// TODO: Something less stupid.
+				for(var i=0; i < content.length; i++)
+					host_copy.push(content[i]);
+
+				Following.clear();
+				Following.afterSuccess({hosts: host_copy, _total: total});
+			}
+
+			return;
+		}
+	}
+
+	// Couldn't find it. Reschedule.
+	setTimeout(this._modify_following.bind(this), 250);
+}
+
+
 FFZ.prototype._modify_directory_live = function(dir, is_csgo) {
 	var f = this;
 	dir.reopen({
@@ -93,7 +326,7 @@ FFZ.prototype._modify_directory_live = function(dir, is_csgo) {
 				logo.className = 'profile-photo';
 				logo.classList.toggle('is-csgo', is_csgo);
 
-				logo.src = this.get('context.model.channel.logo') || "http://static-cdn.jtvnw.net/jtv_user_pictures/xarth/404_user_150x150.png";
+				logo.src = this.get('context.model.channel.logo') || NO_LOGO;
 				logo.alt = this.get('context.model.channel.display_name');
 
 				link.href = '/' + target;
@@ -128,7 +361,8 @@ FFZ.prototype._modify_directory_live = function(dir, is_csgo) {
 		ffzUpdateUptime: function() {
 			var raw_created = this.get('context.model.created_at'),
 				up_since = raw_created && utils.parse_date(raw_created),
-				uptime = up_since && Math.floor((Date.now() - up_since.getTime()) / 1000) || 0;
+				now = Date.now() - (f._ws_server_offset || 0),
+				uptime = up_since && Math.floor((now - up_since.getTime()) / 1000) || 0;
 
 			if ( uptime > 0 ) {
 				this._ffz_uptime.innerHTML = constants.CLOCK + utils.time_to_string(uptime, false, false, false, f.settings.stream_uptime === 1);
@@ -151,39 +385,143 @@ FFZ.prototype._modify_directory_host = function(dir) {
 	dir.reopen({
 		didInsertElement: function() {
 			this._super();
+			try {
+				this.ffzInit();
+			} catch(err) {
+				f.error("directory/host ffzInit: " + err);
+			}
+		},
 
-			var el = this.get('element'),
+		willClearRender: function() {
-				meta = el && el.querySelector('.meta'),
+			this._super();
-				thumb = el && el.querySelector('.thumb'),
+			try {
-				cap = thumb && thumb.querySelector('.cap');
+				this.ffzCleanup();
+			} catch(err) {
+				f.error("directory/host ffzCleanup: " + err);
+			}
+		},
 
-
+		ffzVisitChannel: function(target, e) {
-			if ( f.settings.directory_logos ) {
-				el.classList.add('ffz-directory-logo');
-
-				var link = document.createElement('a'),
-					logo = document.createElement('img'),
-					t = this,
-					target = this.get('context.model.target.channel.name');
-
-				logo.className = 'profile-photo';
-				logo.src = this.get('context.model.target.channel.logo') || "http://static-cdn.jtvnw.net/jtv_user_pictures/xarth/404_user_150x150.png";
-				logo.alt = this.get('context.model.target.channel.display_name');
-
-				link.href = '/' + target;
-				link.addEventListener('click', function(e) {
 			var Channel = App.__container__.resolve('model:channel');
 			if ( ! Channel )
 				return;
 
+			if ( e ) {
+				if ( e.button !== 0 )
+					return;
+
 				e.preventDefault();
-					t.get('controller').transitionTo('channel.index', Channel.find({id: target}).load());
+				e.stopPropagation();
+			}
+
+			f.close_popup();
+			this.get('controller').transitionTo('channel.index', Channel.find({id: target}).load());
 			return false;
-				});
+		},
+
+		ffzShowHostMenu: function(e) {
+			if ( e.button !== 0 )
+				return;
+
+			e.preventDefault();
+			e.stopPropagation();
+
+			var hosts = this.get('context.model.ffz_hosts'),
+				target = this.get('context.model.target.channel.name');
+
+			if ( f.settings.directory_host_menus === 0 || ! hosts || (f.settings.directory_host_menus === 1 && hosts.length < 2) )
+				return this.ffzVisitChannel((hosts && hosts.length < 2) ? hosts[0].name : target);
+
+			var popup = f._popup ? f.close_popup() : f._last_popup,
+				t = this;
+
+			// Don't re-show the popup if we were clicking to show it.
+			if ( popup && popup.classList.contains('ffz-channel-selector') && popup.getAttribute('data-channel') === target )
+				return;
+
+			var menu = document.createElement('div'), hdr,
+				make_link = function(target) {
+						var link = document.createElement('a');
+						link.className = 'dropmenu_action';
+						link.setAttribute('data-channel', target.name);
+						link.href = '/' + target.name;
+						link.innerHTML = '<img class="image" src="' + utils.sanitize(target.logo || NO_LOGO) + '"><span class="title">' + utils.sanitize(target.display_name) + '</span>';
+						link.addEventListener('click', t.ffzVisitChannel.bind(t, target.name));
+						menu.appendChild(link);
+						return link;
+					};
+
+			menu.className = 'ffz-channel-selector dropmenu menu-like';
+			menu.setAttribute('data-channel', target);
+
+			hdr = document.createElement('div');
+			hdr.className = 'header';
+			hdr.textContent = 'Hosted Channel';
+			menu.appendChild(hdr);
+
+			make_link(this.get('context.model.target.channel'));
+
+			hdr = document.createElement('div');
+			hdr.className = 'header';
+			hdr.textContent = 'Hosting Channels';
+			menu.appendChild(hdr);
+
+			for(var i=0; i < hosts.length; i++)
+				make_link(hosts[i]);
+
+			f.show_popup(menu, [e.clientX - 60, e.clientY - 60], document.querySelector('#main_col > .tse-scroll-content > .tse-content'));
+		},
+
+		ffzCleanup: function() {
+			if ( f._popup && f._popup.classList.contains('ffz-channel-selector') && f._popup.getAttribute('data-channel') === target )
+				f.close_popup();
+		},
+
+		ffzInit: function() {
+			var el = this.get('element'),
+				meta = el && el.querySelector('.meta'),
+				thumb = el && el.querySelector('.thumb'),
+				cap = thumb && thumb.querySelector('.cap'),
+				title = meta && meta.querySelector('.title a'),
+
+				target = this.get('context.model.target.channel'),
+				hosts = this.get('context.model.ffz_hosts');
+
+			if ( f.settings.directory_logos ) {
+				el.classList.add('ffz-directory-logo');
+				var logo = document.createElement('img'),
+					link = document.createElement('a');
+
+				logo.className = 'profile-photo';
+				logo.src = this.get('context.model.target.channel.logo') || NO_LOGO;
+				logo.alt = this.get('context.model.target.channel.display_name');
+
+				link.href = '/' + target.name;
+				link.addEventListener('click', this.ffzVisitChannel.bind(this, target.name));
 
 				link.appendChild(logo);
 				meta.insertBefore(link, meta.firstChild);
 			}
+
+			var update_links = f.settings.directory_host_menus === 2 || (hosts && hosts.length > 1);
+
+			if ( title ) {
+				if ( update_links ) {
+					title.href = '/' + target.name;
+					title.addEventListener('click', this.ffzShowHostMenu.bind(this));
+				}
+
+				if ( hosts && hosts.length > 1 ) {
+					title.textContent = utils.number_commas(hosts.length) + ' hosting ' + utils.sanitize(target.display_name);
+					title.title = _.sortBy(hosts, "name").mapProperty("display_name").join(", ");
+					jQuery(title).tipsy({gravity: 's'});
+				}
+			}
+
+			if ( cap && update_links ) {
+				cap.href = '/' + target.name;
+				cap.addEventListener('click', this.ffzShowHostMenu.bind(this));
+			}
 		}
 	});
 

src/ember/following.js

@@ -161,7 +161,8 @@ FFZ.prototype.setup_profile_following = function() {
 			t_el.className = 'overlay_info length';
 			jQuery(t_el).tipsy({html: true, gravity: utils.tooltip_placement(constants.TOOLTIP_DISTANCE, 's')});
 
-			var age = data[0] ? Math.floor((Date.now() - data[0].getTime()) / 1000) : 0;
+			var now = Date.now() - (f._ws_server_offset || 0),
+				age = data[0] ? Math.floor((now - data[0].getTime()) / 1000) : 0;
 			if ( age ) {
 				t_el.innerHTML = constants.CLOCK + ' ' + utils.human_time(age, 10);
 				t_el.setAttribute('original-title', 'Following Since: <nobr>' + data[0].toLocaleString() + '</nobr>');
@@ -180,7 +181,8 @@ FFZ.prototype.setup_profile_following = function() {
 					follow.innerHTML = constants.HEART + constants.UNHEART + '<span> Follow</span>';
 
 					if ( t_el ) {
-						var age = data && data[0] ? Math.floor((Date.now() - data[0].getTime()) / 1000) : undefined;
+						var now = Date.now() - (f._ws_server_offset || 0),
+							age = data && data[0] ? Math.floor((now - data[0].getTime()) / 1000) : undefined;
 						if ( age !== undefined ) {
 							t_el.innerHTML = constants.CLOCK + ' ' + (age < 60 ? 'now' : utils.human_time(age, 10));
 							t_el.setAttribute('original-title', 'Following Since: <nobr>' + data[0].toLocaleString() + '</nobr>');
@@ -216,7 +218,7 @@ FFZ.prototype.setup_profile_following = function() {
 						Twitch.api.del("users/:login/follows/channels/" + user_id) :
 						Twitch.api.put("users/:login/follows/channels/" + user_id, {notifications: false}))
 					.done(function() {
-						data = f._following_cache[user_id] = was_following ? null : [new Date(), false];
+						data = f._following_cache[user_id] = was_following ? null : [new Date(Date.now() - (f._ws_server_offset||0)), false];
 					})
 					.always(function() {
 						update_follow();

src/ember/line.js

@@ -505,7 +505,7 @@ FFZ.settings_info.chat_ts_size = {
 			css = "";
 		else {
 			var lh = Math.max(20, Math.round((20/12)*val), Math.round((20/12)*this.settings.chat_font_size));
-			css = ".chat-history .timestamp,.ember-chat .chat-messages .timestamp { font-size: " + val + "px !important; line-height: " + lh + "px !important; }";
+			css = ".ember-chat .chat-messages .timestamp { font-size: " + val + "px !important; line-height: " + lh + "px !important; }";
 		}
 
 		utils.update_css(this._chat_style, "chat_ts_font_size", css);
@@ -658,8 +658,6 @@ FFZ.prototype._modify_line = function(component) {
 			var deleted = this.get('msgObject.deleted'),
 				r = this,
 
-				badges = {},
-
 				user = this.get('msgObject.from'),
 				room_id = this.get('msgObject.room'),
 				room = f.rooms && f.rooms[room_id],
@@ -679,6 +677,8 @@ FFZ.prototype._modify_line = function(component) {
 			e.push('<div class="indicator"></div>');
 			e.push('<span class="timestamp float-left">' + this.get("timestamp") + '</span> ');
 
+
+			// Moderation actions
 			if ( ! is_whisper && this_ul < other_ul ) {
 				e.push('<span class="mod-icons float-left">');
 				for(var i=0, l = f.settings.mod_buttons.length; i < l; i++) {
@@ -712,44 +712,14 @@ FFZ.prototype._modify_line = function(component) {
 				e.push('</span>');
 			}
 
-			// Stock Badges
-			if ( ! is_whisper && this.get('isBroadcaster') )
-				badges[0] = {klass: 'broadcaster', title: 'Broadcaster'};
-			else if ( this.get('isStaff') )
-				badges[0] = {klass: 'staff', title: 'Staff'};
-			else if ( this.get('isAdmin') )
-				badges[0] = {klass: 'admin', title: 'Admin'};
-			else if ( this.get('isGlobalMod') )
-				badges[0] = {klass: 'global-moderator', title: 'Global Moderator'};
-			else if ( ! is_whisper && this.get('isModerator') )
-				badges[0] = {klass: 'moderator', title: 'Moderator'};
 
-			if ( ! is_whisper && this.get('isSubscriber') )
+			// Badges
-				badges[10] = {klass: 'subscriber', title: 'Subscriber'};
-			if ( this.get('hasTurbo') )
-				badges[15] = {klass: 'turbo', title: 'Turbo'};
-
-			// FFZ Badges
-			badges = f.render_badges(this, badges);
-
-			// Rendering!
 			e.push('<span class="badges float-left">');
-
+			e.push(f.render_badges(f.get_line_badges(this.get('msgObject'), is_whisper)));
-			for(var key in badges) {
-				var badge = badges[key],
-					css = badge.image ? 'background-image:url(&quot;' + badge.image + '&quot;);' : '';
-
-				if ( badge.color )
-					css += 'background-color:' + badge.color + ';';
-
-				if ( badge.extra_css )
-					css += badge.extra_css;
-
-				e.push('<div class="badge float-left tooltip ' + badge.klass + '"' + (css ? ' style="' + css + '"' : '') + ' title="' + badge.title + '"></div>');
-			}
-
 			e.push('</span>');
 
+
+			// Handle aliases
 			var alias = f.aliases[user],
 				name = this.get('msgObject.tags.display-name') || (user && user.capitalize()) || "unknown user",
 				style = colors && 'color:' + (is_dark ? colors[1] : colors[0]),
@@ -760,6 +730,8 @@ FFZ.prototype._modify_line = function(component) {
 			else
 				e.push('<span class="from' + colored + '" style="' + style + (colors ? '" data-color="' + raw_color : '') + '">' + utils.sanitize(name) + '</span>');
 
+
+			// If it's a whisper, we need to get that user's color, alias, and draw the whisper arrow thing.
 			if ( is_whisper ) {
 				var to_alias = f.aliases[recipient],
 					to_name = this.get('msgObject.tags.recipient-display-name') || (recipient && recipient.capitalize()) || "unknown user",
@@ -777,6 +749,8 @@ FFZ.prototype._modify_line = function(component) {
 					e.push('<span class="to' + to_colored + '" style="' + to_style + (to_colors ? '" data-color="' + to_color : '') + '">' + utils.sanitize(to_name) + '</span>');
 			}
 
+
+			// Finally, onto the message proper.
 			e.push('<span class="colon">:</span> ');
 
 			if ( this.get('msgObject.style') !== 'action' ) {

src/ember/moderation-card.js

@@ -426,7 +426,8 @@ FFZ.prototype.setup_mod_card = function() {
 			}
 
 			if ( since ) {
-				var age = Math.floor((Date.now() - since.getTime()) / 1000);
+				var now = Date.now() - (f._ws_server_offset || 0),
+					age = Math.floor((now - since.getTime()) / 1000);
 				if ( age > 0 ) {
 					out += '<span class="stat tooltip" title="Member Since: ' + (age > 86400 ? since.toLocaleDateString() : since.toLocaleString()) + '">' + constants.CLOCK + ' ' + utils.human_time(age, 10) + '</span>';
 				}
@@ -458,6 +459,7 @@ FFZ.prototype.setup_mod_card = function() {
 
 				var el = this.get('element'),
 					controller = this.get('controller'),
+					t = this,
 					line,
 
 					is_mod = controller.get('cardInfo.isModeratorOrHigher'),
@@ -731,6 +733,7 @@ FFZ.prototype.setup_mod_card = function() {
 				if ( f.settings.mod_card_history ) {
 					var Chat = App.__container__.lookup('controller:chat'),
 						room = Chat && Chat.get('currentRoom'),
+						delete_links = room && room.get('roomProperties.hide_chat_links'),
 						tmiSession = room.tmiSession || (window.TMI && TMI._sessions && TMI._sessions[0]),
 						room_id = room.get('id'),
 						user_id = controller.get('cardInfo.user.id'),
@@ -741,12 +744,14 @@ FFZ.prototype.setup_mod_card = function() {
 
 					history.className = 'interface clearfix chat-history';
 
-					if ( user_history.length < 20 ) {
+					if ( user_history.length < 50 ) {
-						var before = user_history.length > 0 ? user_history[0].date.getTime() : Date.now();
+						var before = (user_history.length > 0 ? user_history[0].date.getTime() : Date.now()) - (f._ws_server_offset || 0);
 						f.ws_send("user_history", [room_id, user_id, 50 - user_history.length], function(success, data) {
 							if ( ! success )
 								return;
 
+							f.parse_history(data, null, room_id, delete_links, tmiSession);
+
 							var i = data.length,
 								was_at_top = history && history.scrollTop >= (history.scrollHeight - history.clientHeight),
 								first = true;
@@ -756,8 +761,7 @@ FFZ.prototype.setup_mod_card = function() {
 								if ( ! msg )
 									continue;
 
-								if ( typeof msg.date === "string" || typeof msg.date === "number" )
+								msg.from_server = true;
-									msg.date = utils.parse_date(msg.date);
 
 								if ( ! msg.date || msg.date.getTime() >= before )
 									continue;
@@ -772,27 +776,7 @@ FFZ.prototype.setup_mod_card = function() {
 									}), history.firstElementChild);
 								}
 
-								if ( ! msg.style ) {
+								history.insertBefore(f._build_mod_card_history(msg, t), history.firstElementChild);
-									if ( msg.from === "jtv" )
-										msg.style = "admin";
-									else if ( msg.from === "twitchnotify" )
-										msg.style = "notification";
-								}
-
-								if ( msg.tags && typeof msg.tags.emotes === "string" )
-									try {
-										msg.tags.emotes = JSON.parse(msg.tags.emotes);
-									} catch(err) {
-										f.log("Error Parsing JSON Emotes: " + err);
-										msg.tags.emotes = {};
-									}
-
-								if ( ! msg.cachedTokens || ! msg.cachedTokens.length )
-									f.tokenize_chat_line(msg, true, room.get('roomProperties.hide_chat_links'));
-
-								history.insertBefore(f._build_mod_card_history(msg), history.firstElementChild);
-								if ( history.childElementCount >= 50 )
-									break;
 							}
 
 							if ( was_at_top )
@@ -801,7 +785,7 @@ FFZ.prototype.setup_mod_card = function() {
 					}
 
 					for(var i=0; i < user_history.length; i++)
-						history.appendChild(f._build_mod_card_history(user_history[i]));
+						history.appendChild(f._build_mod_card_history(user_history[i], t));
 
 					el.appendChild(history);
 
@@ -832,29 +816,214 @@ FFZ.prototype.setup_mod_card = function() {
 					f.error("ModerationCardView didInsertElement: " + err);
 				} catch(err) { }
 			}
-		}});
+		},
+
+		ffzAdjacentHistory: function(line) {
+			var Chat = App.__container__.lookup('controller:chat'),
+				controller = this.get('controller'),
+				t = this,
+
+				user_id = this.get('cardInfo.user.id'),
+
+				room = Chat && Chat.get('currentRoom'),
+				room_id = room.get('id'),
+				delete_links = room && room.get('roomProperties.hide_chat_links'),
+
+				tmiSession = room.tmiSession || (window.TMI && TMI._sessions && TMI._sessions[0]),
+
+				el = this.get('element'),
+				history = el && el.querySelector('.chat-history'),
+				logs = el && el.querySelector('.chat-history.adjacent-history'),
+
+				when = line.date.getTime();
+
+			if ( ! history )
+				return;
+
+			if ( logs )
+				logs.classList.add('loading');
+			else
+				history.classList.add('loading');
+
+			if ( ! f.ws_send("adjacent_history", [room_id, when, 2], function(success, data) {
+				if ( logs )
+					logs.classList.remove('loading');
+				else
+					history.classList.remove('loading');
+
+				if ( ! success || ! data || ! data.length )
+					return;
+
+				var had_logs = false,
+					found_original = false,
+					back;
+
+				if ( logs ) {
+					had_logs = true;
+					logs.innerHTML = '';
+
+				} else {
+					logs = document.createElement('ul');
+					back = document.createElement('button');
+
+					back.className = 'button back-button';
+					back.innerHTML = '&laquo; Back';
+
+					back.addEventListener('click', function() {
+						logs.parentElement.removeChild(logs);
+						back.parentElement.removeChild(back);
+						history.classList.remove('hidden');
+					});
+
+					logs.className = 'interface clearfix chat-history adjacent-history';
 				}
 
 
-FFZ.prototype._build_mod_card_history = function(line) {
+				f.parse_history(data, null, room_id, delete_links, tmiSession, function(msg) {
+					msg.from_server = true;
+
+					var line_time = line.date.getTime() - (line.from_server ? 0 : (f._ws_server_offset || 0)),
+						is_original = ! found_original && Math.abs(line_time - msg.date.getTime()) < (line.from_server ? 50 : 1000) && line.from === msg.from && line.message === msg.message;
+
+					msg.original_sender = user_id === msg.from;
+					msg.is_original = is_original;
+					found_original = found_original || is_original;
+
+					logs.insertBefore(f._build_mod_card_history(msg, t, true), logs.firstElementChild);
+					return true;
+				});
+
+
+				if ( ! had_logs ) {
+					history.classList.add('hidden');
+					history.parentElement.insertBefore(logs, history);
+					history.parentElement.insertBefore(back, logs);
+				}
+
+				if ( found_original )
+					setTimeout(function(){
+						el = logs.querySelector('.original-msg');
+						if ( el )
+							logs.scrollTop = (el.offsetTop - logs.offsetTop) - (logs.clientHeight - el.clientHeight) / 2;
+					});
+
+			}) )
+				if ( logs )
+					logs.classList.remove('loading');
+				else
+					history.classList.remove('loading');
+		}
+	});
+}
+
+
+FFZ.prototype._build_mod_card_history = function(msg, modcard, show_from) {
 	var l_el = document.createElement('li'),
+		out = [],
 		f = this;
 
+		style = '', colored = '';
+
+	if ( helpers && helpers.getTime )
+		out.push('<span class="timestamp float-left">' + helpers.getTime(msg.date) + '</span>');
+
+
+	if ( show_from ) {
+		// Badges
+		out.push('<span class="badges float-left">');
+		out.push(this.render_badges(this.get_line_badges(msg, false)));
+		out.push('</span>');
+
+
+		// Colors
+		var raw_color = msg.color,
+			colors = raw_color && this._handle_color(raw_color),
+
+			Layout = App.__container__.lookup('controller:layout'),
+			Settings = App.__container__.lookup('controller:settings'),
+
+			is_dark = (Layout && Layout.get('isTheatreMode')) || (Settings && Settings.get('model.darkMode'));
+
+
+		// Aliases and Styling
+		var alias = this.aliases[msg.from],
+			name = (msg.tags && msg.tags['display-name']) || (msg.from && msg.from.capitalize()) || "unknown user",
+			style = colors && 'color:' + (is_dark ? colors[1] : colors[0]),
+			colored = style ? ' has-color' : '';
+
+
+		if ( alias )
+			out.push('<span class="from ffz-alias tooltip' + colored + '" style="' + style + (colors ? '" data-color="' + raw_color : '') + '" title="' + utils.sanitize(name) + '">' + utils.sanitize(alias) + '</span>');
+		else
+			out.push('<span class="from' + colored + '" style="' + style + (colors ? '" data-color="' + raw_color : '') + '">' + utils.sanitize(name ) + '</span>');
+
+		out.push('<span class="colon">:</span> ');
+	}
+
+
+	// The message itself.
+	if ( msg.style !== 'action' ) {
+		style = '';
+		colored = '';
+	}
+
+
+	var message = '<span class="message' + colored + '" style="' + style + (colors ? '" data-color="' + raw_color : '') + '">' +
+			(msg.style === 'action' && ! show_from ? '*' + name + ' ' : '') + this.render_tokens(msg.cachedTokens) + '</span>';
+
+	if ( msg.deleted )
+		out.push('<span class="deleted"><a class="undelete" href="#" data-message="' + utils.quote_attr(message) + '">&lt;message deleted&gt;</a></span>');
+	else
+		out.push(message);
+
+
+	// Line attributes and classes.
 	l_el.className = 'message-line chat-line clearfix';
 
-	if ( line.ffz_has_mention )
+	if ( msg.style )
+		l_el.classList.add(msg.style);
+
+	if ( msg.original_sender )
+		l_el.classList.add('original-sender');
+
+	if ( msg.is_original )
+		l_el.classList.add('original-msg');
+
+	if ( msg.ffz_has_mention )
 		l_el.classList.add('ffz-mentioned');
 
-	if ( line.style )
+	if ( this.settings.prevent_clear && msg.ffz_deleted )
-		l_el.classList.add(line.style);
+		l_el.classList.add('ffz-deleted');
+
+	l_el.setAttribute('data-room', msg.room);
+	l_el.setAttribute('data-sender', msg.from);
+	l_el.setAttribute('data-deleted', msg.deleted || false);
+
+	l_el.innerHTML = out.join("");
 
-	l_el.innerHTML = (helpers ? '<span class="timestamp float-left">' + helpers.getTime(line.date) + '</span> ' : '') + '<span class="message">' + (line.style === 'action' ? '*' + line.from + ' ' : '') + f.render_tokens(line.cachedTokens) + '</span>';
 
 	// Interactivity
+	jQuery('a.undelete', l_el).click(function(e) { this.parentElement.outerHTML = this.getAttribute('data-message'); });
 	jQuery('a.deleted-link', l_el).click(f._deleted_link_click);
 	jQuery('img.emoticon', l_el).click(function(e) { f._click_emote(this, e) });
 	jQuery('.html-tooltip', l_el).tipsy({html:true, gravity: utils.tooltip_placement(2*constants.TOOLTIP_DISTANCE, 's')});
 
+	if ( modcard ) {
+		modcard.get('cardInfo.user.id') !== msg.from && jQuery('span.from', l_el).click(function(e) {
+			var el = modcard.get('element');
+			el && f._roomv && f._roomv.get('context.model.id') === msg.room && f._roomv.get('controller').send('showModOverlay', {
+				sender: msg.from,
+				top: parseInt(el.style.top),
+				left: parseInt(el.style.left)
+			});
+		});
+
+		l_el.querySelector('.timestamp').addEventListener('click', function(e) {
+			if ( e.button === 0 )
+				modcard.ffzAdjacentHistory(msg);
+		});
+	}
+
 	return l_el;
 }
 
@@ -881,6 +1050,8 @@ FFZ.prototype._update_alias = function(user) {
 		el_from.textContent = display_name;
 		el_from.title = alias ? cap_name : '';
 	}
+
+	// TODO: Update conversations~
 }
 
 

src/ember/room.js

@@ -713,7 +713,7 @@ FFZ.prototype._load_history = function(room_id, success, data) {
 	if ( ! data.length )
 		return;
 
-	return this._insert_history(room_id, data);
+	return this._insert_history(room_id, data, true);
 }
 
 
@@ -730,118 +730,93 @@ FFZ.prototype._show_deleted = function(room_id) {
 	this._insert_history(room_id, old_messages);
 }
 
-FFZ.prototype._insert_history = function(room_id, data) {
+FFZ.prototype._insert_history = function(room_id, data, from_server) {
-	var room = this.rooms[room_id];
+	var room = this.rooms[room_id], f = this;
 	if ( ! room || ! room.room )
 		return;
 
 	var r = room.room,
 		messages = r.get('messages'),
+		buffer_size = r.get('messageBufferSize'),
+
 		tmiSession = r.tmiSession || (TMI._sessions && TMI._sessions[0]),
-		tmiRoom = r.tmiRoom,
+		delete_links = r.get('roomProperties.hide_chat_links'),
 
 		removed = 0,
 		inserted = 0,
-		purged = {},
 
-		last_msg = data[data.length - 1],
+		first_inserted,
-		now = new Date(),
+		first_existing,
-		last_date = (typeof last_msg.date === "string" || typeof last_msg.date === "number") ? (last_msg.date = utils.parse_date(last_msg.date)) : last_msg.date,
+		before;
-		age = (now - last_date) / 1000,
-		is_old = age > 300,
 
-		i = data.length;
+	first_existing = messages.length ? messages[0] : null;
+	if ( first_existing && first_existing.from === 'jtv' && first_existing.message === 'Welcome to the chat room!' )
+		first_existing = messages.length > 1 ? messages[1] : null;
 
-	var i = data.length;
+	if ( first_existing )
-	while(i--) {
+		before = first_existing.date && first_existing.date.getTime();
-		var msg = data[i],
-			is_deleted = msg.ffz_deleted = purged[msg.from] || false;
 
-		if ( is_deleted && ! this.settings.prevent_clear )
-			msg.deleted = true;
 
-		if ( typeof msg.date === "string" || typeof msg.date === "number" )
+	this.parse_history(data, null, room_id, delete_links, tmiSession, function(msg) {
-			msg.date = utils.parse_date(msg.date);
+		if ( from_server )
+			msg.from_server = true;
 
-		if ( ! msg.room )
+		// Skip messages that are from the future.
-			msg.room = room_id;
+		if ( ! msg.date || (before && (before - (msg.from_server && ! first_existing.from_server ? f._ws_server_offset || 0 : 0)) < msg.date.getTime()) )
+			return true;
 
-		if ( ! msg.color )
+		if ( f.settings.remove_deleted && msg.deleted )
-			msg.color = msg.tags && msg.tags.color ? msg.tags.color : tmiSession && msg.from ? tmiSession.getColor(msg.from.toLowerCase()) : "#755000";
+			return true;
 
-		if ( ! msg.labels || ! msg.labels.length ) {
+		if ( r.shouldShowMessage(msg) && r.ffzShouldShowMessage(msg) ) {
-			var labels = msg.labels = [];
+			if ( messages.length < buffer_size ) {
-			if ( msg.tags ) {
-				if ( msg.tags.turbo )
-					labels.push("turbo");
-				if ( msg.tags.subscriber )
-					labels.push("subscriber");
-				if ( msg.from === room_id )
-					labels.push("owner")
-				else {
-					var ut = msg.tags['user-type'];
-					if ( ut === 'mod' || ut === 'staff' || ut === 'admin' || ut === 'global_mod' )
-						labels.push(ut);
-				}
-			}
-		}
-
-		if ( ! msg.style ) {
-			if ( msg.from === "jtv" )
-				msg.style = "admin";
-			else if ( msg.from === "twitchnotify" )
-				msg.style = "notification";
-		}
-
-		if ( msg.tags && typeof msg.tags.emotes === "string" )
-			try {
-				msg.tags.emotes = JSON.parse(msg.tags.emotes);
-			} catch(err) {
-				f.log("Error Parsing JSON Emotes: " + err);
-				msg.tags.emotes = {};
-			}
-
-		if ( ! msg.cachedTokens || ! msg.cachedTokens.length )
-			this.tokenize_chat_line(msg, true, r.get('roomProperties.hide_chat_links'));
-
-		if ( r.shouldShowMessage(msg) ) {
-			if ( messages.length < r.get("messageBufferSize") ) {
-				// One last thing! Make sure we don't have too many messages.
 				if ( msg.ffz_old_messages ) {
-					var max_msgs = r.get("messageBufferSize") - (messages.length + 1);
+					var max_messages = buffer_size - (messages.length + 1);
-					if ( msg.ffz_old_messages.length > max_msgs )
+					if ( max_messages <= 0 )
-						msg.ffz_old_messages = msg.ffz_old_messages.slice(msg.ffz_old_messages.length - max_msgs);
+						msg.ffz_old_messages = null;
+					else if ( msg.ffz_old_messages.length > max_messages )
+						msg.ffz_old_messages = msg.ffz_old_messages.slice(msg.ffz_old_messages.length - max_messages);
 				}
 
+				if ( ! first_inserted )
+					first_inserted = msg;
+
 				messages.unshiftObject(msg);
 				inserted += 1;
+
 			} else
-				break;
+				return false;
 		}
 
-		// If there was a CLEARCHAT, stop processing.
+		// If there's a CLEARCHAT, stop processing.
 		if ( msg.tags && msg.tags.target === '@@' )
-			break;
+			return false;
 
-		// If there was a purge, just track the name.
+		return true;
-		else if ( msg.tags && msg.tags.target )
+	});
-			purged[msg.tags.target] = true;
-	}
 
-	if ( is_old ) {
+
+	if ( ! first_inserted )
+		return;
+
+	var now = Date.now() - (first_inserted.from_server ? this._ws_server_offset || 0 : 0),
+		age = now - first_inserted.date.getTime();
+
+	if ( age > 300000 ) {
 		var msg = {
 			color: "#755000",
-			date: new Date(),
+			date: first_inserted.date,
 			from: "frankerfacez_admin",
 			style: "admin",
-			message: "(Last message is " + utils.human_time(age) + " old.)",
+			message: "(Last message is " + utils.human_time(age/1000) + " old.)",
-			room: room_id
+			room: room_id,
+			from_server: from_server
 		};
 
-		this.tokenize_chat_line(msg, true, r.get('roomProperties.hide_chat_links'));
+		this.tokenize_chat_line(msg, false, delete_links);
 		if ( r.shouldShowMessage(msg) ) {
 			messages.insertAt(inserted, msg);
-			while( messages.length > r.get('messageBufferSize') ) {
+			while ( messages.length > buffer_size ) {
 				messages.removeAt(0);
 				removed++;
 			}
@@ -1100,8 +1075,7 @@ FFZ.prototype._modify_room = function(room) {
 				if ( ! this.ffzPending )
 					this.ffzPending = [];
 
-				var now = Date.now();
+				var now = msg.time = Date.now();
-				msg.time = now;
 				this.ffzPending.push(msg);
 				this.ffzSchedulePendingFlush(now);
 
@@ -1134,9 +1108,10 @@ FFZ.prototype._modify_room = function(room) {
 			if ( this.ffzPending && this.ffzPending.length ) {
 				// We need either the amount of chat delay past the first message, if chat_delay is on, or the
 				// amount of time from the last batch.
+				now = now || Date.now();
 				var delay = Math.max(
-					(f.settings.chat_delay !== 0 ? 50 + Math.max(0, (f.settings.chat_delay + (this.ffzPending[0].time||0)) - (now || Date.now())) : 0),
+					(f.settings.chat_delay !== 0 ? 50 + Math.max(0, (f.settings.chat_delay + (this.ffzPending[0].time||0)) - now) : 0),
-					(f.settings.chat_batching !== 0 ? Math.max(0, f.settings.chat_batching - ((now || Date.now()) - (this._ffz_last_batch||0))) : 0));
+					(f.settings.chat_batching !== 0 ? Math.max(0, f.settings.chat_batching - (now - (this._ffz_last_batch||0))) : 0));
 
 				this._ffz_pending_flush = setTimeout(this.ffzPendingFlush.bind(this), delay);
 			}
@@ -1163,6 +1138,9 @@ FFZ.prototype._modify_room = function(room) {
 		},
 
 		ffzShouldShowMessage: function (msg) {
+			if ( ! f.settings.hosted_sub_notices && msg.style === 'notification' && HOSTED_SUB.test(msg.message) )
+				return false;
+
 			if (f.settings.remove_bot_ban_notices && this.ffzRecentlyBanned) {
 				var banned = '(' + this.ffzRecentlyBanned.join('|') + ')';
 				var bots = {
@@ -1181,9 +1159,6 @@ FFZ.prototype._modify_room = function(room) {
 
 		addMessage: function(msg) {
 			if ( msg ) {
-				if ( ! f.settings.hosted_sub_notices && msg.style === 'notification' && HOSTED_SUB.test(msg.message) )
-					return;
-
 				var is_whisper = msg.style === 'whisper';
 
 				// Ignore whispers if conversations are enabled.
@@ -1212,7 +1187,9 @@ FFZ.prototype._modify_room = function(room) {
 							user_history = room.user_history[msg.from] = room.user_history[msg.from] || [];
 
 						user_history.push({
-							from: msg.tags && msg.tags['display-name'] || msg.from,
+							from: msg.from,
+							tags: {'display-name': msg.tags && msg.tags['display-name']},
+							message: msg.message,
 							cachedTokens: msg.cachedTokens,
 							style: msg.style,
 							date: msg.date
@@ -1223,16 +1200,16 @@ FFZ.prototype._modify_room = function(room) {
 
 						if ( f._mod_card && f._mod_card.ffz_room_id === msg.room && f._mod_card.get('cardInfo.user.id') === msg.from ) {
 							var el = f._mod_card.get('element'),
-								history = el && el.querySelector('.chat-history'),
+								history = el && el.querySelector('.chat-history:not(.adjacent-history)'),
 								was_at_top = history && history.scrollTop >= (history.scrollHeight - history.clientHeight);
 
 							if ( history ) {
-								history.appendChild(f._build_mod_card_history(msg));
+								history.appendChild(f._build_mod_card_history(msg, f._mod_card));
 								if ( was_at_top )
 									setTimeout(function() { history.scrollTop = history.scrollHeight; })
 
 								// Don't do infinite scrollback.
-								if ( history.childElementCount > 50 )
+								if ( history.childElementCount > 100 )
 									history.removeChild(history.firstElementChild);
 							}
 						}

src/ember/router.js

@@ -16,6 +16,12 @@ FFZ.prototype.setup_router = function() {
 	if ( Router )
 		Router.reopen({
 			ffzTransition: function() {
+				// TODO: Do this before the transition happens.
+				if ( f._force_refresh ) {
+					location.href = this.get('url');
+					return;
+				}
+
 				try {
 					document.body.setAttribute('data-current-path', App.get('currentPath'));
 				} catch(err) {
@@ -26,3 +32,10 @@ FFZ.prototype.setup_router = function() {
 
 	document.body.setAttribute('data-current-path', App.get('currentPath'));
 }
+
+
+
+FFZ.ws_commands.please_refresh = function() {
+	this.log("Refreshing the page upon the next transition.");
+	this._force_refresh = true;
+}

src/ext/rechat.js

@@ -122,7 +122,8 @@ FFZ.prototype.process_rechat_line = function(line, reprocess) {
 
 	line.classList.add('ffz-processed');
 
-	var user_id = line.getAttribute('data-sender'),
+	var f = this,
+		user_id = line.getAttribute('data-sender'),
 		room_id = line.getAttribute('data-room'),
 
 		Layout = App.__container__.lookup('controller:layout'),
@@ -173,23 +174,9 @@ FFZ.prototype.process_rechat_line = function(line, reprocess) {
 			badges[0] = {klass: 'broadcaster', title: 'Broadcaster'};
 
 		if ( user_id )
-			badges = this._render_badges(user_id, room_id, badges);
+			badges = this.get_badges(user_id, room_id, badges, null);
 
-		var output = '';
+		badges_el.innerHTML = this.render_badges(badges);
-		for(var key in badges) {
-			var badge = badges[key],
-				css = badge.iamge ? 'background-image:url("' + badge.image + '");' : '';
-
-			if ( badge.color )
-				css += 'background-color:' + badge.color + ';';
-
-			if ( badge.extra_css )
-				css += badge.extra_css;
-
-			output += '<div class="badge float-left tooltip ' + badge.klass + '"' + (css ? ' style="' + css + '"' : '') + ' title="' + badge.title + '"></div>';
-		}
-
-		badges_el.innerHTML = output;
 	}
 
 	if ( ! reprocess && from_el ) {
@@ -243,8 +230,14 @@ FFZ.prototype.process_rechat_line = function(line, reprocess) {
 						own: node.classList.contains('mentioning')
 					});
 
-				else
+				else {
 					this.log("Unknown Tag Type: " + node.tagName);
+					tokens.push({
+						isRaw: true,
+						html: node.outerHTML
+					});
+				}
+
 			} else
 				this.log("Unknown Node Type Tokenizing Message: " + node.nodeType);
 		}
@@ -274,4 +267,8 @@ FFZ.prototype.process_rechat_line = function(line, reprocess) {
 
 	// Now, put the content back into the element.
 	message_el.innerHTML = this.render_tokens(tokens);
+
+	// Interactions
+	jQuery('a.deleted-link', message_el).click(f._deleted_link_click);
+	jQuery('img.emoticon', message_el).click(function(e) { f._click_emote(e.target, e); });
 }

src/main.js

@@ -22,7 +22,7 @@ FFZ.get = function() { return FFZ.instance; }
 
 // Version
 var VER = FFZ.version_info = {
-	major: 3, minor: 5, revision: 77,
+	major: 3, minor: 5, revision: 83,
 	toString: function() {
 		return [VER.major, VER.minor, VER.revision].join(".") + (VER.extra || "");
 	}
@@ -149,6 +149,7 @@ require('./ext/emote_menu');
 
 require('./featurefriday');
 
+require('./ui/popups');
 require('./ui/styles');
 require('./ui/dark');
 require('./ui/tooltips');
@@ -256,9 +257,12 @@ FFZ.prototype.init_normal = function(delay, no_socket) {
 	// Start this early, for quick loading.
 	this.setup_dark();
 	this.setup_css();
+	this.setup_popups();
 
-	if ( ! no_socket )
+	if ( ! no_socket ) {
+		this.setup_time();
 		this.ws_create();
+	}
 
 	this.setup_colors();
 	this.setup_emoticons();
@@ -294,8 +298,11 @@ FFZ.prototype.init_dashboard = function(delay) {
 	// Start this early, for quick loading.
 	this.setup_dark();
 	this.setup_css();
+	this.setup_popups();
 
+	this.setup_time();
 	this.ws_create();
+
 	this.setup_colors();
 	this.setup_emoticons();
 	this.setup_badges();
@@ -336,8 +343,11 @@ FFZ.prototype.init_ember = function(delay) {
 	// Start this early, for quick loading.
 	this.setup_dark();
 	this.setup_css();
+	this.setup_popups();
 
+	this.setup_time();
 	this.ws_create();
+
 	this.setup_emoticons();
 	this.setup_badges();
 

src/socket.js

@@ -1,11 +1,30 @@
 var FFZ = window.FrankerFaceZ,
-	constants = require('./constants');
+	constants = require('./constants'),
+	utils = require('./utils'),
+
+	pick_server = function(pool) {
+		var total = 0, i = pool.length, val;
+		while(i--)
+			total += pool[i][1];
+
+		val = Math.random() * total;
+		for(i = 0; i < pool.length; i++) {
+			val -= pool[i][1];
+			if ( val <= 0 )
+				return i;
+		}
+
+		return pool.length - 1;
+	};
+
 
 FFZ.prototype._ws_open = false;
 FFZ.prototype._ws_delay = 0;
 FFZ.prototype._ws_host_idx = -1;
 FFZ.prototype._ws_current_pool = -1;
 
+FFZ.prototype._ws_server_offset = null;
+
 
 FFZ.ws_commands = {};
 FFZ.ws_on_close = [];
@@ -15,7 +34,7 @@ FFZ.ws_on_close = [];
 // Settings
 // ----------------
 
-var ffz_socket_seed;
+/*var ffz_socket_seed;
 
 try {
 	ffz_socket_seed = JSON.parse(localStorage.ffz_socket_seed);
@@ -24,7 +43,7 @@ try {
 if ( ! ffz_socket_seed ) {
 	ffz_socket_seed = Math.random();
 	localStorage.ffz_socket_seed = JSON.stringify(ffz_socket_seed);
-}
+}*/
 
 
 FFZ.settings_info.socket_server_pool = {
@@ -35,7 +54,7 @@ FFZ.settings_info.socket_server_pool = {
 		2: "Development"
 	},
 
-	value: ffz_socket_seed > 0.4 ? 1 : 0,
+	value: 1,
 
 	process_value: function(val) {
 		if ( typeof val === "string" )
@@ -95,14 +114,14 @@ FFZ.prototype.ws_create = function() {
 		return;
 
 	if ( this._ws_host_idx < 0 )
-		this._ws_host_idx = Math.floor(Math.random() * pool.length);
+		this._ws_host_idx = pick_server(pool);
 
-	var server = pool[this._ws_host_idx];
+	var server = pool[this._ws_host_idx][0];
 
 	this.log("Using Socket Server: " + server + " [" + pool_id + ":" + this._ws_host_idx + "]");
 
 	try {
-		ws = this._ws_sock = new WebSocket(pool[this._ws_host_idx]);
+		ws = this._ws_sock = new WebSocket(server);
 	} catch(err) {
 		this._ws_exists = false;
 		return this.log("Error Creating WebSocket: " + err);
@@ -116,6 +135,7 @@ FFZ.prototype.ws_create = function() {
 		f.log("Socket Connected.");
 
 		// Hard-code the first command.
+		f._ws_ping_time = window.performance ? performance.now() : Date.now();
 		ws.send("1 hello " + JSON.stringify(["ffz_" + FFZ.version_info, localStorage.ffzClientId]));
 
 		var user = f.get_user();
@@ -303,30 +323,70 @@ FFZ.prototype._ws_on_hello = function(success, data) {
 	if ( ! success )
 		return this.log("Error Saying Hello: " + data);
 
-	localStorage.ffzClientId = data;
+	this._ws_on_pong(success, data[1]);
-	this.log("Client ID: " + data);
 
-	/*var survey = {},
+	localStorage.ffzClientId = data[0];
-		set = survey['settings'] = {};
+	this.log("Client ID: " + localStorage.ffzClientId);
-
+}
-	for(var key in FFZ.settings_info)
-		set[key] = this.settings[key];
-
-	set["keywords"] = this.settings.keywords.length;
-	set["banned_words"] = this.settings.banned_words.length;
 
 
-	// Detect BTTV.
+// -----------------
-	survey['bttv'] = this.has_bttv || !!document.head.querySelector('script[src*="betterttv"]');
+// Time Calculation
+// -----------------
 
+FFZ.prototype.setup_time = function() {
+	var last_time = Date.now(),
+		f = this;
 
-	// Client Info
+	setInterval(function() {
-	survey['user-agent'] = navigator.userAgent;
+		var new_time = Date.now(),
-	survey['screen'] = [screen.width, screen.height];
+			difference = (new_time - last_time) - 5000;
-	survey['language'] = navigator.language;
-	survey['platform'] = navigator.platform;
 
-	this.ws_send("survey", [survey]);*/
+		last_time = new_time;
+		if ( Math.abs(difference) > 250 ) {
+			f.log("WARNING! Time drift of " + difference + "ms across 5 seconds. Did the local time change?");
+			f._ws_server_offset = null;
+			f.ws_ping();
+		}
+	}, 5000);
+}
+
+FFZ.prototype.ws_ping = function() {
+	// Only 1 ping at a time.
+	if ( this._ws_ping_time )
+		return;
+
+	this._ws_ping_time = window.performance ? performance.now() : Date.now();
+	if ( ! this.ws_send("ping", null, this._ws_on_pong.bind(this)) )
+		this._ws_ping_time = null;
+}
+
+FFZ.prototype._ws_on_pong = function(success, server_time) {
+	var d_now = Date.now(),
+		now = window.performance ? performance.now() : d_now;
+
+	if ( ! success ) {
+		this._ws_ping_time = null;
+		this.log("Error Pinging Server: " + server_time);
+		return;
+	}
+
+	if ( this._ws_ping_time ) {
+		var rtt = now - this._ws_ping_time,
+			ping = rtt / 2;
+
+		this._ws_ping_time = null;
+		this._ws_server_offset = (d_now - (server_time + ping));
+
+		this.log("Server Time: " + new Date(server_time).toISOString());
+		this.log("Local Time: " + new Date(d_now).toISOString());
+		this.log("Estimated Ping: " + ping + "ms");
+		this.log("Time Offset: " + (this._ws_server_offset < 0 ? "-" : "") + utils.time_to_string(Math.abs(this._ws_server_offset) / 1000));
+
+		if ( Math.abs(this._ws_server_offset) > 300000 ) {
+			this.log("WARNING! The time offset with the server is greater than 5 minutes.");
+		}
+	}
 }
 
 

src/styles/chat-background.css

@@ -30,6 +30,85 @@
 }
 
 
+/* DEPRECIATED: Whisper Backgrounds */
+.ember-chat .chat-line.whisper-line:before {
+	background-color: rgba(185, 163, 227, 0.2);
+}
+
+.ember-chat .chat-lines > div:nth-child(2n+0) .chat-line.whisper-line:before {
+	background-color: rgba(185, 163, 227, 0.4);
+}
+
+.theatre .chat-line.whisper-line:before,
+.dark .chat-line.whisper-line:before,
+.force-dark .chat-line.whisper-line:before {
+	background-color: rgba(100, 65, 165, 0.2);
+}
+
+.theatre .chat-lines > div:nth-child(2n+0) .chat-line.whisper-line:before,
+.dark .chat-lines > div:nth-child(2n+0) .chat-line.whisper-line:before,
+.force-dark .chat-lines > div:nth-child(2n+0) .chat-line.whisper-line:before {
+	background-color: rgba(100, 65, 165, 0.4);
+}
+
+
+/* Chat History: Original Sender */
+.chat-history .chat-line.original-sender:before {
+	background-color: rgba(0,127,255, 0.2);
+}
+
+.chat-history .chat-line.original-sender:nth-child(2n+0):before {
+	background-color: rgba(0,127,255, 0.4);
+}
+
+.theatre .chat-history .chat-line.original-sender:before,
+.dark .chat-history .chat-line.original-sender:before,
+.force-dark .chat-history .chat-line.original-sender:before {
+	background-color: rgba(0,63,127, 0.2);
+}
+
+.theatre .chat-history .chat-line.original-sender:nth-child(2n+0):before,
+.dark .chat-history .chat-line.original-sender:nth-child(2n+0):before,
+.force-dark .chat-history .chat-line.original-sender:nth-child(2n+0):before {
+	background-color: rgba(0,63,127, 0.4);
+}
+
+
+/* Chat History: Original Message */
+.chat-history .chat-line.original-msg:before {
+	background-color: rgba(0,255,127, 0.4);
+}
+
+.chat-history .chat-line.original-msg:nth-child(2n+0):before {
+	background-color: rgba(0,255,127, 0.8);
+}
+
+.theatre .chat-history .chat-line.original-msg:before,
+.dark .chat-history .chat-line.original-msg:before,
+.force-dark .chat-history .chat-line.original-msg:before {
+	background-color: rgba(0,127,63, 0.4);
+}
+
+.theatre .chat-history .chat-line.original-msg:nth-child(2n+0):before,
+.dark .chat-history .chat-line.original-msg:nth-child(2n+0):before,
+.force-dark .chat-history .chat-line.original-msg:nth-child(2n+0):before {
+	background-color: rgba(0,127,63, 0.8);
+}
+
+
+/* Reading contrast */
+.chat-history .chat-line.original-msg span.has-color {
+	color: #000 !important;
+}
+
+.theatre .chat-history .chat-line.original-msg span.has-color,
+.dark .chat-history .chat-line.original-msg span.has-color,
+.force-dark .chat-history .chat-line.original-msg span.has-color {
+	color: #fff !important;
+}
+
+
+
 
 /* DEPRECIATED: Mention Backgrounds */
 .chat-history .chat-line.ffz-mentioned:before,
@@ -99,3 +178,16 @@
 	color: #8c8c8c;
 	background-color: rgba(16,16,16, 0.75);
 }
+
+
+/* Fix Conversations */
+
+.conversation-window .timestamp-line span,
+.conversation-window .new-message-divider span {
+	background-color: transparent;
+}
+
+.conversation-window .new-message-divider:after,
+.conversation-window .timestamp-line:after {
+	display: none;
+}

src/tokenize.js

@@ -443,7 +443,7 @@ FFZ.prototype.tokenize_chat_line = function(msgObject, prevent_notification, del
 
 		for(var i=0; i < tokens.length; i++) {
 			var token = tokens[i];
-			if ( msgObject.style !== 'whisper' && (_.isString(token) || ! token.mentionedUser || token.own) )
+			if ( _.isString(token) || ! token.mentionedUser || token.own )
 				continue;
 
 			// We have a mention!
@@ -544,7 +544,10 @@ FFZ.prototype.render_tokens = function(tokens, render_links) {
 		if ( token.hidden )
 			return "";
 
-		if ( token.emoticonSrc ) {
+		else if ( token.isRaw )
+			return token.html;
+
+		else if ( token.emoticonSrc ) {
 			var tooltip, src = token.emoticonSrc, srcset, cls, extra;
 			if ( token.ffzEmote ) {
 				var emote_set = f.emote_sets && f.emote_sets[token.ffzEmoteSet],
@@ -607,7 +610,7 @@ FFZ.prototype.render_tokens = function(tokens, render_links) {
 			return '<img class="emoticon html-tooltip' + (cls||"") + '"' + (extra||"") + ' src="' + utils.quote_attr(src) + '" ' + (srcset ? 'srcset="' + utils.quote_attr(srcset) + '" ' : '') + 'alt="' + utils.quote_attr(token.altText) + '" title="' + utils.quote_attr(tooltip) + '">';
 		}
 
-		if ( token.isLink ) {
+		else if ( token.isLink ) {
 			var text = token.title || (token.isLong && '<long link>') || (token.isShortened && '<shortened link>') || (token.isDeleted && '<deleted link>') || token.href;
 
 			if ( ! render_links && render_links !== undefined )
@@ -676,10 +679,10 @@ FFZ.prototype.render_tokens = function(tokens, render_links) {
 			return '<a class="' + cls + '" data-original-url="' + utils.quote_attr(token.href) + '" data-url="' + utils.quote_attr(actual_href) + '" href="' + utils.quote_attr(href || '#') + '" title="' + utils.quote_attr(tooltip || '') + '" target="_blank">' + utils.sanitize(text) + '</a>';
 		}
 
-		if ( token.mentionedUser )
+		else if ( token.mentionedUser )
 			return '<span class="' + (token.own ? "mentioning" : "mentioned") + '">' + utils.sanitize(token.mentionedUser) + "</span>";
 
-		if ( token.deletedLink )
+		else if ( token.deletedLink )
 			return utils.sanitize(token.text);
 
 		return utils.sanitize(token);
@@ -1018,3 +1021,75 @@ FFZ.prototype._deleted_link_click = function(e) {
 	// Stop from Navigating
 	e.preventDefault();
 }
+
+
+// ---------------------
+// History Loading
+// ---------------------
+
+FFZ.prototype.parse_history = function(history, purged, room_id, delete_links, tmiSession, per_line) {
+	var i = history.length, was_cleared = false;
+	purged = purged || {};
+
+	while(i--) {
+		var msg = history[i],
+			is_deleted = msg.ffz_deleted = purged[msg.from] || false;
+
+		if ( is_deleted && ! this.settings.prevent_clear )
+			msg.deleted = true;
+
+		if ( ! msg.room && room_id )
+			msg.room = room_id;
+
+		if ( typeof msg.date === "string" || typeof msg.date === "number" )
+			msg.date = utils.parse_date(msg.date);
+
+		if ( ! msg.color )
+			msg.color = msg.tags && msg.tags.color ? msg.tags.color : tmiSession && msg.from ? tmiSession.getColor(msg.from) : "#755000";
+
+		if ( ! msg.labels || ! msg.labels.length ) {
+			var labels = msg.labels = [];
+
+			if ( msg.room && msg.room === msg.from )
+				labels.push("owner");
+			else if ( msg.tags ) {
+				var ut = msg.tags['user-type'];
+				if ( ut === 'mod' || ut === 'staff' || ut === 'admin' || ut === 'global_mod' )
+					labels.push(ut);
+			}
+
+			if ( msg.tags ) {
+				if ( msg.tags.turbo )
+					labels.push("turbo");
+				if ( msg.tags.subscriber )
+					labels.push("subscriber");
+			}
+		}
+
+		if ( ! msg.style ) {
+			if ( msg.from === "jtv" )
+				msg.style = "admin";
+			else if ( msg.from === "twitchnotify" )
+				msg.style = "notification";
+		}
+
+		if ( msg.tags && typeof msg.tags.emotes === "string" )
+			msg.tags.emotes = utils.uncompressEmotes(msg.tags.emotes);
+
+		if ( ! msg.cachedTokens || ! msg.cachedTokens.length )
+			this.tokenize_chat_line(msg, true, delete_links);
+
+		// CLEARCHAT
+		if ( msg.tags && msg.tags.target === '@@' )
+			was_cleared = true;
+
+		else if ( msg.tags && msg.tags.target )
+			purged[msg.tags.target] = true;
+
+		// Per-line
+		if ( per_line && ! per_line(msg) )
+			break;
+	}
+
+	return [history, purged, was_cleared];
+}

src/ui/dark.js

@@ -214,6 +214,6 @@ FFZ.prototype._load_dark_css = function() {
 
 	s.id = "ffz-dark-css";
 	s.setAttribute('rel', 'stylesheet');
-	s.setAttribute('href', constants.DIRECT_SERVER + "script/dark.css?_=" + (constants.DEBUG ? Date.now() : FFZ.version_info));
+	s.setAttribute('href', constants.DIRECT_SERVER + "script/dark" + (constants.DEBUG ? "" : ".min") + ".css?_=" + (constants.DEBUG ? Date.now() : FFZ.version_info));
 	document.head.appendChild(s);
 }

src/ui/following-count.js

@@ -180,7 +180,8 @@ FFZ.prototype._build_following_tooltip = function(el) {
 			}
 
 			var up_since = this.settings.stream_uptime && stream.created_at && utils.parse_date(stream.created_at),
-				uptime = up_since && Math.floor((Date.now() - up_since.getTime()) / 1000) || 0,
+				now = Date.now() - (this._ws_server_offset || 0),
+				uptime = up_since && Math.floor((now - up_since.getTime()) / 1000) || 0,
 				minutes = Math.floor(uptime / 60) % 60,
 				hours = Math.floor(uptime / 3600);
 

src/ui/following.js

@@ -405,19 +405,11 @@ FFZ.prototype._build_following_button = function(container, channel_id) {
 
 
 FFZ.prototype._build_following_popup = function(container, channel_id, notifications) {
-	var popup = this._popup, out = '',
+	var popup = this.close_popup(), out = '',
 		pos = container.offsetLeft + container.offsetWidth;
 
-
+	if ( popup && popup.id == "ffz-following-popup" && popup.getAttribute('data-channel') === channel_id )
-	if ( popup ) {
-		popup.parentElement.removeChild(popup);
-		delete this._popup;
-		this._popup_kill && this._popup_kill();
-		delete this._popup_kill;
-
-		if ( popup.id == "ffz-following-popup" && popup.getAttribute('data-channel') === channel_id )
 		return null;
-	}
 
 	popup = this._popup = document.createElement('div');
 	popup.id = 'ffz-following-popup';

src/ui/menu.js

@@ -35,26 +35,6 @@ var FFZ = window.FrankerFaceZ,
 // --------------------
 
 FFZ.prototype.setup_menu = function() {
-	this.log("Installing mouse-up event to auto-close menus.");
-	var f = this;
-
-	jQuery(document).mouseup(function(e) {
-		var popup = f._popup, parent;
-		if ( ! popup ) return;
-		if ( popup.id === 'ffz-chat-menu' && popup.style && popup.style.left )
-			return;
-
-		popup = jQuery(popup);
-		parent = popup.parent();
-
-		if ( ! parent.is(e.target) && parent.has(e.target).length === 0 ) {
-			popup.remove();
-			delete f._popup;
-			f._popup_kill && f._popup_kill();
-			delete f._popup_kill;
-		}
-	});
-
 	document.body.classList.toggle("ffz-menu-replace", this.settings.replace_twitch_menu);
 
 	// Add FFZ to the chat settings menu.
@@ -62,7 +42,8 @@ FFZ.prototype.setup_menu = function() {
 	this.log("Hooking the Ember Chat Settings view.");
 
 	var Settings = window.App && App.__container__.resolve('view:settings'),
-		Layout = App.__container__.lookup('controller:layout');
+		Layout = window.App && App.__container__.lookup('controller:layout'),
+		f = this;
 
 	if ( ! Settings )
 		return;
@@ -215,14 +196,9 @@ FFZ.prototype._fix_menu_position = function() {
 }
 
 FFZ.prototype.build_ui_popup = function(view) {
-	var popup = this._popup;
+	var popup = this._popup ? this.close_popup() : this._last_popup;
-	if ( popup ) {
+	if ( popup && popup.id === 'ffz-chat-menu' )
-		popup.parentElement.removeChild(popup);
-		delete this._popup;
-		this._popup_kill && this._popup_kill();
-		delete this._popup_kill;
 		return;
-	}
 
 	// Start building the DOM.
 	var container = document.createElement('div'),
@@ -271,12 +247,8 @@ FFZ.prototype.build_ui_popup = function(view) {
 
 	close_btn.addEventListener('click', function() {
 		var popup = f._popup;
-		if ( can_close && popup ) {
+		if ( can_close && popup )
-			popup.parentElement.removeChild(popup);
+			f.close_popup();
-			delete f._popup;
-			f._popup_kill && f._popup_kill();
-			delete f._popup_kill;
-		}
 	});
 
 	menu.appendChild(heading);
@@ -353,9 +325,12 @@ FFZ.prototype.build_ui_popup = function(view) {
 
 
 	// Add the menu to the DOM.
-	this._popup = container;
 	sub_container.style.maxHeight = Math.max(200, view.$().height() - 172) + "px";
 	view.$('.chat-interface').append(container);
+
+	// Keep track of the pop-up.
+	this._popup = container;
+	this._popup_allow_parent = true;
 }
 
 
@@ -511,7 +486,8 @@ FFZ.menu_pages.channel = {
 								sub_message = document.createElement("div"),
 								nonsub_message = document.createElement("div"),
 								unlock_text = document.createElement("span"),
-								end_time = ends_at ? Math.floor((ends_at.getTime() - Date.now()) / 1000) : null;
+								now = Date.now() - (this._ws_server_offset || 0),
+								end_time = ends_at ? Math.floor((ends_at.getTime() - now) / 1000) : null;
 
 							sub_message.className = "subscribe-message";
 							nonsub_message.className = "non-subscriber-message";

src/ui/popups.js

@@ -0,0 +1,84 @@
+var FFZ = window.FrankerFaceZ;
+
+
+// ---------------
+// Initialization
+// ---------------
+
+FFZ.prototype.setup_popups = function() {
+	this.log("Installing mouse-up event to auto-close pop-ups.");
+	var f = this;
+
+	jQuery(document).mouseup(function(e) {
+		if ( e.button && e.button !== 0 )
+			return;
+
+		var popup = f._popup,
+			parent = f._popup_parent;
+
+		if ( ! popup )
+			f._last_popup = undefined;
+
+		if ( ! popup || popup === e.target || popup.contains(e.target) )
+			return;
+
+		if ( popup.id === 'ffz-chat-menu' && popup.style && popup.style.left )
+			return;
+
+		if ( f._popup_allow_parent ) {
+			var parent = f._popup_parent || popup.parentElement;
+			if ( parent && ( parent === e.target || parent.contains(e.target) ) )
+				return;
+		}
+
+		f.close_popup();
+	});
+}
+
+
+// ---------------
+// Management
+// ---------------
+
+FFZ.prototype.close_popup = function() {
+	var popup = this._popup;
+	this._last_popup = popup;
+	if ( ! popup )
+		return;
+
+	popup.parentElement.removeChild(popup);
+
+	if ( this._popup_kill )
+		try {
+			this._popup_kill();
+		} catch(err) {
+			this.error("_popup_kill: " + err);
+		}
+
+	this._popup = undefined;
+	this._popup_parent = undefined;
+	this._popup_kill = undefined;
+	this._popup_allow_parent = undefined;
+	return popup;
+}
+
+
+FFZ.prototype.show_popup = function(el, position, container, cleanup, allow_parent, dont_insert_handler) {
+	if ( this._popup )
+		this.close_popup();
+
+	this._popup = el;
+	this._popup_allow_parent = allow_parent || false;
+	this._popup_kill = cleanup;
+
+	container = container || document.querySelector('.app-main') || document.body;
+
+	var bounds = container.getBoundingClientRect();
+
+	el.style.display = 'block';
+	el.style.position = 'absolute';
+	el.style.left = (position[0] - bounds.left) + 'px';
+	el.style.top = (position[1] - bounds.top) + 'px';
+
+	container.appendChild(el);
+}

src/ui/races.js

@@ -180,16 +180,9 @@ FFZ.prototype._race_kill = function() {
 
 
 FFZ.prototype._build_race_popup = function(container, channel_id) {
-	var popup = this._popup;
+	var popup = this.close_popup();
-	if ( popup ) {
+	if ( popup && popup.id === "ffz-race-popup" && popup.getAttribute('data-channel') === channel_id )
-		popup.parentElement.removeChild(popup);
-		delete this._popup;
-		this._popup_kill && this._popup_kill();
-		delete this._popup_kill;
-
-		if ( popup.id === "ffz-race-popup" && popup.getAttribute('data-channel') === channel_id )
 		return;
-	}
 
 	if ( ! container )
 		return;
@@ -204,6 +197,7 @@ FFZ.prototype._build_race_popup = function(container, channel_id) {
 	popup.className = (pos >= 300 ? 'right' : 'left') + ' share dropmenu';
 
 	this._popup_kill = this._race_kill.bind(this);
+	this._popup_allow_parent = true;
 	this._popup = popup;
 
 	var link = 'http://kadgar.net/live',
@@ -256,13 +250,8 @@ FFZ.prototype._update_race = function(container, not_timer) {
 	if ( ! race ) {
 		// No race. Abort.
 		container.parentElement.removeChild(container);
-		if ( this._popup && this._popup.id === 'ffz-race-popup' && this._popup.getAttribute('data-channel') === channel_id ) {
+		if ( this._popup && this._popup.id === 'ffz-race-popup' && this._popup.getAttribute('data-channel') === channel_id )
-			this._popup_kill && this._popup_kill();
+			this.close_popup();
-			if ( this._popup ) {
-				delete this._popup;
-				delete this._popup_kill;
-			}
-		}
 		return;
 	}
 
@@ -270,7 +259,7 @@ FFZ.prototype._update_race = function(container, not_timer) {
 		entrant = race.entrants[entrant_id],
 
 		popup = container.querySelector('#ffz-race-popup'),
-		now = Date.now() / 1000,
+		now = (Date.now() - (this._ws_server_offset || 0)) / 1000,
 		elapsed = Math.floor(now - race.time);
 
 	container.querySelector('.logo').innerHTML = utils.placement(entrant);

src/ui/styles.js

@@ -11,7 +11,7 @@ FFZ.prototype.setup_css = function() {
 	var s = this._main_style = document.createElement('link');
 	s.id = "ffz-main-css";
 	s.setAttribute('rel', 'stylesheet');
-	s.setAttribute('href', constants.DIRECT_SERVER + "script/style.css?_=" + (constants.DEBUG ? Date.now() : FFZ.version_info));
+	s.setAttribute('href', constants.DIRECT_SERVER + "script/style" + (constants.DEBUG ? "" : ".min") + ".css?_=" + (constants.DEBUG ? Date.now() : FFZ.version_info));
 	document.head.appendChild(s);
 
 	this.log("Readying toggleable styles.");

src/utils.js

@@ -25,6 +25,16 @@ var sanitize_el = document.createElement('span'),
 		return msg.replace(R_AMP, "&").replace(R_QUOTE, """).replace(R_SQUOTE, "'").replace(R_LT, "<").replace(R_GT, ">");
 	},
 
+	HUMAN_NUMBERS = [
+		"zero", "one", "two", "three", "four", "five", "six", "seven", "eight", "nine", "ten", "eleven", "twelve", "thirteen", "fourteen", "fifteen", "sixteen", "seventeen", "eighteen", "nineteen"
+	],
+
+	number_commas = function(x) {
+		var parts = x.toString().split(".");
+		parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+		return parts.join(".");
+	},
+
 	pluralize = function(value, singular, plural) {
 		plural = plural || 's';
 		singular = singular || '';
@@ -157,6 +167,37 @@ var sanitize_el = document.createElement('span'),
 		return tags;
 	},
 
+	uncompressEmotes = function(value) {
+		var output = {},
+			emotes = value.split("/"),
+			i = emotes.length;
+
+		while(i--) {
+			var parts = emotes[i].split(":");
+			if ( parts.length !== 3 )
+				return {};
+
+			var emote_id = parts[0],
+				length = parseInt(parts[1]),
+				positions = parts[2].split(","),
+				indices = output[emote_id] = output[emote_id] || [];
+
+			for(var j=0, jl = positions.length; j < jl; j++) {
+				var start = parseInt(positions[j]),
+					end = start + length;
+
+				for(var x=0, xl = indices.length; x < xl; x++) {
+					if ( start < indices[x][0] )
+						break;
+				}
+
+				indices.splice(x, 0, [start, end]);
+			}
+		}
+
+		return output;
+	},
+
 
 	EMOJI_CODEPOINTS = {},
 	emoji_to_codepoint = function(icon, variant) {
@@ -316,16 +357,13 @@ module.exports = {
 
 	splitIRCMessage: splitIRCMessage,
 	parseIRCTags: parseIRCTags,
+	uncompressEmotes: uncompressEmotes,
 
 	emoji_to_codepoint: emoji_to_codepoint,
 
 	parse_date: parse_date,
 
-	number_commas: function(x) {
+	number_commas: number_commas,
-		var parts = x.toString().split(".");
-		parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");
-		return parts.join(".");
-	},
 
 	place_string: place_string,
 
@@ -345,6 +383,10 @@ module.exports = {
 
 	pluralize: pluralize,
 
+	human_number: function(value) {
+		return HUMAN_NUMBERS[value] || number_commas(value);
+	},
+
 	human_time: function(elapsed, factor) {
 		factor = factor || 1;
 		elapsed = Math.floor(elapsed);

style.css

@@ -902,6 +902,49 @@ span.ffz-handle:after { left: 8px }
 .ffz-ui-popup.dark li.title { color: #fff; }
 .ffz-ui-popup.dark .ffz-ui-menu-page { background-color: #1e1e1e; }
 
+/* Host Menu */
+
+.ffz-channel-selector {
+	background-image: url("//cdn.frankerfacez.com/script/zreknarf-bg.png");
+	background-repeat: no-repeat;
+	background-size: 50%;
+	background-position: 110% 115%;
+}
+
+.ffz-channel-selector .dropmenu_action {
+	display: block;
+	position: relative;
+	line-height: 34px;
+	overflow: hidden;
+	padding: 0 !important;
+}
+
+.ffz-channel-selector .image {
+	display: inline-block;
+	width: 20px;
+	height: 20px;
+	float: left;
+	margin: 6px 15px 8px 20px;
+}
+
+.ffz-channel-selector .title {
+	text-overflow: ellipsis;
+	overflow: hidden;
+	white-space: nowrap;
+	display: block;
+	padding-right: 20px;
+}
+
+.ffz-channel-selector .header {
+	padding: 5px 20px;
+	margin-bottom: 0;
+	border-bottom: none;
+	line-height: 22px;
+	text-transform: uppercase;
+	font-size: 11px;
+	color: #666;
+}
+
 
 /* Positioning Fixes */
 
@@ -1187,6 +1230,7 @@ body:not(.ffz-bttv) .more-messages-indicator {
 	overflow: hidden;
 }
 
+.chat-history.loading:after,
 .ffz-ui-sub-menu-page:empty::after,
 .ffz-ui-menu-page:empty::after {
 	content: " ";
@@ -1608,6 +1652,67 @@ body.ffz-minimal-chat-input .ember-chat .chat-interface .textarea-contain textar
 	margin-right: 5px;
 }
 
+.chat-history .chat-line:not(.original-sender) span.from:hover,
+.chat-history .timestamp:hover {
+	cursor: pointer;
+	text-decoration: underline;
+}
+
+.chat-history.loading {
+	position: relative;
+	overflow-y: hidden !important;
+}
+.chat-history.loading li { pointer-events: none; }
+
+.chat-history .from { font-weight: 700; }
+
+.chat-history.loading:before {
+	content: " ";
+	display: block;
+	position: absolute;
+	z-index: 999;
+	top: 0; bottom: 0;
+	left: 0; right: 0;
+	background-color: rgba(128,128,128,0.8);
+}
+
+.theatre .chat-history.loading:before,
+.dark .chat-history.loading:before,
+.force-dark .chat-history.loading:before {
+	background-color: rgba(0,0,0,0.8);
+}
+
+.chat-history.loading:after {
+	visibility: visible;
+	clear: none;
+	position: absolute;
+	top: 0;
+	left: 50%;
+	margin-left: -40px;
+	z-index: 1000;
+}
+
+.ember-chat .moderation-card .back-button {
+	border: 1px solid rgba(0,0,0,0.2);
+	border-top: none;
+	float: none;
+	display: block;
+	width: 100%;
+	background-color: #fff;
+}
+
+.ember-chat .moderation-card .back-button:hover {
+	background-color: #6441A5 !important;
+	color: #fff !important;
+}
+
+.theatre .moderation-card .back-button,
+.dark .moderation-card .back-button,
+.force-dark .moderation-card .back-button {
+	background-color: #232329;
+}
+
+
 /* Room State */
 
 .ffz.room-state.stat {
@@ -1815,6 +1920,9 @@ body:not([data-current-path^="user."]) .ffz-sidebar-swap .ember-chat .chat-inter
 	background-color: #191919;
 }
 
+.ffz-no-blue .theatre .moderation-card .back-button,
+.ffz-no-blue .dark .moderation-card .back-button,
+.ffz-no-blue .force-dark .moderation-card .back-button
 .ffz-no-blue .chat-container.dark .chat-interface .emoticon-selector .tabs,
 .ffz-no-blue .app-main.theatre .chat-container .chat-interface .emoticon-selector .tabs,
 .ffz-no-blue .chat-container.force-dark .chat-interface .emoticon-selector .tabs,
@@ -2069,8 +2177,52 @@ li[data-name="following"] a {
 	margin-right: 20px;
 }
 
+/* Chat Interactions Fixes */
+
+body:not(.ffz-bttv) .ember-chat .chat-commands-dropdown {
+	z-index: 998; /* 1 less than the header */
+	padding: 0;
+	margin-top: -1px;
+	background-color: #9265d5 !important;
+}
+
+body:not(.ffz-bttv) .ember-chat .chat-commands-dropdown li {
+	border: none;
+}
+
+body:not(.ffz-bttv) .ember-chat .chat-commands-dropdown li + li {
+	border-top: 1px solid rgba(0,0,0,0.25);
+}
+
+body:not(.ffz-bttv) .app-main.theatre .chat-container .chat-commands-dropdown li,
+body:not(.ffz-bttv) .dark .ember-chat .chat-commands-dropdown li,
+body:not(.ffz-bttv) .force-dark .ember-chat .chat-commands-dropdown li,
+body:not(.ffz-bttv) .ember-chat .chat-commands-dropdown li:hover {
+	background-color: rgba(0,0,0,0.25) !important;
+	color: #fff;
+}
+
+body:not(.ffz-bttv) .app-main.theatre .chat-container .chat-commands-dropdown li:hover,
+body:not(.ffz-bttv) .dark .ember-chat .chat-commands-dropdown li:hover,
+body:not(.ffz-bttv) .force-dark .ember-chat .chat-commands-dropdown li:hover {
+	background-color: rgba(0,0,0,0.75) !important;
+	color: #fff !important;
+}
+
+
 /* Conversations */
 
+body:not(.ffz-bttv) .conversation-window .new-message-divider + .timestamp-line {
+	margin-top: -3px;
+}
+
+/* Fix the ignore-cta covering up messages with no way to dismiss it. */
+body:not(.ffz-bttv) .conversation-window .ignore-cta + .conversation-content {
+	padding-top: 76px;
+}
+
+/* Hide that which should be hidden. */
+.conversation-window.collapsed .ignore-cta,
 .conversation-chat-line.action .colon,
 .conversation-input-bar .emoticon-selector .tabs,
 .conversation-preview-line .badges,
@@ -2238,3 +2390,41 @@ body:not(.ffz-conv-title-clickable) .conversation-header a.conversation-header-n
 .user.item .actions .follow svg {
 	margin: 4.5px 0 -4.5px -1px;
 }
+
+/* Creative Directory */
+
+.ffz-creative-tags .creativetag-list.filter-list,
+.ffz-creative-tags .creativetag-list ul,
+.ffz-creative-tags .creativetag-list-contain {
+	width: inherit;
+	height: inherit;
+	overflow: inherit;
+}
+
+body:not(.ffz-creative-showcase) .creative-hero,
+.ffz-creative-tags .creativetag-list-contain .filter-nav { display: none; }
+
+.ffz-creative-tags .creativetag-list ul {
+	display: flex;
+	flex-wrap: wrap;
+	position: inherit;
+	margin-bottom: -5px;
+}
+
+.ffz-creative-tags .creativetag-list li {
+	flex-grow: 1;
+	height: inherit;
+	float: none;
+	margin: 0 0 5px;
+}
+
+.ffz-creative-tags .creativetag-list a {
+	display: block;
+	text-align: center;
+	padding: 5px 10px;
+}
+
+.ffz-creative-tags .creativetag-list a.active {
+	color: #fff !important;
+	background-color: #6441a5 !important;
+}