From 41e80fd94c9b15c080be3e612ff53bb072425914 Mon Sep 17 00:00:00 2001
From: SirStendec <sir@stendec.me>
Date: Thu, 15 Mar 2018 03:31:30 -0400
Subject: [PATCH] Add support for custom moderator badge images.

---
 changelog.html                                |  6 +++
 src/modules/chat/badges.js                    | 41 ++++++++++++++----
 src/modules/chat/index.js                     | 10 ++---
 src/modules/chat/room.js                      | 42 ++++++++++++++++++-
 .../twitch-twilight/modules/chat/line.js      |  1 +
 5 files changed, 85 insertions(+), 15 deletions(-)

diff --git a/changelog.html b/changelog.html
index 79ad6da8..46a62f15 100644
--- a/changelog.html
+++ b/changelog.html
@@ -1,3 +1,9 @@
+<div class="list-header">4.0.0-beta1.6<span>@3402c0380be5b35d7f16</span> <time datetime="2018-03-15">(2018-03-15)</time></div>
+<ul class="chat-menu-content menu-side-padding">
+	<li>Added: Support for custom moderator badge images.</li>
+	<li>Fixed: Some badges appearing incorrectly with the Circular, Small badge style.</li>
+</ul>
+
 <div class="list-header">4.0.0-beta1.6<span>@b26925b82613bdc459b5</span> <time datetime="2018-03-14">(2018-03-14)</time></div>
 <ul class="chat-menu-content menu-side-padding">
 	<li>Fixed: Minimal Navigation causing the navigation bar to render over theater mode.</li>
diff --git a/src/modules/chat/badges.js b/src/modules/chat/badges.js
index 27fb40b5..1866f73d 100644
--- a/src/modules/chat/badges.js
+++ b/src/modules/chat/badges.js
@@ -214,6 +214,15 @@ export default class Badges extends Module {
 			}
 		});
 
+		this.settings.add('chat.badges.custom-mod', {
+			default: true,
+			ui: {
+				path: 'Chat > Badges >> tabs ~> Appearance',
+				title: 'Use custom moderator badges where available.',
+				component: 'setting-check-box'
+			}
+		})
+
 		this.settings.add('chat.badges.style', {
 			default: 0,
 			ui: {
@@ -235,6 +244,7 @@ export default class Badges extends Module {
 
 
 	onEnable() {
+		this.parent.context.on('changed:chat.badges.custom-mod', this.rebuildAllCSS, this);
 		this.parent.context.on('changed:chat.badges.style', this.rebuildAllCSS, this);
 		this.parent.context.on('changed:theme.is-dark', this.rebuildAllCSS, this);
 		this.parent.context.on('changed:theme.tooltips-dark', this.rebuildAllCSS, this);
@@ -289,7 +299,8 @@ export default class Badges extends Module {
 	render(msg, e) { // eslint-disable-line class-methods-use-this
 		const hidden_badges = this.parent.context.get('chat.badges.hidden') || [],
 			badge_style = this.parent.context.get('chat.badges.style'),
-			is_mask = badge_style >= 5,
+			custom_mod = this.parent.context.get('chat.badges.custom-mod'),
+			is_mask = badge_style > 5,
 			is_colored = badge_style !== 5,
 			has_image = badge_style !== 3 && badge_style !== 4,
 
@@ -303,6 +314,7 @@ export default class Badges extends Module {
 			room_id = msg.roomID,
 			room_login = msg.roomLogin,
 
+			room = this.parent.getRoom(room_id, room_login, true),
 			badges = this.getBadges(user_id, user_login, room_id, room_login);
 
 		let last_slot = 50, slot;
@@ -320,11 +332,24 @@ export default class Badges extends Module {
 				else
 					slot = last_slot++;
 
-				const badges = [{
-					provider: 'twitch',
-					badge: badge_id,
-					version
-				}];
+				const urls = badge_id === 'moderator' && custom_mod && room && room.data && room.data.mod_urls,
+					badges = [];
+
+				if ( urls ) {
+					const bd = this.getTwitchBadge(badge_id, version, room_id, room_login);
+					badges.push({
+						provider: 'ffz',
+						image: urls[4] || urls[2] || urls[1],
+						color: '#34ae0a',
+						title: bd ? bd.title : 'Moderator'
+					});
+
+				} else
+					badges.push({
+						provider: 'twitch',
+						badge: badge_id,
+						version
+					});
 
 				slotted[slot] = {
 					id: badge_id,
@@ -426,8 +451,10 @@ export default class Badges extends Module {
 
 
 	rebuildAllCSS() {
-		for(const room of this.parent.iterateRooms())
+		for(const room of this.parent.iterateRooms()) {
 			room.buildBadgeCSS();
+			room.buildModBadgeCSS();
+		}
 
 		this.buildBadgeCSS();
 		this.buildTwitchBadgeCSS();
diff --git a/src/modules/chat/index.js b/src/modules/chat/index.js
index e7cc664f..c0eb3ce7 100644
--- a/src/modules/chat/index.js
+++ b/src/modules/chat/index.js
@@ -237,15 +237,13 @@ export default class Chat extends Module {
 		});
 
 		this.context.on('changed:theme.is-dark', () => {
-			for(const key in this.rooms)
-				if ( this.rooms[key] )
-					this.rooms[key].buildBitsCSS();
+			for(const room of this.iterateRooms())
+				room.buildBitsCSS();
 		});
 
 		this.context.on('changed:chat.bits.animated', () => {
-			for(const key in this.rooms)
-				if ( this.rooms[key] )
-					this.rooms[key].buildBitsCSS();
+			for(const room of this.iterateRooms())
+				room.buildBitsCSS();
 		});
 	}
 
diff --git a/src/modules/chat/room.js b/src/modules/chat/room.js
index 912ed20a..5e381210 100644
--- a/src/modules/chat/room.js
+++ b/src/modules/chat/room.js
@@ -216,8 +216,20 @@ export default class Room {
 					this.manager.emotes.loadSetData(set_id, data.sets[set_id]);
 
 
-		// TODO: User data.
-		// TODO: Generate CSS.
+		const badges = data.user_badges;
+		if ( badges )
+			for(const badge_id in badges)
+				if ( has(badges, badge_id) )
+					for(const user of badges[badge_id])
+						this.getUser(undefined, user).addBadge('ffz', badge_id);
+
+
+		if ( data.css )
+			this.style.set('css', data.css);
+		else
+			this.style.delete('css');
+
+		this.buildModBadgeCSS();
 
 		return true;
 	}
@@ -284,6 +296,30 @@ export default class Room {
 		this.buildBadgeCSS();
 	}
 
+	buildModBadgeCSS() {
+		if ( ! this.data || ! this.data.mod_urls || ! this.manager.context.get('chat.badges.custom-mod') )
+			return this.style.delete('mod-badge');
+
+		const style = this.manager.context.get('chat.badges.style'),
+			masked = style > 5 ? `${WEBKIT}mask` : 'background',
+			has_image = style !== 3 && style !== 4;
+
+		if ( ! has_image )
+			return this.style.delete('mod-badge');
+
+		const urls = this.data.mod_urls,
+			image = `url("${urls[1]}")`;
+
+		let image_set;
+		if ( urls[2] || urls[4] )
+			image_set = `${WEBKIT}image-set(${image} 1x${urls[2] ? `, url("${urls[2]}") 2x` : ''}${urls[4] ? `, url("${urls[4]}") 4x` : ''})`
+
+		this.style.set('mod-badge', `[data-room-id="${this.id}"] .ffz-badge[data-badge="moderator"] {
+			${masked}-image: ${image};
+			${image_set ? `${masked}-image: ${image_set};` : ''}
+		}`);
+	}
+
 	buildBadgeCSS() {
 		if ( ! this.badges )
 			return this.style.delete('badges');
@@ -303,6 +339,8 @@ export default class Room {
 			background-color: transparent;
 			filter: none;
 			${WEBKIT}mask-image: none;
+			height: 1.8rem;
+			width: 1.8rem;
 			background-size: 1.8rem;
 			background-image: url("${data.image1x}");
 			background-image: ${WEBKIT}image-set(
diff --git a/src/sites/twitch-twilight/modules/chat/line.js b/src/sites/twitch-twilight/modules/chat/line.js
index fa6f293e..11dd5a3d 100644
--- a/src/sites/twitch-twilight/modules/chat/line.js
+++ b/src/sites/twitch-twilight/modules/chat/line.js
@@ -40,6 +40,7 @@ export default class ChatLine extends Module {
 	onEnable() {
 		this.chat.context.on('changed:chat.bits.stack', this.updateLines, this);
 		this.chat.context.on('changed:chat.badges.style', this.updateLines, this);
+		this.chat.context.on('changed:chat.badges.custom-mod', this.updateLines, this);
 		this.chat.context.on('changed:chat.rituals.show', this.updateLines, this);
 
 		const t = this,