3.5.315. Emote tab completion for whisper windows. Transparent Colored badges. Dynamically generate Twitch badge CSS. CSS tweaks. Fix a bug where the chat settings menu wouldn't be hooked properly and modernized it. Closes #27. Closes #26. Closes #24.

changelog.html

@@ -1,3 +1,11 @@
+<div class="list-header">3.5.315 <time datetime="2016-10-03">(2016-10-05)</time></div>
+<ul class="chat-menu-content menu-side-padding">
+	<li>Added: Emoticon tab-completion for whisper windows.</li>
+	<li>Added: Transparent (Colored) badge display for users with browsers supporting the <code>-webkit-mask</code> property.</li>
+	<li>Changed: Minor CSS tweaks.</li>
+	<li>Fixed: The Curse Emoticons set had no information in the My Emoticons menu.</li>
+</ul>
+
 <div class="list-header">3.5.314 <time datetime="2016-10-03">(2016-10-05)</time></div>
 <ul class="chat-menu-content menu-side-padding">
 	<li>Changed: Ensure you get the user's username when copy-pasting from the moderation card's chat history.</li>

src/badges.js

@@ -5,7 +5,27 @@ var FFZ = window.FrankerFaceZ,
 	SPECIAL_BADGES = ['staff', 'admin', 'global_mod'],
 	OTHER_KNOWN = ['turbo', 'warcraft', 'bits', 'premium'],
 
+	CSS_BADGES = {
+		staff: { 1: { color: "#200f33", use_svg: true } },
+		admin: { 1: { color: "#faaf19", use_svg: true  } },
+		broadcaster: { 1: { color: "#e71818", use_svg: true } },
+		moderator: { 1: { color: "#34ae0a", use_svg: true } },
+
+		turbo: { 1: { color: "#6441a5", use_svg: true } },
+		premium: { 1: { color: "#009cdc" } },
+
+		bits: {
+			1: { color: "#cbc8d0" },
+			100: { color: "#ca7eff" },
+			1000: { color: "#3ed8b3" },
+			5000: { color: "#49acff" },
+			10000: { color: "#ff271e" },
+			100000: { color: "#ffcb13" }
+		}
+	},
+
 	NO_INVERT_BADGES = ['subscriber', 'ffz-badge-1'],
+
 	INVERT_INVERT_BADGES = ['bits'],
 	TRANSPARENT_BADGES = ['subscriber'],
 
@@ -32,6 +52,11 @@ var FFZ = window.FrankerFaceZ,
 	};
 
 
+CSS_BADGES['global-moderator'] = {
+	1: { color: "#0c6f20", use_svg: true }
+};
+
+
 // --------------------
 // Settings
 // --------------------
@@ -196,7 +221,8 @@ FFZ.settings_info.transparent_badges = {
 		2: "Circular",
 		3: "Circular (Color Only)",
 		4: "Circular (Color Only, Small)",
-		5: "Transparent"
+		5: "Transparent" //,
+		//6: "Transparent (Colored)"
 	},
 
 	value: 0,
@@ -217,11 +243,31 @@ FFZ.settings_info.transparent_badges = {
 		this.toggle_style('badges-circular', val === 2 || val === 3 || val === 4);
 		this.toggle_style('badges-blank', val === 3 || val === 4);
 		this.toggle_style('badges-circular-small', val === 4);
-		this.toggle_style('badges-transparent', val === 5);
+		this.toggle_style('badges-transparent', val >= 5);
-		document.body.classList.toggle('ffz-transparent-badges', val === 5);
+		document.body.classList.toggle('ffz-transparent-badges', val >= 5);
+
+		// Update existing chat lines.
+		var CL = utils.ember_resolve('component:chat/chat-line'),
+			CW = utils.ember_resolve('component:twitch-conversations/conversation-window'),
+			DP = utils.ember_resolve('component:chat/from-display-preview'),
+			views = (CL || CW || DP) ? utils.ember_views() : [];
+
+		for(var vid in views) {
+			var view = views[vid];
+			if ( CL && view instanceof CL && view.buildBadgesHTML )
+				view.$('.badges').replaceWith(view.buildBadgesHTML());
+			else if ( DP && view instanceof DP && view.ffzRenderBadges )
+				view.ffzRenderBadges();
+			else if ( CW && view instanceof CW && view.ffzReplaceBadges )
+				view.ffzReplaceBadges();
+		}
 	}
 };
 
+// This requires -webkit-mask-image which isn't working in non-WebKit browsers.
+if ( navigator.userAgent.indexOf('AppleWebKit') !== -1 )
+	FFZ.settings_info.transparent_badges.options[6] = "Transparent (Colored)";
+
 
 // --------------------
 // Initialization
@@ -234,8 +280,8 @@ FFZ.prototype.setup_badges = function() {
 		this.toggle_style('badges-circular', val === 2 || val === 3 || val === 4);
 		this.toggle_style('badges-blank', val === 3 || val === 4);
 		this.toggle_style('badges-circular-small', val === 4);
-		this.toggle_style('badges-transparent', val === 5);
+		this.toggle_style('badges-transparent', val >= 5);
-		document.body.classList.toggle('ffz-transparent-badges', val === 5);
+		document.body.classList.toggle('ffz-transparent-badges', val >= 5);
 
 		this.toggle_style('badges-sub-notice', ! this.settings.sub_notice_badges);
 		this.toggle_style('badges-sub-notice-on', this.settings.sub_notice_badges);
@@ -253,10 +299,15 @@ FFZ.prototype.setup_badges = function() {
 	s.id = "ffz-badge-css";
 	document.head.appendChild(s);
 
+	this.log("Generating CSS for existing Twitch badges.");
+	for(var badge_id in CSS_BADGES) {
+		var badge_data = CSS_BADGES[badge_id];
+		for(var version in badge_data)
+			utils.update_css(s, 'twitch-' + badge_id + '-' + version, utils.cdn_badge_css(badge_id, version, badge_data[version]));
+	}
+
 	this.log("Loading badges.");
 	this.load_badges();
-	//this.log("Adding legacy donor badges.");
-	//this._legacy_add_donors();
 }
 
 
@@ -277,6 +328,9 @@ FFZ.ws_commands.set_badge = function(data) {
 		user = this.users[user_id] = this.users[user_id] || {},
 		badges = user.badges = user.badges || {};
 
+	if ( typeof badge === "number" )
+		badge = {id: badge};
+
 	if ( badge === undefined || badge === null )
 		badges[slot] = null;
 	else
@@ -342,6 +396,7 @@ FFZ.prototype._get_badge_object = function(badge, full_badge) {
 		full_image: full_badge.image,
 		color: badge.color,
 		no_invert: badge.no_invert || full_badge.no_invert,
+		no_color: badge.no_color || full_badge.no_color,
 		invert_invert: badge.invert_invert || full_badge.invert_invert,
 		transparent: badge.transparent || full_badge.transparent || (badge.color || full_badge.color) === "transparent",
 		extra_css: (badge.extra_css || full_badge.extra_css)
@@ -414,6 +469,7 @@ FFZ.prototype.get_twitch_badges = function(badge_tag) {
 			title: binfo && binfo.title || BADGE_NAMES[badge] || badge.capitalize(),
 			click_url: binfo && binfo.click_action === 'visit_url' && binfo.click_url,
 			no_invert: NO_INVERT_BADGES.indexOf(badge) !== -1,
+			no_color: ! CSS_BADGES.hasOwnProperty(badge),
 			invert_invert: INVERT_INVERT_BADGES.indexOf(badge) !== -1,
 			transparent: TRANSPARENT_BADGES.indexOf(badge) !== -1
 		};
@@ -428,44 +484,32 @@ FFZ.prototype.get_twitch_badges = function(badge_tag) {
 }
 
 
-/*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 = SPECIAL_BADGES.length; i < l; i++) {
-			var mb = SPECIAL_BADGES[i];
-			if ( user_type === mb ) {
-				badges[0] = {klass: BADGE_KLASSES[mb] || mb, title: BADGE_NAMES[mb] || mb.capitalize()};
-				break;
-			}
-		}
-
-	if ( has_sub )
-		badges[10] = {klass: 'subscriber', title: 'Subscriber', no_invert: true, transparent: true}
-	if ( has_turbo )
-		badges[15] = {klass: 'turbo', title: 'Turbo'}
-
-	return this.get_badges(user_id, room_id, badges, null);
-}*/
-
-
 // --------------------
 // Render Badge
 // --------------------
 
 FFZ.prototype.render_badges = function(badges) {
-	var out = [];
+	var out = [],
+		setting = this.settings.transparent_badges;
+
 	for(var key in badges) {
 		var badge = badges[key],
 			klass = badge.klass,
-			css = badge.image ? 'background-image:url("' + utils.quote_attr(badge.image) + '");' : '';
+			css = '';
 
-		if ( badge.srcSet )
+		if ( badge.image )
+			if ( setting === 6 )
+				css += '-webkit-mask-image:url("' + utils.quote_attr(badge.image) + '");';
+			else
+				css += 'background-image:url("' + utils.quote_attr(badge.image) + '");';
+
+		if ( badge.srcSet && setting !== 6 )
 			css += 'background-image:-webkit-image-set(' + badge.srcSet + ');background-image:image-set(' + badge.srcSet + ');'
 
 		if ( badge.color )
+			if ( setting === 6 )
+				css += 'background: linear-gradient(' + badge.color + ',' + badge.color + ');';
+			else
 				css += 'background-color:' + badge.color + ';'
 
 		if ( badge.extra_css )
@@ -480,6 +524,9 @@ FFZ.prototype.render_badges = function(badges) {
 		if ( badge.invert_invert )
 			klass += ' invert-invert';
 
+		if ( ! badge.no_color && setting === 6 )
+			klass += ' colored';
+
 		if ( badge.transparent )
 			klass += ' transparent';
 
@@ -662,7 +709,6 @@ FFZ.prototype.load_badges = function(callback, tries) {
 				badge_count++;
 			badges[1] = {id: 2, image: "//cdn.frankerfacez.com/script/momiglee_badge.png", title: "WAN"};
 
-
 			f.log("Loaded " + utils.number_commas(badge_count) + " total badges across " + badge_total + " types.");
 			typeof callback === "function" && callback(true, badge_count, badge_total, badge_data);
 
@@ -695,113 +741,3 @@ FFZ.prototype._load_badge_json = function(badge_id, data) {
 
 	utils.update_css(this._badge_style, badge_id, utils.badge_css(data));
 }
-
-
-
-// --------------------
-// Legacy Support
-// --------------------
-
-/*FFZ.prototype._legacy_add_donors = function() {
-	// Developer Badge
-	this.badges[0] = {id: 0, title: "FFZ Developer", color: "#FAAF19", image: "//cdn.frankerfacez.com/script/devicon.png", transparent_image: "//cdn.frankerfacez.com/script/devtransicon.png"};
-	utils.update_css(this._badge_style, 0, badge_css(this.badges[0]));
-
-	// Donor Badge
-	this.badges[1] = {id: 1, title: "FFZ Donor", color: "#755000", image: "//cdn.frankerfacez.com/script/devicon.png"};
-	utils.update_css(this._badge_style, 1, badge_css(this.badges[1]));
-
-	// Bot Badge
-	this.badges[2] = {id: 2, title: "Bot", color: "#595959", image: "//cdn.frankerfacez.com/script/boticon.png",
-		replaces: true, replaces_type: "moderator",
-		visible: function(r,user) { return !(this.has_bttv && FFZ.bttv_known_bots.indexOf(user)!==-1); }};
-
-	utils.update_css(this._badge_style, 2, badge_css(this.badges[2]));
-
-	// Load BTTV Bots
-	for(var i=0; i < FFZ.bttv_known_bots.length; i++) {
-		var name = FFZ.bttv_known_bots[i],
-			user = this.users[name] = this.users[name] || {},
-			badges = user.badges = user.badges || {};
-
-		if ( ! badges[0] )
-			badges[1] = {id:2};
-	}
-
-	// Special Badges
-	this.users.sirstendec = {badges: {5: {id:0}}, sets: [4330]};
-	this.users.zenwan = {badges: {1: {id:2, image: "//cdn.frankerfacez.com/script/momiglee_badge.png", title: "WAN"}}};
-
-	this._legacy_load_bots();
-	this._legacy_load_donors();
-}
-
-FFZ.prototype._legacy_load_bots = function(callback, tries) {
-	jQuery.ajax(constants.SERVER + "script/bots.txt", {context: this})
-		.done(function(data) {
-			this._legacy_parse_badges(callback, data, 1, 2, "Bot (By: {})");
-
-		}).fail(function(data) {
-			if ( data.status == 404 )
-				return typeof callback === "function" && callback(false, 0);
-
-			tries = (tries || 0) + 1;
-			if ( tries < 10 )
-				this._legacy_load_bots(callback, tries);
-		});
-}
-
-FFZ.prototype._legacy_load_donors = function(callback, tries) {
-	jQuery.ajax(constants.SERVER + "script/donors.txt", {context: this})
-		.done(function(data) {
-			this._legacy_parse_badges(callback, data, 5, 1);
-
-		}).fail(function(data) {
-			if ( data.status == 404 )
-				return typeof callback === "function" && callback(false, 0);
-
-			tries = (tries || 0) + 1;
-			if ( tries < 10 )
-				return this._legacy_load_donors(callback, tries);
-		});
-}
-
-
-FFZ.prototype._legacy_parse_badges = function(callback, data, slot, badge_id, title_template) {
-	var title = this.badges[badge_id].title,
-		count = 0,
-		ds = null;
-
-	title_template = title_template || '{}';
-
-	if ( data != null ) {
-		var lines = data.trim().split(/[ \t\n\r]+/);
-		for(var i=0; i < lines.length; i++) {
-			if ( ! /^\w/.test(lines[i]) )
-				continue;
-
-			var line_data = lines[i].split(";"),
-				user_id = line_data[0],
-				user = this.users[user_id] = this.users[user_id] || {},
-				badges = user.badges = user.badges || {},
-				sets = user.sets = user.sets || [];
-
-			if ( ds !== null && sets.indexOf(ds) === -1 )
-				sets.push(ds);
-
-			if ( badges[slot] )
-				continue;
-
-			badges[slot] = {id: badge_id};
-			if ( line_data.length > 1 )
-				badges[slot].title = title_template.replace('{}', line_data[1]);
-			count += 1;
-		}
-	}
-
-	this.log('Added "' + title + '" badge to ' + utils.number_commas(count) + " users.");
-	if ( callback )
-		callback(true, count);
-
-	return count;
-}*/

src/ember/channel.js

@@ -16,7 +16,8 @@ FFZ.prototype.setup_channel = function() {
 
 	// Settings stuff!
 	document.body.classList.toggle("ffz-hide-view-count", !this.settings.channel_views);
-	document.body.classList.toggle('ffz-theater-stats', this.settings.theater_stats);
+	document.body.classList.toggle('ffz-theater-stats', this.settings.theater_stats === 2);
+	document.body.classList.toggle('ffz-theater-basic-stats', this.settings.theater_stats > 0);
 
 	var banner_hidden = this.settings.hide_channel_banner;
 		banner_hidden = banner_hidden === 1 ? this.settings.channel_bar_bottom : banner_hidden > 0;
@@ -1386,15 +1387,25 @@ FFZ.settings_info.channel_title_top = {
 
 
 FFZ.settings_info.theater_stats = {
-	type: "boolean",
+	type: "select",
-	value: true,
+	options: {
+		0: "Disabled",
+		1: "Basic",
+		2: "Full"
+	},
+
+	value: 2,
+	process_value: utils.process_int(2, 0, 2),
+
 	no_mobile: true,
 
 	category: "Channel Metadata",
 	name: "Display on Theater Mode Hover",
 	help: "Show the channel metadata and actions over the video player in theater mode when you hover it with your mouse.",
+
 	on_update: function(val) {
-			document.body.classList.toggle('ffz-theater-stats', val);
+			document.body.classList.toggle('ffz-theater-stats', val === 2);
+			document.body.classList.toggle('ffz-theater-basic-stats', val > 0);
 		}
 	};
 

src/ember/chat-input.js

@@ -219,7 +219,9 @@ FFZ.prototype.setup_chat_input = function() {
 
 
 FFZ.prototype.modify_chat_input = function(component) {
-	var f = this;
+	var f = this,
+		ConvoInput = utils.ember_resolve('component:twitch-conversations/conversation-input');
+
 	utils.ember_reopen_view(component, {
 		ffz_mru_index: -1,
 		ffz_current_suggestion: 0,
@@ -507,7 +509,7 @@ FFZ.prototype.modify_chat_input = function(component) {
 
 		ffzFetchNameSuggestions: function() {
 			if ( ! this.get('ffz_suggestions_visible') )
-				this.set('ffz_name_suggestions', this.get('suggestions')());
+				this.set('ffz_name_suggestions', this.get('suggestions')() || []);
 		}.observes('suggestions'),
 
 
@@ -553,9 +555,10 @@ FFZ.prototype.modify_chat_input = function(component) {
 		ffz_emoticons: function() {
 			var emotes = {},
 
-				room = this.get('parentView.context.model'),
+				in_conversation = ConvoInput && this.parentView instanceof ConvoInput,
+				room = ! in_conversation && this.get('parentView.context.model'),
 				room_id = room && room.get('id'),
-				tmi = room && room.tmiSession,
+				tmi = in_conversation ? window.TMI && TMI._sessions && TMI._sessions[0] : room && room.tmiSession,
 
 				set_name, replacement, url, is_sub_set, fav_list,
 				emote_set, emote, emote_id, code,
@@ -585,6 +588,8 @@ FFZ.prototype.modify_chat_input = function(component) {
 								set_name = 'Twitch Global';
 							else if ( set_name === '--twitch-turbo--' || set_name === 'turbo' || set_name === '--turbo-faces--' )
 								set_name = 'Twitch Turbo';
+							else if ( set_name === 'prime' || set_name === '--prime-faces--' )
+								set_name = 'Twitch Prime';
 							else {
 								set_name = 'Channel: ' + FFZ.get_capitalization(set_name);
 								is_sub_set = true;

src/ember/line.js

@@ -834,6 +834,10 @@ FFZ.prototype._modify_chat_line = function(component, is_vod) {
 				'';
 		},
 
+		buildBadgesHTML: function() {
+			return '<span class="badges">' + f.render_badges(f.get_line_badges(this.get('msgObject'))) + '</span>';
+		},
+
 		buildSenderHTML: function() {
 			var output = '';
 
@@ -846,7 +850,7 @@ FFZ.prototype._modify_chat_line = function(component, is_vod) {
 			output += this.buildModIconsHTML();
 
 			// Badges
-			output += '<span class="badges">' + f.render_badges(f.get_line_badges(this.get('msgObject'))) + '</span>';
+			output += this.buildBadgesHTML();
 
 			// From!
 			output += this.buildFromHTML();

src/ember/room.js

@@ -43,7 +43,18 @@ var FFZ = window.FrankerFaceZ,
 		if ( ! room.moderator_badge )
 			return "";
 
-		return '.from-display-preview[data-room="' + room.id + '"] .badges .moderator:not(.ffz-badge-replacement),.chat-line[data-room="' + room.id + '"] .badges .moderator:not(.ffz-badge-replacement) { background-repeat: no-repeat; background-size: initial; background-position: center; background-image:url("' + room.moderator_badge + '") !important; }';
+		return '.from-display-preview[data-room="' + room.id + '"] .badges .moderator:not(.ffz-badge-replacement):not(.colored),' +
+			'.chat-line[data-room="' + room.id + '"] .badges .moderator:not(.ffz-badge-replacement):not(.colored) {' +
+				'background-repeat: no-repeat;' +
+				'background-size: initial !important;' +
+				'background-position: center;' +
+				'background-image:url("' + room.moderator_badge + '") !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 {' +
+				'-webkit-mask-repeat: no-repeat;' +
+				'-webkit-mask-size: initial !important;' +
+				'-webkit-mask-position: center;' +
+				'-webkit-mask-image: url("' + room.moderator_badge + '"); }';
 	};
 
 
@@ -1940,6 +1951,10 @@ FFZ.prototype._modify_room = function(room) {
 			if ( msg_id && this.ffz_ids && this.ffz_ids[msg_id] )
 				return;
 
+			// If it's historical, make sure it's for this room.
+			if ( msg.tags && msg.tags.historical && msg.tags['room-id'] != this.get('roomProperties._id') )
+				return;
+
 
 			// Keep the history.
 			if ( ! is_whisper && msg.from && msg.from !== 'jtv' && msg.from !== 'twitchnotify' && f.settings.mod_card_history ) {

src/main.js

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

src/styles/badges-legacy-mod.css

@@ -1,4 +1,9 @@
-.badges .moderator {
+.badges .moderator:not(.colored) {
 	background-color: #068c10;
 	background-image: url('//cdn.frankerfacez.com/script/legacy-mod.png');
 }
+
+.badges .moderator.colored {
+	background: linear-gradient(#068c10,#068c10);
+	-webkit-mask-image: url('//cdn.frankerfacez.com/script/legacy-mod.png');
+}

src/styles/badges-legacy-turbo.css

@@ -1,4 +1,9 @@
-.badges .turbo {
+.badges .turbo:not(.colored) {
 	background-color: #6441a3;
 	background-image: url('//cdn.frankerfacez.com/script/legacy-turbo.png');
 }
+
+.badges .turbo.colored {
+	background: linear-gradient(#6441a3,#6441a3);
+	-webkit-mask-image: url('//cdn.frankerfacez.com/script/legacy-turbo.png');
+}

src/styles/badges-legacy.css

@@ -1,14 +1,29 @@
-.badges .staff {
+.badges .staff:not(.colored) {
 	background-color: #6441a5;
 	background-image: url('//cdn.frankerfacez.com/script/legacy-staff.png');
 }
 
-.badges .broadcaster {
+.badges .staff.colored {
+	background: linear-gradient(#6441a5,#6441a5);
+	-webkit-mask-image: url('//cdn.frankerfacez.com/script/legacy-staff.png');
+}
+
+.badges .broadcaster:not(.colored) {
 	background-color: #000;
 	background-image: url('//cdn.frankerfacez.com/script/legacy-broadcaster.png');
 }
 
-.badges .admin {
+.badges .broadcaster.colored {
+	background: linear-gradient(#e71818,#e71818);
+	-webkit-mask-image: url('//cdn.frankerfacez.com/script/legacy-broadcaster.png');
+}
+
+.badges .admin:not(.colored) {
 	background-color: #ff0303;
 	background-image: url('//cdn.frankerfacez.com/script/legacy-admin.png');
 }
+
+.badges .admin.colored {
+	background: linear-gradient(#ff0303,#ff0303);
+	-webkit-mask-image: url('//cdn.frankerfacez.com/script/legacy-admin.png');
+}

src/styles/badges-transparent.css

@@ -10,13 +10,12 @@
 .force-dark .badge.invert-invert,
 .badge:not(.no-invert):not(.invert-invert) {
 	filter: invert(75%);
-	-webkit-filter: invert(75%);
 }
 
+.badge.colored,
 .ffz-dark .badge:not(.invert-invert),
 .theatre .badge:not(.invert-invert),
 .dark .badge:not(.invert-invert),
 .force-dark .badge:not(.invert-invert) {
 	filter: none !important;
-	-webkit-filter: none !important;
 }

src/tokenize.js

@@ -352,7 +352,8 @@ FFZ.prototype.load_twitch_emote_data = function(tries) {
 			this._twitch_set_to_channel[0] = "--global--";
 			this._twitch_set_to_channel[33] = "--turbo-faces--";
 			this._twitch_set_to_channel[42] = "--turbo-faces--";
-			this._twitch_set_to_channel[19194] = "prime";
+			this._twitch_set_to_channel[19194] = "--prime--";
+			this._twitch_set_to_channel[19151] = "--curse--";
 
 		}).fail(function(data) {
 			if ( data.status === 404 )

src/ui/menu.js

@@ -42,17 +42,25 @@ FFZ.prototype.setup_menu = function() {
 	document.body.classList.toggle("ffz-menu-replace", this.settings.replace_twitch_menu);
 
 	// Add FFZ to the chat settings menu.
+	this.update_views('component:chat/chat-settings-menu', this.modify_chat_settings_menu);
 
-	this.log("Hooking the Ember Chat Settings view.");
+	// Maximum Menu Height
+	var Layout = utils.ember_lookup('service:layout');
+	if ( Layout )
+		Layout.addObserver('windowHeight', function() {
+			var el = document.querySelector('.ember-chat .chat-settings');
+			if ( el )
+				el.style.maxHeight = (Layout.get('windowHeight') - 90) + 'px';
+		});
 
-	var Settings = utils.ember_resolve('component:chat/chat-settings-menu'),
+}
-		Layout = utils.ember_lookup('service:layout'),
-		f = this;
 
-	if ( ! Settings )
-		return;
 
-	utils.ember_reopen_view(Settings, {
+FFZ.prototype.modify_chat_settings_menu = function(component) {
+	var f = this,
+		Layout = utils.ember_lookup('service:layout');
+
+	utils.ember_reopen_view(component, {
 		ffz_init: function() {
 			var view = this,
 				el = this.get('element');
@@ -134,39 +142,6 @@ FFZ.prototype.setup_menu = function() {
 			}
 		}
 	});
-
-	// Maximum height~!
-	if ( Layout )
-		Layout.addObserver('windowHeight', function() {
-			var el = document.querySelector('.ember-chat .chat-settings');
-			if ( el )
-				el.style.maxHeight = (Layout.get('windowHeight') - 90) + 'px';
-		});
-
-
-	// For some reason, this doesn't work unless we create an instance of the
-	// chat settings view and then destroy it immediately.
-	try {
-		Settings.create().destroy();
-	} catch(err) { }
-
-	// Modify all existing Chat Settings views.
-	var views = utils.ember_views();
-	for(var key in views) {
-		if ( ! views.hasOwnProperty(key) )
-			continue;
-
-		var view = views[key];
-		if ( !(view instanceof Settings) )
-			continue;
-
-		this.log("Manually updating existing Chat Settings view.", view);
-		try {
-			view.ffzInit();
-		} catch(err) {
-			this.error("setup: ChatSettings ffzInit: " + err);
-		}
-	}
 }
 
 

src/ui/my_emotes.js

@@ -82,7 +82,8 @@ FFZ.prototype.setup_my_emotes = function() {
 	this._twitch_badges = {};
 	this._twitch_badges["--global--"] = "//cdn.frankerfacez.com/script/twitch_logo.png";
 	this._twitch_badges["--turbo-faces--"] = this._twitch_badges["turbo"] = "//cdn.frankerfacez.com/script/turbo_badge.png";
-	this._twitch_badges["--prime-faces--"] = this._twitch_badges["prime"] = "//cdn.frankerfacez.com/badges/twitch/premium/1/1.png";
+	this._twitch_badges["--prime-faces--"] = this._twitch_badges["--prime--"] = "//cdn.frankerfacez.com/badges/twitch/premium/1/1.png";
+	this._twitch_badges["--curse--"] = "//cdn.frankerfacez.com/script/curse_logo.png";
 }
 
 
@@ -191,6 +192,10 @@ FFZ.menu_pages.myemotes = {
 			if ( ! twitch_sets.hasOwnProperty(set_id) || ( ! this.settings.global_emotes_in_menu && set_id === '0' ) )
 				continue;
 
+			// Skip the Twitch Turbo set if we have Twitch Prime. They're identical.
+			if ( set_id == 793 && twitch_sets.hasOwnProperty(19194) )
+				continue;
+
 			var favorites_list = this.settings.favorite_emotes["twitch-" + set_id];
 			if ( favorites_only && (! favorites_list || ! favorites_list.length) )
 				continue;
@@ -241,14 +246,14 @@ FFZ.menu_pages.myemotes = {
 		// Finally, sort and add them all.
 		sets.sort(function(a,b) {
 			var an = a[0], bn = b[0];
-			if ( an === "prime" || an === "--prime-faces--" || an === "turbo" || an === "--turbo-faces--" )
+			if ( an === "--curse--" || an === "--prime--" || an === "--prime-faces--" || an === "turbo" || an === "--turbo-faces--" )
 				an = "zza|" + an;
 			else if ( an === "global" || (an && an.substr(0,16) === "global emoticons") || an === "--global--" )
 				an = "zzy|" + an;
 			else if ( an && an.substr(0,5) === "emoji" )
 				an = "zzz|" + an;
 
-			if ( bn === "prime" || bn === "--prime-faces--" || bn === "turbo" || bn === "--turbo-faces--" )
+			if ( bn === "--curse--" || bn === "--prime--" || bn === "--prime-faces--" || bn === "turbo" || bn === "--turbo-faces--" )
 				bn = "zza|" + bn;
 			else if ( bn === "global" || (bn && bn.substr(0,16) === "global emoticons") || bn === "--global--" )
 				bn = "zzy|" + bn;
@@ -403,8 +408,10 @@ FFZ.menu_pages.myemotes = {
 				title = "Global Emoticons";
 			else if ( channel_id === "turbo" || channel_id === "--turbo-faces--" )
 				title = "Twitch Turbo";
-			else if ( channel_id === "prime" || channel_id === "--prime-faces--" )
+			else if ( channel_id === "--prime--" || channel_id === "--prime-faces--" )
 				title = "Twitch Prime";
+			else if ( channel_id === "--curse--" )
+				title = "Curse Emoticons";
 			else
 				title = FFZ.get_capitalization(channel_id, function(name) {
 					heading.innerHTML = '<span class="right">Twitch</span>' + utils.sanitize(name);

src/utils.js

@@ -899,9 +899,30 @@ module.exports = FFZ.utils = {
 
 	badge_css: function(badge, klass) {
 		klass = klass || ('ffz-badge-' + badge.id);
-		var out = ".badges ." + klass + " { background-color: " + badge.color + '; background-image: url("' + badge.image + '"); ' + (badge.css || "") + '}';
+		var out = ".badges ." + klass + (badge.no_color ? ":not(.colored)" : "") + " { background-color: " + badge.color + '; background-image: url("' + badge.image + '"); ' + (badge.css || "") + '}';
+		if ( ! badge.no_color )
+			out += ".badges ." + klass + ".colored { background: linear-gradient(" + badge.color + "," + badge.color + '); -webkit-mask-image: url("' + badge.image + '"); ' + (badge.css || "") + '}';
 		if ( badge.alpha_image )
 			out += ".badges .badge.alpha." + klass + ",.ffz-transparent-badges .badges ." + klass + ' { background-image: url("' + badge.alpha_image + '"); }';
 		return out;
+	},
+
+	cdn_badge_css: function(badge_id, version, data) {
+		var color = data.color,
+			base_image = data.image || ("https://cdn.frankerfacez.com/badges/twitch/" + badge_id + (data.use_svg ? '.svg' : "/" + version + "/")),
+			is_svg = base_image.substr(-4) === '.svg',
+			image_1x = base_image + (is_svg ? '' : "1.png"),
+			image_2x = base_image + (is_svg ? '' : "2.png"),
+			image_4x = base_image + (is_svg ? '' : "4.png");
+
+		return '.badge.' + badge_id + '.version-' + version + (data.no_color ? '' : ':not(.colored)') + ' {' +
+				'background: url("' + image_1x + '") ' + color + ';' +
+				(is_svg ? '}' : 'background-image: -webkit-image-set(url("' + image_1x + '") 1x, url("' + image_2x + '") 2x, url("' + image_4x + '") 4x);' +
+				'background-image: image-set(url("' + image_1x + '") 1x, url("' + image_2x + '") 2x, url("' + image_4x + '") 4x); }') +
+			(data.no_color ? '' : '.badge.' + badge_id + '.version-' + version + '.colored {' +
+				'background: linear-gradient(' + color + ',' + color + ');' +
+				(is_svg ? '-webkit-mask-size: 18px 18px;mask-size: 18px 18px' : '') +
+				'-webkit-mask-image: url("' + image_1x + '");' +
+				'mask-image: url("' + image_1x + '");}');
 	}
 }

style.css

@@ -64,13 +64,13 @@ body:not(.ffz-show-bits-tags) .bits-tag--container,
 	top: -220px !important;
 }
 
-.ffz-channel-bar-bottom .cn-bar {
+.ffz-channel-bar-bottom .cn-bar-fixed {
 	top: auto;
 	bottom: 0;
 	box-shadow: inset 0 1px 0 #e5e3e8,0 -1px -1px rgba(0,0,0,.065);
 }
 
-.ffz-dark.ffz-channel-bar-bottom .cn-bar {
+.ffz-dark.ffz-channel-bar-bottom .cn-bar-fixed {
 	box-shadow: inset 0 1px 0 #161616, -1px -1px rgba(255,255,255,0.065);
 }
 
@@ -278,8 +278,8 @@ body.ffz-bttv-dark .ffz-ui-toggle.blue.live:hover svg.svg-emoticons path { fill:
 
 /* Theater Mode hover bar */
 
-.ffz-theater-stats .app-main.theatre .player-userinfo__game,
+.ffz-theater-basic-stats .app-main.theatre .player-userinfo__game,
-.ffz-theater-stats .app-main.theatre .player-controls-top {
+.ffz-theater-basic-stats .app-main.theatre .player-controls-top {
 	display: block
 }
 
@@ -602,13 +602,13 @@ body.ffz-bttv-dark .ffz-ui-toggle.blue.live:hover svg.svg-emoticons path { fill:
     padding: 10px 20px;
 }
 
-.suggestion.ffz-is-favorite,
+.suggestion.ffz-favorite,
 .emoticon.ffz-favorite { position: relative; }
 
 .favorites-grid:not(:empty) + .ffz-no-emotes,
 .favorites-grid .emoticon.ffz-favorite:before { display: none }
 
-.suggestion.ffz-is-favorite:before,
+.suggestion.ffz-favorite:before,
 .emoticon.ffz-favorite:before {
     content: "";
     display: block;
@@ -618,7 +618,7 @@ body.ffz-bttv-dark .ffz-ui-toggle.blue.live:hover svg.svg-emoticons path { fill:
     background: url("//cdn.frankerfacez.com/script/emoticon_favorite.png") no-repeat;
 }
 
-.suggestion.ffz-is-favorite:before { right: 2.5px; bottom: 2.5px }
+.suggestion.ffz-favorite:before { right: 2.5px; bottom: 2.5px }
 
 .chat-menu.ffz-ui-popup .ffz-ui-menu-page .chat-menu-content.menu-side-padding { padding-left: 20px; padding-right: 20px; }
 
@@ -3057,13 +3057,44 @@ body:not(.ffz-creative-showcase) .ct-spotlight-container { display: none; }
 
 /* FFZ Suggestions */
 
-.ember-chat .chat-interface .suggestions.ffz-suggestions .suggestion {
+.ffz-dark .ffz-suggestions,
-    width: auto;
+.theatre .ffz-suggestions,
+.dark .ffz-suggestions,
+.force-dark .ffz-suggestions {
+	background-color: #101010 !important;
+	border-color: rgba(255,255,255,0.2) !important;
+}
+
+.conversation-input-bar .ffz-suggestions {
+	padding: 5px 0;
+	position: absolute;
+	bottom: 30px;
+	left: 6px;
+	width: 268px;
+	background-color: white;
+	border: 1px solid rgba(0,0,0,0.2);
+	background-clip: padding-box;
+	z-index: 100;
+}
+
+.conversation-input-bar .ffz-suggestions .suggestion {
+	padding: 0 10px;
+	line-height: 24px;
+	font-size: 12px;
+}
+
+.conversation-input-bar .ffz-suggestions .highlighted {
+	color: #fff;
+	background-color: #6441a4;
+}
+
+.suggestions.ffz-suggestions .suggestion {
+	width: auto !important;
 	background-repeat: no-repeat;
 	background-position: calc(100% - 10px) center;
 }
 
-.ember-chat .chat-interface .suggestions.ffz-suggestions .suggestion.has-info {
+.suggestions.ffz-suggestions .suggestion.has-info {
 	height: 40px;
 	line-height: 20px;
 	padding-top: 2px;
@@ -3089,7 +3120,7 @@ body:not(.ffz-creative-showcase) .ct-spotlight-container { display: none; }
 	font-size: 10px;
 }
 
-.ember-chat .chat-interface .suggestions.ffz-suggestions .suggestion.has-image:not(.has-info) {
+.suggestions.ffz-suggestions .suggestion.has-image:not(.has-info) {
 	line-height: 40px;
 }
 
@@ -3189,10 +3220,14 @@ body.ffz-bttv #ffz-feed-tabs .tabs { margin-bottom: 0 }
 
 /* Badges */
 
-.badges .badge { background-size: 18px 18px }
+.badges .badge {
+	background-size: 18px 18px !important;
+}
 
 .convoHeader .badges .badge {
-	background-size: 14px 14px;
+	background-size: 14px 14px !important;
+	-webkit-mask-size: 14px 14px;
+	mask-size: 14px 14px;
 }
 
 /*.badges .badge {
@@ -3252,48 +3287,83 @@ body.ffz-bttv #ffz-feed-tabs .tabs { margin-bottom: 0 }
 /* Odd Badges */
 .badge.click_url { cursor: pointer }
 
-.badge.premium.version-1 {
+/*.badge.premium.version-1:not(.colored) {
 	background: url("https://cdn.frankerfacez.com/badges/twitch/premium/1/1.png") #009cdc;
 	background-image: -webkit-image-set(url("https://cdn.frankerfacez.com/badges/twitch/premium/1/1.png") 1x, url("https://cdn.frankerfacez.com/badges/twitch/premium/1/2.png") 2x, url("https://cdn.frankerfacez.com/badges/twitch/premium/1/4.png") 4x);
 	background-image: image-set(url("https://cdn.frankerfacez.com/badges/twitch/premium/1/1.png") 1x, url("https://cdn.frankerfacez.com/badges/twitch/premium/1/2.png") 2x, url("https://cdn.frankerfacez.com/badges/twitch/premium/1/4.png") 4x);
 }
 
-.badge.bits.version-1 {
+.badge.premium.version-1.colored {
+	background: linear-gradient(#009cdc,#009cdc);
+	-webkit-mask-image: url("https://cdn.frankerfacez.com/badges/twitch/premium/1/1.png");
+}
+
+.badge.bits.version-1:not(.colored) {
 	background: url("https://cdn.frankerfacez.com/badges/twitch/bits/1/1.png") #cbc8d0;
 	background-image: -webkit-image-set(url("https://cdn.frankerfacez.com/badges/twitch/bits/1/1.png") 1x, url("https://cdn.frankerfacez.com/badges/twitch/bits/1/2.png") 2x, url("https://cdn.frankerfacez.com/badges/twitch/bits/1/4.png") 4x);
 	background-image: image-set(url("https://cdn.frankerfacez.com/badges/twitch/bits/1/1.png") 1x, url("https://cdn.frankerfacez.com/badges/twitch/bits/1/2.png") 2x, url("https://cdn.frankerfacez.com/badges/twitch/bits/1/4.png") 4x);
 }
 
-.badge.bits.version-100 {
+.badge.bits.version-1.colored {
+	background: linear-gradient(#cbc8d0,#cbc8d0);
+	-webkit-mask-image: url("https://cdn.frankerfacez.com/badges/twitch/bits/1/1.png");
+}
+
+.badge.bits.version-100:not(.colored) {
 	background: url("https://cdn.frankerfacez.com/badges/twitch/bits/100/1.png") #ca7eff;
 	background-image: -webkit-image-set(url("https://cdn.frankerfacez.com/badges/twitch/bits/100/1.png") 1x, url("https://cdn.frankerfacez.com/badges/twitch/bits/100/2.png") 2x, url("https://cdn.frankerfacez.com/badges/twitch/bits/100/4.png") 4x);
 	background-image: image-set(url("https://cdn.frankerfacez.com/badges/twitch/bits/100/1.png") 1x, url("https://cdn.frankerfacez.com/badges/twitch/bits/100/2.png") 2x, url("https://cdn.frankerfacez.com/badges/twitch/bits/100/4.png") 4x);
 }
 
-.badge.bits.version-1000 {
+.badge.bits.version-100.colored {
+	background: linear-gradient(#ca7eff,#ca7eff);
+	-webkit-mask-image: url("https://cdn.frankerfacez.com/badges/twitch/bits/100/1.png");
+}
+
+.badge.bits.version-1000:not(.colored) {
 	background: url("https://cdn.frankerfacez.com/badges/twitch/bits/1000/1.png") #3ed8b3;
 	background-image: -webkit-image-set(url("https://cdn.frankerfacez.com/badges/twitch/bits/1000/1.png") 1x, url("https://cdn.frankerfacez.com/badges/twitch/bits/1000/2.png") 2x, url("https://cdn.frankerfacez.com/badges/twitch/bits/1000/4.png") 4x);
 	background-image: image-set(url("https://cdn.frankerfacez.com/badges/twitch/bits/1000/1.png") 1x, url("https://cdn.frankerfacez.com/badges/twitch/bits/1000/2.png") 2x, url("https://cdn.frankerfacez.com/badges/twitch/bits/1000/4.png") 4x);
 }
 
-.badge.bits.version-5000 {
+.badge.bits.version-1000.colored {
+	background: linear-gradient(#3ed8b3,#3ed8b3);
+	-webkit-mask-image: url("https://cdn.frankerfacez.com/badges/twitch/bits/1000/1.png");
+}
+
+.badge.bits.version-5000:not(.colored) {
 	background: url("https://cdn.frankerfacez.com/badges/twitch/bits/5000/1.png") #49acff;
 	background-image: -webkit-image-set(url("https://cdn.frankerfacez.com/badges/twitch/bits/5000/1.png") 1x, url("https://cdn.frankerfacez.com/badges/twitch/bits/5000/2.png") 2x, url("https://cdn.frankerfacez.com/badges/twitch/bits/5000/4.png") 4x);
 	background-image: image-set(url("https://cdn.frankerfacez.com/badges/twitch/bits/5000/1.png") 1x, url("https://cdn.frankerfacez.com/badges/twitch/bits/5000/2.png") 2x, url("https://cdn.frankerfacez.com/badges/twitch/bits/5000/4.png") 4x);
 }
 
-.badge.bits.version-10000 {
+.badge.bits.version-5000.colored {
+	background: linear-gradient(#49acff,#49acff);
+	-webkit-mask-image: url("https://cdn.frankerfacez.com/badges/twitch/bits/5000/1.png");
+}
+
+.badge.bits.version-10000:not(.colored) {
 	background: url("https://cdn.frankerfacez.com/badges/twitch/bits/10000/1.png") #ff271e;
 	background-image: -webkit-image-set(url("https://cdn.frankerfacez.com/badges/twitch/bits/10000/1.png") 1x, url("https://cdn.frankerfacez.com/badges/twitch/bits/10000/2.png") 2x, url("https://cdn.frankerfacez.com/badges/twitch/bits/10000/4.png") 4x);
 	background-image: image-set(url("https://cdn.frankerfacez.com/badges/twitch/bits/10000/1.png") 1x, url("https://cdn.frankerfacez.com/badges/twitch/bits/10000/2.png") 2x, url("https://cdn.frankerfacez.com/badges/twitch/bits/10000/4.png") 4x);
 }
 
-.badge.bits.version-100000 {
+.badge.bits.version-10000.colored {
+	background: linear-gradient(#ff271e,#ff271e);
+	-webkit-mask-image: url("https://cdn.frankerfacez.com/badges/twitch/bits/10000/1.png");
+}
+
+.badge.bits.version-100000:not(.colored) {
 	background: url("https://cdn.frankerfacez.com/badges/twitch/bits/100000/1.png") #ffcb13;
 	background-image: -webkit-image-set(url("https://cdn.frankerfacez.com/badges/twitch/bits/100000/1.png") 1x, url("https://cdn.frankerfacez.com/badges/twitch/bits/100000/2.png") 2x, url("https://cdn.frankerfacez.com/badges/twitch/bits/100000/4.png") 4x);
 	background-image: image-set(url("https://cdn.frankerfacez.com/badges/twitch/bits/100000/1.png") 1x, url("https://cdn.frankerfacez.com/badges/twitch/bits/100000/2.png") 2x, url("https://cdn.frankerfacez.com/badges/twitch/bits/100000/4.png") 4x);
 }
 
+.badge.bits.version-100000.colored {
+	background: linear-gradient(#ffcb13,#ffcb13);
+	-webkit-mask-image: url("https://cdn.frankerfacez.com/badges/twitch/bits/100000/1.png");
+}*/
+
 /* New Resub Banner */
 
 .top-notification--resub {