From 038270d232bd1a70f9d8e0dfc95f9aab9ef8dd07 Mon Sep 17 00:00:00 2001
From: SirStendec <sir@stendec.me>
Date: Wed, 27 Jun 2018 14:13:59 -0400
Subject: [PATCH] 4.0.0-rc3. Display a warning for complex or invalid filtering
 terms, using the safe-regex NPM module. Add a separate `Regex (Word)`
 filtering mode. Fix channel hosting control. Fix hide extensions. Add a fix
 for bad local echo emote indices for chat. Position the color picker above
 rather than below for filter terms. Apply a dark theme to the color picker.
 Rewrite the filter terms editor to use the term editor component for adding a
 new term.

---
 changelog.html                                |  11 +
 package-lock.json                             |   4 +-
 package.json                                  |   1 +
 src/modules/chat/index.js                     |  54 ++-
 src/modules/chat/tokenizers.jsx               |   8 +-
 .../main_menu/components/basic-terms.vue      |  62 +---
 .../main_menu/components/color-picker.vue     |  11 +-
 .../main_menu/components/term-editor.vue      | 102 +++++-
 src/settings/context.js                       |   6 +-
 src/settings/types.js                         |   4 +-
 src/sites/twitch-twilight/modules/channel.js  |  55 ++-
 .../twitch-twilight/modules/chat/index.js     |  70 +++-
 .../twitch-twilight/modules/chat/line.js      |  10 +-
 .../modules/css_tweaks/index.js               |  11 +-
 .../modules/directory/browse_popular.js       |  72 +---
 .../modules/directory/following.jsx           | 115 ++----
 .../modules/directory/game.jsx                |   5 +-
 .../modules/directory/index.jsx               | 345 ++++++++++--------
 src/sites/twitch-twilight/styles/channel.scss |   8 +
 src/sites/twitch-twilight/styles/chat.scss    |   5 +
 .../twitch-twilight/styles/directory.scss     |  30 +-
 styles/widgets.scss                           |   7 +
 styles/widgets/color-picker.scss              |  96 +++++
 23 files changed, 669 insertions(+), 423 deletions(-)
 create mode 100644 styles/widgets/color-picker.scss

diff --git a/changelog.html b/changelog.html
index 37544ca9..108b5547 100644
--- a/changelog.html
+++ b/changelog.html
@@ -1,3 +1,14 @@
+<div class="list-header">4.0.0-rc3<span>@440f1fb9360578cbde7b</span> <time datetime="2018-05-31">(2018-06-27)</time></div>
+<ul class="chat-menu-content menu-side-padding">
+	<li>Added: Display a warning if filter terms are invalid or potentially complex.</li>
+	<li>Changed: Separate <code>Regex</code> and <code>Regex (Word)</code> term modes to allow matching regular expressions without your expression being wrapped in separators.</li>
+	<li>Fixed: Disable channel hosting now works again.</li>
+	<li>Fixed: Hide extensions now works again, though it isn't as necessary now that you can hide individual player extensions natively.</li>
+	<li>Fixed: Twitch's updated chat code not calculating emote positions in locally echoed messages correctly.</li>
+	<li>Fixed: Position the color picker above the control rather than below when creating highlight terms to avoid the control going out of the window.</li>
+	<li>Fixed: Apply the dark theme to the color picker.</li>
+</ul>
+
 <div class="list-header">4.0.0-rc2<span>@377f701926189263186b</span> <time datetime="2018-05-31">(2018-05-31)</time></div>
 <ul class="chat-menu-content menu-side-padding">
 	<li>Added: Basic support for custom highlight terms and blocked terms in chat. This system will later be replaced with a more powerful chat filtering system.</li>
diff --git a/package-lock.json b/package-lock.json
index 964e2f1e..ef34edd7 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -7680,8 +7680,7 @@
     "ret": {
       "version": "0.1.15",
       "resolved": "https://registry.npmjs.org/ret/-/ret-0.1.15.tgz",
-      "integrity": "sha512-TTlYpa+OL+vMMNG24xSlQGEJ3B/RzEfUlLct7b5G/ytav+wPrplCpVMFuwzXbkecJrb6IYo1iFb0S9v37754mg==",
-      "dev": true
+      "integrity": "sha512-TTlYpa+OL+vMMNG24xSlQGEJ3B/RzEfUlLct7b5G/ytav+wPrplCpVMFuwzXbkecJrb6IYo1iFb0S9v37754mg=="
     },
     "right-align": {
       "version": "0.1.3",
@@ -7754,7 +7753,6 @@
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/safe-regex/-/safe-regex-1.1.0.tgz",
       "integrity": "sha1-QKNmnzsHfR6UPURinhV91IAjvy4=",
-      "dev": true,
       "requires": {
         "ret": "0.1.15"
       }
diff --git a/package.json b/package.json
index 94b48a1d..df81cfb5 100755
--- a/package.json
+++ b/package.json
@@ -58,6 +58,7 @@
     "path-to-regexp": "^2.2.1",
     "popper.js": "^1.14.3",
     "raven-js": "^3.24.2",
+    "safe-regex": "^1.1.0",
     "sortablejs": "^1.7.0",
     "vue": "^2.5.16",
     "vue-clickaway": "^2.2.2",
diff --git a/src/modules/chat/index.js b/src/modules/chat/index.js
index 4ae2dc16..6d0b0def 100644
--- a/src/modules/chat/index.js
+++ b/src/modules/chat/index.js
@@ -6,7 +6,7 @@
 
 import Module from 'utilities/module';
 import {createElement, ManagedStyle} from 'utilities/dom';
-import {timeout, has, glob_to_regex, escape_regex} from 'utilities/object';
+import {timeout, has, glob_to_regex, escape_regex, split_chars} from 'utilities/object';
 
 import Badges from './badges';
 import Emotes from './emotes';
@@ -111,6 +111,7 @@ export default class Chat extends Module {
 		this.settings.add('chat.filtering.highlight-basic-terms', {
 			default: [],
 			type: 'array_merge',
+			always_inherit: true,
 			ui: {
 				path: 'Chat > Filtering >> Highlight Terms',
 				component: 'basic-terms',
@@ -129,30 +130,44 @@ export default class Chat extends Module {
 				const colors = new Map;
 
 				for(const item of val) {
-					let list;
 					const c = item.c || null,
 						t = item.t;
 
-					let v = item.v;
+					let v = item.v, word = true;
 
 					if ( t === 'glob' )
 						v = glob_to_regex(v);
 
-					else if ( t !== 'raw' )
+					else if ( t === 'raw' )
+						word = false;
+
+					else if ( t !== 'regex' )
 						v = escape_regex(v);
 
 					if ( ! v || ! v.length )
 						continue;
 
+					try {
+						new RegExp(v);
+					} catch(err) {
+						continue;
+					}
+
 					if ( colors.has(c) )
-						colors.get(c).push(v);
-					else
-						colors.set(c, [v]);
+						colors.get(c)[word ? 0 : 1].push(v);
+					else {
+						const vals = [[],[]];
+						colors.set(c, vals);
+						vals[word ? 0 : 1].push(v);
+					}
 				}
 
+				for(const [key, list] of colors) {
+					if ( list[0].length )
+						list[1].push(`\\b(?:${list[0].join('|')})\\b`);
 
-				for(const [key, list] of colors)
-					colors.set(key, new RegExp(`\\b(${list.join('|')})\\b`, 'gi'));
+					colors.set(key, new RegExp(list[1].join('|'), 'gi'));
+				}
 
 				return colors;
 			}
@@ -162,6 +177,7 @@ export default class Chat extends Module {
 		this.settings.add('chat.filtering.highlight-basic-blocked', {
 			default: [],
 			type: 'array_merge',
+			always_inherit: true,
 			ui: {
 				path: 'Chat > Filtering >> Blocked Terms',
 				component: 'basic-terms'
@@ -176,28 +192,34 @@ export default class Chat extends Module {
 				if ( ! val || ! val.length )
 					return null;
 
-				const out = [];
+				const out = [[], []];
 
 				for(const item of val) {
 					const t = item.t;
-					let v = item.v;
+					let v = item.v, word = true;
 
 					if ( t === 'glob' )
 						v = glob_to_regex(v);
 
-					else if ( t !== 'raw' )
+					else if ( t === 'raw' )
+						word = false;
+
+					else if ( t !== 'regex' )
 						v = escape_regex(v);
 
 					if ( ! v || ! v.length )
 						continue;
 
-					out.push(v);
+					out[word ? 0 : 1].push(v);
 				}
 
-				if ( ! out.length )
+				if ( out[0].length )
+					out[1].push(`\\b(?:${out[0].join('|')})\\b`);
+
+				if ( ! out[1].length )
 					return;
 
-				return new RegExp(`\\b(${out.join('|')})\\b`, 'gi');
+				return new RegExp(out[1].join('|'), 'gi');
 			}
 		});
 
@@ -621,7 +643,7 @@ export default class Chat extends Module {
 					ret = ret.slice(4);
 				}
 
-				idx += ret.length;
+				idx += split_chars(ret).length;
 				out.push(ret);
 			}
 		}
diff --git a/src/modules/chat/tokenizers.jsx b/src/modules/chat/tokenizers.jsx
index 544afab1..68512169 100644
--- a/src/modules/chat/tokenizers.jsx
+++ b/src/modules/chat/tokenizers.jsx
@@ -305,10 +305,10 @@ export const CustomHighlights = {
 
 					out.push({
 						type: 'highlight',
-						text: match[1]
+						text: match[0]
 					});
 
-					idx = nix + match[1].length;
+					idx = nix + match[0].length;
 				}
 
 				if ( idx < text.length )
@@ -376,10 +376,10 @@ export const BlockedTerms = {
 
 				out.push({
 					type: 'blocked',
-					text: match[1]
+					text: match[0]
 				});
 
-				idx = nix + match[1].length;
+				idx = nix + match[0].length;
 			}
 
 			if ( idx < text.length )
diff --git a/src/modules/main_menu/components/basic-terms.vue b/src/modules/main_menu/components/basic-terms.vue
index 40da673f..7069b112 100644
--- a/src/modules/main_menu/components/basic-terms.vue
+++ b/src/modules/main_menu/components/basic-terms.vue
@@ -1,38 +1,15 @@
 <template lang="html">
 	<section class="ffz--widget ffz--basic-terms">
-		<div class="tw-align-items-center tw-flex tw-flex-nowrap tw-flex-row tw-full-width tw-pd-b-1">
-			<div class="tw-flex-grow-1">
-				<input
-					v-model="new_term"
-					:placeholder="t('setting.terms.add-placeholder', 'Add a new term')"
-					type="text"
-					class="tw-input"
-					autocapitalize="off"
-					autocorrect="off"
-				>
-			</div>
-			<div v-if="item.colored" class="tw-flex-shrink-0 tw-mg-l-05">
-				<color-picker v-model="new_color" :nullable="true" :show-input="false" />
-			</div>
-			<div class="tw-flex-shrink-0 tw-mg-x-05">
-				<select v-model="new_type" class="tw-select ffz-min-width-unset">
-					<option value="text">{{ t('setting.terms.type.text', 'Text') }}</option>
-					<option value="raw">{{ t('setting.terms.type.regex', 'Regex') }}</option>
-					<option value="glob">{{ t('setting.terms.type.glob', 'Glob') }}</option>
-				</select>
-			</div>
-			<div class="tw-flex-shrink-0">
-				<button class="tw-button" @click="add">
-					<span class="tw-button__text">
-						{{ t('setting.terms.add-term', 'Add') }}
-					</span>
-				</button>
-			</div>
-		</div>
-		<div v-if="! val.length || val.length === 1 && hasInheritance" class="tw-c-text-alt-2 tw-font-size-4 tw-align-center tw-c-text-alt-2 tw-pd-05">
+		<term-editor
+			:term="default_term"
+			:colored="item.colored"
+			:adding="true"
+			@save="new_term"
+		/>
+		<div v-if="! val.length || val.length === 1 && hasInheritance" class="tw-mg-t-05 tw-c-text-alt-2 tw-font-size-4 tw-align-center tw-c-text-alt-2 tw-pd-05">
 			{{ t('setting.terms.no-terms', 'no terms are defined in this profile') }}
 		</div>
-		<ul v-else class="ffz--term-list">
+		<ul v-else class="ffz--term-list tw-mg-t-05">
 			<term-editor
 				v-for="term in val"
 				v-if="term.t !== 'inherit'"
@@ -59,9 +36,11 @@ export default {
 
 	data() {
 		return {
-			new_term: '',
-			new_type: 'text',
-			new_color: ''
+			default_term: {
+				v: '',
+				t: 'text',
+				c: ''
+			}
 		}
 	},
 
@@ -84,17 +63,12 @@ export default {
 	},
 
 	methods: {
-		add() {
-			const vals = Array.from(this.val);
-			vals.push({
-				v: {
-					t: this.new_type,
-					v: this.new_term,
-					c: typeof this.new_color === 'string' ? this.new_color : null
-				}
-			});
+		new_term(term) {
+			if ( ! term.v )
+				return;
 
-			this.new_term = '';
+			const vals = Array.from(this.val);
+			vals.push({v: term});
 			this.set(deep_copy(vals));
 		},
 
diff --git a/src/modules/main_menu/components/color-picker.vue b/src/modules/main_menu/components/color-picker.vue
index 3efa4f1d..dafc47ca 100644
--- a/src/modules/main_menu/components/color-picker.vue
+++ b/src/modules/main_menu/components/color-picker.vue
@@ -38,7 +38,12 @@
 				</figure>
 				<figure v-else class="ffz-i-eyedropper" />
 			</button>
-			<div v-on-clickaway="closePicker" v-if="open" class="tw-absolute tw-z-default tw-right-0">
+			<div
+				v-on-clickaway="closePicker"
+				v-if="open"
+				:class="{'ffz-bottom-100': openUp}"
+				class="tw-absolute tw-z-default tw-balloon--up tw-balloon--right"
+			>
 				<chrome-picker :value="colors" @input="onPick" />
 			</div>
 		</div>
@@ -74,6 +79,10 @@ export default {
 			default: true
 		},
 		showInput: {
+			type: Boolean,
+			default: true
+		},
+		openUp: {
 			type: Boolean,
 			default: false
 		}
diff --git a/src/modules/main_menu/components/term-editor.vue b/src/modules/main_menu/components/term-editor.vue
index 908a66d6..3efc6bbb 100644
--- a/src/modules/main_menu/components/term-editor.vue
+++ b/src/modules/main_menu/components/term-editor.vue
@@ -1,6 +1,18 @@
 <template lang="html">
-	<li class="ffz--term">
+	<div class="ffz--term">
 		<div class="tw-align-items-center tw-flex tw-flex-nowrap tw-flex-row tw-full-width">
+			<div v-if="! is_valid" class="tw-tooltip-wrapper tw-mg-r-05">
+				<figure class="tw-c-text-error ffz-i-attention" />
+				<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-left">
+					{{ t('setting.terms.warn-invalid', 'This highlight term is invalid.') }}
+				</div>
+			</div>
+			<div v-if="! is_safe" class="tw-tooltip-wrapper tw-mg-r-05">
+				<figure class="tw-c-text-hint ffz-i-attention" />
+				<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-left">
+					{{ t('setting.terms.warn-complex', 'This highlight term is potentially too complex. It may cause client lag.') }}
+				</div>
+			</div>
 			<div class="tw-flex-grow-1">
 				<h4 v-if="! editing" class="ffz-monospace">
 					<pre>{{ term.v }}</pre>
@@ -8,7 +20,7 @@
 				<input
 					v-else
 					v-model="edit_data.v"
-					:placeholder="edit_data.v"
+					:placeholder="adding ? t('setting.terms.add-placeholder', 'Add a new term') : edit_data.v"
 					type="text"
 					class="tw-input"
 					autocapitalize="off"
@@ -16,7 +28,7 @@
 				>
 			</div>
 			<div v-if="colored" class="tw-flex-shrink-0 tw-mg-l-05">
-				<color-picker v-if="editing" v-model="edit_data.c" :nullable="true" :show-input="false" />
+				<color-picker v-if="editing" v-model="edit_data.c" :nullable="true" :show-input="false" :open-up="true" />
 				<div v-else-if="term.c" class="ffz-color-preview">
 					<figure :style="`background-color: ${term.c}`">
 						&nbsp;
@@ -27,11 +39,19 @@
 				<span v-if="! editing">{{ term_type }}</span>
 				<select v-else v-model="edit_data.t" class="tw-select ffz-min-width-unset">
 					<option value="text">{{ t('setting.terms.type.text', 'Text') }}</option>
-					<option value="raw">{{ t('setting.terms.type.regex', 'Regex') }}</option>
 					<option value="glob">{{ t('setting.terms.type.glob', 'Glob') }}</option>
+					<option value="regex">{{ t('setting.terms.type.regex-word', 'Regex (Word)') }}</option>
+					<option value="raw">{{ t('setting.terms.type.regex', 'Regex') }}</option>
 				</select>
 			</div>
-			<div v-if="editing" class="tw-flex-shrink-0">
+			<div v-if="adding" class="tw-flex-shrink-0">
+				<button class="tw-button" @click="save">
+					<span class="tw-button__text">
+						{{ t('setting.terms.add-term', 'Add') }}
+					</span>
+				</button>
+			</div>
+			<div v-else-if="editing" class="tw-flex-shrink-0">
 				<button class="tw-button tw-button--text tw-tooltip-wrapper" @click="save">
 					<span class="tw-button__text ffz-i-floppy" />
 					<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
@@ -74,17 +94,36 @@
 				</button>
 			</div>
 		</div>
-	</li>
+	</div>
 </template>
 
 <script>
 
-import {deep_copy} from 'utilities/object';
+import safety from 'safe-regex';
+
+import {deep_copy, glob_to_regex, escape_regex} from 'utilities/object';
 
 export default {
-	props: ['term', 'colored'],
+	props: {
+		term: Object,
+		colored: {
+			type: Boolean,
+			default: false
+		},
+		adding: {
+			type: Boolean,
+			default: false
+		}
+	},
 
 	data() {
+		if ( this.adding )
+			return {
+				deleting: false,
+				editing: true,
+				edit_data: deep_copy(this.term)
+			};
+
 		return {
 			deleting: false,
 			editing: false,
@@ -93,6 +132,41 @@ export default {
 	},
 
 	computed: {
+		is_valid() {
+			const data = this.editing ? this.edit_data : this.term,
+				t = data.t;
+
+			let v = data.v;
+
+			if ( t === 'text' )
+				v = escape_regex(v);
+
+			else if ( t === 'glob' )
+				v = glob_to_regex(v);
+
+			try {
+				new RegExp(v);
+				return true;
+			} catch(err) {
+				return false;
+			}
+		},
+
+		is_safe() {
+			const data = this.editing ? this.edit_data : this.term,
+				t = data.t;
+
+			let v = data.v;
+
+			if ( t === 'text' )
+				v = escape_regex(v);
+
+			else if ( t === 'glob' )
+				v = glob_to_regex(v);
+
+			return safety(v);
+		},
+
 		term_type() {
 			const t = this.term && this.term.t;
 			if ( t === 'text' )
@@ -104,6 +178,9 @@ export default {
 			else if ( t === 'glob' )
 				return this.t('setting.terms.type.glob', 'Glob');
 
+			else if ( t === 'regex' )
+				return this.t('setting.terms.type.regex-word', 'Regex (Word)');
+
 			return this.t('setting.unknown', 'Unknown Value');
 		}
 	},
@@ -115,8 +192,13 @@ export default {
 		},
 
 		cancel() {
-			this.editing = false;
-			this.edit_data = null;
+			if ( this.adding ) {
+				this.edit_data = deep_copy(this.term);
+
+			} else {
+				this.editing = false;
+				this.edit_data = null;
+			}
 		},
 
 		save() {
diff --git a/src/settings/context.js b/src/settings/context.js
index d54ee8db..84b8bbc5 100644
--- a/src/settings/context.js
+++ b/src/settings/context.js
@@ -243,7 +243,7 @@ export default class SettingsContext extends EventEmitter {
 					value = def_default;
 
 				if ( type.default )
-					value = type.default(value);
+					value = type.default(value, definition, this.manager.log);
 			}
 
 			if ( definition.requires )
@@ -269,9 +269,9 @@ export default class SettingsContext extends EventEmitter {
 
 	_getRaw(key, type) {
 		if ( ! type )
-			throw new Error(`non-existent `)
+			throw new Error(`non-existent type for ${key}`)
 
-		return type.get(key, this.profiles(), this.manager.log);
+		return type.get(key, this.profiles(), this.manager.definitions.get(key), this.manager.log);
 	}
 	/*	for(const profile of this.__profiles)
 			if ( profile.has(key) )
diff --git a/src/settings/types.js b/src/settings/types.js
index 5052a4a5..af5bfe4b 100644
--- a/src/settings/types.js
+++ b/src/settings/types.js
@@ -52,7 +52,7 @@ export const array_merge = {
 		return values;
 	},
 
-	get(key, profiles, log) {
+	get(key, profiles, definition, log) {
 		const values = [],
 			trailing = [],
 			sources = [];
@@ -80,7 +80,7 @@ export const array_merge = {
 				}
 
 				// If we didn't run into an inherit, don't inherit.
-				if ( ! is_trailing )
+				if ( ! is_trailing && ! definition.always_inherit )
 					break;
 			}
 
diff --git a/src/sites/twitch-twilight/modules/channel.js b/src/sites/twitch-twilight/modules/channel.js
index 2bc20dec..eaccc2aa 100644
--- a/src/sites/twitch-twilight/modules/channel.js
+++ b/src/sites/twitch-twilight/modules/channel.js
@@ -5,6 +5,7 @@
 // ============================================================================
 
 import Module from 'utilities/module';
+import { has } from 'utilities/object';
 
 
 export default class Channel extends Module {
@@ -41,7 +42,7 @@ export default class Channel extends Module {
 
 		this.ChannelPage = this.fine.define(
 			'channel-page',
-			n => n.handleHostingChange,
+			n => n.hostModeFromGraphQL,
 			['user']
 		);
 
@@ -70,10 +71,9 @@ export default class Channel extends Module {
 			// We can't do this immediately because the player state
 			// occasionally screws up if we do.
 			setTimeout(() => {
-				const current_channel = inst.props.data && inst.props.data.variables && inst.props.data.variables.currentChannelLogin;
-				if ( current_channel && current_channel !== inst.state.videoPlayerSource ) {
-					inst.ffzExpectedHost = inst.state.videoPlayerSource;
-					inst.ffzOldHostHandler(null);
+				if ( inst.state.hostMode ) {
+					inst.ffzExpectedHost = inst.state.hostMode;
+					inst.ffzOldSetState({hostMode: null});
 				}
 			});
 		});
@@ -107,24 +107,32 @@ export default class Channel extends Module {
 
 		const t = this;
 
-		inst._ffz_hosting_wrapped = true;
+		inst.ffzOldSetState = inst.setState;
+		inst.setState = function(state, ...args) {
+			try {
+				if ( has(state, 'hostMode') ) {
+					inst.ffzExpectedHost = state.hostMode;
+					if ( state.hostMode && ! t.settings.get('channel.hosting.enable') ) {
+						state.hostMode = null;
+						state.videoPlayerSource = inst.props.match.params.channelName;
+					}
+				}
 
-		inst.ffzOldHostHandler = inst.handleHostingChange;
-		inst.handleHostingChange = function(channel) {
-			inst.ffzExpectedHost = channel;
+			} catch(err) {
+				t.log.capture(err, {extra: {props: inst.props, state}});
+			}
 
-			if ( t.settings.get('channel.hosting.enable') )
-				return inst.ffzOldHostHandler(channel);
+			return inst.ffzOldSetState(state, ...args);
 		}
 
-		// Store the current state and disable the current host if needed.
-		inst.ffzExpectedHost = inst.state.isHosting ? inst.state.videoPlayerSource : null;
-		if ( ! this.settings.get('channel.hosting.enable') )
-			inst.ffzOldHostHandler(null);
+		inst._ffz_hosting_wrapped = true;
 
-		// Finally, we force an update so that any child components
-		// receive our updated handler.
-		inst.forceUpdate();
+		const hosted = inst.ffzExpectedHost = inst.state.hostMode;
+		if ( hosted && ! this.settings.get('channel.hosting.enable') )
+			inst.ffzOldSetState({
+				hostMode: null,
+				videoPlayerSource: inst.props.match.params.channelName
+			});
 	}
 
 
@@ -132,7 +140,14 @@ export default class Channel extends Module {
 		if ( val === undefined )
 			val = this.settings.get('channel.hosting.enable');
 
-		for(const inst of this.ChannelPage.instances)
-			inst.ffzOldHostHandler(val ? inst.ffzExpectedHost : null);
+		for(const inst of this.ChannelPage.instances) {
+			const host = val ? inst.ffzExpectedHost : null,
+				target = host && host.hostedChannel && host.hostedChannel.login || inst.props.match.params.channelName;
+
+			inst.ffzOldSetState({
+				hostMode: host,
+				videoPlayerSource: target
+			});
+		}
 	}
 }
\ 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 04ba4c95..7149a5c7 100644
--- a/src/sites/twitch-twilight/modules/chat/index.js
+++ b/src/sites/twitch-twilight/modules/chat/index.js
@@ -566,6 +566,25 @@ export default class ChatHook extends Module {
 		}
 
 
+		cls.prototype.ffzGetEmotes = function() {
+			const emote_sets = this.client && this.client.session && this.client.session.emoteSets;
+			if ( this._ffz_cached_sets === emote_sets )
+				return this._ffz_cached_emotes;
+
+			this._ffz_cached_sets = emote_sets;
+			const emotes = this._ffz_cached_emotes = {};
+
+			if ( emote_sets )
+				for(const set of emote_sets)
+					if ( set && set.emotes )
+						for(const emote of set.emotes)
+							if ( emote )
+								emotes[emote.token] = emote.id;
+
+			return emotes;
+		}
+
+
 		cls.prototype.connectHandlers = function(...args) {
 			if ( ! this._ffz_init ) {
 				const i = this;
@@ -581,6 +600,42 @@ export default class ChatHook extends Module {
 						}
 				}
 
+				const old_chat = this.onChatMessageEvent;
+				this.onChatMessageEvent = function(e) {
+					if ( e && e.sentByCurrentUser ) {
+						try {
+							e.message.user.emotes = findEmotes(
+								e.message.body,
+								i.ffzGetEmotes()
+							);
+
+						} catch(err) {
+							t.log.capture(err, {extra: e});
+						}
+					}
+
+					return old_chat.call(i, e);
+				}
+
+
+				const old_action = this.onChatActionEvent;
+				this.onChatActionEvent = function(e) {
+					if ( e && e.sentByCurrentUser ) {
+						try {
+							e.message.user.emotes = findEmotes(
+								e.message.body.slice(8, -1),
+								i.ffzGetEmotes()
+							);
+
+						} catch(err) {
+							t.log.capture(err, {extra: e});
+						}
+					}
+
+					return old_action.call(i, e);
+				}
+
+
 				const old_resub = this.onResubscriptionEvent;
 				this.onResubscriptionEvent = function(e) {
 					try {
@@ -626,11 +681,11 @@ export default class ChatHook extends Module {
 
 				const old_post = this.postMessage;
 				this.postMessage = function(e) {
-					const original = this._wrapped;
+					const original = i._wrapped;
 					if ( original && ! e._ffz_checked )
-						return this.postMessageToCurrentChannel(original, e);
+						return i.postMessageToCurrentChannel(original, e);
 
-					return old_post.call(this, e);
+					return old_post.call(i, e);
 				}
 
 				this._ffz_init = true;
@@ -662,11 +717,6 @@ export default class ChatHook extends Module {
 					message.message = original.action;
 				else
 					message.message = original.message.body;
-
-				// Twitch doesn't generate a proper emote tag for echoed back
-				// actions, so we have to regenerate it. Fun. :D
-				if ( user && user.username === this.userLogin )
-					message.emotes = findEmotes(message.message, this.selfEmotes);
 			}
 
 			this.postMessage(message);
@@ -903,12 +953,14 @@ export function findEmotes(msg, emotes) {
 	const out = {};
 	let idx = 0;
 
+	console.log('findEmotes', msg, emotes);
+
 	for(const part of msg.split(' ')) {
 		const len = split_chars(part).length;
 
 		if ( has(emotes, part) ) {
 			const em = emotes[part],
-				matches = out[em.id] = out[em.id] || [];
+				matches = out[em] = out[em] || [];
 
 			matches.push({
 				startIndex: idx,
diff --git a/src/sites/twitch-twilight/modules/chat/line.js b/src/sites/twitch-twilight/modules/chat/line.js
index 5e701f9e..130ea78a 100644
--- a/src/sites/twitch-twilight/modules/chat/line.js
+++ b/src/sites/twitch-twilight/modules/chat/line.js
@@ -244,15 +244,17 @@ export default class ChatLine extends Module {
 						e('span', {
 							className: 'chat-line__message--badges'
 						}, t.chat.badges.render(msg, e)),
-						e('a', {
-							className: 'chat-author__display-name notranslate',
+						e('button', {
+							className: 'chat-line__username notranslate',
 							style: { color },
 							onClick: this.usernameClickHandler, // this.ffz_user_click_handler
 						}, [
-							user.userDisplayName,
+							e('span', {
+								className: 'chat-author__display-name'
+							}, user.displayName),
 							user.isIntl && e('span', {
 								className: 'chat-author__intl-login'
-							}, ` (${user.userLogin})`)
+							}, ` (${user.login})`)
 						]),
 						e('span', null, is_action ? ' ' : ': '),
 						show ?
diff --git a/src/sites/twitch-twilight/modules/css_tweaks/index.js b/src/sites/twitch-twilight/modules/css_tweaks/index.js
index 8bb1f587..a8a858a5 100644
--- a/src/sites/twitch-twilight/modules/css_tweaks/index.js
+++ b/src/sites/twitch-twilight/modules/css_tweaks/index.js
@@ -19,8 +19,8 @@ const CLASSES = {
 
 	'prime-offers': '.top-nav__prime',
 
-	'player-ext': '.player .extension-overlay',
-	'player-ext-hover': '.player:not([data-controls="true"]) .extension-overlay',
+	'player-ext': '.player .extension-taskbar,.player .extension-container',
+	'player-ext-hover': '.player:not([data-controls="true"]) .extension-container',
 
 	'player-event-bar': '.channel-page .live-event-banner-ui__header',
 	'player-rerun-bar': '.channel-page div.tw-c-text-overlay:not([data-a-target="hosting-ui-header"])',
@@ -28,11 +28,8 @@ const CLASSES = {
 	'pinned-cheer': '.pinned-cheer,.pinned-cheer-v2',
 	'whispers': '.whispers',
 
-	'dir-live-ind': '.live-channel-card:not([data-a-target*="host"]) .stream-type-indicator.stream-type-indicator--live',
-	'boxart-hover': '.tw-card .tw-full-width:hover a[data-a-target="live-channel-card-game-link"]',
-	'boxart-hide': '.tw-card a[data-a-target="live-channel-card-game-link"]',
-	'profile-hover-following': '.tw-card .tw-full-width:hover .ffz-channel-avatar',
-	'profile-hover-game': '.tw-thumbnail-card .tw-card-img:hover .ffz-channel-avatar',
+	'dir-live-ind': '.live-channel-card:not([data-a-target*="host"]) .stream-type-indicator.stream-type-indicator--live,.stream-thumbnail__card .stream-type-indicator.stream-type-indicator--live',
+	'profile-hover': '.preview-card .tw-relative:hover .ffz-channel-avatar',
 };
 
 
diff --git a/src/sites/twitch-twilight/modules/directory/browse_popular.js b/src/sites/twitch-twilight/modules/directory/browse_popular.js
index 56f223a4..afa2f1a9 100644
--- a/src/sites/twitch-twilight/modules/directory/browse_popular.js
+++ b/src/sites/twitch-twilight/modules/directory/browse_popular.js
@@ -18,79 +18,25 @@ export default class BrowsePopular extends SiteModule {
 		this.inject('settings');
 
 		this.apollo.registerModifier('BrowsePage_Popular', BROWSE_POPULAR);
-
-		this.ChannelCard = this.fine.define(
-			'browse-all-channel-card',
-			n => n.props && n.props.channelName && n.props.linkTo && n.props.linkTo.state && n.props.linkTo.state.medium === 'twitch_browse_directory',
-			['dir-all']
-		);
-
 		this.apollo.registerModifier('BrowsePage_Popular', res => this.modifyStreams(res), false);
 	}
 
 	onEnable() {
-		this.ChannelCard.ready((cls, instances) => {
-			// Popular Directory Channel Cards
-			this.apollo.ensureQuery(
-				'BrowsePage_Popular',
-				'data.streams.edges.node.0.createdAt'
-			);
-
-			for(const inst of instances) this.updateChannelCard(inst);
-		});
-
-		this.ChannelCard.on('update', this.updateChannelCard, this);
-		this.ChannelCard.on('mount', this.updateChannelCard, this);
-		this.ChannelCard.on('unmount', this.parent.clearUptime, this);
+		// Popular Directory Channel Cards
+		this.apollo.ensureQuery(
+			'BrowsePage_Popular',
+			'data.streams.edges.node.0.createdAt'
+		);
 	}
 
 	modifyStreams(res) { // eslint-disable-line class-methods-use-this
-		const blockedGames = this.settings.provider.get('directory.game.blocked-games') || [];
-
-		const newStreams = [];
+		this.log.info('Streams', res);
 
 		const edges = get('data.streams.edges', res);
-		if (!edges) return res;
+		if ( ! edges || ! edges.length )
+			return res;
 
-		for (let i = 0; i < edges.length; i++) {
-			const edge = edges[i];
-			const node = edge.node;
-
-			const s = node.viewersCount = new Number(node.viewersCount || 0);
-			s.profileImageURL = node.broadcaster.profileImageURL;
-			s.createdAt = node.createdAt;
-			s.login = node.broadcaster.login;
-			s.displayName = node.broadcaster.displayName;
-
-			if (!node.game || node.game && !blockedGames.includes(node.game.name)) newStreams.push(edge);
-		}
-		res.data.streams.edges = newStreams;
+		res.data.streams.edges = this.parent.processNodes(edges);
 		return res;
 	}
-
-	updateChannelCard(inst) {
-		const container = this.fine.getChildNode(inst);
-		if (!container) return;
-
-		if (container.classList.contains('ffz-modified-channel-card')) return;
-		container.classList.add('ffz-modified-channel-card');
-
-		this.parent.updateUptime(inst, 'props.viewerCount.createdAt', '.tw-card-img');
-		this.parent.addCardAvatar(inst, 'props.viewerCount', '.tw-card');
-
-		const hiddenThumbnails = this.settings.provider.get('directory.game.hidden-thumbnails') || [];
-		const hiddenPreview = 'https://static-cdn.jtvnw.net/ttv-static/404_preview-320x180.jpg';
-
-		if (inst.props.type === 'watch_party')
-			container.classList.toggle('tw-hide', this.settings.get('directory.hide-vodcasts'));
-
-		const img = container.querySelector && container.querySelector('.tw-card-img img');
-		if (img == null) return;
-
-		if (hiddenThumbnails.includes(inst.props.gameTitle)) {
-			img.src = hiddenPreview;
-		} else {
-			img.src = inst.props.imageSrc;
-		}
-	}
 }
\ No newline at end of file
diff --git a/src/sites/twitch-twilight/modules/directory/following.jsx b/src/sites/twitch-twilight/modules/directory/following.jsx
index 10b9d25d..97bde846 100644
--- a/src/sites/twitch-twilight/modules/directory/following.jsx
+++ b/src/sites/twitch-twilight/modules/directory/following.jsx
@@ -68,102 +68,66 @@ export default class Following extends SiteModule {
 		this.apollo.registerModifier('FollowingHosts_CurrentUser', FOLLOWED_HOSTS);
 		this.apollo.registerModifier('FollowedChannels', FOLLOWED_CHANNELS);
 
-		this.ChannelCard = this.fine.define(
-			'following-channel-card',
-			n => n.renderGameBoxArt && n.renderContentType,
-			['dir-following']
-		);
-
 		this.apollo.registerModifier('FollowedIndex_CurrentUser', res => {
 			this.modifyLiveUsers(res);
 			this.modifyLiveHosts(res);
 		}, false);
 
-		this.on('settings:changed:directory.uptime', () => this.ChannelCard.forceUpdate());
-		this.on('settings:changed:directory.show-channel-avatars', () => this.ChannelCard.forceUpdate());
-		this.on('settings:changed:directory.show-boxart', () => this.ChannelCard.forceUpdate());
-		this.on('settings:changed:directory.hide-vodcasts', () => this.ChannelCard.forceUpdate());
-
 		this.apollo.registerModifier('FollowedChannels', res => this.modifyLiveUsers(res), false);
 		this.apollo.registerModifier('FollowingLive_CurrentUser', res => this.modifyLiveUsers(res), false);
 		this.apollo.registerModifier('FollowingHosts_CurrentUser', res => this.modifyLiveHosts(res), false);
 	}
 
 	modifyLiveUsers(res) {
-		const hiddenThumbnails = this.settings.provider.get('directory.game.hidden-thumbnails') || [];
-		const blockedGames = this.settings.provider.get('directory.game.blocked-games') || [];
-
-		const newStreams = [];
-
-		const followedLiveUsers = get('data.currentUser.followedLiveUsers', res);
-		if (!followedLiveUsers)
+		const edges = get('data.currentUser.followedLiveUsers.nodes', res);
+		if ( ! edges || ! edges.length )
 			return res;
 
-		const oldMode = !!followedLiveUsers.nodes;
-		const edgesOrNodes = followedLiveUsers.nodes || followedLiveUsers.edges;
-
-		for (let i = 0; i < edgesOrNodes.length; i++) {
-			const edge = edgesOrNodes[i],
-				node = edge.node || edge;
-
-			if ( ! node || ! node.stream )
-				continue;
-
-			const s = node.stream.viewersCount = new Number(node.stream.viewersCount || 0);
-			s.profileImageURL = node.profileImageURL;
-			s.createdAt = node.stream.createdAt;
-
-			if (node.stream.game && hiddenThumbnails.includes(node.stream.game.name)) node.stream.previewImageURL = 'https://static-cdn.jtvnw.net/ttv-static/404_preview-320x180.jpg';
-			if (!node.stream.game || node.stream.game && !blockedGames.includes(node.stream.game.name)) newStreams.push(edge);
-		}
-		res.data.currentUser.followedLiveUsers[oldMode ? 'nodes' : 'edges'] = newStreams;
-
+		res.data.currentUser.followedLiveUsers.nodes = this.parent.processNodes(edges);
 		return res;
 	}
 
 	modifyLiveHosts(res) {
-		const hiddenThumbnails = this.settings.provider.get('directory.game.hidden-thumbnails') || [];
-		const blockedGames = this.settings.provider.get('directory.game.blocked-games') || [];
+		const blocked_games = this.settings.provider.get('directory.game.blocked-games', []),
+			do_grouping = this.settings.get('directory.following.group-hosts'),
+			edges = get('data.currentUser.followedHosts.nodes', res);
 
-		this.hosts = {};
-
-		const followedHosts = get('data.currentUser.followedHosts', res);
-		if (!followedHosts)
+		if ( ! edges || ! edges.length )
 			return res;
 
-		const newHostNodes = [];
+		const hosts = {},
+			out = [];
 
-		const oldMode = !!followedHosts.nodes;
-		const edgesOrNodes = followedHosts.nodes || followedHosts.edges;
+		for(const edge of edges) {
+			const node = edge.node || edge,
+				hosted = node.hosting,
+				stream = hosted && hosted.stream;
 
-		for (let i = 0; i < edgesOrNodes.length; i++) {
-			const edge = edgesOrNodes[i],
-				node = edge.node || edge;
-
-			if ( ! node || ! node.hosting || ! node.hosting.stream )
+			if ( ! stream || stream.game && blocked_games.includes(stream.game.game) )
 				continue;
 
-			const s = node.hosting.stream.viewersCount = new Number(node.hosting.stream.viewersCount || 0);
-			s.profileImageURL = node.hosting.profileImageURL;
-			s.createdAt = node.hosting.stream.createdAt;
+			const store = {}; // stream.viewersCount = new Number(stream.viewersCount || 0);
 
-			if (!this.hosts[node.hosting.displayName]) {
-				this.hosts[node.hosting.displayName] = {
-					channel: node.hosting.login,
-					nodes: [node],
-					channels: [node.displayName]
-				};
-				if (node.hosting.stream.game && hiddenThumbnails.includes(node.hosting.stream.game.name)) node.hosting.stream.previewImageURL = 'https://static-cdn.jtvnw.net/ttv-static/404_preview-320x180.jpg';
-				if (!node.hosting.stream.game || node.hosting.stream.game && !blockedGames.includes(node.hosting.stream.game.name)) newHostNodes.push(edge);
-			} else {
-				this.hosts[node.hosting.displayName].nodes.push(node);
-				this.hosts[node.hosting.displayName].channels.push(node.displayName);
-			}
+			store.createdAt = stream.createdAt;
+			store.title = stream.title;
+			store.game = stream.game;
+
+			if ( do_grouping ) {
+				const host_nodes = hosts[hosted.login];
+				if ( host_nodes ) {
+					host_nodes.push(node);
+					store.host_nodes = node._ffz_host_nodes = host_nodes;
+
+				} else {
+					store.host_nodes = node._ffz_host_nodes = hosts[hosted.login] = [node];
+					out.push(edge);
+				}
+
+			} else
+				out.push(edge);
 		}
 
-		if (this.settings.get('directory.following.group-hosts')) {
-			res.data.currentUser.followedHosts[oldMode ? 'nodes' : 'edges'] = newHostNodes;
-		}
+		res.data.currentUser.followedHosts.nodes = out;
 		return res;
 	}
 
@@ -200,18 +164,7 @@ export default class Following extends SiteModule {
 	}
 
 	onEnable() {
-		this.ChannelCard.ready((cls, instances) => {
-			this.ensureQueries();
-
-			for(const inst of instances) this.updateChannelCard(inst);
-		});
-
-		this.ChannelCard.on('update', inst => {
-			this.ensureQueries();
-			this.updateChannelCard(inst)
-		}, this);
-		this.ChannelCard.on('mount', this.updateChannelCard, this);
-		this.ChannelCard.on('unmount', this.parent.clearUptime, this);
+		this.ensureQueries();
 
 		document.body.addEventListener('click', this.destroyHostMenu.bind(this));
 	}
diff --git a/src/sites/twitch-twilight/modules/directory/game.jsx b/src/sites/twitch-twilight/modules/directory/game.jsx
index 3f61a227..1a5280c5 100644
--- a/src/sites/twitch-twilight/modules/directory/game.jsx
+++ b/src/sites/twitch-twilight/modules/directory/game.jsx
@@ -30,7 +30,8 @@ export default class Game extends SiteModule {
 
 	onEnable() {
 		this.GameHeader.ready((cls, instances) => {
-			for(const inst of instances) this.updateButtons(inst);
+			for(const inst of instances)
+				this.updateButtons(inst);
 		});
 
 		this.GameHeader.on('update', this.updateButtons, this);
@@ -85,7 +86,7 @@ export default class Game extends SiteModule {
 				this.i18n.t('directory.show-thumbnails', 'Show Thumbnails') :
 				this.i18n.t('directory.hide-thumbnails', 'Hide Thumbnails');
 
-			this.parent.ChannelCard.forceUpdate();
+			this.parent.DirectoryCard.forceUpdate();
 		}
 
 		hidden_btn = (<button
diff --git a/src/sites/twitch-twilight/modules/directory/index.jsx b/src/sites/twitch-twilight/modules/directory/index.jsx
index c5942afc..3f980eea 100644
--- a/src/sites/twitch-twilight/modules/directory/index.jsx
+++ b/src/sites/twitch-twilight/modules/directory/index.jsx
@@ -13,6 +13,18 @@ import Following from './following';
 import Game from './game';
 import BrowsePopular from './browse_popular';
 
+
+export const CARD_CONTEXTS = ((e ={}) => {
+	e[e.SingleGameList = 1] = 'SingleGameList';
+	e[e.SingleChannelList = 2] = 'SingleChannelList';
+	e[e.MixedGameAndChannelList = 3] = 'MixedGameAndChannelList';
+	return e;
+})();
+
+
+const DIR_ROUTES = ['dir', 'dir-community', 'dir-community-index', 'dir-creative', 'dir-following', 'dir-game-index', 'dir-game-clips', 'dir-game-videos', 'dir-all', 'dir-category', 'user-videos', 'user-clips'];
+
+
 export default class Directory extends SiteModule {
 	constructor(...args) {
 		super(...args);
@@ -23,6 +35,7 @@ export default class Directory extends SiteModule {
 		this.inject('site.router');
 		this.inject('site.apollo');
 		this.inject('site.css_tweaks');
+		this.inject('site.web_munch');
 
 		this.inject('i18n');
 		this.inject('settings');
@@ -33,12 +46,17 @@ export default class Directory extends SiteModule {
 
 		this.apollo.registerModifier('GamePage_Game', res => this.modifyStreams(res), false);
 
-		this.ChannelCard = this.fine.define(
-			'channel-card',
-			n => n.props && n.props.streamNode,
-			['dir-community', 'dir-game-index']
+		this.DirectoryCard = this.fine.define(
+			'directory-card',
+			n => n.renderTitles && n.renderIconicImage,
+			DIR_ROUTES
 		);
 
+		this.CardWrapper = this.fine.define(
+			'directory-card-wrapper',
+			n => n.renderFallback && n.renderStreamFlag,
+			DIR_ROUTES
+		);
 
 		this.settings.add('directory.uptime', {
 			default: 1,
@@ -56,12 +74,12 @@ export default class Directory extends SiteModule {
 				]
 			},
 
-			changed: () => this.ChannelCard.forceUpdate()
+			changed: () => this.DirectoryCard.forceUpdate()
 		});
 
 
 		this.settings.add('directory.show-channel-avatars', {
-			default: 0,
+			default: 1,
 
 			ui: {
 				path: 'Directory > Channels >> Appearance',
@@ -78,33 +96,8 @@ export default class Directory extends SiteModule {
 			},
 
 			changed: value => {
-				this.css_tweaks.toggleHide('profile-hover-following', value === 2);
-				this.css_tweaks.toggleHide('profile-hover-game', value === 2);
-				this.ChannelCard.forceUpdate();
-			}
-		});
-
-
-		this.settings.add('directory.show-boxart', {
-			default: 2,
-
-			ui: {
-				path: 'Directory > Channels >> Appearance',
-				title: 'Show Boxart',
-				description: 'Display boxart over stream and video thumbnails.',
-				component: 'setting-select-box',
-
-				data: [
-					{value: 0, title: 'Disabled'},
-					{value: 1, title: 'Hidden on Hover'},
-					{value: 2, title: 'Always'}
-				]
-			},
-
-			changed: value => {
-				this.css_tweaks.toggleHide('boxart-hide', value === 0);
-				this.css_tweaks.toggleHide('boxart-hover', value === 1);
-				this.ChannelCard.forceUpdate();
+				this.css_tweaks.toggleHide('profile-hover', value === 2);
+				this.DirectoryCard.forceUpdate();
 			}
 		});
 
@@ -130,89 +123,149 @@ export default class Directory extends SiteModule {
 				component: 'setting-check-box'
 			},
 
-			changed: () => this.ChannelCard.forceUpdate()
+			changed: () => this.CardWrapper.forceUpdate()
 		});
 	}
 
 
-	onEnable() {
-		const avatars = this.settings.get('directory.show-channel-avatars'),
-			boxart = this.settings.get('directory.show-boxart');
-
-		this.css_tweaks.toggleHide('profile-hover-game', avatars === 2);
-		this.css_tweaks.toggleHide('profile-hover-following', avatars === 2);
-
+	async onEnable() {
+		this.css_tweaks.toggleHide('profile-hover', this.settings.get('directory.show-channel-avatars') === 2);
 		this.css_tweaks.toggleHide('dir-live-ind', this.settings.get('directory.hide-live'));
-		this.css_tweaks.toggleHide('boxart-hide', boxart === 0);
-		this.css_tweaks.toggleHide('boxart-hover', boxart === 1);
 
-		this.ChannelCard.ready((cls, instances) => {
+		const t = this,
+			React = await this.web_munch.findModule('react');
+
+		const createElement = React && React.createElement;
+
+		this.CardWrapper.ready(cls => {
+			const old_render = cls.prototype.render;
+
+			cls.prototype.render = function() {
+				if ( get('props.streamNode.type', this) === 'rerun' && t.settings.get('directory.hide-vodcasts') )
+					return null;
+
+				return old_render.call(this);
+			}
+
+			this.CardWrapper.forceUpdate();
+		});
+
+		this.DirectoryCard.ready(cls => {
+			const old_render_iconic = cls.prototype.renderIconicImage,
+				old_render_titles = cls.prototype.renderTitles;
+
+			cls.prototype.renderIconicImage = function() {
+				if ( this.props.context !== CARD_CONTEXTS.SingleChannelList &&
+					t.settings.get('directory.show-channel-avatars') !== 1 )
+					return;
+
+				return old_render_iconic.call(this);
+			}
+
+			cls.prototype.renderTitles = function() {
+				const nodes = get('props.currentViewerCount.host_nodes', this);
+				if ( this.props.hostedByChannelLogin == null || ! nodes || ! nodes.length )
+					return old_render_titles.call(this);
+
+				const channel = nodes[0].hosting,
+					stream = channel.stream;
+
+				return (<div>
+					<a class="tw-link tw-link--inherit" data-test-selector="preview-card-titles__primary-link">
+						<h3 class="tw-ellipsis tw-font-size-5 tw-strong" title={stream.title}>{stream.title}</h3>
+					</a>
+					<div class="preview-card-titles__subtitle-wrapper">
+						<div data-test-selector="preview-card-titles__subtitle">
+							<p class="tw-c-text-alt tw-ellipsis">
+								<a class="tw-link tw-link--inherit">{channel.displayName}</a> playing <a class="tw-link tw-link--inherit">{stream.game.name}</a>
+							</p>
+						</div>
+						<div data-test-selector="preview-card-titles__subtitle">
+							<p class="tw-c-text-alt tw-ellipsis">
+								Hosted by {nodes.length > 1 ? `${nodes.length} channels` : nodes[0].displayName}
+							</p>
+						</div>
+					</div>
+				</div>);
+			}
+
+			this.DirectoryCard.forceUpdate();
+
 			// Game Directory Channel Cards
+			// TODO: Better query handling.
 			this.apollo.ensureQuery(
 				'GamePage_Game',
 				'data.directory.streams.edges.0.node.createdAt'
 			);
 
-			for(const inst of instances) this.updateChannelCard(inst);
+			//for(const inst of instances)
+			//	this.updateCard(inst);
 		});
 
-		this.ChannelCard.on('update', this.updateChannelCard, this);
-		this.ChannelCard.on('mount', this.updateChannelCard, this);
-		this.ChannelCard.on('unmount', this.clearUptime, this);
+		this.DirectoryCard.on('update', this.updateCard, this);
+		this.DirectoryCard.on('mount', this.updateCard, this);
+		this.DirectoryCard.on('unmount', this.clearCard, this);
+
+		// TODO: Queries
 	}
 
 
-	updateChannelCard(inst) {
+	updateCard(inst) {
 		const container = this.fine.getChildNode(inst);
-		if (!container) return;
+		if ( ! container )
+			return;
 
-		this.updateUptime(inst, 'props.streamNode.viewersCount.createdAt', '.tw-card-img');
-		this.addCardAvatar(inst, 'props.streamNode.viewersCount', '.tw-card');
+		const props = inst.props,
+			game = props.gameTitle || props.playerMetadataGame,
+			is_video = props.durationInSeconds != null,
+			is_host = props.hostedByChannelLogin != null;
 
-		const type = get('props.directoryType', inst);
-		const hiddenThumbnails = this.settings.provider.get('directory.game.hidden-thumbnails') || [];
-		const hiddenPreview = 'https://static-cdn.jtvnw.net/ttv-static/404_preview-320x180.jpg';
+		container.classList.toggle('ffz-hide-thumbnail', this.settings.provider.get('directory.game.hidden-thumbnails', []).includes(game));
 
-		if (get('props.streamNode.type', inst) === 'rerun' || get('props.type', inst) === 'rerun')
-			container.classList.toggle('tw-hide', this.settings.get('directory.hide-vodcasts'));
+		//this.log.info('Card Update', inst.props.channelDisplayName, is_video ? 'Video' : 'Live', is_host ? 'Host' : 'Not-Host', inst);
 
-		const img = container.querySelector && container.querySelector('.tw-card-img img');
-		if (img == null) return;
+		this.updateUptime(inst, 'props.currentViewerCount.createdAt');
+		this.updateAvatar(inst);
+	}
 
-		if (type === 'GAMES' && hiddenThumbnails.includes(get('props.directoryName', inst)) ||
-			type === 'COMMUNITIES' && hiddenThumbnails.includes(get('props.streamNode.game.name', inst))) {
-			img.src = hiddenPreview;
-		} else {
-			img.src = get('props.streamNode.previewImageURL', inst) || get('props.imageSrc', inst);
+
+	clearCard(inst) {
+		this.clearUptime(inst);
+	}
+
+
+	processNodes(edges, is_game_query = false, blocked_games) {
+		const out = [];
+
+		if ( blocked_games === undefined )
+			blocked_games = this.settings.provider.get('directory.game.blocked-games', []);
+
+		for(const edge of edges) {
+			const node = edge.node || edge,
+				store = {}; // node.viewersCount = new Number(node.viewersCount || 0);
+
+			store.createdAt = node.createdAt;
+			store.title = node.title;
+			store.game = node.game;
+
+			if ( is_game_query || (! node.game || node.game && ! blocked_games.includes(node.game.game)) )
+				out.push(edge);
 		}
+
+		return out;
 	}
 
 
 	modifyStreams(res) { // eslint-disable-line class-methods-use-this
-		const blockedGames = this.settings.provider.get('directory.game.blocked-games') || [];
-		const gamePage = get('data.directory.__typename', res) === 'Game';
+		this.log.info('Modify Streams', res);
 
-		const newStreams = [];
+		const is_game_query = get('data.directory.__typename', res) === 'Game',
+			edges = get('data.directory.streams.edges', res);
 
-		const edges = get('data.directory.streams.edges', res);
-		if (!edges) return res;
+		if ( ! edges || ! edges.length )
+			return res;
 
-		for (let i = 0; i < edges.length; i++) {
-			const edge = edges[i],
-				node = edge.node || edge;
-
-			const s = node.viewersCount = new Number(node.viewersCount || 0);
-			s.createdAt = node.createdAt;
-
-			if ( node.broadcaster ) {
-				s.profileImageURL = node.broadcaster.profileImageURL;
-				s.login = node.broadcaster.login;
-				s.displayName = node.broadcaster.displayName;
-			}
-
-			if (gamePage || (!node.game || node.game && !blockedGames.includes(node.game.name))) newStreams.push(edge);
-		}
-		res.data.directory.streams.edges = newStreams;
+		res.data.directory.streams.edges = this.processNodes(edges, is_game_query);
 		return res;
 	}
 
@@ -233,9 +286,9 @@ export default class Directory extends SiteModule {
 	}
 
 
-	updateUptime(inst, created_path, selector) {
+	updateUptime(inst, created_path) {
 		const container = this.fine.getChildNode(inst),
-			card = container && container.querySelector && container.querySelector(selector),
+			card = container && container.querySelector && container.querySelector('.preview-card-overlay'),
 			setting = this.settings.get('directory.uptime'),
 			created_at = get(created_path, inst),
 			up_since = created_at && new Date(created_at),
@@ -246,100 +299,93 @@ export default class Directory extends SiteModule {
 
 		const up_text = duration_to_string(uptime, false, false, false, setting === 1);
 
-		if ( ! inst.ffz_uptime_el || card.querySelector('.ffz-uptime-element') === undefined ) {
-			card.appendChild(inst.ffz_uptime_el = (<div class="video-preview-card__preview-overlay-stat tw-c-background-overlay tw-c-text-overlay tw-font-size-6 tw-top-0 tw-right-0 tw-z-default tw-inline-flex tw-absolute tw-mg-05 ffz-uptime-element">
-				<div class="tw-tooltip-wrapper tw-inline-flex">
-					<div class="tw-stat">
-						<span class="tw-c-text-live tw-stat__icon">
-							<figure class="ffz-i-clock" />
-						</span>
-						{inst.ffz_uptime_span = <span class="tw-stat__value" />}
+		if ( ! inst.ffz_uptime_el ) {
+			inst.ffz_uptime_el = card.querySelector('.ffz-uptime-element');
+			if ( ! inst.ffz_uptime_el )
+				card.appendChild(inst.ffz_uptime_el = (<div class="ffz-uptime-element tw-absolute tw-right-0 tw-top-0 tw-mg-1">
+					<div class="tw-tooltip-wrapper">
+						<div class="preview-card-stat tw-align-items-center tw-border-radi-us-small tw-c-background-overlay tw-c-text-overlay tw-flex tw-font-size-6 tw-justify-content-center">
+							<div class="tw-flex tw-c-text-live">
+								<figure class="ffz-i-clock" />
+							</div>
+							{inst.ffz_uptime_span = <p />}
+						</div>
+						<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-center">
+							{this.i18n.t('metadata.uptime.tooltip', 'Stream Uptime')}
+							{inst.ffz_uptime_tt = <div class="tw-pd-t-05" />}
+						</div>
 					</div>
-					{inst.ffz_uptime_tt = <div class="tw-tooltip tw-tooltip--down tw-tooltip--align-center" />}
-				</div>
-			</div>));
+				</div>));
 		}
 
 		if ( ! inst.ffz_update_timer )
-			inst.ffz_update_timer = setInterval(this.updateUptime.bind(this, inst, created_path, selector), 1000);
+			inst.ffz_update_timer = setInterval(this.updateUptime.bind(this, inst, created_path), 1000);
 
 		inst.ffz_uptime_span.textContent = up_text;
 
 		if ( inst.ffz_last_created_at !== created_at ) {
-			inst.ffz_uptime_tt.innerHTML = `${this.i18n.t(
-				'metadata.uptime.tooltip',
-				'Stream Uptime'
-			)}<div class="pd-t-05">${this.i18n.t(
+			inst.ffz_uptime_tt.textContent = this.i18n.t(
 				'metadata.uptime.since',
 				'(since %{since})',
 				{since: up_since.toLocaleString()}
-			)}</div>`;
+			);
 
 			inst.ffz_last_created_at = created_at;
 		}
 	}
 
 
-	addCardAvatar(inst, created_path, selector, data) {
+	updateAvatar(inst) {
 		const container = this.fine.getChildNode(inst),
-			card = container && container.querySelector && container.querySelector(selector),
+			card = container && container.querySelector && container.querySelector('.preview-card-overlay'),
 			setting = this.settings.get('directory.show-channel-avatars');
 
-		if ( ! data )
-			data = get(created_path, inst);
-
 		if ( ! card )
 			return;
 
-		// Get the old element.
-		const channel_avatar = card.querySelector('.ffz-channel-avatar');
+		const props = inst.props,
+			is_video = props.durationInSeconds != null,
+			src = props.channelImageProps && props.channelImageProps.src;
 
-		if ( ! data || ! data.profileImageURL || setting === 0 ) {
-			if ( channel_avatar !== null )
-				channel_avatar.remove();
+		const avatar = card.querySelector('.ffz-channel-avatar');
+
+		if ( ! src || setting < 2 || props.context === CARD_CONTEXTS.SingleChannelList ) {
+			if ( avatar )
+				avatar.remove();
 
 			return;
 		}
 
-		if ( setting !== inst.ffz_av_setting || data.login !== inst.ffz_av_login || data.profileImageURL !== inst.ffz_av_image ) {
-			if ( channel_avatar )
-				channel_avatar.remove();
+		if ( setting === inst.ffz_av_setting && props.channelLogin === inst.ffz_av_login && src === inst.ffz_av_src )
+			return;
 
-			inst.ffz_av_setting = setting;
-			inst.ffz_av_login = data.login;
-			inst.ffz_av_image = data.profileImageURL;
+		if ( avatar )
+			avatar.remove();
 
-			if ( setting === 1 ) {
-				const body = card.querySelector('.tw-card-body .tw-flex'),
-					avatar = (<a
-						class="ffz-channel-avatar tw-mg-r-05 tw-mg-t-05"
-						href={`/${data.login}`}
-						title={data.displayName}
-						onClick={e => this.hijackUserClick(e, data.login)} // eslint-disable-line react/jsx-no-bind
-					>
-						<img src={data.profileImageURL} />
-					</a>);
+		inst.ffz_av_setting = setting;
+		inst.ffz_av_login = props.channelLogin;
+		inst.ffz_av_src = src;
 
-				body.insertBefore(avatar, body.firstElementChild);
+		card.appendChild(<a
+			class="ffz-channel-avatar"
+			href={props.channelLinkTo && props.channelLinkTo.pathname}
+			onClick={e => this.routeClick(e, props.channelLinkTo)} // eslint-disable-line react/jsx-no-bind
+		>
+			<div class={`tw-absolute tw-right-0 tw-border-l tw-c-background ${is_video ? 'tw-top-0 tw-border-b' : 'tw-bottom-0 tw-border-t'}`}>
+				<figure class="tw-aspect tw-aspect--align-top">
+					<img src={src} title={props.channelDisplayName} />
+				</figure>
+			</div>
+		</a>);
+	}
 
-			} else if ( setting === 2 || setting === 3 ) {
-				const avatar_el = (<a
-					class="ffz-channel-avatar"
-					href={`/${data.login}`}
-					onClick={e => this.hijackUserClick(e, data.login)} // eslint-disable-line react/jsx-no-bind
-				>
-					<div class="live-channel-card__boxart tw-bottom-0 tw-absolute">
-						<figure class="tw-aspect tw-aspect--align-top">
-							<img src={data.profileImageURL} title={data.displayName} />
-						</figure>
-					</div>
-				</a>);
 
-				const cont = card.querySelector('figure.tw-aspect > div');
-				if ( cont )
-					cont.appendChild(avatar_el);
-			}
-		}
+	routeClick(event, route) {
+		event.preventDefault();
+		event.stopPropagation();
+
+		if ( route && route.pathname )
+			this.router.history.push(route.pathname);
 	}
 
 
@@ -347,7 +393,8 @@ export default class Directory extends SiteModule {
 		event.preventDefault();
 		event.stopPropagation();
 
-		if (optionalFn) optionalFn();
+		if ( optionalFn )
+			optionalFn(event, user);
 
 		this.router.navigate('user', { userName: user });
 	}
diff --git a/src/sites/twitch-twilight/styles/channel.scss b/src/sites/twitch-twilight/styles/channel.scss
index 21271d9b..3bea2ff6 100644
--- a/src/sites/twitch-twilight/styles/channel.scss
+++ b/src/sites/twitch-twilight/styles/channel.scss
@@ -38,4 +38,12 @@
 
 .ffz-stat-arrow {
 	border-left: none !important;
+}
+
+
+.ffz-auto-host-options {
+	.ffz-channel-avatar {
+		max-width: 3.2rem;
+		max-height: 3.2rem;
+	}
 }
\ No newline at end of file
diff --git a/src/sites/twitch-twilight/styles/chat.scss b/src/sites/twitch-twilight/styles/chat.scss
index a074ed5e..467e5a42 100644
--- a/src/sites/twitch-twilight/styles/chat.scss
+++ b/src/sites/twitch-twilight/styles/chat.scss
@@ -106,6 +106,11 @@
 }
 
 
+.chat-line__username:hover {
+    text-decoration: underline;
+}
+
+
 .ffz--emote-picker {
     section:not(.filtered) heading {
         cursor: pointer;
diff --git a/src/sites/twitch-twilight/styles/directory.scss b/src/sites/twitch-twilight/styles/directory.scss
index aa173f3e..512589c1 100644
--- a/src/sites/twitch-twilight/styles/directory.scss
+++ b/src/sites/twitch-twilight/styles/directory.scss
@@ -1,13 +1,14 @@
 .ffz-channel-avatar {
-	flex-shrink: 0 !important;
-	width: 4rem;
-
-	img {
+	.tw-aspect {
 		width: 4rem;
-		height: 4rem
 	}
 }
 
+.ffz-channel-avatar,
+.ffz-uptime-element {
+	pointer-events: all;
+}
+
 
 // TODO: Color variables
 
@@ -27,6 +28,25 @@
 }
 
 
+.ffz-hide-thumbnail {
+	.preview-card-thumbnail__image {
+		&:before {
+			content: '';
+			position: absolute;
+			top: 0; left: 0;
+			height: 100%;
+			width: 100%;
+			background: url("https://static-cdn.jtvnw.net/ttv-static/404_preview-320x180.jpg") no-repeat;
+			background-size: cover;
+		}
+
+		img {
+			display: none;
+		}
+	}
+}
+
+
 .ffz-host-menu {
 	.scrollable-area {
 		max-height: 25vh;
diff --git a/styles/widgets.scss b/styles/widgets.scss
index 35bc6cdd..b2f1ec23 100644
--- a/styles/widgets.scss
+++ b/styles/widgets.scss
@@ -7,6 +7,8 @@
 @import "./widgets/profile-selector.scss";
 @import "./widgets/badge-visibility.scss";
 
+@import "./widgets/color-picker.scss";
+
 
 .tw-display-inline { display: inline !important }
 .tw-width-auto { width: auto !important }
@@ -16,6 +18,10 @@
 	font-family: monospace;
 }
 
+.ffz-bottom-100 {
+	bottom: 100%;
+}
+
 
 .ffz--widget {
 	input, select {
@@ -55,6 +61,7 @@
 	figure {
 		width: 3rem;
 		margin: .4rem;
+		text-align: center;
 
 		height: calc(100% - .8rem);
 	}
diff --git a/styles/widgets/color-picker.scss b/styles/widgets/color-picker.scss
new file mode 100644
index 00000000..bb5be553
--- /dev/null
+++ b/styles/widgets/color-picker.scss
@@ -0,0 +1,96 @@
+$color: #dad8de;
+$bg-color: #17141f;
+$border-color: #2c2541;
+
+$input-color: #faf9fa;
+$input-bg: #0e0c13;
+$input-border: #392e5c;
+$input-active-border: #7d5bbe;
+
+
+.tw-theme--dark {
+	.vc-sketch {
+		background: $bg-color;
+		box-shadow: 0 0 0 1px $border-color,
+			0 8px 16px rgba($border-color, .15);
+	}
+
+	.vc-sketch-active-color {
+		box-shadow: inset 0 0 0 1px $border-color,
+			inset 0 0 4px rgba($border-color, .25);
+	}
+
+	.vc-sketch-field {
+		.vc-input__input {
+			background: $input-bg;
+			color: $input-color;
+			box-shadow: inset 0 0 0 1px $input-border;
+
+			&:focus {
+				box-shadow: inset 0 0 0 1px $input-active-border,
+					0 0 6px -2px $input-active-border;
+			}
+		}
+
+		.vc-input__label {
+			color: $color;
+		}
+	}
+
+	.vc-sketch-presets {
+		border-top-color: $border-color;
+	}
+
+	.vc-sketch-presets-color {
+		box-shadow: inset 0 0 0 1px $border-color;
+	}
+}
+
+
+$color: var(--ffz-color-1);
+$bg-color: var(--ffz-color-21);
+$border-color: var(--ffz-color-20);
+
+$input-color: var(--ffz-color-23);
+$input-bg: var(--ffz-color-27);
+$input-border: var(--ffz-color-26);
+$input-active-border: var(--ffz-color-5);
+
+
+.tw-theme--dark.tw-theme--ffz {
+	.vc-sketch {
+		background: $bg-color;
+		box-shadow: 0 0 0 1px $border-color,
+			0 8px 16px var(--ffz-color-37);
+	}
+
+	.vc-sketch-active-color {
+		box-shadow: inset 0 0 0 1px $border-color,
+			inset 0 0 4px var(--ffz-color-37);
+	}
+
+	.vc-sketch-field {
+		.vc-input__input {
+			background: $input-bg;
+			color: $input-color;
+			box-shadow: inset 0 0 0 1px $input-border;
+
+			&:focus {
+				box-shadow: inset 0 0 0 1px $input-active-border,
+					0 0 6px -2px $input-active-border;
+			}
+		}
+
+		.vc-input__label {
+			color: $color;
+		}
+	}
+
+	.vc-sketch-presets {
+		border-top-color: $border-color;
+	}
+
+	.vc-sketch-presets-color {
+		box-shadow: inset 0 0 0 1px $border-color;
+	}
+}
\ No newline at end of file