Fix Twitch chat badges not rendering. They removed badgeSets from the chat container, so for now access the raw data and parse it ourselves. It's actually about the same difficulty, so it should work fine.

changelog.html

@@ -1,3 +1,8 @@
+<div class="list-header">4.0.0-beta1.5<span>@5f6029b8672c05bfed85</span> <time datetime="2018-01-19">(2018-01-19)</time></div>
+<ul class="chat-menu-content menu-side-padding">
+	<li>Fixed: Unable to load Twitch badge data. (They moved it in memory.)</li>
+</ul>
+
 <div class="list-header">4.0.0-beta1.5<span>@5aed9c5b086948ebcfc3</span> <time datetime="2018-01-16">(2018-01-16)</time></div>
 <ul class="chat-menu-content menu-side-padding">
 	<li>Added: Render badges added by FrankerFaceZ and other extensions using FFZ's API.</li>

src/modules/chat/badges.js

@@ -439,20 +439,33 @@ export default class Badges extends Module {
 		let b;
 
 		if ( room ) {
-			const versions = room.badges.get(badge);
-			b = versions && versions.get(version);
+			const versions = room.badges && room.badges[badge];
+			b = versions && versions[version];
 		}
 
 		if ( ! b ) {
-			const versions = this.twitch_badges.get(badge);
-			b = version && versions.get(version);
+			const versions = this.twitch_badges && this.twitch_badges[badge];
+			b = versions && versions[version];
 		}
 
 		return b;
 	}
 
 	updateTwitchBadges(badges) {
-		this.twitch_badges = badges;
+		if ( ! badges )
+			this.twitch_badges = badges;
+		else {
+			const b = {};
+			for(const data of badges) {
+				const sid = data.setID,
+					bs = b[sid] = b[sid] || {};
+
+				bs[data.version] = data;
+			}
+
+			this.twitch_badges = b;
+		}
+
 		this.buildTwitchBadgeCSS();
 	}
 
@@ -483,25 +496,30 @@ export default class Badges extends Module {
 			this.style.delete('twitch-badges');
 
 		const out = [];
-		for(const [key, versions] of this.twitch_badges) {
-			if ( has(CSS_BADGES, key) )
-				continue;
+		for(const key in this.twitch_badges)
+			if ( has(this.twitch_badges, key) ) {
+				if ( has(CSS_BADGES, key) )
+					continue;
 
-			for(const [version, data] of versions) {
-				out.push(`.ffz-badge[data-badge="${key}"][data-version="${version}"] {
-	background-color: transparent;
-	filter: none;
-	${WEBKIT}mask-image: none;
-	background-size: 1.8rem;
-	background-image: url("${data.image1x}");
-	background-image: ${WEBKIT}image-set(
-		url("${data.image1x}") 1x,
-		url("${data.image2x}") 2x,
-		url("${data.image4x}") 4x
-	);
-}`)
+				const versions = this.twitch_badges[key];
+				for(const version in versions)
+					if ( has(versions, version) ) {
+						const data = versions[version];
+
+						out.push(`.ffz-badge[data-badge="${key}"][data-version="${version}"] {
+			background-color: transparent;
+			filter: none;
+			${WEBKIT}mask-image: none;
+			background-size: 1.8rem;
+			background-image: url("${data.image1x}");
+			background-image: ${WEBKIT}image-set(
+				url("${data.image1x}") 1x,
+				url("${data.image2x}") 2x,
+				url("${data.image4x}") 4x
+			);
+		}`)
+					}
 			}
-		}
 
 		if ( out.length )
 			this.style.set('twitch-badges', out.join('\n'));

src/modules/chat/room.js

@@ -267,7 +267,20 @@ export default class Room {
 	// ========================================================================
 
 	updateBadges(badges) {
-		this.badges = badges;
+		if ( ! badges )
+			this.badges = badges;
+		else {
+			const b = {};
+			for(const data of badges) {
+				const sid = data.setID,
+					bs = b[sid] = b[sid] || {};
+
+				bs[data.version] = data;
+			}
+
+			this.badges = b;
+		}
+
 		this.buildBadgeCSS();
 	}
 
@@ -278,24 +291,28 @@ export default class Room {
 		const out = [],
 			id = this.id;
 
-		for(const [key, versions] of this.badges) {
-			for(const [version, data] of versions) {
-				const rule = `.ffz-badge[data-badge="${key}"][data-version="${version}"]`;
+		for(const key in this.badges)
+			if ( has(this.badges, key) ) {
+				const versions = this.badges[key];
+				for(const version in versions)
+					if ( has(versions, version) ) {
+						const data = versions[version],
+							rule = `.ffz-badge[data-badge="${key}"][data-version="${version}"]`;
 
-				out.push(`[data-room-id="${id}"] ${rule} {
-	background-color: transparent;
-	filter: none;
-	${WEBKIT}mask-image: none;
-	background-size: 1.8rem;
-	background-image: url("${data.image1x}");
-	background-image: ${WEBKIT}image-set(
-		url("${data.image1x}") 1x,
-		url("${data.image2x}") 2x,
-		url("${data.image4x}") 4x
-	);
-}`);
+						out.push(`[data-room-id="${id}"] ${rule} {
+			background-color: transparent;
+			filter: none;
+			${WEBKIT}mask-image: none;
+			background-size: 1.8rem;
+			background-image: url("${data.image1x}");
+			background-image: ${WEBKIT}image-set(
+				url("${data.image1x}") 1x,
+				url("${data.image2x}") 2x,
+				url("${data.image4x}") 4x
+			);
+		}`);
+					}
 			}
-		}
 
 
 		this.style.set('badges', out.join('\n'));

src/sites/twitch-twilight/modules/chat/index.js

@@ -621,9 +621,9 @@ export default class ChatHook extends Module {
 		if ( ! this.addRoom(cont, props) )
 			return;
 
-		if ( props.badgeSets ) {
-			this.chat.badges.updateTwitchBadges(props.badgeSets.globalsBySet);
-			this.updateRoomBadges(cont, props.badgeSets.channelsBySet);
+		if ( props.data ) {
+			this.chat.badges.updateTwitchBadges(props.data.badges);
+			this.updateRoomBadges(cont, props.data.user && props.data.user.broadcastBadges);
 		}
 	}
 
@@ -639,20 +639,20 @@ export default class ChatHook extends Module {
 		// can't compare the badgeSets property in any reasonable way.
 		// Instead, just check the lengths to see if they've changed
 		// and hope that badge versions will never change separately.
-		const bs = props.badgeSets,
-			obs = cont.props.badgeSets,
+		const data = props.data || {},
+			odata = cont.props.data || {},
 
-			bsgl = bs.globalsBySet && bs.globalsBySet.size || 0,
-			obsgl = obs.globalsBySet && obs.globalsBySet.size || 0,
+			bs = data.badges || [],
+			obs = odata.badges || [],
 
-			bscl = bs.channelsBySet && bs.channelsBySet.size || 0,
-			obscl = obs.channelsBySet && obs.channelsBySet.size || 0;
+			cs = data.user && data.user.broadcastBadges || [],
+			ocs = odata.user && odata.user.broadcastBadges || [];
 
-		if ( bsgl !== obsgl )
-			this.chat.badges.updateTwitchBadges(bs.globalsBySet);
+		if ( bs.length !== obs.length )
+			this.chat.badges.updateTwitchBadges(bs);
 
-		if ( bscl !== obscl )
-			this.updateRoomBadges(cont, bs.channelsBySet);
+		if ( cs.length !== ocs.length )
+			this.updateRoomBadges(cont, cs);
 	}
 
 	updateRoomBadges(cont, badges) { // eslint-disable-line class-methods-use-this