From 4c9e67a22efdd28dd01a23eb6acc8175bb0a5870 Mon Sep 17 00:00:00 2001
From: SirStendec <sir@stendec.me>
Date: Fri, 19 Jan 2018 17:17:16 -0500
Subject: [PATCH] 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                                |  5 ++
 src/modules/chat/badges.js                    | 62 ++++++++++++-------
 src/modules/chat/room.js                      | 51 ++++++++++-----
 .../twitch-twilight/modules/chat/index.js     | 26 ++++----
 4 files changed, 92 insertions(+), 52 deletions(-)

diff --git a/changelog.html b/changelog.html
index 6460be5c..0c39c9ce 100644
--- a/changelog.html
+++ b/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>
diff --git a/src/modules/chat/badges.js b/src/modules/chat/badges.js
index ea11ef7f..2b10a121 100644
--- a/src/modules/chat/badges.js
+++ b/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'));
diff --git a/src/modules/chat/room.js b/src/modules/chat/room.js
index 90ea42bc..7e9565bc 100644
--- a/src/modules/chat/room.js
+++ b/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'));
diff --git a/src/sites/twitch-twilight/modules/chat/index.js b/src/sites/twitch-twilight/modules/chat/index.js
index a4d8675a..c385f357 100644
--- a/src/sites/twitch-twilight/modules/chat/index.js
+++ b/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