3.5.377. Rewrite bits emoticon handling to support the new multiple prefixes code. Add an option to disable loyalty badges. Fix default sub badges not rendering.

changelog.html

@@ -1,3 +1,20 @@
+<div class="list-header">3.5.377 <time datetime="2016-11-21">(2016-11-21)</time></div>
+<ul class="chat-menu-content menu-side-padding">
+	<li>Fixed: Group bits emoticons in chat based on their prefix rather than as one single lump.</li>
+	<li>Fixed: Properly generate CSS for bits emoticons with every possible prefix.</li>
+</ul>
+
+<div class="list-header">3.5.376 <time datetime="2016-11-21">(2016-11-21)</time></div>
+<ul class="chat-menu-content menu-side-padding">
+	<li>Fixed: Cheers aren't working yet, but they also don't break chat completely.</li>
+</ul>
+
+<div class="list-header">3.5.375 <time datetime="2016-11-21">(2016-11-21)</time></div>
+<ul class="chat-menu-content menu-side-padding">
+	<li>Added: Option to disable subscriber loyalty badges in favor of displaying the lowest tier for all subscribers.</li>
+	<li>Fixed: Default subscriber badge not rendering for partnered channels without a custom subscriber badge set.</li>
+</ul>
+
 <div class="list-header">3.5.374 <time datetime="2016-11-20">(2016-11-20)</time></div>
 <ul class="chat-menu-content menu-side-padding">
 	<li>Fixed: Clicking a username in a ban notice would not open a mod card.</li>
@@ -63,11 +80,5 @@
 	<li>Fixed: Emergency fix to stop Pinned Cheers from breaking FFZ.</li>
 </ul>
 
-<div class="list-header">3.5.364 <time datetime="2016-11-08">(2016-11-08)</time></div>
-<ul class="chat-menu-content menu-side-padding">
-	<li>Fixed: Player size when Theater Mode is enabled and you enter fullscreen.</li>
-	<li>Fixed: Theater Mode metadata positioned incorrectly for hosted streams.</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,9 @@
+<div class="list-header">3.5.364 <time datetime="2016-11-08">(2016-11-08)</time></div>
+<ul class="chat-menu-content menu-side-padding">
+	<li>Fixed: Player size when Theater Mode is enabled and you enter fullscreen.</li>
+	<li>Fixed: Theater Mode metadata positioned incorrectly for hosted streams.</li>
+</ul>
+
 <div class="list-header">3.5.363 <time datetime="2016-11-08">(2016-11-08)</time></div>
 <ul class="chat-menu-content menu-side-padding">
 	<li>Fixed: Properly position Search popout when sidebars are swapped and in portrait mode.</li>

src/badges.js

@@ -67,6 +67,21 @@ FFZ.settings_info.show_badges = {
 };
 
 
+FFZ.settings_info.loyalty_badges = {
+	type: "boolean",
+	value: true,
+
+	category: "Chat Appearance",
+	name: "Display Subscriber Loyalty Badges",
+	help: "Show different badge images for users that have been subscribed 3, 6, 12, and 24 months in supported channels.",
+
+	on_update: function(val) {
+		utils.toggle_cls('ffz-no-loyalty')(!val);
+	}
+
+};
+
+
 FFZ.settings_info.hidden_badges = {
 	type: "button",
 	value: [],
@@ -278,7 +293,9 @@ FFZ.prototype.setup_badges = function() {
 		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-no-loyalty')(!this.settings.loyalty_badges);
 
 		this.toggle_style('badges-sub-notice', ! this.settings.sub_notice_badges);
 		this.toggle_style('badges-sub-notice-on', this.settings.sub_notice_badges);
@@ -479,9 +496,9 @@ FFZ.prototype.get_twitch_badges = function(badge_tag, room_id) {
 			klass: (BADGE_KLASSES[badge] || badge) + (is_known ? '' : ' unknown-badge') + ' version-' + version,
 			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_invert: ! versions.allow_invert && NO_INVERT_BADGES.indexOf(badge) !== -1,
 			no_color: ! CSS_BADGES.hasOwnProperty(badge),
-			invert_invert: INVERT_INVERT_BADGES.indexOf(badge) !== -1,
+			invert_invert: versions.invert_invert || INVERT_INVERT_BADGES.indexOf(badge) !== -1,
 			transparent: TRANSPARENT_BADGES.indexOf(badge) !== -1
 		};
 

src/ember/bits.js

@@ -91,9 +91,10 @@ FFZ.prototype.setup_bits = function() {
 		return this.error("Unable to locate the Ember service:bits-rendering-config");
 
 	Service.reopen({
-		ffz_get_tier: function(amount) {
-			var config = this.get('config'),
-				tiers = config.tiers || [],
+		ffz_get_tier: function(prefix, amount) {
+			var config = this.get('config') || {},
+				pre_config = config[prefix] || {},
+				tiers = pre_config.tiers || [],
 				tier = null,
 				index = null;
 
@@ -110,45 +111,57 @@ FFZ.prototype.setup_bits = function() {
 		},
 
 		ffz_get_preview: function(tier) {
-			return this._templateUrlConstructor(tier.image, "dark", (f.settings.bits_animated ? 'animated' : 'static'), 4);
+			return this._constructImageSrc([4], tier, {
+				background: 'dark',
+				scale: 4,
+				state: f.settings.bits_animated ? 'animated' : 'static'
+			}).src;
 		},
 
-		_ffz_tier_css: function(ind, tier) {
-			var selector = '.ffz-bit.bit-tier-' + ind,
-				color = f._handle_color(tier.color),
+		_ffz_image_css: function(images) {
+			return 'background-image: url("' + images[1] + '");' +
+				'background-image: ' + (constants.IS_WEBKIT ? ' -webkit-' : '') + 'image-set(' +
+					'url("' + images[1] + '") 1x, url("' + images[2] + '") 2x, url("' + images[4] + '") 4x);';
+		},
 
-				template = 'url("' + this.get('config.templateUrl').replace('{background}', 'light').replace('{image}', tier.image) + '")',
-				template_srcset = template.replace('{scale}', 1) + ' 1x, ' + template.replace('{scale}', 2) + ' 2x, ' + template.replace('{scale}', 4) + ' 4x',
+		_ffz_tier_css: function(ind, prefix, tier) {
+			var selector = '.ffz-bit.bit-prefix-' + prefix + '.bit-tier-' + ind,
+				color = f._handle_color(tier.color),
 				output;
 
 			output = selector + '{' +
 				'color: ' + color[0] + ';' +
-				'background-image: ' + template.replace('{scale}', 1).replace(/{state}/g, 'static') + ';' +
-				'background-image: -webkit-image-set(' + template_srcset.replace(/{state}/g, 'static') + ');' +
+				this._ffz_image_css(tier.images.light.static) +
 			'}.ffz-animate-bits ' + selector + '{' +
-				'background-image: ' + template.replace('{scale}', 1).replace(/{state}/g, 'animated') + ';' +
-				'background-image: -webkit-image-set(' + template_srcset.replace(/{state}/g, 'animated') + ');' +
+				this._ffz_image_css(tier.images.light.animated) +
 			'}';
 
-			template = template.replace('/light/', '/dark/');
-			template_srcset = template_srcset.replace(/\/light\//g, '/dark/');
-
 			return output + '.tipsy ' + selector + ',.dark ' + selector + ',.force-dark ' + selector + ',.theatre ' + selector + '{' +
 				'color: ' + color[1] + ';' +
-				'background-image: ' + template.replace('{scale}', 1).replace(/{state}/g, 'static') + ';' +
-				'background-image: -webkit-image-set(' + template_srcset.replace(/{state}/g, 'static') + ');' +
+				this._ffz_image_css(tier.images.dark.static) +
 			'}.ffz-animate-bits .tipsy ' + selector + ',.ffz-animate-bits .dark ' + selector + ',.ffz-animate-bits .force-dark ' + selector + ',.ffz-animate-bits .theatre ' + selector + '{' +
-				'background-image: ' + template.replace('{scale}', 1).replace(/{state}/g, 'animated') + ';' +
-				'background-image: -webkit-image-set(' + template_srcset.replace(/{state}/g, 'animated') + ');' +
+				this._ffz_image_css(tier.images.dark.animated) +
 			'}';
 		},
 
 		ffz_update_css: function() {
-			var tiers = this.get('config.tiers') || [],
-				output = [];
+			var output = [],
+				config = this.get('config') || {prefixes: []};
 
-			for(var i=0, l = tiers.length; i < l; i++)
-				output.push(this._ffz_tier_css(i, tiers[i]));
+			f.log("update_css start");
+
+			for(var i=0; i < config.prefixes.length; i++) {
+				var prefix = config.prefixes[i],
+					data = config[prefix],
+					tiers = data && data.tiers;
+
+				f.log("prefix: " + prefix + " -- tiers: " + tiers.length, tiers);
+
+				for(var x=0; x < tiers.length; x++)
+					output.push(this._ffz_tier_css(x, prefix, tiers[x]));
+			}
+
+			f.log("update_css end", output.join(''));
 
 			utils.update_css(f._chat_style, 'bit-styles', output.join(''));
 

src/ember/room.js

@@ -924,12 +924,31 @@ FFZ.prototype._update_room_badge_css = function(room_id) {
 		badges = room && room.badges || {},
 		output = [];
 
+	// For rooms that don't have sub badges set.
+	if ( ! badges.subscriber ) {
+		var BadgeService = utils.ember_lookup('service:badges'),
+			global = BadgeService && BadgeService.badgeCollection && BadgeService.badgeCollection.global;
+		badges.subscriber = global.subscriber;
+		if ( badges.subscriber ) {
+			badges.subscriber.allow_invert = true;
+			badges.subscriber.invert_invert = true;
+		}
+	}
+
 	for(var badge_id in badges) {
 		var versions = badges[badge_id] && badges[badge_id].versions || {};
 		for(var version in versions)
 			output.push(utils.room_badge_css(room_id, badge_id, version, versions[version]));
 	}
 
+	if ( badges.subscriber ) {
+		var versions = badges.subscriber.versions || {},
+			lowest = versions[0] || versions[1];
+
+		if ( lowest )
+			output.push(utils.room_badge_css(room_id, badge_id, Infinity, lowest));
+	}
+
 	utils.update_css(this._badge_style, 'twitch-room-' + room_id, output.join(''));
 }
 

src/main.js

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

src/tokenize.js

@@ -6,6 +6,7 @@ var FFZ = window.FrankerFaceZ,
 	emote_helpers,
 	bits_helpers,
 	bits_service,
+	bits_tags,
 
 	HOP = Object.prototype.hasOwnProperty,
 
@@ -210,6 +211,7 @@ FFZ.prototype.setup_tokenization = function() {
 	}
 
 	bits_service = utils.ember_lookup('service:bits-rendering-config');
+	bits_tags = utils.ember_lookup('service:bits-tags');
 
 	try {
 		conv_helpers = window.require && window.require("web-client/helpers/twitch-conversations/conversation-line-helpers");
@@ -376,7 +378,8 @@ FFZ.prototype.render_tooltip = function(el) {
 			if ( this.classList.contains('ffz-bit') ) {
 				var amount = parseInt(this.getAttribute('data-amount').replace(/,/g, '')),
 					individuals = JSON.parse(this.getAttribute('data-individuals') || "null"),
-					tier = bits_service.ffz_get_tier(amount),
+					prefix = this.getAttribute('data-prefix'),
+					tier = bits_service.ffz_get_tier(prefix, amount),
 					preview_url,
 					image,
 					out = utils.number_commas(amount) + ' Bit' + utils.pluralize(amount);
@@ -388,7 +391,7 @@ FFZ.prototype.render_tooltip = function(el) {
 					out += '<br>';
 					individuals.sort().reverse();
 					for(var i=0; i < individuals.length && i < 12; i++)
-						out += f.render_token(false, false, true, {type: "bits", amount: individuals[i]});
+						out += f.render_token(false, false, true, {type: "bits", prefix: prefix, amount: individuals[i]});
 
 					if ( individuals.length >= 12 )
 						out += '<br>(and ' + (individuals.length - 12) + ' more)';
@@ -657,6 +660,18 @@ FFZ.prototype.tokenize_vod_line = function(msgObject, delete_links) {
 }
 
 
+FFZ.prototype._tokenize_bits = function(tokens) {
+	if ( bits_helpers && bits_helpers.tokenizeBits )
+		try {
+			return bits_helpers.tokenizeBits(tokens,
+				bits_tags && bits_tags.allTagNames,
+				bits_service && bits_service.regexes);
+
+		} catch(err) { }
+	return tokens;
+}
+
+
 FFZ.prototype.tokenize_chat_line = function(msgObject, prevent_notification, delete_links) {
 	if ( msgObject.cachedTokens )
 		return msgObject.cachedTokens;
@@ -672,8 +687,8 @@ FFZ.prototype.tokenize_chat_line = function(msgObject, prevent_notification, del
 		mod_or_higher = tags.mod || from_user === room_id || tags['user-type'] === 'staff' || tags['user-type'] === 'admin' || tags['user-type'] === 'global_mod';
 
 	// Standard Tokenization
-	if ( tags.bits && bits_helpers && bits_helpers.tokenizeBits )
-		tokens = bits_helpers.tokenizeBits(tokens);
+	if ( tags.bits )
+		tokens = this._tokenize_bits(tokens);
 
 	// For Later
 	//if ( helpers && helpers.tokenizeRichContent )
@@ -697,20 +712,27 @@ FFZ.prototype.tokenize_chat_line = function(msgObject, prevent_notification, del
 	tokens = this._remove_banned(tokens);
 
 	if ( tags.bits && this.settings.collect_bits ) {
+		var stuff = {};
 		var total = 0, individuals = [];
 		for(var i=0; i < tokens.length; i++)
 			if ( tokens[i] && tokens[i].type === "bits" ) {
 				tokens[i].hidden = true;
-				total += tokens[i].amount || 0;
-				individuals.push(tokens[i].amount);
+				var prefix = tokens[i].prefix,
+					amount = tokens[i].amount || 0,
+					grouped = stuff[prefix] = stuff[prefix] || {total: 0, individuals: []};
+
+				grouped.total += amount;
+				grouped.individuals.push(amount);
 			}
 
-		tokens.splice(0, 0, {
-			type: "bits",
-			amount: total,
-			individuals: individuals,
-			length: 0
-		});
+		for(var prefix in stuff)
+			tokens.splice(0, 0, {
+				type: "bits",
+				prefix: prefix,
+				amount: stuff[prefix].total,
+				individuals: stuff[prefix].individuals,
+				length: 0
+			});
 	}
 
 	if ( this.settings.parse_emoji )
@@ -1024,11 +1046,12 @@ FFZ.prototype.render_token = function(render_links, warn_links, render_bits, tok
 	}
 
 	else if ( token.type === "bits" ) {
-		var tier = render_bits && bits_service.ffz_get_tier(token.amount) || [null, null];
+		var tier = render_bits && bits_service.ffz_get_tier(token.prefix, token.amount) || [null, null];
 		if ( ! tier[1] )
 			return 'cheer' + token.amount;
 
-		return '<span class="emoticon ffz-bit ffz-tooltip bit-tier-' + tier[0] + '"' + (token.individuals ? ' data-individuals="' + utils.quote_attr(JSON.stringify(token.individuals)) + '"' : '') + ' data-amount="' + utils.number_commas(token.amount) + '" alt="cheer' + token.amount + '"></span>';
+		var prefix = utils.quote_attr(token.prefix);
+		return '<span class="emoticon ffz-bit ffz-tooltip bit-prefix-' + prefix + ' bit-tier-' + tier[0] + '"' + (token.individuals ? ' data-individuals="' + utils.quote_attr(JSON.stringify(token.individuals)) + '"' : '') + ' data-prefix="' + prefix + '" data-amount="' + utils.number_commas(token.amount) + '" alt="cheer' + token.amount + '"></span>';
 	}
 
 	else if ( token.type === "deleted" )

src/utils.js

@@ -1050,10 +1050,12 @@ module.exports = FFZ.utils = {
 	room_badge_css: function(room_id, badge_id, version, data) {
 		var img_1x = data.image_url_1x,
 			img_2x = data.image_url_2x,
-			img_4x = data.image_url_4x;
+			img_4x = data.image_url_4x,
 
-		return '.from-display-preview[data-room="' + room_id + '"] .badge.' + badge_id + '.version-' + version +
-				',.chat-line[data-room="' + room_id + '"] .badge.' + badge_id + '.version-' + version + '{' +
+			loyalty = version === Infinity;
+
+		return (loyalty ? '.ffz-no-loyalty ' : '') + '.from-display-preview[data-room="' + room_id + '"] .badge.' + badge_id + (loyalty ? '' : '.version-' + version) +
+				(loyalty ? ',.ffz-no-loyalty ' : ',') + '.chat-line[data-room="' + room_id + '"] .badge.' + badge_id + (loyalty ? '' : '.version-' + version) + '{' +
 			'background-image:url("' + img_1x + '");' +
 			'background-image:' + WEBKIT + 'image-set(url("' + img_1x + '") 1x' + (img_2x ? ',url("' + img_2x + '") 2x' : '') + (img_4x ? ',url("' + img_4x + '") 4x' : '') + ')}';
 	},