From 0f88ce216fafc4d984c204a3581679662ee25a55 Mon Sep 17 00:00:00 2001
From: SirStendec <sir@stendec.me>
Date: Tue, 3 Jul 2018 18:39:00 -0400
Subject: [PATCH] 4.0.0-rc4

* Added: Smooth Scrolling for Chat. (Thanks @neuspadrin)
* Changed: Disable mouse interaction with the background of the metadata bar when it's visible over the player in theater mode.
* Fixed: All directory features except host menus.

* API Added: tList(...) method for i18n to support localizing strings with embedded links, etc.
---
 changelog.html                                |  13 ++
 src/i18n.js                                   |  68 +++++++++-
 src/main.js                                   |   2 +-
 src/modules/metadata.jsx                      |   2 +-
 .../twitch-twilight/modules/channel_bar.js    |   4 +-
 .../twitch-twilight/modules/chat/scroller.js  |  80 ++++++------
 .../css_tweaks/styles/theatre-metadata.scss   |   6 +
 .../modules/directory/browse_popular.gql      |   3 -
 .../modules/directory/browse_popular.js       |   2 -
 .../modules/directory/followed_channels.gql   |   1 -
 .../modules/directory/followed_index.gql      |   1 -
 .../modules/directory/followed_live.gql       |   1 -
 .../modules/directory/following.jsx           |  54 +++++---
 .../modules/directory/game.jsx                |   2 +-
 .../modules/directory/index.jsx               | 122 +++++++++++-------
 .../modules/directory/sidenav_subscribed.gql  |  14 ++
 16 files changed, 264 insertions(+), 111 deletions(-)
 create mode 100644 src/sites/twitch-twilight/modules/directory/sidenav_subscribed.gql

diff --git a/changelog.html b/changelog.html
index e239929d..ec82c9c4 100644
--- a/changelog.html
+++ b/changelog.html
@@ -1,3 +1,16 @@
+<div class="list-header">4.0.0-rc4<span>@012130d37baabae67622</span> <time datetime="2018-07-03">(2018-07-03)</time></div>
+<ul class="chat-menu-content menu-side-padding">
+	<li>Added: Smooth Scrolling for Chat. (Thanks neuspadrin on GitHub!)</li>
+	<li>Fixed: All directory features except the Host Menu.</li>
+	<li>Changed: Disable mouse interaction with the background of the metadata bar when it's visible in theater mode.</li>
+</ul>
+
+<div class="list-header">4.0.0-rc3.4<span>@104efaa42e14d30191d1</span> <time datetime="2018-07-02">(2018-07-02)</time></div>
+<ul class="chat-menu-content menu-side-padding">
+	<li>Fixed: Stream uptime when watching a channel.</li>
+	<li class="tw-align-right">~ Arthur, King of the Britons</li>
+</ul>
+
 <div class="list-header">4.0.0-rc3.3<span>@85ad2d458fb808c0365f</span> <time datetime="2018-06-29">(2018-06-29)</time></div>
 <ul class="chat-menu-content menu-side-padding">
 	<li>Fixed: Update class names for all input elements to use Twitch's new, long-winded methodology.</li>
diff --git a/src/i18n.js b/src/i18n.js
index 0056bafa..84daf265 100644
--- a/src/i18n.js
+++ b/src/i18n.js
@@ -361,6 +361,10 @@ export class TranslationManager extends Module {
 	t(...args) {
 		return this._.t(...args);
 	}
+
+	tList(...args) {
+		return this._.tList(...args);
+	}
 }
 
 
@@ -391,6 +395,7 @@ export default class TranslationCore {
 		const allowMissing = options.allowMissing ? transformPhrase : null;
 		this.onMissingKey = typeof options.onMissingKey === 'function' ? options.onMissingKey : allowMissing;
 		this.transformPhrase = typeof options.transformPhrase === 'function' ? options.transformPhrase : transformPhrase;
+		this.transformList = typeof options.transformList === 'function' ? options.transformList : transformList;
 		this.delimiter = options.delimiter || /\s*\|\|\|\|\s*/;
 		this.tokenRegex = options.tokenRegex || /%\{(.*?)(?:\|(.*?))?\}/g;
 		this.formatters = Object.assign({}, DEFAULT_FORMATTERS, options.formatters || {});
@@ -457,7 +462,7 @@ export default class TranslationCore {
 		this.extend(phrases);
 	}
 
-	t(key, phrase, options, use_default) {
+	preT(key, phrase, options, use_default) {
 		const opts = options == null ? {} : options;
 		let p, locale;
 
@@ -492,8 +497,20 @@ export default class TranslationCore {
 		if ( this.transformation )
 			p = this.transformation(key, p, opts, locale, this.tokenRegex);
 
+		return [p, opts, locale];
+	}
+
+	t(key, phrase, options, use_default) {
+		const [p, opts, locale] = this.preT(key, phrase, options, use_default);
+
 		return this.transformPhrase(p, opts, locale, this.tokenRegex, this.formatters);
 	}
+
+	tList(key, phrase, options, use_default) {
+		const [p, opts, locale] = this.preT(key, phrase, options, use_default);
+
+		return this.transformList(p, opts, locale, this.tokenRegex, this.formatters);
+	}
 }
 
 
@@ -503,6 +520,55 @@ export default class TranslationCore {
 
 const DOLLAR_REGEX = /\$/g;
 
+export function transformList(phrase, substitutions, locale, token_regex, formatters) {
+	const is_array = Array.isArray(phrase);
+	if ( substitutions == null )
+		return is_array ? phrase[0] : phrase;
+
+	let p = phrase;
+	const options = typeof substitutions === 'number' ? {count: substitutions} : substitutions;
+
+	if ( is_array )
+		p = p[pluralTypeIndex(
+			locale || 'en',
+			has(options, 'count') ? options.count : 1
+		)] || p[0];
+
+	const result = [];
+
+	token_regex.lastIndex = 0;
+	let idx = 0, match;
+
+	while((match = token_regex.exec(p))) {
+		const nix = match.index,
+			arg = match[1],
+			fmt = match[2];
+
+		if ( nix !== idx )
+			result.push(p.slice(idx, nix));
+
+		let val = get(arg, options);
+
+		if ( val != null ) {
+			const formatter = formatters[fmt];
+			if ( typeof formatter === 'function' )
+				val = formatter(val, locale, options);
+			else if ( typeof val === 'string' )
+				val = REPLACE.call(val, DOLLAR_REGEX, '$$');
+
+			result.push(val);
+		}
+
+		idx = nix + match[0].length;
+	}
+
+	if ( idx < p.length )
+		result.push(p.slice(idx));
+
+	return result;
+}
+
+
 export function transformPhrase(phrase, substitutions, locale, token_regex, formatters) {
 	const is_array = Array.isArray(phrase);
 	if ( substitutions == null )
diff --git a/src/main.js b/src/main.js
index b34cbef4..abaef898 100644
--- a/src/main.js
+++ b/src/main.js
@@ -100,7 +100,7 @@ class FrankerFaceZ extends Module {
 FrankerFaceZ.Logger = Logger;
 
 const VER = FrankerFaceZ.version_info = {
-	major: 4, minor: 0, revision: 0, extra: '-rc3.3',
+	major: 4, minor: 0, revision: 0, extra: '-rc4',
 	build: __webpack_hash__,
 	toString: () =>
 		`${VER.major}.${VER.minor}.${VER.revision}${VER.extra || ''}${DEBUG ? '-dev' : ''}`
diff --git a/src/modules/metadata.jsx b/src/modules/metadata.jsx
index 5e78c04a..df09dd0d 100644
--- a/src/modules/metadata.jsx
+++ b/src/modules/metadata.jsx
@@ -61,7 +61,7 @@ export default class Metadata extends Module {
 			setup() {
 				const socket = this.resolve('socket'),
 					apollo = this.resolve('site.apollo'),
-					created_at = apollo.getFromQuery('ChannelPage_ChannelInfoBar_User', 'data.user.stream.createdAt');
+					created_at = apollo.getFromQuery('ChannelPage_ChannelHeader', 'data.user.stream.createdAt');
 
 				if ( ! created_at )
 					return {};
diff --git a/src/sites/twitch-twilight/modules/channel_bar.js b/src/sites/twitch-twilight/modules/channel_bar.js
index 6efc6eb0..5a4dce7d 100644
--- a/src/sites/twitch-twilight/modules/channel_bar.js
+++ b/src/sites/twitch-twilight/modules/channel_bar.js
@@ -21,8 +21,8 @@ export default class ChannelBar extends Module {
 		this.inject('metadata');
 		this.inject('socket');
 
-		this.apollo.registerModifier('ChannelPage_ChannelInfoBar_User', CHANNEL_QUERY);
-		this.apollo.registerModifier('ChannelPage_ChannelInfoBar_User', data => {
+		this.apollo.registerModifier('ChannelPage_ChannelHeader', CHANNEL_QUERY);
+		this.apollo.registerModifier('ChannelPage_ChannelHeader', 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/chat/scroller.js b/src/sites/twitch-twilight/modules/chat/scroller.js
index 6350d682..499b935d 100644
--- a/src/sites/twitch-twilight/modules/chat/scroller.js
+++ b/src/sites/twitch-twilight/modules/chat/scroller.js
@@ -51,7 +51,7 @@ export default class Scroller extends Module {
 			ui: {
 				path: 'Chat > Behavior >> General',
 				title: 'Smooth Scrolling',
-				description: 'Animates new chat messages into view. Will speed up if necessary to keep up with chat.',
+				description: 'Smoothly slide new chat messages into view. Speed will increase as necessary to keep up with chat.',
 				component: 'setting-select-box',
 				data: [
 					{value: 0, title: 'Disabled'},
@@ -85,9 +85,8 @@ export default class Scroller extends Module {
 		this.chat.context.on('changed:chat.scroller.smooth-scroll', val => {
 			this.smoothScroll = val;
 
-			for(const inst of this.ChatScroller.instances) {
+			for(const inst of this.ChatScroller.instances)
 				inst.ffzSetSmoothScroll(val);
-			}
 		});
 
 		this.ChatScroller.ready((cls, instances) => {
@@ -250,52 +249,62 @@ export default class Scroller extends Module {
 			}
 
 			cls.prototype.smoothScrollBottom = function() {
-				if(this.state.ffzSmoothAnimation){
-					cancelAnimationFrame(this.state.ffzSmoothAnimation);
-				}
-				this.isScrollingToBottom = true;
+				if ( this._ffz_smooth_animation )
+					cancelAnimationFrame(this._ffz_smooth_animation);
+
+				this.ffz_is_smooth_scrolling = true;
+
 				// Step setting value is # pixels to scroll per 10ms.
 				// 1 is pretty slow, 2 medium, 3 fast, 4 very fast.
-				let step = this.ffz_smooth_scroll;
-				const scrollContent = this.scroll.scrollContent;
-				const targetTop = scrollContent.scrollHeight - scrollContent.clientHeight;
-				const difference = targetTop - scrollContent.scrollTop;
+				let step = this.ffz_smooth_scroll,
+					old_time = Date.now();
+
+				const scroll_content = this.scroll.scrollContent,
+					target_top = scroll_content.scrollHeight - scroll_content.clientHeight,
+					difference = target_top - scroll_content.scrollTop;
 
 				// If we are falling behind speed us up
-				if (difference > scrollContent.clientHeight) {
+				if ( difference > scroll_content.clientHeight ) {
 					// we are a full scroll away, just jump there
 					step = difference;
-				} else if (difference > 200) {
+
+				} else if ( difference > 200 ) {
 					// we are starting to fall behind, speed it up a bit
-					step += step * parseInt(difference / 200, 10);
+					step += step * Math.floor(difference / 200);
 				}
-				let prevTime = Date.now();
+
 				const smoothAnimation = () => {
-					if(this.state.ffzFrozen) {
-						this.isScrollingToBottom = false;
-						return;
-					}
+					if ( this.state.ffzFrozen )
+						return this.ffz_is_smooth_scrolling = false;
+
 					// See how much time has passed to get a step based off the delta
-					const currentTime = Date.now();
-					const delta = currentTime - prevTime;
-					const currentStep = step * (delta / 10);
+					const current_time = Date.now(),
+						delta = current_time - old_time,
+						current_step = step * (delta / 10);
+
 					// we need to move at least one full pixel for scrollTop to do anything in this delta.
-					if (currentStep >= 1) {
-						prevTime = currentTime;
-						if (scrollContent.scrollTop < (scrollContent.scrollHeight - scrollContent.clientHeight)) {
-							scrollContent.scrollTop += currentStep;
-							this.state.ffzSmoothAnimation = requestAnimationFrame(smoothAnimation);
+					if ( current_step >= 1 ) {
+						const scroll_top = scroll_content.scrollTop,
+							target_top = scroll_content.scrollHeight - scroll_content.clientHeight;
+
+						old_time = current_time;
+						if ( scroll_top < target_top ) {
+							scroll_content.scrollTop = scroll_top + current_step;
+							this._ffz_smooth_animation = requestAnimationFrame(smoothAnimation);
+
 						} else {
-							scrollContent.scrollTop = scrollContent.scrollHeight - scrollContent.clientHeight;
-							this.isScrollingToBottom = false;
+							// We've reached the bottom.
+							scroll_content.scrollTop = target_top;
+							this.ffz_is_smooth_scrolling = false;
 						}
+
 					} else {
-						// the frame happened so quick since last update we didn't move a full pixel yet.
-						// should only be possible if the FPS of a browser went over 60fps.
-						this.state.ffzSmoothAnimation = requestAnimationFrame(smoothAnimation);
+						// The frame happened so quick since last update that we haven't moved a full pixel.
+						// Just wait.
+						this._ffz_smooth_animation = requestAnimationFrame(smoothAnimation);
 					}
-					
 				}
+
 				smoothAnimation();
 			}
 
@@ -308,11 +317,10 @@ export default class Scroller extends Module {
 				this._old_scroll = this.scrollToBottom;
 				this.scrollToBottom = function() {
 					if ( ! this.ffz_freeze_enabled || ! this.state.ffzFrozen ) {
-						if (this.ffz_smooth_scroll !== 0) {
+						if ( this.ffz_smooth_scroll )
 							this.smoothScrollBottom();
-						} else {
+						else
 							this._old_scroll();
-						}
 					}
 				}
 
diff --git a/src/sites/twitch-twilight/modules/css_tweaks/styles/theatre-metadata.scss b/src/sites/twitch-twilight/modules/css_tweaks/styles/theatre-metadata.scss
index 6b95374a..8584b0e2 100644
--- a/src/sites/twitch-twilight/modules/css_tweaks/styles/theatre-metadata.scss
+++ b/src/sites/twitch-twilight/modules/css_tweaks/styles/theatre-metadata.scss
@@ -5,6 +5,12 @@
 	right: calc(var(--ffz-chat-width) + 25rem);
 	z-index: 3500;
 	opacity: 0;
+
+	pointer-events: none;
+
+	.tw-tooltip-wrapper, .tw-stat, .ffz-stat, button, a {
+		pointer-events: all;
+	}
 }
 
 .channel-page-layout__scroll-area--theatre-mode:hover .channel-info-bar {
diff --git a/src/sites/twitch-twilight/modules/directory/browse_popular.gql b/src/sites/twitch-twilight/modules/directory/browse_popular.gql
index 5ebcaf8f..860cb07d 100644
--- a/src/sites/twitch-twilight/modules/directory/browse_popular.gql
+++ b/src/sites/twitch-twilight/modules/directory/browse_popular.gql
@@ -3,9 +3,6 @@ query {
 		edges {
 			node {
 				createdAt
-				broadcaster {
-					profileImageURL(width: 50)
-				}
 			}
 		}
 	}
diff --git a/src/sites/twitch-twilight/modules/directory/browse_popular.js b/src/sites/twitch-twilight/modules/directory/browse_popular.js
index afa2f1a9..bce8416e 100644
--- a/src/sites/twitch-twilight/modules/directory/browse_popular.js
+++ b/src/sites/twitch-twilight/modules/directory/browse_popular.js
@@ -30,8 +30,6 @@ export default class BrowsePopular extends SiteModule {
 	}
 
 	modifyStreams(res) { // eslint-disable-line class-methods-use-this
-		this.log.info('Streams', res);
-
 		const edges = get('data.streams.edges', res);
 		if ( ! edges || ! edges.length )
 			return res;
diff --git a/src/sites/twitch-twilight/modules/directory/followed_channels.gql b/src/sites/twitch-twilight/modules/directory/followed_channels.gql
index 39955eff..a4e359f4 100644
--- a/src/sites/twitch-twilight/modules/directory/followed_channels.gql
+++ b/src/sites/twitch-twilight/modules/directory/followed_channels.gql
@@ -2,7 +2,6 @@ query {
 	currentUser {
 		followedLiveUsers {
 			nodes {
-				profileImageURL(width: 50)
 				stream {
 					type
 					createdAt
diff --git a/src/sites/twitch-twilight/modules/directory/followed_index.gql b/src/sites/twitch-twilight/modules/directory/followed_index.gql
index aaf8ed0f..ef13ca6b 100644
--- a/src/sites/twitch-twilight/modules/directory/followed_index.gql
+++ b/src/sites/twitch-twilight/modules/directory/followed_index.gql
@@ -2,7 +2,6 @@ query {
 	currentUser {
 		followedLiveUsers {
 			nodes {
-				profileImageURL(width: 50)
 				stream {
 					createdAt
 				}
diff --git a/src/sites/twitch-twilight/modules/directory/followed_live.gql b/src/sites/twitch-twilight/modules/directory/followed_live.gql
index 7d719875..49c66bfa 100644
--- a/src/sites/twitch-twilight/modules/directory/followed_live.gql
+++ b/src/sites/twitch-twilight/modules/directory/followed_live.gql
@@ -3,7 +3,6 @@ query {
 		followedLiveUsers {
 			edges {
 				node {
-					profileImageURL(width: 50)
 					stream {
 						createdAt
 					}
diff --git a/src/sites/twitch-twilight/modules/directory/following.jsx b/src/sites/twitch-twilight/modules/directory/following.jsx
index 97bde846..9fddbb43 100644
--- a/src/sites/twitch-twilight/modules/directory/following.jsx
+++ b/src/sites/twitch-twilight/modules/directory/following.jsx
@@ -14,6 +14,7 @@ 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';
+import SUBSCRIBED_CHANNELS from './sidenav_subscribed.gql';
 
 export default class Following extends SiteModule {
 	constructor(...args) {
@@ -63,27 +64,37 @@ export default class Following extends SiteModule {
 			changed: () => this.ChannelCard.forceUpdate()
 		});
 
+		this.apollo.registerModifier('FollowedChannels_RENAME2', FOLLOWED_CHANNELS);
+		this.apollo.registerModifier('SideNav_SubscribedChannels', SUBSCRIBED_CHANNELS);
+
 		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.apollo.registerModifier('FollowedChannels_RENAME2', res =>	this.modifyLiveUsers(res), false);
+		this.apollo.registerModifier('SideNav_SubscribedChannels', res => this.modifyLiveUsers(res, 'subscribedChannels'), false);
+
+		this.apollo.registerModifier('FollowingLive_CurrentUser', res => this.modifyLiveUsers(res), false);
+		this.apollo.registerModifier('FollowingHosts_CurrentUser', res => this.modifyLiveHosts(res), false);
 		this.apollo.registerModifier('FollowedIndex_CurrentUser', res => {
 			this.modifyLiveUsers(res);
 			this.modifyLiveHosts(res);
 		}, false);
 
-		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);
+		this.hosts = new WeakMap;
 	}
 
-	modifyLiveUsers(res) {
-		const edges = get('data.currentUser.followedLiveUsers.nodes', res);
-		if ( ! edges || ! edges.length )
-			return res;
+	modifyLiveUsers(res, path = 'followedLiveUsers') {
+		const followed_live = get(`data.currentUser.${path}`, res);
+		if ( ! followed_live )
+			return;
+
+		if ( followed_live.nodes )
+			followed_live.nodes = this.parent.processNodes(followed_live.nodes);
+
+		else if ( followed_live.edges )
+			followed_live.edges = this.parent.processNodes(followed_live.edges);
 
-		res.data.currentUser.followedLiveUsers.nodes = this.parent.processNodes(edges);
 		return res;
 	}
 
@@ -103,23 +114,29 @@ export default class Following extends SiteModule {
 				hosted = node.hosting,
 				stream = hosted && hosted.stream;
 
-			if ( ! stream || stream.game && blocked_games.includes(stream.game.game) )
+			if ( ! stream || stream.game && blocked_games.includes(stream.game.name) )
 				continue;
 
-			const store = {}; // stream.viewersCount = new Number(stream.viewersCount || 0);
+			if ( ! stream.viewersCount ) {
+				if ( ! do_grouping || ! hosts[hosted.login] )
+					out.push(edge);
+				continue;
+			}
+
+			const store = stream.viewersCount = new Number(stream.viewersCount || 0);
 
 			store.createdAt = stream.createdAt;
 			store.title = stream.title;
-			store.game = stream.game;
+			//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;
+					this.hosts.set(store, host_nodes);
 
 				} else {
-					store.host_nodes = node._ffz_host_nodes = hosts[hosted.login] = [node];
+					this.hosts.set(store, hosts[hosted.login] = [node]);
 					out.push(edge);
 				}
 
@@ -133,8 +150,13 @@ export default class Following extends SiteModule {
 
 	ensureQueries () {
 		this.apollo.ensureQuery(
-			'FollowedChannels',
-			'data.currentUser.followedLiveUsers.nodes.0.profileImageURL'
+			'FollowedChannels_RENAME2',
+			'data.currentUser.followedLiveUsers.nodes.0.stream.createdAt'
+		);
+
+		this.apollo.ensureQuery(
+			'SideNav_SubscribedChannels',
+			'data.currentUser.subscribedChannels.edges.0.node.stream.createdAt'
 		);
 
 		if ( this.router.current_name !== 'dir-following' )
diff --git a/src/sites/twitch-twilight/modules/directory/game.jsx b/src/sites/twitch-twilight/modules/directory/game.jsx
index 1a5280c5..cbcb6254 100644
--- a/src/sites/twitch-twilight/modules/directory/game.jsx
+++ b/src/sites/twitch-twilight/modules/directory/game.jsx
@@ -25,7 +25,7 @@ export default class Game extends SiteModule {
 			['dir-game-index', 'dir-community']
 		);
 
-		this.apollo.registerModifier('GamePage_Game', GAME_QUERY);
+		this.apollo.registerModifier('GamePage_Game_RENAME2', GAME_QUERY);
 	}
 
 	onEnable() {
diff --git a/src/sites/twitch-twilight/modules/directory/index.jsx b/src/sites/twitch-twilight/modules/directory/index.jsx
index 3f980eea..408c8c10 100644
--- a/src/sites/twitch-twilight/modules/directory/index.jsx
+++ b/src/sites/twitch-twilight/modules/directory/index.jsx
@@ -22,6 +22,8 @@ export const CARD_CONTEXTS = ((e ={}) => {
 })();
 
 
+const CREATIVE_ID = 488191;
+
 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'];
 
 
@@ -44,7 +46,7 @@ export default class Directory extends SiteModule {
 		this.inject(Game);
 		this.inject(BrowsePopular);
 
-		this.apollo.registerModifier('GamePage_Game', res => this.modifyStreams(res), false);
+		this.apollo.registerModifier('GamePage_Game_RENAME2', res => this.modifyStreams(res), false);
 
 		this.DirectoryCard = this.fine.define(
 			'directory-card',
@@ -52,12 +54,6 @@ export default class Directory extends SiteModule {
 			DIR_ROUTES
 		);
 
-		this.CardWrapper = this.fine.define(
-			'directory-card-wrapper',
-			n => n.renderFallback && n.renderStreamFlag,
-			DIR_ROUTES
-		);
-
 		this.settings.add('directory.uptime', {
 			default: 1,
 
@@ -123,8 +119,11 @@ export default class Directory extends SiteModule {
 				component: 'setting-check-box'
 			},
 
-			changed: () => this.CardWrapper.forceUpdate()
+			changed: () => this.DirectoryCard.forceUpdate()
 		});
+
+
+		this.routeClick = this.routeClick.bind(this);
 	}
 
 
@@ -132,28 +131,25 @@ export default class Directory extends SiteModule {
 		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.on('i18n:update', () => this.DirectoryCard.forceUpdate());
+
 		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;
+		this.DirectoryCard.ready(cls => {
+			const old_render = cls.prototype.render,
+				old_render_iconic = cls.prototype.renderIconicImage,
+				old_render_titles = cls.prototype.renderTitles;
 
 			cls.prototype.render = function() {
-				if ( get('props.streamNode.type', this) === 'rerun' && t.settings.get('directory.hide-vodcasts') )
+				if ( get('props.streamType', 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 )
@@ -163,27 +159,48 @@ export default class Directory extends SiteModule {
 			}
 
 			cls.prototype.renderTitles = function() {
-				const nodes = get('props.currentViewerCount.host_nodes', this);
+				const nodes = t.following.hosts.get(get('props.currentViewerCount', this));
 				if ( this.props.hostedByChannelLogin == null || ! nodes || ! nodes.length )
 					return old_render_titles.call(this);
 
 				const channel = nodes[0].hosting,
-					stream = channel.stream;
+					stream = channel.stream,
+					game = stream && stream.game,
+
+					channel_url = `/${channel.login}`,
+					game_url = game && `/directory/game/${stream.game.name}`,
+
+					user_link = <a href={channel_url} data-href={channel_url} onClick={t.routeClick} class="tw-link tw-link--inherit">{channel.displayName}</a>,
+					game_link = game && <a href={game_url} data-href={game_url} onClick={t.routeClick} class="tw-link tw-link--inherit">{game.name}</a>;
 
 				return (<div>
-					<a class="tw-link tw-link--inherit" data-test-selector="preview-card-titles__primary-link">
+					<a href={channel_url} data-href={channel_url} onClick={t.routeClick} 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>
+							<p class="tw-c-text-alt tw-ellipsis">{
+								game ?
+									game.id == CREATIVE_ID ?
+										t.i18n.tList('directory.user-creative', '%{user} being %{game}', {
+											user: user_link,
+											game: game_link
+										}) :
+										t.i18n.tList('directory.user-playing', '%{user} playing %{game}', {
+											user: user_link,
+											game: game_link
+										})
+									: user_link
+							}</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>
+							<p class="tw-c-text-alt tw-ellipsis">{
+								nodes.length > 1 ?
+									t.i18n.t('directory.hosted.by-many', 'Hosted by %{count} channel%{count|en_plural}', nodes.length) :
+									t.i18n.tList('directory.hosted.by-one', 'Hosted by %{user}', {
+										user: <a href={`/${nodes[0].login}`} data-href={`/${nodes[0].login}`} onClick={t.routeClick} class="tw-link tw-link--inherit">{nodes[0].displayName}</a>
+									})
+							}</p>
 						</div>
 					</div>
 				</div>);
@@ -194,7 +211,7 @@ export default class Directory extends SiteModule {
 			// Game Directory Channel Cards
 			// TODO: Better query handling.
 			this.apollo.ensureQuery(
-				'GamePage_Game',
+				'GamePage_Game_RENAME2',
 				'data.directory.streams.edges.0.node.createdAt'
 			);
 
@@ -216,9 +233,7 @@ export default class Directory extends SiteModule {
 			return;
 
 		const props = inst.props,
-			game = props.gameTitle || props.playerMetadataGame,
-			is_video = props.durationInSeconds != null,
-			is_host = props.hostedByChannelLogin != null;
+			game = props.gameTitle || props.playerMetadataGame;
 
 		container.classList.toggle('ffz-hide-thumbnail', this.settings.provider.get('directory.game.hidden-thumbnails', []).includes(game));
 
@@ -237,18 +252,22 @@ export default class Directory extends SiteModule {
 	processNodes(edges, is_game_query = false, blocked_games) {
 		const out = [];
 
-		if ( blocked_games === undefined )
+		if ( ! Array.isArray(blocked_games) )
 			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);
+				stream = node.stream || node;
 
-			store.createdAt = node.createdAt;
-			store.title = node.title;
-			store.game = node.game;
+			if ( stream.viewersCount ) {
+				const store = stream.viewersCount = new Number(stream.viewersCount || 0);
 
-			if ( is_game_query || (! node.game || node.game && ! blocked_games.includes(node.game.game)) )
+				store.createdAt = stream.createdAt;
+				store.title = stream.title;
+				//store.game = stream.game;
+			}
+
+			if ( is_game_query || (! stream.game || stream.game && ! blocked_games.includes(stream.game.name)) )
 				out.push(edge);
 		}
 
@@ -257,8 +276,6 @@ export default class Directory extends SiteModule {
 
 
 	modifyStreams(res) { // eslint-disable-line class-methods-use-this
-		this.log.info('Modify Streams', res);
-
 		const is_game_query = get('data.directory.__typename', res) === 'Game',
 			edges = get('data.directory.streams.edges', res);
 
@@ -310,7 +327,7 @@ export default class Directory extends SiteModule {
 							</div>
 							{inst.ffz_uptime_span = <p />}
 						</div>
-						<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-center">
+						<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
 							{this.i18n.t('metadata.uptime.tooltip', 'Stream Uptime')}
 							{inst.ffz_uptime_tt = <div class="tw-pd-t-05" />}
 						</div>
@@ -366,10 +383,12 @@ export default class Directory extends SiteModule {
 		inst.ffz_av_login = props.channelLogin;
 		inst.ffz_av_src = src;
 
+		const link = props.channelLinkTo && props.channelLinkTo.pathname;
+
 		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
+			href={link}
+			onClick={e => this.routeClick(e, link)} // 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">
@@ -380,12 +399,25 @@ export default class Directory extends SiteModule {
 	}
 
 
-	routeClick(event, route) {
+	routeClick(event, url) {
 		event.preventDefault();
 		event.stopPropagation();
 
-		if ( route && route.pathname )
-			this.router.history.push(route.pathname);
+		if ( ! url ) {
+			const target = event.currentTarget;
+
+			if ( target ) {
+				const ds = target.dataset;
+				if ( ds && ds.href )
+					url = ds.href;
+
+				else if ( target.href )
+					url = target.href;
+			}
+		}
+
+		if ( url )
+			this.router.history.push(url);
 	}
 
 
diff --git a/src/sites/twitch-twilight/modules/directory/sidenav_subscribed.gql b/src/sites/twitch-twilight/modules/directory/sidenav_subscribed.gql
new file mode 100644
index 00000000..417e545e
--- /dev/null
+++ b/src/sites/twitch-twilight/modules/directory/sidenav_subscribed.gql
@@ -0,0 +1,14 @@
+query {
+	currentUser {
+		subscribedChannels {
+			edges {
+				node {
+					stream {
+						type
+						createdAt
+					}
+				}
+			}
+		}
+	}
+}
\ No newline at end of file