3.5.17 to 3.5.21. Added font family option. Added timestamp seconds option. Fixed regex emoticons in My Emoticons pasting the wrong code. Added Google Noto emoji. Fixed broken chat line alternation. Made My Emoticons menu button not visible when the menu wouldn't contain anything.

gulpfile.js

@@ -105,15 +105,20 @@ gulp.task('server', function() {
 				return request.get("http://cdn.frankerfacez.com/" + uri).pipe(res);
 			}
 
+			var headers = {"Access-Control-Allow-Origin": "*"};
+
 			if ( fs.lstatSync(file).isDirectory() ) {
 				util.log("[" + util.colors.cyan("HTTP") + "] " + util.colors.red("403") + " GET " + util.colors.magenta(uri));
-				res.writeHead(403, {"Access-Control-Allow-Origin": "*"});
+				res.writeHead(403, headers);
 				res.write('403 Forbidden');
 				return res.end();
 			}
 
+			if ( file.substr(file.length-4) === ".svg" )
+				headers['Content-Type'] = 'image/svg+xml';
+
 			util.log("[" + util.colors.cyan("HTTP") + "] " + util.colors.green("200") + " GET " + util.colors.magenta(uri));
-			res.writeHead(200, {"Access-Control-Allow-Origin": "*"});
+			res.writeHead(200, headers);
 			fs.createReadStream(file).pipe(res);
 		});
 

src/badges.js

@@ -17,19 +17,77 @@ FFZ.settings_info.show_badges = {
 	};
 
 
+FFZ.settings_info.legacy_badges = {
+	type: "select",
+	options: {
+		0: "Default",
+		1: "Moderator Only",
+		2: "Mod + Turbo",
+		3: "All Legacy Badges"
+	},
+	value: 0,
+
+	category: "Chat Appearance",
+
+	name: "Legacy Badges",
+	help: "Use the old, pre-vector chat badges from Twitch in place of the new.",
+
+	process_value: function(val) {
+		if ( val === false )
+			return 0;
+		else if ( val === true )
+			return 3;
+		else if ( typeof val === "string" )
+			return parseInt(val || "0");
+		return val;
+	},
+
+	on_update: function(val) {
+			document.body.classList.toggle("ffz-legacy-mod-badges", val !== 0);
+			document.body.classList.toggle("ffz-legacy-turbo-badges", val > 1);
+			document.body.classList.toggle("ffz-legacy-badges", val === 3);
+		}
+	};
+
+
 FFZ.settings_info.transparent_badges = {
-	type: "boolean",
+	type: "select",
-	value: false,
+	options: {
+		0: "Default",
+		1: "Rounded",
+		2: "Circular",
+		3: "Circular (Color Only)",
+		4: "Circular (Color Only, Small)",
+		5: "Transparent"
+	},
+
+	value: 0,
 
 	category: "Chat Appearance",
 	no_bttv: true,
 
-	name: "Transparent Badges",
+	name: "Badge Style",
-	help: "Make chat badges transparent for a nice, clean look. On light chat, non-subscriber badges are inverted to remain visible.",
+	help: "Make badges appear rounded, completely circular, or transparent with no background at all.",
+
+	process_value: function(val) {
+		if ( val === false )
+			return 0;
+		else if ( val === true )
+			return 5;
+		else if ( typeof val === "string" )
+			return parseInt(val || "0");
+		return val;
+	},
 
 	on_update: function(val) {
-			if ( ! this.has_bttv )
+			if ( this.has_bttv )
-				document.body.classList.toggle("ffz-transparent-badges", val);
+				return;
+
+			document.body.classList.toggle("ffz-rounded-badges", val === 1);
+			document.body.classList.toggle("ffz-circular-badges", val === 2);
+			document.body.classList.toggle("ffz-circular-blank-badges", val === 3);
+			document.body.classList.toggle("ffz-circular-small-badges", val === 4);
+			document.body.classList.toggle("ffz-transparent-badges", val === 5);
 		}
 	};
 
@@ -39,8 +97,17 @@ FFZ.settings_info.transparent_badges = {
 // --------------------
 
 FFZ.prototype.setup_badges = function() {
-	if ( ! this.has_bttv )
+	if ( ! this.has_bttv ) {
-		document.body.classList.toggle("ffz-transparent-badges", this.settings.transparent_badges);
+		document.body.classList.toggle("ffz-rounded-badges", this.settings.transparent_badges === 1);
+		document.body.classList.toggle("ffz-circular-badges", this.settings.transparent_badges === 2);
+		document.body.classList.toggle("ffz-circular-blank-badges", this.settings.transparent_badges === 3);
+		document.body.classList.toggle("ffz-circular-small-badges", this.settings.transparent_badges === 4);
+		document.body.classList.toggle("ffz-transparent-badges", this.settings.transparent_badges === 5);
+	}
+
+	document.body.classList.toggle("ffz-legacy-mod-badges", this.settings.legacy_badges !== 0);
+	document.body.classList.toggle("ffz-legacy-turbo-badges", this.settings.legacy_badges > 1);
+	document.body.classList.toggle("ffz-legacy-badges", this.settings.legacy_badges === 3);
 
 	this.log("Preparing badge system.");
 	this.badges = {};

src/ember/line.js

@@ -59,13 +59,29 @@ FFZ.settings_info.replace_bad_emotes = {
 
 
 FFZ.settings_info.parse_emoji = {
-	type: "boolean",
+	type: "select",
-	value: true,
+	options: {
+		0: "No Images / Font Only",
+		1: "Twitter Emoji Images",
+		2: "Google Noto Images"
+	},
+
+	value: 1,
+
+	process_value: function(val) {
+		if ( val === false )
+			return 0;
+		if ( val === true )
+			return 1;
+		if ( typeof val === "string" )
+			return parseInt(val || "0");
+		return val;
+	},
 
 	category: "Chat Appearance",
 
-	name: "Replace Emoji with Images",
+	name: "Emoji Display",
-	help: "Replace emoji in chat messages with nicer looking images from the open-source Twitter Emoji project."
+	help: "Replace emoji in chat messages with nicer looking images from either Twitter or Google."
 	};
 
 
@@ -262,19 +278,6 @@ FFZ.settings_info.image_hover_all_domains = {
 	};
 
 
-FFZ.settings_info.legacy_badges = {
-	type: "boolean",
-	value: false,
-
-	category: "Chat Appearance",
-
-	name: "Legacy Badges",
-	help: "Display the old, pre-vector chat badges from Twitch.",
-
-	on_update: function(val) { document.body.classList.toggle("ffz-legacy-badges", val); }
-	};
-
-
 FFZ.settings_info.chat_rows = {
 	type: "boolean",
 	value: false,
@@ -369,6 +372,52 @@ FFZ.settings_info.high_contrast_chat = {
 	};
 
 
+FFZ.settings_info.chat_font_family = {
+	type: "button",
+	value: null,
+
+	category: "Chat Appearance",
+	no_bttv: true,
+
+	name: "Font Family",
+	help: "Change the font used for rendering chat messages.",
+
+	method: function() {
+			var old_val = this.settings.chat_font_family || "",
+				new_val = prompt("Chat Font Family\n\nPlease enter a font family to use rendering chat. Leave this blank to use the default.", old_val);
+
+			if ( new_val === null || new_val === undefined )
+				return;
+
+			// Should we wrap this with quotes?
+			if ( ! new_val )
+				new_val = null;
+
+			this.settings.set("chat_font_family", new_val);
+		},
+
+	on_update: function(val) {
+		if ( this.has_bttv || ! this._chat_style )
+			return;
+
+		var css;
+		if ( ! val )
+			css = "";
+		else {
+			// Let's escape this to avoid goofing anything up if there's bad user input.
+			if ( val.indexOf(' ') !== -1 && val.indexOf(',') === -1 && val.indexOf('"') === -1 && val.indexOf("'") === -1)
+				val = '"' + val + '"';
+
+			var span = document.createElement('span');
+			span.style.fontFamily = val;
+			css = ".ember-chat .chat-messages {" + span.style.cssText + "}";
+		}
+
+		utils.update_css(this._chat_style, "chat_font_family", css);
+		}
+	};
+
+
 FFZ.settings_info.chat_font_size = {
 	type: "button",
 	value: 12,
@@ -486,13 +535,13 @@ FFZ.prototype.setup_line = function() {
 
 	// Initial calculation.
 	FFZ.settings_info.chat_font_size.on_update.bind(this)(this.settings.chat_font_size);
+	FFZ.settings_info.chat_font_family.on_update.bind(this)(this.settings.chat_font_family);
 
 
 	// Chat Enhancements
 	document.body.classList.toggle("ffz-chat-colors", !this.has_bttv && this.settings.fix_color !== '-1');
 	document.body.classList.toggle("ffz-chat-colors-gray", !this.has_bttv && this.settings.fix_color === '-1');
 
-	document.body.classList.toggle("ffz-legacy-badges", this.settings.legacy_badges);
 	document.body.classList.toggle('ffz-chat-background', !this.has_bttv && this.settings.chat_rows);
 	document.body.classList.toggle("ffz-chat-separator", !this.has_bttv && this.settings.chat_separators !== '0');
 	document.body.classList.toggle("ffz-chat-separator-3d", !this.has_bttv && this.settings.chat_separators === '2');
@@ -652,16 +701,11 @@ FFZ.prototype._modify_line = function(component) {
 				this_ul = this.get('ffzUserLevel'),
 				other_ul = room && room.room && room.room.get('ffzUserLevel') || 0,
 
-				row_type = this.get('msgObject.ffz_alternate'),
 				raw_color = this.get('msgObject.color'),
 				colors = raw_color && f._handle_color(raw_color),
 
 				is_dark = (Layout && Layout.get('isTheatreMode')) || (Settings && Settings.get('model.darkMode'));
 
-			if ( row_type === undefined ) {
-				row_type = f._last_row[room_id] = f._last_row.hasOwnProperty(room_id) ? !f._last_row[room_id] : false;
-				this.set("msgObject.ffz_alternate", row_type);
-			}
 
 			e.push('<div class="indicator"></div>');
 			e.push('<span class="timestamp float-left">' + this.get("timestamp") + '</span> ');

src/ember/room.js

@@ -941,7 +941,7 @@ FFZ.prototype._modify_room = function(room) {
 					if ( msg.from === user ) {
 						if ( f.settings.remove_deleted ) {
 							if ( alternate === undefined )
-								alternate = msg.ffz_alternate;
+								alternate = ! msg.ffz_alternate;
 							msgs.removeAt(i);
 							continue;
 						}
@@ -1032,6 +1032,13 @@ FFZ.prototype._modify_room = function(room) {
 
 		ffzActualPushMessage: function (msg) {
 			if ( this.shouldShowMessage(msg) && this.ffzShouldShowMessage(msg) ) {
+				var row_type = msg.ffz_alternate;
+				if ( row_type === undefined ) {
+					var room_id = this.get('id');
+					row_type = f._last_row[room_id] = f._last_row.hasOwnProperty(room_id) ? !f._last_row[room_id] : false;
+					msg.ffz_alternate = row_type;
+				}
+
 				this.get("messages").pushObject(msg);
 				this.trimMessages();
 
@@ -1233,14 +1240,19 @@ FFZ.prototype._modify_room = function(room) {
 			this.tmiRoom.list().done(function(data) {
 				var chatters = {};
 				data = data.data.chatters;
+				if ( data && data.admins )
 					for(var i=0; i < data.admins.length; i++)
 						chatters[data.admins[i]] = true;
+				if ( data && data.global_mods )
 					for(var i=0; i < data.global_mods.length; i++)
 						chatters[data.global_mods[i]] = true;
+				if ( data && data.moderators )
 					for(var i=0; i < data.moderators.length; i++)
 						chatters[data.moderators[i]] = true;
+				if ( data && data.staff )
 					for(var i=0; i < data.staff.length; i++)
 						chatters[data.staff[i]] = true;
+				if ( data && data.viewers )
 					for(var i=0; i < data.viewers.length; i++)
 						chatters[data.viewers[i]] = true;
 

src/emoticons.js

@@ -218,7 +218,7 @@ FFZ.prototype._emote_tooltip = function(emote) {
 
 FFZ.prototype.load_emoji_data = function(callback, tries) {
 	var f = this;
-	jQuery.getJSON(constants.SERVER + "emoji/emoji.json")
+	jQuery.getJSON(constants.SERVER + "emoji/emoji-data.json")
 		.done(function(data) {
 			var new_data = {},
 				by_name = {};
@@ -232,16 +232,21 @@ FFZ.prototype.load_emoji_data = function(callback, tries) {
 
 				emoji.raw = _.map(emoji.code.split("-"), from_code_point).join("");
 
-				emoji.src = constants.SERVER + 'emoji/' + eid + '-1x.png';
+				emoji.tw_src = constants.SERVER + 'emoji/tw-' + eid + '.svg';
-				emoji.srcSet = emoji.src + ' 1x, ' + constants.SERVER + 'emoji/' + eid + '-2x.png 2x, ' + constants.SERVER + 'emoji/' + eid + '-4x.png 4x';
+				emoji.noto_src = constants.SERVER + 'emoji/noto-' + eid + '.svg';
 
 				emoji.token = {
-					srcSet: emoji.srcSet,
+					emoticonSrc: true,
-					emoticonSrc: emoji.src,
+
+					tw_src: emoji.tw_src,
+					noto_src: emoji.noto_src,
+
+					tw: emoji.tw,
+					noto: emoji.noto,
+
 					ffzEmoji: eid,
 					altText: emoji.raw
 				};
-				
 			}
 
 			f.emoji_data = new_data;

src/main.js

@@ -21,7 +21,7 @@ FFZ.get = function() { return FFZ.instance; }
 
 // Version
 var VER = FFZ.version_info = {
-	major: 3, minor: 5, revision: 16,
+	major: 3, minor: 5, revision: 21,
 	toString: function() {
 		return [VER.major, VER.minor, VER.revision].join(".") + (VER.extra || "");
 	}

src/tokenize.js

@@ -258,6 +258,18 @@ FFZ.settings_info.twenty_four_timestamps = {
 	};
 
 
+FFZ.settings_info.timestamp_seconds = {
+	type: "boolean",
+	value: false,
+
+	category: "Chat Appearance",
+	no_bttv: true,
+
+	name: "Timestamp Seconds",
+	help: "Display seconds in chat timestamps."
+	};
+
+
 FFZ.settings_info.show_deleted_links = {
 	type: "boolean",
 	value: false,
@@ -297,14 +309,15 @@ FFZ.prototype.setup_tokenization = function() {
 			return '?:??';
 
 		var hours = e.getHours(),
-			minutes = e.getMinutes();
+			minutes = e.getMinutes(),
+			seconds = e.getSeconds();
 
 		if ( hours > 12 && ! f.settings.twenty_four_timestamps )
 			hours -= 12;
 		else if ( hours === 0 && ! f.settings.twenty_four_timestamps )
 			hours = 12;
 
-		return hours + ':' + (minutes < 10 ? '0' : '') + minutes;
+		return hours + ':' + (minutes < 10 ? '0' : '') + minutes + (f.settings.timestamp_seconds ? ':' + (seconds < 10 ? '0' : '') + seconds : '');
 	};
 
 
@@ -523,7 +536,7 @@ FFZ.prototype.render_tokens = function(tokens, render_links) {
 	var f = this;
 	return _.map(tokens, function(token) {
 		if ( token.emoticonSrc ) {
-			var tooltip, srcset, extra;
+			var tooltip, src = token.emoticonSrc, srcset, extra;
 			if ( token.ffzEmote ) {
 				var emote_set = f.emote_sets && f.emote_sets[token.ffzEmoteSet],
 					emote = emote_set && emote_set.emoticons && emote_set.emoticons[token.ffzEmote];
@@ -534,11 +547,15 @@ FFZ.prototype.render_tokens = function(tokens, render_links) {
 
 			} else if ( token.ffzEmoji ) {
 				var eid = token.ffzEmoji,
-					emoji = f.emoji_data && f.emoji_data[eid];
+					emoji = f.emoji_data && f.emoji_data[eid],
+					setting = f.settings.parse_emoji;
 
-				tooltip = emoji ? "Emoji: " + token.altText + "\nName: :" + emoji.short_name + ":" : token.altText;
+				if ( setting === 0 || (setting === 1 && ! emoji.tw) || (setting === 2 && ! emoji.noto) )
-				srcset = emoji ? emoji.srcSet : token.srcSet;
+					return token.altText;
-				extra = ' data-ffz-emoji="' + eid + '"';
+
+				tooltip = emoji ? "Emoji: " + token.altText + "\nName: " + emoji.name + (emoji.short_name ? "\nShort Name: :" + emoji.short_name + ":" : "") : token.altText;
+				extra = ' data-ffz-emoji="' + eid + '" height="18px"';
+				src = setting === 2 ? token.noto_src : token.tw_src;
 
 			} else {
 				var id = token.replacedId || FFZ.src_to_id(token.emoticonSrc),
@@ -571,7 +588,7 @@ FFZ.prototype.render_tokens = function(tokens, render_links) {
 					srcset = build_srcset(id);
 			}
 
-			return '<img class="emoticon tooltip"' + (extra||"") + ' src="' + utils.quote_attr(token.emoticonSrc) + '" ' + (srcset ? 'srcset="' + utils.quote_attr(srcset) + '" ' : '') + 'alt="' + utils.quote_attr(token.altText) + '" title="' + utils.quote_attr(tooltip) + '">';
+			return '<img class="emoticon 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 ) {

src/ui/my_emotes.js

@@ -91,9 +91,14 @@ FFZ.menu_pages.myemotes = {
 		var user = this.get_user(),
 			tmi = view.get('controller.currentRoom.tmiSession'),
 			ffz_sets = user && this.users[user.login] && this.users[user.login].sets || [],
-			twitch_sets = (tmi && tmi.getEmotes() || {'emoticon_sets': {}})['emoticon_sets'];
+			twitch_sets = (tmi && tmi.getEmotes() || {'emoticon_sets': {}})['emoticon_sets'],
 
-		return ffz_sets.length || (twitch_sets && Object.keys(twitch_sets).length);
+			sk = twitch_sets && Object.keys(twitch_sets);
+
+		if ( sk && ! this.settings.global_emotes_in_menu && sk.indexOf('0') !== -1 )
+			sk.removeObject('0');
+
+		return ffz_sets.length || (sk && sk.length) || this.settings.emoji_in_menu;
 	},
 
 	render: function(view, container) {
@@ -122,11 +127,14 @@ FFZ.menu_pages.myemotes = {
 	draw_emoji: function(view) {
 		var heading = document.createElement('div'),
 			menu = document.createElement('div'),
-			f = this;
+			f = this,
+			settings = this.settings.parse_emoji || 1;
+
 
 		heading.className = 'heading';
-		heading.innerHTML = '<span class="right">FrankerFaceZ</span>Emoji';
+		heading.innerHTML = '<span class="right">Unicode</span>Emoji';
-		heading.style.backgroundImage = 'url("' + constants.SERVER + '/emoji/1f4af-1x.png")';
+		heading.style.backgroundImage = 'url("' + constants.SERVER + 'emoji/' + (settings === 2 ? 'noto-' : 'tw-') + '1f4af.svg")';
+		heading.style.backgroundSize = "18px";
 
 		menu.className = 'emoticon-grid collapsable';
 		menu.appendChild(heading);
@@ -136,12 +144,13 @@ FFZ.menu_pages.myemotes = {
 		heading.addEventListener('click', function() { FFZ.menu_pages.myemotes.toggle_section.bind(f)(this); });
 
 		var set = [];
+
 		for(var eid in this.emoji_data)
 			set.push(this.emoji_data[eid]);
 
 		set.sort(function(a,b) {
-			var an = a.short_name.toLowerCase(),
+			var an = (a.name || "").toLowerCase(),
-				bn = b.short_name.toLowerCase();
+				bn = (b.name || "").toLowerCase();
 
 			if ( an < bn ) return -1;
 			else if ( an > bn ) return 1;
@@ -152,18 +161,17 @@ FFZ.menu_pages.myemotes = {
 
 		for(var i=0; i < set.length; i++) {
 			var emoji = set[i],
-				em = document.createElement('span'),
+				em = document.createElement('span');
-				img_set = 'image-set(url("' + emoji.src + '") 1x, url("' + constants.SERVER + 'emoji/' + emoji.code + '-2x.png") 2x, url("' + constants.SERVER + 'emoji/' + emoji.code + '-4x.png") 4x)';
+
+			if ( (settings === 1 && ! emoji.tw) || (settings === 2 && ! emoji.noto) )
+				continue;
 
 			em.className = 'emoticon tooltip';
-			em.title = 'Emoji: ' + emoji.raw + '\nName: :' + emoji.short_name + ':';
+			em.title = 'Emoji: ' + emoji.raw + '\nName: ' + emoji.name + (emoji.short_name ? '\nShort Name: :' + emoji.short_name + ':' : '');
 			em.addEventListener('click', this._add_emote.bind(this, view, emoji.raw));
 
-			em.style.backgroundImage = 'url("' + emoji.src + '")';
+			em.style.backgroundImage = 'url("' + (settings === 2 ? emoji.noto_src : emoji.tw_src) + '")';
-			em.style.backgroundImage = '-webkit-' + img_set;
+			em.style.backgroundSize = "18px";
-			em.style.backgroundImage = '-moz-' + img_set;
-			em.style.backgroundImage = '-ms-' + img_set;
-			em.style.backgroudnImage = img_set;
 
 			menu.appendChild(em);
 		}
@@ -244,13 +252,13 @@ FFZ.menu_pages.myemotes = {
 			}
 
 			em.title = code;
-			em.addEventListener("click", function(id, code, e) {
+			em.addEventListener("click", function(id, c, e) {
 				e.preventDefault();
 				if ( (e.shiftKey || e.shiftLeft) && f.settings.clickable_emoticons )
 					window.open("https://twitchemotes.com/emote/" + id);
 				else
-					this._add_emote(view, code);
+					this._add_emote(view, c);
-			}.bind(this, emote.id, emote.code));
+			}.bind(this, emote.id, code));
 			menu.appendChild(em);
 		}
 

style.css

@@ -1729,7 +1729,29 @@ body.ffz-minimal-chat .ember-chat .chat-interface .textarea-contain textarea {
 	border-right-color: transparent;
 }
 
-/* Hidden Badges */
+/* Badge Styles */
+
+.ffz-rounded-badges .ember-chat .badges .badge:not(.subscriber) { border-radius: 2px; }
+
+.ffz-circular-blank-badges .ember-chat .badges .badge:not(.subscriber),
+.ffz-circular-small-badges .ember-chat .badges .badge:not(.subscriber),
+.ffz-circular-badges .ember-chat .badges .badge:not(.subscriber) {
+	border-radius: 9px;
+	background-size: 16px;
+	background-repeat: no-repeat;
+	background-position: center center;
+}
+
+.ffz-circular-small-badges .ember-chat .badges .badge:not(.subscriber),
+.ffz-circular-blank-badges .ember-chat .badges .badge:not(.subscriber) {
+	background-size: 0px;
+}
+
+.ffz-circular-small-badges .ember-chat .badges .badge:not(.subscriber) {
+	height: 10px;
+	min-width: 10px;
+	margin: 5px 3px 5px 0;
+}
 
 .ffz-transparent-badges .ember-chat .badges .badge {
 	background-color: transparent !important;
@@ -1864,6 +1886,7 @@ li[data-name="following"] a {
 
 /* Legacy Badges */
 
+.ffz-legacy-mod-badges .ember-chat .badges .moderator,
 .ffz-legacy-badges .ember-chat .badges .moderator {
 	background-color: #068c10;
 	background-image: url('legacy-mod.png');
@@ -1884,6 +1907,7 @@ li[data-name="following"] a {
 	background-image: url('legacy-admin.png');
 }
 
+.ffz-legacy-turbo-badges .ember-chat .badges .turbo,
 .ffz-legacy-badges .ember-chat .badges .turbo {
 	background-color: #6441a3;
 	background-image: url('legacy-turbo.png');