From 0ae6e5021da01af582e98a3118f7199fcc90880c Mon Sep 17 00:00:00 2001
From: SirStendec <sir@stendec.me>
Date: Thu, 22 Feb 2018 18:23:44 -0500
Subject: [PATCH] A ton of stuff. Initial migration to React 16. Initial
 changes for Rooms support. Add support for clip champ badge. Start using .gql
 source files that are compiled during import so we don't need to include
 GraphQL-tag in builds.

---
 changelog.html                                |   6 +
 src/modules/chat/badges.js                    |  76 +++++++++-
 src/modules/chat/index.js                     |   8 +
 .../main_menu/components/badge-visibility.vue |  85 +++++++++++
 src/modules/tooltips.js                       |   2 +-
 src/sites/twitch-twilight/index.js            |  10 +-
 .../twitch-twilight/modules/channel_bar.js    |  15 +-
 .../modules/channel_bar_query.gql             |   8 +
 .../twitch-twilight/modules/chat/index.js     |  29 ++--
 .../twitch-twilight/modules/chat/line.js      |  26 +++-
 .../modules/compat_emote_menu.js              |  72 +++++++++
 .../modules/directory/browse_popular.gql      |  12 ++
 .../modules/directory/browse_popular.js       |  15 +-
 .../modules/directory/community.js            |  33 ----
 .../modules/directory/followed_channels.gql   |  13 ++
 .../modules/directory/followed_hosts.gql      |  15 ++
 .../modules/directory/followed_index.gql      |  24 +++
 .../modules/directory/followed_live.gql       |  14 ++
 .../modules/directory/following.js            |  78 ++--------
 .../modules/directory/game.gql                |  30 ++++
 .../twitch-twilight/modules/directory/game.js |  20 +--
 .../modules/directory/index.js                |   2 -
 .../twitch-twilight/modules/host_button.js    |  30 ++--
 src/sites/twitch-twilight/modules/player.js   |   5 +-
 src/utilities/compat/apollo.js                |  16 +-
 src/utilities/compat/fine-router.js           |   6 +-
 src/utilities/compat/fine.js                  | 142 ++++++++++--------
 src/utilities/tooltip.js                      |   2 +-
 webpack.common.js                             |   5 +
 29 files changed, 536 insertions(+), 263 deletions(-)
 create mode 100644 src/modules/main_menu/components/badge-visibility.vue
 create mode 100644 src/sites/twitch-twilight/modules/channel_bar_query.gql
 create mode 100644 src/sites/twitch-twilight/modules/compat_emote_menu.js
 create mode 100644 src/sites/twitch-twilight/modules/directory/browse_popular.gql
 delete mode 100644 src/sites/twitch-twilight/modules/directory/community.js
 create mode 100644 src/sites/twitch-twilight/modules/directory/followed_channels.gql
 create mode 100644 src/sites/twitch-twilight/modules/directory/followed_hosts.gql
 create mode 100644 src/sites/twitch-twilight/modules/directory/followed_index.gql
 create mode 100644 src/sites/twitch-twilight/modules/directory/followed_live.gql
 create mode 100644 src/sites/twitch-twilight/modules/directory/game.gql

diff --git a/changelog.html b/changelog.html
index 44d8ab67..63772136 100644
--- a/changelog.html
+++ b/changelog.html
@@ -1,3 +1,9 @@
+<div class="list-header">4.0.0-beta1.5<span>@ef163f5d644217193110</span> <time datetime="2018-02-22">(2018-02-22)</time></div>
+<ul class="chat-menu-content menu-side-padding">
+	<li>Fixed: React 16 support.</li>
+	<li>Note: Many features are still broken. This is just an initial quick fix.</li>
+</ul>
+
 <div class="list-header">4.0.0-beta1.5<span>@a752805865b1313466a7</span> <time datetime="2018-02-08">(2018-02-08)</time></div>
 <ul class="chat-menu-content menu-side-padding">
 	<li>Added: Setting to hide the Live indicator from live channels in the directory.</li>
diff --git a/src/modules/chat/badges.js b/src/modules/chat/badges.js
index b627ff62..27fb40b5 100644
--- a/src/modules/chat/badges.js
+++ b/src/modules/chat/badges.js
@@ -18,11 +18,12 @@ export const CSS_BADGES = {
 	moderator: { 1: { color: '#34ae0a', svg: true } },
 	twitchbot: { 1: { color: '#34ae0a' } },
 	partner: { 1: { color: 'transparent', trans: { image: true, color: '#6441a5' } } },
+	'clip-champ': { 1: { color: '#6441a5'} },
 
 	turbo: { 1: { color: '#6441a5', svg: true } },
 	premium: { 1: { color: '#009cdc' } },
 
-	subscriber: { 0: { color: '#6441a4' }, 1: { color: '#6441a4' }},
+	subscriber: { 0: { color: '#6441a5' }, 1: { color: '#6441a5' }},
 }
 
 export const BADGE_POSITIONS = {
@@ -143,13 +144,80 @@ export default class Badges extends Module {
 
 		this.style = new ManagedStyle('badges');
 		this.badges = {};
+		this.twitch_badges = {};
 
-		this.twitch_badges = new Map;
+		this.settings.add('chat.badges.hidden', {
+			default: [],
+			_ui: {
+				path: 'Chat > Badges >> tabs ~> Visibility',
+				component: 'badge-visibility',
+				data: () => {
+					const twitch = [],
+						game = [],
+						ffz = [],
+						addon = [];
+
+					for(const key in this.twitch_badges)
+						if ( has(this.twitch_badges, key) ) {
+							const badge = this.twitch_badges[key],
+								vs = [];
+							let v = badge && (badge[1] || badge[0]);
+
+							for(const key in badge)
+								if ( has(badge, key) ) {
+									const version = badge[key];
+									if ( ! v )
+										v = version;
+
+									if ( version && version.image1x )
+										vs.push({
+											name: version.title,
+											image: version.image1x,
+											styleImage: `url("${version.image1x}")`
+										});
+								}
+
+							if ( v )
+								(badge.__game ? game : twitch).push({
+									id: key,
+									provider: 'twitch',
+									name: v.title,
+									color: 'transparent',
+									image: v.image4x,
+									versions: vs,
+									styleImage: `url("${v.image4x}")`
+								});
+						}
+
+					for(const key in this.badges)
+						if ( has(this.badges, key) ) {
+							const badge = this.badges[key],
+								image = badge.urls ? (badge.urls[4] || badge.urls[2] || badge.urls[1]) : badge.image;
+
+							(/^addon/.test(key) ? addon : ffz).push({
+								id: key,
+								provider: 'ffz',
+								name: badge.title,
+								color: badge.color || 'transparent',
+								image,
+								styleImage: `url("${image}")`
+							});
+						}
+
+					return [
+						{title: 'Twitch', badges: twitch},
+						{title: 'Twitch: Game', badges: game},
+						{title: 'FrankerFaceZ', badges: ffz},
+						{title: 'Add-on', badges: addon}
+					];
+				}
+			}
+		});
 
 		this.settings.add('chat.badges.style', {
 			default: 0,
 			ui: {
-				path: 'Chat > Badges >> Appearance',
+				path: 'Chat > Badges >> tabs ~> Appearance',
 				title: 'Style',
 				component: 'setting-select-box',
 				data: [
@@ -497,7 +565,7 @@ export default class Badges extends Module {
 			const b = {};
 			for(const data of badges) {
 				const sid = data.setID,
-					bs = b[sid] = b[sid] || {};
+					bs = b[sid] = b[sid] || {__game: /_\d+$/.test(sid)};
 
 				bs[data.version] = data;
 			}
diff --git a/src/modules/chat/index.js b/src/modules/chat/index.js
index 911a0e18..a6457d85 100644
--- a/src/modules/chat/index.js
+++ b/src/modules/chat/index.js
@@ -429,7 +429,15 @@ export default class Chat extends Module {
 
 
 	tokenizeMessage(msg, user) {
+		if ( msg.content && ! msg.message )
+			msg.message = msg.content.text;
+
+		if ( msg.sender && ! msg.user )
+			msg.user = msg.sender;
+
 		let tokens = [{type: 'text', text: msg.message}];
+		if ( ! tokens[0].text )
+			return tokens;
 
 		for(const tokenizer of this.__tokenizers)
 			tokens = tokenizer.process.call(this, tokens, msg, user);
diff --git a/src/modules/main_menu/components/badge-visibility.vue b/src/modules/main_menu/components/badge-visibility.vue
new file mode 100644
index 00000000..2d6c7019
--- /dev/null
+++ b/src/modules/main_menu/components/badge-visibility.vue
@@ -0,0 +1,85 @@
+<template lang="html">
+<div class="ffz--badge-visibility tw-pd-t-05">
+	<section class="ffz--menu-container tw-border-t" v-for="sec in data">
+		<header>{{ sec.title }}</header>
+		<ul class="tw-flex tw-flex-wrap tw-align-content-start">
+			<li v-for="i in sort(sec.badges)" class="ffz--badge-info tw-pd-y-1 tw-pd-r-1 tw-flex" :class="{default: isDefault}">
+				<input
+					type="checkbox"
+					class="tw-checkbox__input"
+					checked="checked"
+					:id="i.id"
+					>
+
+				<label class="tw-checkbox__label tw-flex" :for="i.id">
+					<div class="preview-image ffz-badge tw-mg-r-1 tw-flex-shrink-0" :style="{backgroundColor: i.color, backgroundImage: i.styleImage }" />
+					<div>
+						<h5>{{ i.name }}</h5>
+						<section class="tw-mg-t-05" v-if="i.versions && i.versions.length > 1">
+							<span v-for="v in i.versions" data-tooltip-type="html" class="ffz-badge ffz-tooltip" :title="v.name" :style="{backgroundColor: i.color, backgroundImage: v.styleImage}" />
+						</section>
+						<!--button class="tw-mg-t-05 tw-button tw-button--hollow tw-tooltip-wrapper">
+							<span class="tw-button__text">Reset</span>
+							<span class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
+								{{ t('setting.reset', 'Reset to Default') }}
+							</span>
+						</button-->
+					</div>
+				</label>
+			</li>
+		</ul>
+	</section>
+</div>
+</template>
+
+<script>
+
+import SettingMixin from '../setting-mixin';
+
+export default {
+	mixins: [SettingMixin],
+	props: ['item', 'context'],
+
+	methods: {
+		sort(items) {
+			return items.sort((a, b) => {
+				const an = a.name.toLowerCase(),
+					bn = b.name.toLowerCase();
+
+				if ( an < bn ) return -1;
+				if ( an > bn ) return 1;
+				return 0;
+			});
+		},
+
+		onChange() {
+			this.set(this.$refs.control.checked);
+		}
+	}
+}
+
+</script>
+
+<style lang="scss" scoped>
+.ffz--badge-info {
+	&.default {
+		label:before, label:after {
+			opacity: 0.5
+		}
+	}
+
+	.tw-checkbox__input:checked+.tw-checkbox__label:after,
+	label:before, label:after {
+		top: 1.05rem;
+	}
+
+	.ffz-badge.preview-image {
+		width: 7.2rem;
+		height: 7.2rem;
+		background-size: 7.2rem;
+		background-repeat: no-repeat;
+	}
+
+	width: 30rem;
+}
+</style>
diff --git a/src/modules/tooltips.js b/src/modules/tooltips.js
index 5710d4e3..6144733c 100644
--- a/src/modules/tooltips.js
+++ b/src/modules/tooltips.js
@@ -39,7 +39,7 @@ export default class TooltipProvider extends Module {
 	onEnable() {
 		const container = document.body.querySelector('.twilight-root') || document.body;
 
-		this.tips = new Tooltip('body [data-reactroot]', 'ffz-tooltip', {
+		this.tips = new Tooltip('body #root', 'ffz-tooltip', {
 			html: true,
 			delayHide: this.checkDelayHide.bind(this),
 			delayShow: this.checkDelayShow.bind(this),
diff --git a/src/sites/twitch-twilight/index.js b/src/sites/twitch-twilight/index.js
index dfda46f5..ca0f5ef2 100644
--- a/src/sites/twitch-twilight/index.js
+++ b/src/sites/twitch-twilight/index.js
@@ -38,10 +38,8 @@ export default class Twilight extends BaseSite {
 	}
 
 	onEnable() {
-		const root = this.fine.getParent(this.fine.react),
-			ctx = this.context = root && root._context,
-
-			store = this.store = ctx && ctx.store;
+		const thing = this.fine.searchTree(null, n => n.props && n.props.store),
+			store = this.store = thing && thing.props && thing.props.store;
 
 		if ( ! store )
 			return new Promise(r => setTimeout(r, 50)).then(() => this.onEnable());
@@ -64,10 +62,10 @@ export default class Twilight extends BaseSite {
 	updateContext() {
 		try {
 			const state = this.store.getState(),
-				route = this.context.router && this.context.router.route;
+				history = this.router && this.router.history;
 
 			this.settings.updateContext({
-				location: route && route.location,
+				location: history && history.location,
 				ui: state && state.ui,
 				session: state && state.session
 			});
diff --git a/src/sites/twitch-twilight/modules/channel_bar.js b/src/sites/twitch-twilight/modules/channel_bar.js
index c0bc3d24..df2ae8cb 100644
--- a/src/sites/twitch-twilight/modules/channel_bar.js
+++ b/src/sites/twitch-twilight/modules/channel_bar.js
@@ -7,6 +7,9 @@
 import Module from 'utilities/module';
 import {deep_copy} from 'utilities/object';
 
+import CHANNEL_QUERY from './channel_bar_query.gql';
+
+
 export default class ChannelBar extends Module {
 	constructor(...args) {
 		super(...args);
@@ -17,17 +20,9 @@ export default class ChannelBar extends Module {
 		this.inject('site.apollo');
 		this.inject('metadata');
 
-
-		this.apollo.registerModifier('ChannelPage_ChannelInfoBar_User', this.apollo.gql`query {
-			user {
-				stream {
-					createdAt
-					type
-				}
-			}
-		}`);
-
+		this.apollo.registerModifier('ChannelPage_ChannelInfoBar_User', CHANNEL_QUERY);
 		this.apollo.registerModifier('ChannelPage_ChannelInfoBar_User', data => {
+			console.log('BOOP BOOP A DOOP', data);
 			const u = data && data.data && data.data.user;
 			if ( u ) {
 				const o = u.profileViewCount = new Number(u.profileViewCount || 0);
diff --git a/src/sites/twitch-twilight/modules/channel_bar_query.gql b/src/sites/twitch-twilight/modules/channel_bar_query.gql
new file mode 100644
index 00000000..fd905375
--- /dev/null
+++ b/src/sites/twitch-twilight/modules/channel_bar_query.gql
@@ -0,0 +1,8 @@
+query {
+	user {
+		stream {
+			createdAt
+			type
+		}
+	}
+}
\ No newline at end of file
diff --git a/src/sites/twitch-twilight/modules/chat/index.js b/src/sites/twitch-twilight/modules/chat/index.js
index b46a2534..c763ec44 100644
--- a/src/sites/twitch-twilight/modules/chat/index.js
+++ b/src/sites/twitch-twilight/modules/chat/index.js
@@ -61,25 +61,30 @@ const EVENTS = [
 	'onJoinedEvent',
 	'onDisconnectedEvent',
 	'onReconnectingEvent',
+	'onChatMessageEvent',
+	'onChatNoticeEvent',
+	'onChatActionEvent',
+	'onBadgesUpdatedEvent',
 	'onHostingEvent',
 	'onUnhostEvent',
-	'onChatMessageEvent',
-	'onChatActionEvent',
-	'onChatNoticeEvent',
-	'onTimeoutEvent',
-	'onBanEvent',
-	'onModerationEvent',
+	'onPurchaseEvent',
+	'onCrateEvent',
+	//'onRitualEvent',
 	'onSubscriptionEvent',
 	//'onResubscriptionEvent',
 	'onSubscriptionGiftEvent',
-	'onRoomStateEvent',
-	'onSlowModeEvent',
-	'onFollowerOnlyModeEvent',
-	'onSubscriberOnlyModeEvent',
+	'onTimeoutEvent',
+	'onBanEvent',
 	'onClearChatEvent',
 	'onRaidEvent',
 	'onUnraidEvent',
-	'onBadgesUpdatedEvent'
+	'onRoomModsEvent',
+	'onRoomStateEvent',
+	'onFollowerOnlyModeEvent',
+	'onSlowModeEvent',
+	'onSubscriberOnlyModeEvent',
+	'onEmoteOnlyModeEvent',
+	'onBitsCharityEvent'
 ];
 
 
@@ -408,7 +413,7 @@ export default class ChatHook extends Module {
 				const i = this,
 					pm = this.postMessage;
 
-				for(const key of EVENTS) { // eslint-disable-line guard-for-in
+				for(const key of EVENTS) {
 					const original = this[key];
 					if ( original )
 						this[key] = function(e, t) {
diff --git a/src/sites/twitch-twilight/modules/chat/line.js b/src/sites/twitch-twilight/modules/chat/line.js
index 75e2f52f..eb3437d0 100644
--- a/src/sites/twitch-twilight/modules/chat/line.js
+++ b/src/sites/twitch-twilight/modules/chat/line.js
@@ -25,7 +25,12 @@ export default class ChatLine extends Module {
 
 		this.ChatLine = this.fine.define(
 			'chat-line',
-			n => n.renderMessageBody
+			n => n.renderMessageBody && ! n.getMessageParts
+		);
+
+		this.ChatRoomLine = this.fine.define(
+			'chat-room-line',
+			n => n.renderMessageBody && n.getMessageParts
 		);
 	}
 
@@ -64,8 +69,23 @@ export default class ChatLine extends Module {
 				const types = t.parent.chat_types || {},
 
 					msg = this.props.message,
-					is_action = msg.type === types.Action,
-					user = msg.user,
+					is_action = msg.type === types.Action;
+
+				if ( msg.content && ! msg.message )
+					msg.message = msg.content.text;
+
+				if ( msg.sender && ! msg.user ) {
+					msg.user = msg.sender;
+					msg.user.color = msg.user.color || msg.user.chatColor;
+				}
+
+				if ( ! msg.badges && msg.user.displayBadges ) {
+					const b = msg.badges = {};
+					for(const item of msg.user.displayBadges)
+						b[item.setID] = item.version;
+				}
+
+				const user = msg.user,
 					color = t.parent.colors.process(user.color),
 					/*bg_rgb = Color.RGBA.fromHex(user.color),
 					bg_color = bg_rgb.luminance() < .005 ? bg_rgb : bg_rgb.toHSLA().targetLuminance(0.005).toRGBA(),
diff --git a/src/sites/twitch-twilight/modules/compat_emote_menu.js b/src/sites/twitch-twilight/modules/compat_emote_menu.js
new file mode 100644
index 00000000..5ce0dd8e
--- /dev/null
+++ b/src/sites/twitch-twilight/modules/compat_emote_menu.js
@@ -0,0 +1,72 @@
+'use strict';
+
+// ============================================================================
+// Compatibility Layer
+// Emote Menu for Twitch (BTTV Emote Menu)
+// ============================================================================
+
+import Module from 'utilities/module';
+import {has} from 'utilities/object';
+
+export default class CompatEmoteMenu extends Module {
+	constructor(...args) {
+		super(...args);
+
+		this.should_enable = true;
+
+		this.inject('site.chat');
+		this.inject('chat.emotes');
+	}
+
+	async onEnable() {
+		const em = await this.findEmoteMenu();
+		if ( ! em )
+			return this.log.info('Emote Menu for Twitch was not found after 60 seconds.');
+
+		em.registerEmoteGetter('FrankerFaceZ', () => {
+			// We get literally no information about the current context,
+			// so we need to look up everything.
+			const cont = this.chat.ChatContainer.first,
+				props = cont && cont.props;
+
+			if ( ! props )
+				return;
+
+			const sets = this.emotes.getSets(props.userID, props.currentUserLogin, props.channelID, props.channelLogin),
+				emotes = [];
+
+			for(const set of sets) {
+				if ( ! set || ! set.emotes )
+					continue;
+
+				for(const emote_id in set.emotes)
+					if ( has(set.emotes, emote_id) ) {
+						const emote = set.emotes[emote_id];
+						if ( emote.hidden )
+							continue;
+
+						emotes.push({
+							text: emote.name,
+							url: emote.urls[1],
+							channel: `${set.source || 'FrankerFaceZ'} ${set.title}`,
+							badge: set.icon || '//cdn.frankerfacez.com/script/devicon.png'
+						});
+					}
+			}
+
+			return emotes;
+		});
+	}
+
+	async findEmoteMenu(delay = 0) {
+		if ( window.emoteMenu && emoteMenu.registerEmoteGetter )
+			return emoteMenu;
+
+		if ( delay >= 60000 )
+			return null;
+
+		return new Promise(s => {
+			setTimeout(() => this.findEmoteMenu(delay + 100).then(s), 100)
+		});
+	}
+}
\ No newline at end of file
diff --git a/src/sites/twitch-twilight/modules/directory/browse_popular.gql b/src/sites/twitch-twilight/modules/directory/browse_popular.gql
new file mode 100644
index 00000000..889d4bef
--- /dev/null
+++ b/src/sites/twitch-twilight/modules/directory/browse_popular.gql
@@ -0,0 +1,12 @@
+query {
+	streams {
+		edges {
+			node {
+				createdAt
+				broadcaster {
+					profileImageURL(width: 70)
+				}
+			}
+		}
+	}
+}
\ No newline at end of file
diff --git a/src/sites/twitch-twilight/modules/directory/browse_popular.js b/src/sites/twitch-twilight/modules/directory/browse_popular.js
index c560de94..47f57169 100644
--- a/src/sites/twitch-twilight/modules/directory/browse_popular.js
+++ b/src/sites/twitch-twilight/modules/directory/browse_popular.js
@@ -7,6 +7,8 @@
 import {SiteModule} from 'utilities/module';
 import {get} from 'utilities/object';
 
+import BROWSE_POPULAR from './browse_popular.gql';
+
 export default class BrowsePopular extends SiteModule {
 	constructor(...args) {
 		super(...args);
@@ -15,18 +17,7 @@ export default class BrowsePopular extends SiteModule {
 		this.inject('site.fine');
 		this.inject('settings');
 
-		this.apollo.registerModifier('BrowsePage_Popular', this.apollo.gql`query {
-			streams {
-				edges {
-					node {
-						createdAt
-						broadcaster {
-							profileImageURL(width: 70)
-						}
-					}
-				}
-			}
-		}`);
+		this.apollo.registerModifier('BrowsePage_Popular', BROWSE_POPULAR);
 
 		this.ChannelCard = this.fine.define(
 			'browse-all-channel-card',
diff --git a/src/sites/twitch-twilight/modules/directory/community.js b/src/sites/twitch-twilight/modules/directory/community.js
deleted file mode 100644
index c4c80ca0..00000000
--- a/src/sites/twitch-twilight/modules/directory/community.js
+++ /dev/null
@@ -1,33 +0,0 @@
-'use strict';
-
-// ============================================================================
-// Directory (Following, for now)
-// ============================================================================
-
-import {SiteModule} from 'utilities/module';
-
-export default class Community extends SiteModule {
-	constructor(...args) {
-		super(...args);
-
-		this.inject('site.apollo');
-
-		this.apollo.registerModifier('GamePage_Game', this.apollo.gql`query {
-			directory {
-				... on Community {
-					streams {
-						edges {
-							node {
-								createdAt
-								type
-								broadcaster {
-									profileImageURL(width: 70)
-								}
-							}
-						}
-					}
-				}
-			}
-		}`);
-	}
-}
\ No newline at end of file
diff --git a/src/sites/twitch-twilight/modules/directory/followed_channels.gql b/src/sites/twitch-twilight/modules/directory/followed_channels.gql
new file mode 100644
index 00000000..3118abf2
--- /dev/null
+++ b/src/sites/twitch-twilight/modules/directory/followed_channels.gql
@@ -0,0 +1,13 @@
+query {
+	currentUser {
+		followedLiveUsers {
+			nodes {
+				profileImageURL(width: 70)
+				stream {
+					type
+					createdAt
+				}
+			}
+		}
+	}
+}
\ No newline at end of file
diff --git a/src/sites/twitch-twilight/modules/directory/followed_hosts.gql b/src/sites/twitch-twilight/modules/directory/followed_hosts.gql
new file mode 100644
index 00000000..a0717056
--- /dev/null
+++ b/src/sites/twitch-twilight/modules/directory/followed_hosts.gql
@@ -0,0 +1,15 @@
+query {
+	currentUser {
+		followedHosts {
+			nodes {
+				profileImageURL(width: 70)
+				hosting {
+					profileImageURL(width: 70)
+					stream {
+						createdAt
+					}
+				}
+			}
+		}
+	}
+}
\ No newline at end of file
diff --git a/src/sites/twitch-twilight/modules/directory/followed_index.gql b/src/sites/twitch-twilight/modules/directory/followed_index.gql
new file mode 100644
index 00000000..3dcf06f7
--- /dev/null
+++ b/src/sites/twitch-twilight/modules/directory/followed_index.gql
@@ -0,0 +1,24 @@
+query {
+	currentUser {
+		followedLiveUsers {
+			nodes {
+				profileImageURL(width: 70)
+				stream {
+					createdAt
+				}
+			}
+		}
+		followedHosts {
+			nodes {
+				profileImageURL(width: 70)
+				hosting {
+					profileImageURL(width: 70)
+					stream {
+						createdAt
+						type
+					}
+				}
+			}
+		}
+	}
+}
\ No newline at end of file
diff --git a/src/sites/twitch-twilight/modules/directory/followed_live.gql b/src/sites/twitch-twilight/modules/directory/followed_live.gql
new file mode 100644
index 00000000..69595a41
--- /dev/null
+++ b/src/sites/twitch-twilight/modules/directory/followed_live.gql
@@ -0,0 +1,14 @@
+query {
+	currentUser {
+		followedLiveUsers {
+			edges {
+				node {
+					profileImageURL(width: 70)
+					stream {
+						createdAt
+					}
+				}
+			}
+		}
+	}
+}
\ No newline at end of file
diff --git a/src/sites/twitch-twilight/modules/directory/following.js b/src/sites/twitch-twilight/modules/directory/following.js
index 1db0a16a..e29e457b 100644
--- a/src/sites/twitch-twilight/modules/directory/following.js
+++ b/src/sites/twitch-twilight/modules/directory/following.js
@@ -10,6 +10,11 @@ import {get} from 'utilities/object';
 
 import Popper from 'popper.js';
 
+import FOLLOWED_INDEX from './followed_index.gql';
+import FOLLOWED_HOSTS from './followed_hosts.gql';
+import FOLLOWED_CHANNELS from './followed_channels.gql';
+import FOLLOWED_LIVE from './followed_live.gql';
+
 export default class Following extends SiteModule {
 	constructor(...args) {
 		super(...args);
@@ -58,75 +63,10 @@ export default class Following extends SiteModule {
 			changed: () => this.ChannelCard.forceUpdate()
 		});
 
-		this.apollo.registerModifier('FollowedIndex_CurrentUser', this.apollo.gql`query {
-			currentUser {
-				followedLiveUsers {
-					nodes {
-						profileImageURL(width: 70)
-						stream {
-							createdAt
-						}
-					}
-				}
-				followedHosts {
-					nodes {
-						profileImageURL(width: 70)
-						hosting {
-							profileImageURL(width: 70)
-							stream {
-								createdAt
-								type
-							}
-						}
-					}
-				}
-			}
-		}`);
-
-		this.apollo.registerModifier('FollowingLive_CurrentUser', this.apollo.gql`query {
-			currentUser {
-				followedLiveUsers {
-					edges {
-						node {
-							profileImageURL(width: 70)
-							stream {
-								createdAt
-							}
-						}
-					}
-				}
-			}
-		}`);
-
-		this.apollo.registerModifier('FollowingHosts_CurrentUser', this.apollo.gql`query {
-			currentUser {
-				followedHosts {
-					nodes {
-						profileImageURL(width: 70)
-						hosting {
-							profileImageURL(width: 70)
-							stream {
-								createdAt
-							}
-						}
-					}
-				}
-			}
-		}`);
-
-		this.apollo.registerModifier('FollowedChannels', this.apollo.gql`query {
-			currentUser {
-				followedLiveUsers {
-					nodes {
-						profileImageURL(width: 70)
-						stream {
-							type
-							createdAt
-						}
-					}
-				}
-			}
-		}`);
+		this.apollo.registerModifier('FollowedIndex_CurrentUser', FOLLOWED_INDEX);
+		this.apollo.registerModifier('FollowingLive_CurrentUser', FOLLOWED_LIVE);
+		this.apollo.registerModifier('FollowingHosts_CurrentUser', FOLLOWED_HOSTS);
+		this.apollo.registerModifier('FollowedChannels', FOLLOWED_CHANNELS);
 
 		this.ChannelCard = this.fine.define(
 			'following-channel-card',
diff --git a/src/sites/twitch-twilight/modules/directory/game.gql b/src/sites/twitch-twilight/modules/directory/game.gql
new file mode 100644
index 00000000..e9914785
--- /dev/null
+++ b/src/sites/twitch-twilight/modules/directory/game.gql
@@ -0,0 +1,30 @@
+query {
+	directory {
+		... on Game {
+			streams {
+				edges {
+					node {
+						createdAt
+						type
+						broadcaster {
+							profileImageURL(width: 70)
+						}
+					}
+				}
+			}
+		}
+		... on Community {
+			streams {
+				edges {
+					node {
+						createdAt
+						type
+						broadcaster {
+							profileImageURL(width: 70)
+						}
+					}
+				}
+			}
+		}
+	}
+}
\ No newline at end of file
diff --git a/src/sites/twitch-twilight/modules/directory/game.js b/src/sites/twitch-twilight/modules/directory/game.js
index 46d7d840..30d020dd 100644
--- a/src/sites/twitch-twilight/modules/directory/game.js
+++ b/src/sites/twitch-twilight/modules/directory/game.js
@@ -7,6 +7,8 @@
 import {SiteModule} from 'utilities/module';
 import {createElement as e} from 'utilities/dom';
 
+import GAME_QUERY from './game.gql';
+
 export default class Game extends SiteModule {
 	constructor(...args) {
 		super(...args);
@@ -22,23 +24,7 @@ export default class Game extends SiteModule {
 			n => n.renderFollowButton && n.renderGameDetailsTab
 		);
 
-		this.apollo.registerModifier('GamePage_Game', this.apollo.gql`query {
-			directory {
-				... on Game {
-					streams {
-						edges {
-							node {
-								createdAt
-								type
-								broadcaster {
-									profileImageURL(width: 70)
-								}
-							}
-						}
-					}
-				}
-			}
-		}`);
+		this.apollo.registerModifier('GamePage_Game', GAME_QUERY);
 	}
 
 	onEnable() {
diff --git a/src/sites/twitch-twilight/modules/directory/index.js b/src/sites/twitch-twilight/modules/directory/index.js
index 84f1ff94..5db0aba3 100644
--- a/src/sites/twitch-twilight/modules/directory/index.js
+++ b/src/sites/twitch-twilight/modules/directory/index.js
@@ -11,7 +11,6 @@ import {get} from 'utilities/object';
 
 import Following from './following';
 import Game from './game';
-import Community from './community';
 import BrowsePopular from './browse_popular';
 
 export default class Directory extends SiteModule {
@@ -30,7 +29,6 @@ export default class Directory extends SiteModule {
 
 		this.inject(Following);
 		this.inject(Game);
-		this.inject(Community);
 		this.inject(BrowsePopular);
 
 		this.apollo.registerModifier('GamePage_Game', res => this.modifyStreams(res), false);
diff --git a/src/sites/twitch-twilight/modules/host_button.js b/src/sites/twitch-twilight/modules/host_button.js
index 1dad0baf..d77200bd 100644
--- a/src/sites/twitch-twilight/modules/host_button.js
+++ b/src/sites/twitch-twilight/modules/host_button.js
@@ -47,7 +47,7 @@ export default class HostButton extends Module {
 
 				if (userLogin)
 					this.joinChannel(userLogin);
-					
+
 				this.metadata.updateMetadata('host');
 			}
 		});
@@ -57,9 +57,9 @@ export default class HostButton extends Module {
 			button: true,
 
 			disabled: () => {
-				return this._host_updating || this._host_error;	
+				return this._host_updating || this._host_error;
 			},
-			
+
 			click: data => {
 				if (data.channel) this.sendHostUnhostCommand(data.channel.login);
 			},
@@ -69,7 +69,7 @@ export default class HostButton extends Module {
 					_host_options_vue = import(/* webpackChunkName: "host-options" */ './host-options.vue'),
 					_autoHosts = this.fetchAutoHosts(),
 					_autoHostSettings = this.fetchAutoHostSettings();
-				
+
 				const [, host_options_vue, autoHosts, autoHostSettings] = await Promise.all([vue.enable(), _host_options_vue, _autoHosts, _autoHostSettings]);
 
 				this._auto_host_tip = tip;
@@ -86,7 +86,7 @@ export default class HostButton extends Module {
 
 				const ffz_user = this.site.getUser(),
 					userLogin = ffz_user && ffz_user.login;
-					
+
 				if (data.channel && data.channel.login === userLogin) {
 					return '';
 				}
@@ -168,22 +168,22 @@ export default class HostButton extends Module {
 
 		this.on('tmi:host', e => {
 			if (e.channel.substring(1) !== userLogin) return;
-			
+
 			clearTimeout(this._host_feedback);
 			this._host_error = false;
 			this._last_hosted_channel = e.target;
-			
+
 			this._host_updating = false;
 			this.metadata.updateMetadata('host');
 		});
 
 		this.on('tmi:unhost', e => {
 			if (e.channel.substring(1) !== userLogin) return;
-			
+
 			clearTimeout(this._host_feedback);
 			this._host_error = false;
 			this._last_hosted_channel = null;
-			
+
 			this._host_updating = false;
 			this.metadata.updateMetadata('host');
 		});
@@ -232,12 +232,12 @@ export default class HostButton extends Module {
 					const t = e.target,
 						setting = t.dataset.setting;
 					let state = t.checked;
-				
+
 					if ( setting === 'strategy' )
 						state = state ? 'random' : 'ordered';
 					else if ( setting === 'deprioritize_vodcast' )
 						state = ! state;
-				
+
 					this.updateAutoHostSetting(setting, state);
 				}
 			})
@@ -302,20 +302,20 @@ export default class HostButton extends Module {
 
 	queueHostUpdate() {
 		if (this._host_update_timer) clearTimeout(this._host_update_timer);
-		
+
 		this._host_update_timer = setTimeout(() => {
 			this._host_update_timer = undefined;
 			this.updateAutoHosts(this.autoHosts);
 		}, 1000);
 	}
-	
+
 	rearrangeHosts(oldIndex, newIndex) {
 		const host = this.autoHosts.splice(oldIndex, 1)[0];
 		this.autoHosts.splice(newIndex, 0, host);
 
 		this.queueHostUpdate();
 	}
-	
+
 	currentRoomInHosts() {
 		return this.getAutoHostIDs(this.autoHosts).includes(parseInt(this._current_channel_id, 10));
 	}
@@ -329,7 +329,7 @@ export default class HostButton extends Module {
 
 	removeUserFromHosts(event) {
 		const id = event.target.closest('.ffz--host-user').dataset.id;
-		
+
 		const newHosts = [];
 		for (let i = 0; i < this.autoHosts.length; i++) {
 			if (this.autoHosts[i]._id != id) newHosts.push(this.autoHosts[i]);
diff --git a/src/sites/twitch-twilight/modules/player.js b/src/sites/twitch-twilight/modules/player.js
index 7f4814fb..bf75c273 100644
--- a/src/sites/twitch-twilight/modules/player.js
+++ b/src/sites/twitch-twilight/modules/player.js
@@ -192,12 +192,12 @@ export default class Player extends Module {
 
 	disableAutoplay(inst) {
 		if ( ! inst.player ) {
-			this.log.warn("disableAutoplay() called but Player was not ready");
+			this.log.warn('disableAutoplay() called but Player was not ready');
 			return;
 		}
 
 		if ( ! inst.ffzAutoplay ) {
-			var playListener = () => {
+			const playListener = () => {
 				this.log.info('Auto-paused player');
 				inst.ffzAutoplay = null;
 				inst.player.pause();
@@ -209,6 +209,7 @@ export default class Player extends Module {
 					inst.player.removeEventListener('contentShowing', playListener);
 				}, 1000);
 			}
+
 			inst.ffzAutoplay = playListener;
 			inst.player.addEventListener('play', inst.ffzAutoplay);
 			inst.player.addEventListener('playing', inst.ffzAutoplay);
diff --git a/src/utilities/compat/apollo.js b/src/utilities/compat/apollo.js
index 24b3b3a9..01bb3a3d 100644
--- a/src/utilities/compat/apollo.js
+++ b/src/utilities/compat/apollo.js
@@ -7,7 +7,6 @@
 
 import Module from 'utilities/module';
 import {has, get} from 'utilities/object';
-import gql from 'graphql-tag';
 
 export default class Apollo extends Module {
 	constructor(...args) {
@@ -16,17 +15,8 @@ export default class Apollo extends Module {
 		this.modifiers = {};
 		this.post_modifiers = {};
 
-		this.gql = gql;
-
 		this.inject('..web_munch');
 		this.inject('..fine');
-
-		this.registerModifier('ViewerCard', gql`query {
-			targetUser: user {
-				createdAt
-				profileViewCount
-			}
-		}`);
 	}
 
 	async onEnable() {
@@ -34,10 +24,10 @@ export default class Apollo extends Module {
 		let client = this.client;
 
 		if ( ! client ) {
-			const root = this.fine.getParent(this.fine.react),
-				ctx = root && root._context;
+			const root = this.fine.react,
+				inst = root && root.stateNode;
 
-			client = this.client = ctx && ctx.client;
+			client = this.client = inst && inst.props && inst.props.client;
 		}
 
 		this.printer = this.web_munch.getModule('gql-printer');
diff --git a/src/utilities/compat/fine-router.js b/src/utilities/compat/fine-router.js
index 4504860e..46000e91 100644
--- a/src/utilities/compat/fine-router.js
+++ b/src/utilities/compat/fine-router.js
@@ -22,10 +22,8 @@ export default class FineRouter extends Module {
 	}
 
 	onEnable() {
-		const root = this.fine.getParent(this.fine.react),
-			ctx = this.context = root && root._context,
-			router = ctx && ctx.router,
-			history = this.history = router && router.history;
+		const thing = this.fine.searchTree(null, n => n.props && n.props.history),
+			history = this.history = thing && thing.props && thing.props.history;
 
 		if ( ! history )
 			return new Promise(r => setTimeout(r, 50)).then(() => this.onEnable());
diff --git a/src/utilities/compat/fine.js b/src/utilities/compat/fine.js
index b3cbdec0..30169df8 100644
--- a/src/utilities/compat/fine.js
+++ b/src/utilities/compat/fine.js
@@ -24,20 +24,21 @@ export default class Fine extends Module {
 	async onEnable(tries=0) {
 		// TODO: Move awaitElement to utilities/dom
 		if ( ! this.root_element )
-			this.root_element = await this.parent.awaitElement(this.selector || 'body [data-reactroot]');
+			this.root_element = await this.parent.awaitElement(this.selector || 'body #root');
 
-		const accessor = this.accessor = Fine.findAccessor(this.root_element);
-		if ( ! accessor ) {
+		if ( ! this.root_element || ! this.root_element._reactRootContainer ) {
 			if ( tries > 500 )
-				throw new Error(`unable to find React after 25 seconds`);
+				throw new Error('Unable to find React after 25 seconds');
+			this.root_element = null;
 			return new Promise(r => setTimeout(r, 50)).then(() => this.onEnable(tries+1));
 		}
 
-		this.react = this.getReactInstance(this.root_element);
+		this.react_root = this.root_element._reactRootContainer;
+		this.react = this.react_root.current.child;
 	}
 
 	onDisable() {
-		this.root_element = this.react = this.accessor = null;
+		this.react_root = this.root_element = this.react = this.accessor = null;
 	}
 
 
@@ -53,101 +54,128 @@ export default class Fine extends Module {
 	// ========================================================================
 
 	getReactInstance(element) {
+		if ( ! this.accessor )
+			this.accessor = Fine.findAccessor(element);
+		if ( ! this.accessor )
+			return;
+
 		return element[this.accessor];
 	}
 
 	getOwner(instance) {
-		if ( instance._reactInternalInstance )
-			instance = instance._reactInternalInstance;
+		if ( instance._reactInternalFiber )
+			instance = instance._reactInternalFiber;
 		else if ( instance instanceof Node )
 			instance = this.getReactInstance(instance);
 
 		if ( ! instance )
 			return null;
 
-		return instance._owner || (instance._currentElement && instance._currentElement._owner);
+		return instance.return;
 	}
 
-	getHostNode(instance) { //eslint-disable-line class-methods-use-this
-		if ( instance._reactInternalInstance )
-			instance = instance._reactInternalInstance;
+	getHostNode(instance) {
+		if ( instance._reactInternalFiber )
+			instance = instance._reactInternalFiber;
 		else if ( instance instanceof Node )
 			instance = this.getReactInstance(instance);
 
 		while( instance )
-			if ( instance._hostNode )
-				return instance._hostNode;
+			if ( instance.stateNode instanceof Node )
+				return instance.stateNode
 			else
-				instance = instance._renderedComponent;
+				instance = instance.parent;
 	}
 
 	getParent(instance) {
-		const owner = this.getOwner(instance);
-		return owner && this.getOwner(owner);
+		return this.getOwner(instance);
+	}
+
+	getFirstChild(node) {
+		if ( node._reactInternalFiber )
+			node = node._reactInternalFiber;
+		else if ( node instanceof Node )
+			node = this.getReactInstance(node);
+
+		if ( ! node )
+			return null;
+
+		return node.child;
+	}
+
+	getChildren(node) {
+		if ( node._reactInternalFiber )
+			node = node._reactInternalFiber;
+		else if ( node instanceof Node )
+			node = this.getReactInstance(node);
+
+		if ( ! node )
+			return null;
+
+		const children = [];
+		let child = node.child;
+		while(child) {
+			children.push(child);
+			child = child.sibling;
+		}
+
+		return children;
 	}
 
 	searchParent(node, criteria, max_depth=15, depth=0) {
-		if ( node._reactInternalInstance )
-			node = node._reactInternalInstance;
+		if ( node._reactInternalFiber )
+			node = node._reactInternalFiber;
 		else if ( node instanceof Node )
 			node = this.getReactInstance(node);
 
 		if ( ! node || depth > max_depth )
 			return null;
 
-		const inst = node._instance;
+		const inst = node.stateNode;
 		if ( inst && criteria(inst) )
 			return inst;
 
-		if ( node._currentElement && node._currentElement._owner ) {
-			const result = this.searchParent(node._currentElement._owner, criteria, max_depth, depth+1);
+		if ( node.return ) {
+			const result = this.searchParent(node.return, criteria, max_depth, depth+1);
 			if ( result )
 				return result;
 		}
 
-		if ( node._hostParent )
-			return this.searchParent(node._hostParent, criteria, max_depth, depth+1);
-
 		return null;
 	}
 
 	searchTree(node, criteria, max_depth=15, depth=0) {
 		if ( ! node )
 			node = this.react;
-		else if ( node._reactInternalInstance )
-			node = node._reactInternalInstance;
+		else if ( node._reactInternalFiber )
+			node = node._reactInternalFiber;
 		else if ( node instanceof Node )
 			node = this.getReactInstance(node);
 
 		if ( ! node || depth > max_depth )
 			return null;
 
-		const inst = node._instance;
+		const inst = node.stateNode;
 		if ( inst && criteria(inst) )
 			return inst;
 
-		const children = node._renderedChildren,
-			component = node._renderedComponent;
-
-		if ( children )
-			for(const key in children)
-				if ( has(children, key) ) {
-					const child = children[key];
-					const result = child && this.searchTree(child, criteria, max_depth, depth+1);
-					if ( result )
-						return result;
-				}
-
-		if ( component )
-			return this.searchTree(component, criteria, max_depth, depth+1);
+		if ( node.child ) {
+			let child = node.child;
+			while(child) {
+				const result = this.searchTree(child, criteria, max_depth, depth+1);
+				if ( result )
+					return result;
+				child = child.sibling;
+			}
+		}
 	}
 
 
 	searchAll(node, criterias, max_depth=15, depth=0, data) {
 		if ( ! node )
 			node = this.react;
-		else if ( node._reactInternalInstance )
-			node = node._reactInternalInstance;
+		else if ( node._reactInternalFiber )
+			node = node._reactInternalFiber;
 		else if ( node instanceof Node )
 			node = this.getReactInstance(node);
 
@@ -167,7 +195,7 @@ export default class Fine extends Module {
 		if ( depth > data.max_depth )
 			data.max_depth = depth;
 
-		const inst = node._instance;
+		const inst = node.stateNode;
 		if ( inst ) {
 			const cls = inst.constructor,
 				idx = data.classes.indexOf(cls);
@@ -189,18 +217,13 @@ export default class Fine extends Module {
 			}
 		}
 
-		const children = node._renderedChildren,
-			component = node._renderedComponent;
-
-		if ( children )
-			for(const key in children)
-				if ( has(children, key) ) {
-					const child = children[key];
-					child && this.searchAll(child, criterias, max_depth, depth+1, data);
-				}
-
-		if ( component )
-			this.searchAll(component, criterias, max_depth, depth+1, data);
+		if ( node.child ) {
+			let child = node.child;
+			while(child) {
+				this.searchAll(child, criterias, max_depth, depth+1, data);
+				child = child.sibling;
+			}
+		}
 
 		return data.out;
 	}
@@ -400,8 +423,9 @@ export class FineWrapper extends EventEmitter {
 
 		if ( instances )
 			for(const inst of instances) {
-				if ( inst._reactInternalInstance && inst._reactInternalInstance._renderedComponent )
-					inst._ffz_mounted = true;
+				// How do we check mounted state for fibers?
+				//if ( inst._reactInternalInstance && inst._reactInternalInstance._renderedComponent )
+				//	inst._ffz_mounted = true;
 				_instances.add(inst);
 			}
 
diff --git a/src/utilities/tooltip.js b/src/utilities/tooltip.js
index 7d02b22f..d79e7d3d 100644
--- a/src/utilities/tooltip.js
+++ b/src/utilities/tooltip.js
@@ -160,7 +160,7 @@ export class Tooltip {
 		if ( ! tip )
 			return;
 
-			tip.state = false;
+		tip.state = false;
 
 		if ( tip._show_timer ) {
 			clearTimeout(tip._show_timer);
diff --git a/webpack.common.js b/webpack.common.js
index c67abf2e..afc88d87 100644
--- a/webpack.common.js
+++ b/webpack.common.js
@@ -45,6 +45,11 @@ module.exports = {
 				}
 			}]
 		},
+		{
+			test: /\.(graphql|gql)$/,
+			exclude: /node_modules/,
+			loader: 'graphql-tag/loader'
+		},
 		{
 			test: /\.(?:eot|ttf|woff|woff2)$/,
 			use: [{