3.5.426. Fix ember navigation to game directories. Fix mod badges in Firefox. Change badge rendering for the API to not needlessly duplicate data structures. Add bttv-room-message event for API. Clean up logging output for Firefox developers. Fix issue in socket handling. Tweak chat sub notification appearance. Closes #104

changelog.html

@@ -1,3 +1,11 @@
+<div class="list-header">3.5.426 <time datetime="2017-02-13">(2017-02-13)</time></div>
+<ul class="chat-menu-content menu-side-padding">
+	<li>Fixed: Not Found bug when clicking links to game directory pages.</li>
+	<li>Fixed: Custom moderator badges not displaying in Mozilla Firefox.</li>
+	<li>API Added: <code>bttv-room-message</code> event for awareness of chat messages sent when BetterTTV is installed. This data structure is not like standard <code>room-message</code>.</li>
+	<li>API Changed: To reduce memory usage, badge objects are now not cloned. <code>user_add_badge</code> and <code>room_add_user_badge</code> now support complex badge structures rather than just IDs for more flexible badge setups.</li>
+</ul>
+
 <div class="list-header">3.5.425 <time datetime="2017-02-03">(2017-02-03)</time></div>
 <ul class="chat-menu-content menu-side-padding">
 	<li>Fixed: Whisper User button not rendering on moderation cards.</li>
@@ -58,10 +66,5 @@
 	<li>Fixed: Twitch broke Chat Replay handling of chat timeouts and bans somehow. Fix color handling with blank usernames.</li>
 </ul>
 
-<div class="list-header">3.5.416 <time datetime="2017-01-11">(2017-01-11)</time></div>
-<ul class="chat-menu-content menu-side-padding">
-	<li>Fixed: An issue could prevent bits from rendering correctly in certain situations.</li>
-</ul>
-
 <div class="list-header" id="ffz-old-news-button"><a href="#">View Older</a></div>
 <div id="ffz-old-news"></div>

old_changes.html

@@ -1,3 +1,8 @@
+<div class="list-header">3.5.416 <time datetime="2017-01-11">(2017-01-11)</time></div>
+<ul class="chat-menu-content menu-side-padding">
+	<li>Fixed: An issue could prevent bits from rendering correctly in certain situations.</li>
+</ul>
+
 <div class="list-header">3.5.415 <time datetime="2017-01-10">(2017-01-10)</time></div>
 <ul class="chat-menu-content menu-side-padding">
 	<li>Fixed: Featured Channel follow buttons. FFZ would cache an incomplete user data object without a necessary authentication token.</li>

src/badges.js

@@ -391,7 +391,9 @@ FFZ.prototype.get_badges = function(user, room_id, badges, msg) {
 		if ( ! badge_data.hasOwnProperty(slot) || ! badge )
 			continue;
 
-		var full_badge = this.badges[badge.id] || {},
+		var badge_id = badge.real_id || badge.id,
+			full_badge = this.badges[badge_id] || {},
+			full_badge_id = full_badge.real_id || full_badge.id,
 			old_badge = badges[slot],
 
 			hide_key = (full_badge.source_ext ? this._apis[full_badge.source_ext].name_key : 'ffz') + '-' + (full_badge.name || full_badge.id);
@@ -414,7 +416,7 @@ FFZ.prototype.get_badges = function(user, room_id, badges, msg) {
 				continue;
 
 			old_badge.image = badge.image || null;
-			old_badge.klass += ' ffz-badge-replacement ffz-replacer-ffz-badge-' + (badge.id || full_badge.id);
+			old_badge.klass += ' ffz-badge-replacement ffz-replacer-ffz-badge-' + (badge_id || full_badge_id);
 			old_badge.title += ', ' + (badge.title || full_badge.title);
 			continue;
 		}
@@ -426,11 +428,11 @@ FFZ.prototype.get_badges = function(user, room_id, badges, msg) {
 }
 
 FFZ.prototype._get_badge_object = function(badge, full_badge) {
-	var id = badge.id || full_badge.id;
+	var id = badge.real_id || badge.id || full_badge.real_id || full_badge.id;
 	return {
 		id: id,
 		klass: 'ffz-badge-' + id,
-		title: badge.title || full_badge.title || ('Unknown FFZ Badge\nID: ' + (badge.id | full_badge.id)),
+		title: badge.title || full_badge.title || ('Unknown FFZ Badge\nID: ' + id),
 		image: badge.image,
 		full_image: full_badge.image,
 		color: badge.color,
@@ -656,7 +658,9 @@ FFZ.prototype.bttv_badges = function(data) {
 		if ( ! badge_data.hasOwnProperty(slot) || ! badge )
 			continue;
 
-		var full_badge = this.badges[badge.id] || {},
+		var badge_id = badge.real_id || badge.id,
+			full_badge = this.badges[badge_id] || {},
+			full_badge_id = full_badge.real_id || full_badge.id,
 			desc = badge.title || full_badge.title,
 			style = "",
 
@@ -679,7 +683,7 @@ FFZ.prototype.bttv_badges = function(data) {
 			for(var i=0; i < data.badges.length; i++) {
 				var b = data.badges[i];
 				if ( b.type === full_badge.replaces_type ) {
-					b.type += " ffz-badge-replacement ffz-replacer-ffz-badge-" + (badge.id || full_badge.id);
+					b.type += " ffz-badge-replacement ffz-replacer-ffz-badge-" + (badge_id || full_badge_id);
 					b.description += ", " + (badge.title || full_badge.title) +
 						(badge.image ? '" style="background-image: url(' + utils.quote_attr('"' + badge.image + '"') + ')' : '');
 					replaced = true;
@@ -705,7 +709,7 @@ FFZ.prototype.bttv_badges = function(data) {
 		if ( style )
 			desc += '" style="' + utils.quote_attr(style);
 
-		badges_out.push([(insert_at == -1 ? 1 : -1) * slot, {type: "ffz-badge-" + badge.id + (alpha ? " alpha" : ""), name: "", description: desc}]);
+		badges_out.push([(insert_at == -1 ? 1 : -1) * slot, {type: "ffz-badge-" + badge_id + (alpha ? " alpha" : ""), name: "", description: desc}]);
 	}
 
 	badges_out.sort(function(a,b){return a[0] - b[0]});

src/ember/room.js

@@ -69,6 +69,7 @@ var FFZ = window.FrankerFaceZ,
 				'background-repeat:no-repeat;' +
 				'background-size:initial !important;' +
 				'background-position:center;' +
+				'background-image: url("' + urls[1] + '") !important;' +
 				'background-image:' + image_set + ' !important}' +
 			'.from-display-preview[data-room="' + room.id + '"] .badges .moderator:not(.ffz-badge-replacement).colored,' +
 			'.chat-line[data-room="' + room.id + '"] .badges .moderator:not(.ffz-badge-replacement).colored {' +
@@ -1153,6 +1154,9 @@ FFZ.prototype._load_room_json = function(room_id, callback, data) {
 
 	this.rooms[room_id] = data;*/
 
+	this.log("Loading Room Data: " + room_id, model);
+	this.log("  -- has CSS: " + ~~(model.css) + " -- has mod URLs: " + ~~(model.mod_urls));
+
 	if ( model.css || model.mod_urls )
 		utils.update_css(this._room_style, room_id, moderator_css(model) + (model.css || ""));
 

src/ext/api.js

@@ -466,24 +466,22 @@ API.prototype.unregister_room_set = function(room_id, set_id) {
 // -----------------------
 
 API.prototype.add_badge = function(badge_id, badge) {
-	var exact_id = this.name_key + '-' + badge_id, // this.id + '-' + badge_id,
+	var exact_id = this.name_key + '-' + badge_id;
 
-		real_badge = _.extend({}, badge, {
+	badge.id = badge_id;
-			id: exact_id,
+	badge.source_ext = this.id,
-			source_ext: this.id,
+	badge.real_id = exact_id;
-			source_id: badge_id
-		});
 
-	if ( ! real_badge.color )
+	if ( ! badge.color )
-		real_badge.color = "transparent";
+		badge.color = "transparent";
 
-	this.badges[badge_id] = real_badge;
+	this.badges[badge_id] = badge;
 
 	if ( this.ffz.badges )
-		this.ffz.badges[exact_id] = real_badge;
+		this.ffz.badges[exact_id] = badge;
 
 	if ( this.ffz._badge_style )
-		utils.update_css(this.ffz._badge_style, exact_id, utils.badge_css(real_badge));
+		utils.update_css(this.ffz._badge_style, exact_id, utils.badge_css(badge));
 }
 
 
@@ -510,9 +508,9 @@ API.prototype.user_add_badge = function(username, slot, badge_id) {
 		badges = user.badges = user.badges || {},
 		ffz_badges = ffz_user.badges = ffz_user.badges || {},
 
-		exact_id = this.name_key + '-' + badge_id,
+		badge = typeof badge_id === "number" ? {id: badge_id} : badge_id;
-		badge = {id: exact_id};
 
+	badge.real_id = this.name_key + '-' + badge.id;
 	badges[slot] = ffz_badges[slot] = badge;
 }
 
@@ -536,9 +534,9 @@ API.prototype.room_add_user_badge = function(room_name, username, slot, badge_id
 	var ffz_user = ffz_room_users[username] = ffz_room_users[username] || {badges: {}, sets: []},
 		ffz_badges = ffz_user && ffz_user.badges,
 
-		exact_id = this.name_key + '-' + badge_id,
+		badge = typeof badge_id === "number" ? {id: badge_id} : badge_id;
-		badge = {id: exact_id};
 
+	badge.real_id = this.name_key + '-' + badge.id;
 	ffz_badges[slot] = badge;
 }
 

src/ext/betterttv.js

@@ -165,6 +165,9 @@ FFZ.prototype.setup_bttv = function(delay) {
 			data.room = data.room || received_room;
 			f.bttv_badges(data);
 
+			// API Support
+			f.api_trigger('bttv-room-message', data, opts);
+
 			// Now, do everything else manually because things are hard-coded.
 			return '<div class="chat-line'+(opts.highlight?' highlight':'')+(opts.action?' action':'')+(opts.server?' admin':'')+(opts.notice?' notice':'')+'" data-id="' + data.id + '" data-sender="'+(data.sender||"").toLowerCase()+'" data-room="'+received_room+'">'+
 				BC.templates.timestamp(data.time)+' '+

src/main.js

@@ -61,7 +61,7 @@ FFZ.channel_metadata = {};
 
 // Version
 var VER = FFZ.version_info = {
-	major: 3, minor: 5, revision: 425,
+	major: 3, minor: 5, revision: 426,
 	toString: function() {
 		return [VER.major, VER.minor, VER.revision].join(".") + (VER.extra || "");
 	}
@@ -70,6 +70,14 @@ var VER = FFZ.version_info = {
 
 // Logging
 
+var ua = navigator.userAgent,
+	IS_WEBKIT = ua.indexOf('AppleWebKit/') !== -1 && ua.indexOf('Edge/') === -1,
+	IS_FIREFOX = ua.indexOf('Firefox/') !== -1,
+
+	RED_COLOR = "color: red",
+	FFZ_COLOR = "color:#755000; font-weight: bold",
+	TXT_COLOR = "color:auto; font-weight: normal";
+
 FFZ.prototype.log = function(msg, data, to_json, log_json) {
 	if ( to_json )
 		msg = msg + ' -- ' + JSON.stringify(data);
@@ -77,15 +85,23 @@ FFZ.prototype.log = function(msg, data, to_json, log_json) {
 	this._log_data.push(msg + ((!to_json && log_json) ? " -- " + JSON.stringify(data) : ""));
 
 	if ( data !== undefined && console.groupCollapsed && console.dir ) {
-		console.groupCollapsed("%cFFZ:%c " + msg, "color:#755000; font-weight: bold", "color:auto; font-weight: normal");
+		if ( IS_WEBKIT )
-		if ( typeof data === "string" || navigator.userAgent.indexOf("Firefox/") !== -1 )
+			console.groupCollapsed("%cFFZ:%c " + msg, FFZ_COLOR, TXT_COLOR);
+		else
+			console.groupCollapsed("FFZ: " + msg);
+
+		if ( typeof data === "string" || IS_FIREFOX )
 			console.log(data);
 		else
 			console.dir(data);
 
-		console.groupEnd("%cFFZ:%c " + msg, "color:#755000; font-weight: bold", "color:auto; font-weight: normal");
+		if ( IS_WEBKIT )
+			console.groupEnd("%cFFZ:%c " + msg, FFZ_COLOR, TXT_COLOR);
+		else
+			console.groupEnd("FFZ: " + msg);
+
 	} else
-		console.log("%cFFZ:%c " + msg, "color:#755000; font-weight: bold", "color:auto; font-weight: normal");
+		console.log("%cFFZ:%c " + msg, FFZ_COLOR, TXT_COLOR);
 }
 
 
@@ -100,15 +116,22 @@ FFZ.prototype.error = function(msg, error, to_json, log_json) {
 	}
 
 	if ( data !== undefined && console.groupCollapsed && console.dir ) {
-		console.groupCollapsed("%cFFZ " + msg, "color:red");
+		if ( IS_WEBKIT )
-		if ( typeof data === "string" || navigator.userAgent.indexOf("Firefox/") !== -1 )
+			console.groupCollapsed("%cFFZ " + msg, RED_COLOR);
+		else
+			console.groupCollapsed("FFZ " + msg);
+
+		if ( typeof data === "string" || IS_FIREFOX )
 			console.log(data);
 		else
 			console.dir(data);
 
-		console.groupEnd("%cFFZ " + msg, "color:red");
+		if ( IS_WEBKIT )
+			console.groupEnd("%cFFZ " + msg, RED_COLOR);
+		else
+			console.groupEnd("FFZ " + msg);
 	} else
-		console.log("%cFFZ " + msg, "color:red");
+		console.log("%cFFZ " + msg, RED_COLOR);
 }
 
 

src/socket.js

@@ -307,10 +307,11 @@ FFZ.prototype.ws_create = function() {
 			var success = cmd === 'ok',
 				has_callback = typeof f._ws_callbacks[request] === "function";
 
-			if ( ! has_callback && (!success || constants.DEBUG) )
+			if ( ! has_callback ) {
-				f.log("Socket Reply to " + request + " - " + (success ? "SUCCESS" : "FAIL"), data, false, true);
+				if ( ! success || constants.DEBUG)
+					f.log("Socket Reply to " + request + " - " + (success ? "SUCCESS" : "FAIL"), data, false, true);
 
-			else {
+			} else {
 				try {
 					f._ws_callbacks[request](success, data);
 				} catch(err) {

src/styles/chat-separator.css

@@ -1,5 +1,6 @@
 /* Simple Separators */
 .conversation-chat-lines > div,
+.chat-line.notification,
 .chat-line {
 	border-bottom: 1px solid #aaa;
 }

src/utils.js

@@ -577,7 +577,7 @@ module.exports = FFZ.utils = {
 		else if ( game === "Creative" )
 			ember_transition('directory.creative.index')
 		else
-			ember_transition('directory.game.index', encodeURIComponent(game))
+			ember_transition('directory.game.index', game)
 	},
 
 	transition_user: function(username) {

style.css

@@ -1927,18 +1927,18 @@ th.ffz-row-switch {
 }
 
 #ffz-group-tabs .button .notifications {
-    background-color: #d44949;
+	background-color: #d44949;
-    top: 0;
+	top: 0;
-    right: 0;
+	right: 0;
-    position: absolute;
+	position: absolute;
-    height: 12px;
+	height: 12px;
-    line-height: 12px;
+	line-height: 12px;
-    padding: 0 3px;
+	padding: 0 3px;
-    width: auto;
+	width: auto;
-    color: #fff;
+	color: #fff;
-    font-size: 9px;
+	font-size: 9px;
-    vertical-align: middle;
+	vertical-align: middle;
-    margin: 0;
+	margin: 0;
 }
 
 /* Dark Group Tabs */
@@ -2068,6 +2068,11 @@ body.ffz-minimal-chat-input .ember-chat .chat-interface .textarea-contain textar
 	margin-right: 0px;
 }
 
+.chat-line.notification {
+	border-bottom: none;
+	background-color: transparent;
+}
+
 .chat-history .chat-line.notification .from,
 .chat-history .chat-line.notification .colon,
 .chat-history .chat-line.admin .from,