3.5.472. Add new Verified badge. Add separate transparent image support for badges. Misc. minor bug fixes.

changelog.html

@@ -1,4 +1,17 @@
-<div class="list-header">3.5.471 <time datetime="2017-04-11">(2017-04-11)</time></div>
+<div class="list-header">3.5.472 <time datetime="2017-04-22">(2017-04-22)</time></div>
+<ul class="chat-menu-content menu-side-padding">
+	<li>Added: Support for the new Verified badge.</li>
+	<li>Changed: Add support for badges that have different images when rendered transparently.</li>
+	<li>Fixed: Add temporary fix for mod card and FFZ menu positioning until Twitch fixes their CSS.</li>
+	<li>Fixed: Unable to favorite some emoticons added through the API.</li>
+	<li>Fixed: Fetch Twitch Inventory correctly rather than guessing about which sets are inventory sets.</li>
+	<li>Fixed: Properly label Twitch Inventory sets in the tab completion UI.</li>
+	<li>Fixed: Update the favorited status of emotes in the tab completion UI when it is changed.</li>
+	<li>Fixed: Do not show <code>Channel: undefined</code> for emoticons from unknown sets. They might not be from a channel, and it looks bad.</li>
+	<li>Fixed: Link colors in the top navigation bar when using a bright color with the dark theme enabled.</li>
+</ul>
+
+<div class="list-header">3.5.471 <time datetime="2017-04-21">(2017-04-21)</time></div>
 <ul class="chat-menu-content menu-side-padding">
 	<li>Added: Friend Watching Notifications setting to show notifications when you get a message that a friend is also watching the same channel.</li>
 	<li>Added: Highlight Users setting to highlight all messages from specific users to tide people over until FFZv4.</li>
@@ -9,17 +22,17 @@
 	<li>Fixed: Don't re-enable gray mode if a user has it specifically disabled and they enable dark mode via the Twitch chat settings menu.</li>
 </ul>
 
-<div class="list-header">3.5.470 <time datetime="2017-04-11">(2017-04-11)</time></div>
+<div class="list-header">3.5.470 <time datetime="2017-04-20">(2017-04-20)</time></div>
 <ul class="chat-menu-content menu-side-padding">
 	<li>Changed: More improved wording for the ITAD popup.</li>
 </ul>
 
-<div class="list-header">3.5.469 <time datetime="2017-04-11">(2017-04-11)</time></div>
+<div class="list-header">3.5.469 <time datetime="2017-04-20">(2017-04-20)</time></div>
 <ul class="chat-menu-content menu-side-padding">
 	<li>Changed: Add a bit more nagging when trying to buy from ITAD when a streamer would be supported.</li>
 </ul>
 
-<div class="list-header">3.5.468 <time datetime="2017-04-11">(2017-04-11)</time></div>
+<div class="list-header">3.5.468 <time datetime="2017-04-20">(2017-04-20)</time></div>
 <ul class="chat-menu-content menu-side-padding">
 	<li>Changed: Improved the wording for the disclaimer on the ITAD popup.</li>
 </ul>
@@ -53,10 +66,5 @@
 	<li>Added: Improved compatibility with BetterTTV v7 (aka the beta)</li>
 </ul>
 
-<div class="list-header">3.5.462 <time datetime="2017-04-08">(2017-04-08)</time></div>
-<ul class="chat-menu-content menu-side-padding">
-	<li>Fixed: Rendering of <code>system-msg</code> tags that contain template strings or other nonsense that Twitch, for some reason, isn't just putting in the message itself and is making the client reconstruct from tags.</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.462 <time datetime="2017-04-08">(2017-04-08)</time></div>
+<ul class="chat-menu-content menu-side-padding">
+	<li>Fixed: Rendering of <code>system-msg</code> tags that contain template strings or other nonsense that Twitch, for some reason, isn't just putting in the message itself and is making the client reconstruct from tags.</li>
+</ul>
+
 <div class="list-header">3.5.461 <time datetime="2017-04-08">(2017-04-08)</time></div>
 <ul class="chat-menu-content menu-side-padding">
 	<li>Fixed: Potential infinite loop in new prefix detection code.</li>

src/badges.js

@@ -3,7 +3,7 @@ var FFZ = window.FrankerFaceZ,
 	utils = require('./utils'),
 
 	SPECIAL_BADGES = ['staff', 'admin', 'global_mod'],
-	OTHER_KNOWN = ['turbo', 'bits', 'premium'],
+	OTHER_KNOWN = ['turbo', 'bits', 'premium', 'partner'],
 
 	CSS_BADGES = {
 		staff: { 1: { color: "#200f33", use_svg: true } },
@@ -12,6 +12,7 @@ var FFZ = window.FrankerFaceZ,
 		broadcaster: { 1: { color: "#e71818", use_svg: true } },
 		moderator: { 1: { color: "#34ae0a", use_svg: true } },
 		twitchbot: { 1: { color: "#34ae0a" } },
+		partner: { 1: { color: "transparent", has_trans: true, trans_color: "#6441a5" } },
 
 		turbo: { 1: { color: "#6441a5", use_svg: true } },
 		premium: { 1: { color: "#009cdc" } },
@@ -271,7 +272,8 @@ FFZ.settings_info.transparent_badges = {
 		this.toggle_style('badges-blank', val === 3 || val === 4);
 		this.toggle_style('badges-circular-small', val === 4);
 		this.toggle_style('badges-transparent', val >= 5);
-		document.body.classList.toggle('ffz-transparent-badges', val >= 5);
+		utils.toggle_cls('ffz-transparent-badges')(val >= 5);
+		utils.toggle_cls('ffz-blank-badges')(val === 3 || val === 4);
 
 		// Update existing chat lines.
 		var CL = utils.ember_resolve('component:chat/chat-line'),
@@ -311,6 +313,7 @@ FFZ.prototype.setup_badges = function() {
 		this.toggle_style('badges-transparent', val >= 5);
 
 		utils.toggle_cls('ffz-transparent-badges')(val >= 5);
+		utils.toggle_cls('ffz-blank-badges')(val === 3 || val === 4);
 		utils.toggle_cls('ffz-no-loyalty')(!this.settings.loyalty_badges);
 	}
 

src/ember/chat-input.js

@@ -783,7 +783,7 @@ FFZ.prototype.modify_chat_input = function(component) {
 				room_id = room && room.get('id'),
 				tmi = in_conversation ? window.TMI && TMI._sessions && TMI._sessions[0] : room && room.tmiSession,
 
-				set_name, replacement, url, is_sub_set, fav_list,
+				set_name, replacement, url, is_inventory, is_sub_set, fav_list,
 				emote_set, emote, emote_id, code, sort_factor, is_fav,
 				prefix_length, per_pref,
 
@@ -801,13 +801,17 @@ FFZ.prototype.modify_chat_input = function(component) {
 				if ( es && es.emoticon_sets ) {
 					for(var set_id in es.emoticon_sets) {
 						emote_set = es.emoticon_sets[set_id];
-						fav_list = f.settings.favorite_emotes['twitch-' + set_id] || [];
+						is_inventory = f._twitch_inventory_sets.indexOf(set_id) !== -1;
+						fav_list = f.settings.favorite_emotes['twitch-' + (is_inventory ? 'inventory' : set_id)] || [];
 						is_sub_set = false;
 						set_name = f._twitch_set_to_channel[set_id];
 						if ( ! emote_set )
 							continue;
 
-						if ( set_name ) {
+						if ( is_inventory )
+							set_name = 'Twitch Inventory';
+
+						else if ( set_name ) {
 							if ( set_name === '--global--' )
 								set_name = 'Twitch Global';
 							else if ( set_name === '--twitch-turbo--' || set_name === 'turbo' || set_name === '--turbo-faces--' )
@@ -826,7 +830,7 @@ FFZ.prototype.modify_chat_input = function(component) {
 							continue;
 
 						prefix_length = f.settings.input_complete_without_prefix && is_sub_set ? utils.find_common_prefix(_.pluck(emote_set, 'code'), true) : 0;
-						sort_factor = is_sub_set ? 1 : 9;
+						sort_factor = is_sub_set ? 1 : is_inventory ? 8 : 9;
 
 						for(var i = 0; i < emote_set.length; i++) {
 							emote = emote_set[i];

src/ember/moderation-card.js

@@ -1485,11 +1485,17 @@ FFZ.prototype.modify_moderation_card = function(component) {
 				room_id = Chat && Chat.get('currentRoom.id'),
 				user_id = this.get('cardInfo.user.id'),
 				ffz_room = f.rooms && f.rooms[room_id],
-				chat_history = ffz_room && ffz_room.user_history && ffz_room.user_history[user_id] || [],
+				chat_history = ffz_room && ffz_room.user_history ? (ffz_room.user_history[user_id] || []) : null,
 
 				el = this.get('element'),
 				history = el.querySelector('.chat-history.live-history');
 
+			if ( chat_history === null ) {
+				if ( history )
+					jQuery(history).remove();
+				return;
+			}
+
 			if ( ! history ) {
 				history = utils.createElement('ul', 'moderation-card__actions chat-history live-history');
 				el.appendChild(history);

src/ember/sidebar.js

@@ -221,10 +221,13 @@ FFZ.settings_info.top_nav_color = {
 		var out = '.top-nav__menu,.top-nav__drawer-anchor,.top-nav__logo{background-color:' + val + '}';
 
 		if ( color.luminance() > 0.2 ) {
-			out += '.top-nav .notification-center__icon svg,.top-nav .prime-logo-crown.prime-logo-crown--white svg,.top-nav__logo svg path, .top-nav__overflow svg path{fill: #000}' +
+			out += '.top-nav__search .form__icon svg,.top-nav .notification-center__icon svg,.top-nav .prime-logo-crown.prime-logo-crown--white svg,.top-nav__logo svg path, .top-nav__overflow svg path{fill: #000}' +
 				'.top-nav__user-card:after{border-top-color:#000}' +
-				'.top-nav__user-status,.top-nav__nav-link{color: #111}' +
+				'.top-nav__nav-link .pill{background-color:rgba(0,0,0,0.2)}' +
-				'.top-nav #user_display_name,.top-nav__nav-link:hover{color: #000}';
+				'.top-nav__user-status,.ffz-dark .top-nav__nav-link,.top-nav__nav-link{color: #111!important}' +
+				'.top-nav__nav-link .ffz-follow-count,.top-nav #user_display_name,.ffz-dark .top-nav__nav-link:hover,.top-nav__nav-link:hover{color: #000!important}' +
+				'.ffz-dark .top-nav__search .form__input[type=text],.top-nav__search .form__input[type=text]{color:#000;background-color:rgba(0,0,0,0.05);box-shadow:rgba(0,0,0,0.2) 0 0 0 1px inset}' +
+				'.ffz-dark .top-nav__search .form__input[type=text]:focus,.top-nav__search .form__input[type=text]:focus{box-shadow:rgba(0,0,0,0.4) 0 0 0 1px inset}';
 		} else
 			out += '.top-nav__nav-link{color: #d7d7d7}';
 

src/emoticons.js

@@ -78,6 +78,43 @@ FFZ.prototype.setup_emoticons = function() {
 
 	this.log("Watching Twitch emoticon parser to ensure it loads.");
 	this._twitch_emote_check = setTimeout(this.check_twitch_emotes.bind(this), 10000);
+
+	this._twitch_inventory_sets = [];
+	this.refresh_twitch_inventory();
+}
+
+
+FFZ.prototype.refresh_twitch_inventory = function() {
+	var f = this;
+	return new Promise(function(succeed) {
+		var o = [],
+			user = f.get_user();
+
+		if ( ! user ) {
+			f._twitch_inventory_sets = o;
+			return succeed(o);
+		}
+
+		utils.api.get("/v5/inventory/emoticons", null, {version: 5}, user.chat_oauth_token)
+				.done(function(data) {
+
+			o = Object.keys(data.emoticon_sets || {});
+
+			for(var i=0; i < o.length; i++) {
+				var set_id = o[i],
+					emotes = data.emoticon_sets[set_id];
+				for(var j=0; j < emotes.length; j++)
+					f._twitch_emote_to_set[emotes[j].id] = set_id;
+			}
+
+			f._twitch_inventory_sets = o;
+			return succeed(o);
+
+		}).fail(function() {
+			f._twitch_inventory_sets = o;
+			return succeed(o);
+		});
+	});
 }
 
 
@@ -121,7 +158,7 @@ FFZ.prototype._click_emote = function(target, event) {
 	if ( ! target || ! target.classList.contains('emoticon') )
 		return;
 
-	if ( event && ((!IS_OSX && event.ctrlKey) || (IS_OSX && event.metaKey)) ) {
+	if ( event && ! event.shiftKey && ! event.shiftLeft && ((!IS_OSX && event.ctrlKey) || (IS_OSX && event.metaKey)) ) {
 		var eid, favorite_key;
 
 		if ( target.classList.contains('emoji') ) {
@@ -139,27 +176,21 @@ FFZ.prototype._click_emote = function(target, event) {
 			if ( eid ) {
 				eid = parseInt(eid);
 				var twitch_set = this._twitch_emote_to_set[eid];
-				if ( twitch_set ) {
+				if ( twitch_set )
-					var Chat = utils.ember_lookup('controller:chat'),
+					if ( this._twitch_inventory_sets.indexOf(twitch_set) !== -1 )
-						tmi = Chat && Chat.get('currentRoom.tmiSession'),
+						favorite_key = 'twitch-inventory';
-						twitch_sets = (tmi && tmi.getEmotes() || {'emoticon_sets': {}})['emoticon_sets'];
+					else
-
+						favorite_key = 'twitch-' + twitch_set;
-					if ( twitch_sets[twitch_set] ) {
-						var set = twitch_sets[twitch_set];
-						if ( set.length === 1 && ! this._twitch_set_to_channel[twitch_set] )
-							favorite_key = 'twitch-inventory';
-						else
-							favorite_key = 'twitch-' + twitch_set;
-					}
-				}
 
 			} else {
-				eid = parseInt(target.getAttribute('data-ffz-emote'));
+				eid = target.getAttribute('data-ffz-emote');
 				var set_id = target.getAttribute('data-ffz-set'),
 					emote_set = set_id && this.emote_sets[set_id];
 
-				if ( emote_set && emote_set.emoticons && emote_set.emoticons[eid] )
+				if ( emote_set && emote_set.emoticons && emote_set.emoticons[eid] ) {
-					favorite_key = 'ffz-' + (emote_set.hasOwnProperty('source_ext') ? 'ext-' + emote_set.source_ext + '-' + set.source_id : set_id);
+					favorite_key = 'ffz-' + (emote_set.hasOwnProperty('source_ext') ? 'ext-' + emote_set.source_ext + '-' + emote_set.source_id : set_id);
+					eid = emote_set.emoticons[eid].id || eid;
+				}
 			}
 		}
 
@@ -174,6 +205,7 @@ FFZ.prototype._click_emote = function(target, event) {
 
 			this.settings.set("favorite_emotes", this.settings.favorite_emotes, true);
 			jQuery(target).trigger('mouseout').trigger('mouseover');
+			this._inputv && this._inputv.propertyDidChange('ffz_emoticons');
 		}
 
 		return true;

src/main.js

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

src/tokenize.js

@@ -483,17 +483,10 @@ FFZ.prototype.render_tooltip = function(el) {
 					emote_set = set_id && f._twitch_set_to_channel[set_id];
 
 					var set_type = "Channel",
-						favorite_key = 'twitch-' + set_id,
+						favorite_key = 'twitch-' + set_id;
 
-						Chat = utils.ember_lookup('controller:chat'),
+					if ( f._twitch_inventory_sets.indexOf(set_id) !== -1 )
-						tmi = Chat && Chat.get('currentRoom.tmiSession'),
+						favorite_key = 'twitch-inventory';
-						twitch_sets = (tmi && tmi.getEmotes() || {'emoticon_sets': {}})['emoticon_sets'];
-
-					if ( ! emote_set && twitch_sets[set_id] ) {
-						var set = twitch_sets[set_id];
-						if ( set.length === 1 )
-							favorite_key = 'twitch-inventory';
-					}
 
 					var favorites = set_id && f.settings.favorite_emotes[favorite_key] || [],
 						is_favorite = ! can_favorite && favorites.indexOf(parseInt(emote_id)) !== -1;
@@ -514,10 +507,12 @@ FFZ.prototype.render_tooltip = function(el) {
 						set_type = null;
 					}
 
-					if ( this.classList.contains('ffz-tooltip-no-credit') )
+					var no_credit = this.classList.contains('ffz-tooltip-no-credit'),
-						return (is_favorite ? FAV_MARKER : '') + image + utils.sanitize(this.alt) + mod_text;
+						no_set = ! emote_set || no_credit;
-					else
+
-						return (is_favorite ? FAV_MARKER : '') + image + 'Emoticon: ' + utils.sanitize(this.alt) + '<br>' + (set_type ? set_type + ': ' : '') + emote_set + mod_text;
+					return (is_favorite ? FAV_MARKER : '') + image + (no_credit ? '' : 'Emoticon: ') +
+						utils.sanitize(this.alt) + (no_set ? '' : '<br>' + (set_type ? set_type + ': ' : '') + emote_set) +
+						mod_text;
 						//return `${image}Emoticon: ${this.alt}<br>${set_type ? set_type + ": " : ""}${emote_set}`;
 				}
 

src/ui/menu.js

@@ -757,6 +757,7 @@ FFZ.prototype._add_emote = function(view, emote, favorites_set, favorites_key, e
 				favs.push(favorites_key);
 
 			this.settings.set("favorite_emotes", this.settings.favorite_emotes, true);
+			this._inputv && this._inputv.propertyDidChange('ffz_emoticons');
 
 			if ( el.classList.contains('ffz-is-favorite') && is_favorited ) {
 				jQuery(el).trigger('mouseout');

src/ui/my_emotes.js

@@ -213,16 +213,18 @@ FFZ.menu_pages.myemotes = {
 			if ( ! set.length )
 				continue;
 
-			var raw_id = this._twitch_set_to_channel[set_id],
+			if ( this._twitch_inventory_sets.indexOf(set_id) !== -1 ) {
-				menu_id = raw_id ? raw_id.toLowerCase() : 'unknown';
+				for(var i=0; i < set.length; i++)
+					if ( ! favorites_only || gathered_favorites.indexOf(set[i].id) !== -1 )
+						gathered_emotes.push(set[i]);
 
-			if ( set.length === 1 && ! raw_id ) {
-				if ( ! favorites_only || gathered_favorites.indexOf(set[0].id) !== -1 )
-					gathered_emotes.push(set[0]);
 				continue;
 			}
 
-			var favorites_list = this.settings.favorite_emotes["twitch-" + set_id];
+			var raw_id = this._twitch_set_to_channel[set_id],
+				menu_id = raw_id ? raw_id.toLowerCase() : 'unknown',
+				favorites_list = this.settings.favorite_emotes["twitch-" + set_id];
+
 			if ( favorites_only && (! favorites_list || ! favorites_list.length) )
 				continue;
 

src/utils.js

@@ -1185,28 +1185,47 @@ module.exports = FFZ.utils = {
 	},
 
 	cdn_badge_css: function(badge_id, version, data, room) {
-		var color = data.color,
+		var color = data.color || 'transparent',
-			base_image = data.image || ("https://cdn.frankerfacez.com/badges/twitch/" + badge_id + (data.use_svg ? '.svg' : "/" + version + "/")),
+			ht = data.has_trans,
-			is_svg = base_image.substr(-4) === '.svg',
+			trans_color = data.trans_color || color,
-			image_1x = base_image + (is_svg ? '' : "1.png"),
-			image_2x = base_image + (is_svg ? '' : "2.png"),
-			image_4x = base_image + (is_svg ? '' : "4.png"),
 
-			image_set = image = 'url("' + image_1x + '")';
+			base_image = data.image || ("https://cdn.frankerfacez.com/badges/twitch/" + badge_id + (data.use_svg ? '.svg' : "/" + version + "/")),
+			base_trans = ht ? (data.trans_image || ("https://cdn.frankerfacez.com/badges/twitch/" + badge_id + (data.trans_svg ? '.svg' : '/' + version + '/'))) : base_image,
+
+			is_svg = base_image.substr(-4) === '.svg',
+			trans_svg = base_trans.substr(-4) === '.svg',
+
+			image_set = image = 'url("' + base_image + (is_svg ? '' : "1.png") + '")',
+			trans_set = trans = 'url("' + base_trans + (trans_svg ? '' : '1_trans.png') + '")',
+
+			selector = '.badge.' + badge_id + '.version-' + version + (room ? '[data-room="' + room + '"]' : '');
 
 		if ( ! is_svg )
 			image_set = WEBKIT + 'image-set(' + image +
-				' 1x, url("' + image_2x + '") 2x, url("' + image_4x + '") 4x)';
+				' 1x, url("' + base_image + (is_svg ? '' : '2.png') +
+				'") 2x, url("' + base_image + (is_svg ? '' : '4.png') + '") 4x)';
 
-		return '.badge.' + badge_id + '.version-' + version + (room ? '[data-room="' + room + '"]' : '') + (data.no_color ? '' : ':not(.colored)') + '{' +
+		if ( ! trans_svg )
+			trans_set = WEBKIT + 'image-set(' + trans +
+				' 1x, url("' + base_trans + (trans_svg ? '' : '2_trans.png') +
+				'") 2x, url("' + base_trans + (trans_svg ? '' : '4_trans.png') + '") 4x)';
+
+		return selector + (data.no_color ? '' : ':not(.colored)') + '{' +
 				'background:' + image + ' ' + color + ';' +
 				(is_svg ? '}' : 'background-image:' + image_set + '}' ) +
 
-			(data.no_color ? '' : '.badge.' + badge_id + '.version-' + version + (room ? '[data-room="' + room + '"]' : '') + '.colored{' +
+			(ht ? '.ffz-transparent-badges ' + selector + '{' +
-				'background: linear-gradient(' + color + ',' + color + ');' +
+				'background:' + trans + ';' +
+				(trans_svg ? '}' : 'background-image:' + trans_set + '}') : '') +
+
+			(color === 'transparent' && ht ? '.ffz-blank-badges ' + selector + '{' +
+				'background:' + trans_color + '}' : '') +
+
+			(data.no_color ? '' : selector + '.colored{' +
+				'background: linear-gradient(' +  (ht ? trans_color + ',' + trans_color : color + ',' + color) + ');' +
 				(is_svg ? WEBKIT + 'mask-size:18px 18px;' : '') +
-				WEBKIT + 'mask-image:' + image + ';' +
+				WEBKIT + 'mask-image:' + (ht ? trans : image) + ';' +
-				(is_svg ? '}' : WEBKIT + 'mask-image:' + image_set + '}')
+				((ht ? trans_svg : is_svg) ? '}' : WEBKIT + 'mask-image:' + (ht ? trans_set : image_set) + '}')
 			);
 	},
 

style.css

@@ -4132,4 +4132,38 @@ body.ffz-sidebar-swap .app-main.theatre #main_col:not(.expandRight) #player[data
 }
 
 .itad-balloon table th:not(:first-child),
-.itad-balloon table td:not(:first-child) { text-align: right }
+.itad-balloon table td:not(:first-child) { text-align: right }
+
+
+/*
+        H O T  *  G A R B A G E
+
+ ___/-\___     ___/-\___     ___/-\___
+|---------|   |---------|   |---------|
+ |       |     | | | | |     |   |   |
+ |       |     | | | | |     | | | | |
+ |       |     | | | | |     | | | | |
+ | | | | |     | | | | |     | | | | |
+ |_______|     |_______|     |_______|
+
+*/
+
+#ffz-chat-menu.ui-draggable-dragging {
+	height: auto !important;
+	width: auto !important;
+	background: transparent;
+	border: none;
+	padding: 0;
+	display: block;
+	max-width: inherit;
+}
+
+.moderation-card.ui-draggable-dragging {
+	position: fixed;
+	height: auto !important;
+	width: auto !important;
+	background: black;
+	padding: 0;
+	display: block;
+	max-width: 340px;
+}