4.17.10

* Added: Control badge visibility by group and not simply by individual badge.
* Fixed: When possible, sort emote IDs numerically for the emote menu.
* Changed: Blacklist a few more invalid errors from automatic reporting.
* Changed: Include add-on versions in error reports.

package.json

@@ -1,7 +1,7 @@
 {
   "name": "frankerfacez",
   "author": "Dan Salvato LLC",
-  "version": "4.17.9",
+  "version": "4.17.10",
   "description": "FrankerFaceZ is a Twitch enhancement suite.",
   "license": "Apache-2.0",
   "scripts": {

src/modules/chat/badges.jsx

@@ -290,7 +290,7 @@ export default class Badges extends Module {
 					const badge = this.badges[key],
 						image = badge.urls ? (badge.urls[2] || badge.urls[1]) : badge.image;
 
-					(/^addon/.test(key) ? addon : ffz).push({
+					(badge.addon ? addon : ffz).push({
 						id: key,
 						provider: 'ffz',
 						name: badge.title,
@@ -301,10 +301,10 @@ export default class Badges extends Module {
 				}
 
 		return [
-			{title: 'Twitch', badges: twitch},
-			{title: 'Twitch: Game', key: 'game', badges: game},
-			{title: 'FrankerFaceZ', badges: ffz},
-			{title: 'Add-on', badges: addon}
+			{title: 'Twitch', id: 'm-twitch', badges: twitch},
+			{title: 'Twitch: Game', id: 'm-game', key: 'game', badges: game},
+			{title: 'FrankerFaceZ', id: 'm-ffz', badges: ffz},
+			{title: 'Add-on', id: 'm-addon', badges: addon}
 		];
 	}
 
@@ -408,6 +408,11 @@ export default class Badges extends Module {
 			is_colored = badge_style !== 5,
 			has_image = badge_style !== 3 && badge_style !== 4,
 
+			twitch_hidden = hidden_badges['m-twitch'],
+			game_hidden = hidden_badges['m-game'],
+			ffz_hidden = hidden_badges['m-ffz'],
+			addon_hidden = hidden_badges['m-addon'],
+
 			out = [],
 			slotted = {},
 			twitch_badges = msg.badges || {},
@@ -427,9 +432,10 @@ export default class Badges extends Module {
 		for(const badge_id in twitch_badges)
 			if ( has(twitch_badges, badge_id) ) {
 				const version = twitch_badges[badge_id],
+					is_hidden = hidden_badges[badge_id],
 					is_game = badge_id.endsWith('_1');
 
-				if ( hidden_badges[badge_id] || (is_game && hidden_badges.game) )
+				if ( is_hidden || (is_hidden == null && (is_game ? game_hidden : twitch_hidden)))
 					continue;
 
 				if ( has(BADGE_POSITIONS, badge_id) )
@@ -473,11 +479,13 @@ export default class Badges extends Module {
 
 		for(const badge of badges)
 			if ( badge && badge.id != null ) {
-				if ( hidden_badges[badge.id] )
+				const full_badge = this.badges[badge.id] || {},
+					is_hidden = hidden_badges[badge.id];
+
+				if ( is_hidden || (is_hidden == null && (full_badge.addon ? addon_hidden : ffz_hidden)) )
 					continue;
 
-				const full_badge = this.badges[badge.id] || {},
-					slot = has(badge, 'slot') ? badge.slot : full_badge.slot,
+				const slot = has(badge, 'slot') ? badge.slot : full_badge.slot,
 					old_badge = slotted[slot],
 					urls = badge.urls || (badge.image ? {1: badge.image} : null),
 					color = badge.color || full_badge.color || 'transparent',
@@ -681,6 +689,9 @@ export default class Badges extends Module {
 	loadBadgeData(badge_id, data, generate_css = true) {
 		this.badges[badge_id] = data;
 
+		if ( data.addon === undefined )
+			data.addon =/^addon/.test(badge_id);
+
 		if ( data.replaces && ! data.replaces_type ) {
 			data.replaces_type = data.replaces;
 			data.replaces = true;

src/modules/main_menu/components/badge-visibility.vue

@@ -29,7 +29,31 @@
 			:key="sec.title"
 			class="ffz--menu-container tw-border-t"
 		>
-			<header>{{ sec.title }}</header>
+			<header
+				v-if="sec.id"
+				:class="{default: badgeDefault(sec.id)}"
+				class="tw-flex tw-checkbox"
+			>
+				<input
+					:id="sec.id"
+					:checked="badgeChecked(sec.id)"
+					type="checkbox"
+					class="tw-checkbox__input"
+					@click="onChange(sec.id, $event)"
+					@contextmenu.prevent="reset(sec.id)"
+				>
+				<label
+					:for="sec.id"
+					:title="t('setting.right-click-reset', 'Right-Click to Reset')"
+					class="tw-checkbox__label"
+					@contextmenu.prevent="reset(sec.id)"
+				>
+					{{ sec.title }}
+				</label>
+			</header>
+			<header v-else>
+				{{ sec.title }}
+			</header>
 			<ul class="tw-flex tw-flex-wrap tw-align-content-start">
 				<li
 					v-for="i in sort(sec.badges)"

src/raven.js

@@ -166,7 +166,9 @@ export default class RavenLogger extends Module {
 				'Name Collision for Module',
 				'SourceBuffer',
 				'ChunkLoadError',
-				'QuotaExceededError'
+				'SecurityError',
+				'QuotaExceededError',
+				'DataCloneError'
 			],
 			sanitizeKeys: [
 				/Token$/
@@ -300,12 +302,14 @@ export default class RavenLogger extends Module {
 
 	buildExtra() {
 		const modules = {},
+			addons = {},
 			experiments = {},
 			twitch_experiments = {},
 			out = {
 				experiments,
 				twitch_experiments,
-				modules
+				modules,
+				addons
 			};
 
 		for(const key in this.__modules)
@@ -332,6 +336,15 @@ export default class RavenLogger extends Module {
 					chat_settings[key] = value;
 		}
 
+		const add = this.resolve('addons');
+		if ( add && Array.isArray(add.enabled_addons) && add.addons ) {
+			for(const key of add.enabled_addons) {
+				const addon = add.addons[key];
+				if ( addon )
+					addons[key] = `${addon.version || 'unknown'}${addon.dev ? '-dev' : ''}`;
+			}
+		}
+
 		const exp = this.resolve('experiments');
 		if ( exp ) {
 			for(const [key, value] of Object.entries(exp.getTwitchExperiments()))
@@ -354,6 +367,9 @@ export default class RavenLogger extends Module {
 		out.build = __webpack_hash__;
 		out.git_commit = __git_commit__;
 
+		if ( window.BetterTTV )
+			out.bttv_version = window.BetterTTV?.version;
+
 		if ( core )
 			out.twitch_build = core.config.buildID;
 

src/sites/twitch-twilight/modules/chat/emote_menu.jsx

@@ -40,13 +40,22 @@ function maybe_date(val) {
 }
 
 
+const COLLATOR = window?.Intl?.Collator && new Intl.Collator(undefined, {numeric: true});
+
+
 const EMOTE_SORTERS = [
 	function id_asc(a, b) {
+		if ( COLLATOR )
+			return COLLATOR.compare(a.id, b.id);
+
 		if ( a.id < b.id ) return -1;
 		if ( a.id > b.id ) return 1;
 		return 0;
 	},
 	function id_desc(a, b) {
+		if ( COLLATOR )
+			return COLLATOR.compare(b.id, a.id);
+
 		if ( a.id > b.id ) return -1;
 		if ( a.id < b.id ) return 1;
 		return 0;
@@ -58,6 +67,9 @@ const EMOTE_SORTERS = [
 		if ( a_n < b_n ) return -1;
 		if ( a_n > b_n ) return 1;
 
+		if ( COLLATOR )
+			return COLLATOR.compare(a.id, b.id);
+
 		if ( a.id < b.id ) return -1;
 		if ( a.id > b.id ) return 1;
 		return 0;
@@ -69,6 +81,9 @@ const EMOTE_SORTERS = [
 		if ( a_n > b_n ) return -1;
 		if ( a_n < b_n ) return 1;
 
+		if ( COLLATOR )
+			return COLLATOR.compare(b.id, a.id);
+
 		if ( a.id > b.id ) return -1;
 		if ( a.id < b.id ) return 1;
 		return 0;

styles/widgets/badge-visibility.scss

@@ -1,31 +1,47 @@
-.ffz--badge-info {
-	&.default {
-		label:before, label:after {
-			opacity: 0.5
-		}
+.ffz--badge-visibility {
+	header {
+		&.default {
+			label:before, label:after {
+				opacity: 0.5
+			}
 
-		input:focus + label {
-			&:before, &:after {
-				opacity: 1
+			input:focus + label {
+				&:before, &:after {
+					opacity: 1
+				}
+			}
+		}
+	}
+
+	.ffz--badge-info {
+		&.default {
+			label:before, label:after {
+				opacity: 0.5
+			}
+
+			input:focus + label {
+				&:before, &:after {
+					opacity: 1
+				}
+			}
+
+			button:not(:focus) {
+				visibility: hidden;
 			}
 		}
 
-		button:not(:focus) {
-			visibility: hidden;
+		.tw-checkbox__input:checked+.tw-checkbox__label:after,
+		label:before, label:after {
+			top: 1.05rem !important;
 		}
-	}
 
-	.tw-checkbox__input:checked+.tw-checkbox__label:after,
-	label:before, label:after {
-		top: 1.05rem !important;
-	}
+		.ffz-badge.preview-image {
+			width: 3.6rem;
+			height: 3.6rem;
+			background-size: 3.6rem;
+			background-repeat: no-repeat;
+		}
 
-	.ffz-badge.preview-image {
-		width: 3.6rem;
-		height: 3.6rem;
-		background-size: 3.6rem;
-		background-repeat: no-repeat;
+		width: 22rem;
 	}
-
-	width: 22rem;
 }