Make some changes to how the directory stuff is implemented. There's too much code duplication right now. There's also code leaking from hosts to the main following page. There needs to be a way to detect if a live-channel-card is in the hosts section or not. Communities and Games use the same component, so there's a ton duplicated there.

src/sites/twitch-twilight/modules/directory/following.js

@@ -295,8 +295,7 @@ export default class Following extends SiteModule {
 		});
 
 		this.ChannelCard.on('mount', inst => this.updateChannelCard(inst), this);
-
+		this.ChannelCard.on('unmount', inst => this.parent.clearUptime(inst), this);
-		this.ChannelCard.on('unmount', inst => this.updateUptime(inst), this);
 
 		document.body.addEventListener('click', this.destroyHostMenu.bind(this));
 	}
@@ -309,61 +308,6 @@ export default class Following extends SiteModule {
 		}
 	}
 
-	updateUptime(inst) {
-		const container = this.fine.getHostNode(inst);
-		const card = container && container.querySelector && container.querySelector('.tw-card .tw-aspect > div');
-
-		// if (container === null || card === null) {
-		// 	if (inst.updateTimer !== undefined) {
-		// 		clearInterval(inst.updateTimer);
-		// 		inst.updateTimer = undefined;
-		// 		return;
-		// 	}
-		// }
-
-		if (this.settings.get('directory.following.uptime') === 0) {
-			if (inst.updateTimer !== undefined) {
-				clearInterval(inst.updateTimer);
-				inst.updateTimer = undefined;
-			}
-
-			if (inst.uptimeElement !== undefined) {
-				inst.uptimeElement.remove();
-				inst.uptimeElementSpan = inst.uptimeElement = undefined;
-			}
-		} else {
-			if (inst.updateTimer === undefined) {
-				inst.updateTimer = setInterval(
-					this.updateUptime.bind(this, inst),
-					1000
-				);
-			}
-
-			const up_since = new Date(inst.props.viewerCount.createdAt);
-			const uptime = up_since && Math.floor((Date.now() - up_since) / 1000) || 0;
-			const uptimeText = duration_to_string(uptime, false, false, false, this.settings.get('directory.following.uptime') === 1);
-	
-			if (uptime > 0) {
-				if (inst.uptimeElement === undefined) {
-					inst.uptimeElementSpan = e('span', 'tw-stat__value ffz-uptime', `${uptimeText}`);
-					inst.uptimeElement = e('div', {
-						className: 'c-background-overlay c-text-overlay font-size-6 top-0 right-0 z-default inline-flex absolute mg-05',
-						style: 'padding-left: 4px; padding-right: 4px;'
-					}, [
-						e('span', 'tw-stat__icon',
-							e('figure', 'ffz-i-clock')
-						),
-						inst.uptimeElementSpan
-					]);
-	
-					if (card.querySelector('.ffz-uptime') === null) card.appendChild(inst.uptimeElement);
-				} else {
-					inst.uptimeElementSpan.textContent = `${uptimeText}`;
-				}
-			}
-		}
-	}
-
 	showHostMenu(inst, { channels }, event) {
 		if (this.settings.get('directory.following.host-menus') === 0 || this.settings.get('directory.following.host-menus') === 1 && channels.length < 2) return;
 
@@ -483,16 +427,18 @@ export default class Following extends SiteModule {
 	}
 
 	updateChannelCard(inst) {
-		this.updateUptime(inst);
+		this.parent.updateUptime(inst, 'props.viewerCount.createdAt', '.tw-card .tw-aspect > div');
 
-		const container = this.fine.getHostNode(inst);
+		const container = this.fine.getHostNode(inst),
-		const card = container && container.querySelector && container.querySelector('.tw-card');
+			card = container && container.querySelector && container.querySelector('.tw-card');
 
-		if (container === null || card === null) return;
+		if ( container === null || card === null )
+			return;
 
 		const channelCardTitle = card.querySelector('.live-channel-card__title');
 
-		if (channelCardTitle === null) return;
+		if ( channelCardTitle === null )
+			return;
 
 		// Remove old elements
 		const hiddenBodyCard = card.querySelector('.tw-card-body.hide');

src/sites/twitch-twilight/modules/directory/game.js

@@ -184,7 +184,6 @@ export default class Game extends SiteModule {
 
 		const hiddenThumbnails = this.settings.provider.get('directory.game.hidden-thumbnails') || [];
 		const thumbnailBlocked = hiddenThumbnails.includes(inst.props.directoryName);
-		this.log.warn(inst);
 
 		if (thumbnailBlocked) {
 			card.classList.add('ffz-thumbnail-hidden');

src/sites/twitch-twilight/modules/directory/index.js

@@ -1,23 +0,0 @@
-'use strict';
-
-// ============================================================================
-// Directory
-// ============================================================================
-
-import {SiteModule} from 'utilities/module';
-
-import Following from './following';
-import Game from './game';
-import Community from './community';
-
-export default class Directory extends SiteModule {
-	constructor(...args) {
-		super(...args);
-
-		this.should_enable = true;
-
-		this.inject(Following);
-		this.inject(Game);
-		this.inject(Community);
-	}
-}

src/sites/twitch-twilight/modules/directory/index.off

@@ -0,0 +1,77 @@
+'use strict';
+
+// ============================================================================
+// Directory
+// ============================================================================
+
+import {SiteModule} from 'utilities/module';
+import {duration_to_string} from 'utilities/time';
+import {createElement as e} from 'utilities/dom';
+import {get} from 'utilities/object';
+
+import Following from './following';
+import Game from './game';
+import Community from './community';
+
+export default class Directory extends SiteModule {
+	constructor(...args) {
+		super(...args);
+
+		this.should_enable = true;
+
+		this.inject('i18n');
+		this.inject('settings');
+		this.inject('site.fine');
+
+		this.inject(Following);
+		this.inject(Game);
+		this.inject(Community);
+	}
+
+
+	clearUptime(inst) { // eslint-disable-line class-methods-use-this
+		if ( inst.ffz_update_timer ) {
+			clearInterval(inst.ffz_update_timer);
+			inst.ffz_update_timer = null;
+		}
+
+		if ( inst.ffz_uptime_el ) {
+			inst.ffz_uptime_el.parentElement.removeChild(inst.ffz_uptime_el);
+			inst.ffz_uptime_el = null;
+			inst.ffz_uptime_span = null;
+			inst.ffz_uptime_tt = null;
+		}
+	}
+
+
+	updateUptime(inst, created_path, selector) {
+		const container = this.fine.getHostNode(inst),
+			card = container && container.querySelector && container.querySelector(selector),
+			setting = this.settings.get('directory.following.uptime'),
+			created_at = get(created_path, inst),
+			up_since = created_at && new Date(created_at),
+			uptime = up_since && Math.floor((Date.now() - up_since) / 1000) || 0;
+
+		if ( ! card || setting === 0 || uptime < 1 )
+			return this.clearUptime(inst);
+
+		const up_text = duration_to_string(uptime, false, false, false, setting === 1);
+
+		if ( ! inst.ffz_uptime_el )
+			card.appendChild(inst.ffz_uptime_el = e('div',
+				'video-preview-card__preview-overlay-stat c-background-overlay c-text-overlay font-size-6 top-0 right-0 z-default inline-flex absolute mg-05',
+				e('div', 'tw-tooltip-wrapper inline-flex', [
+					e('div', 'tw-stat', [
+						e('span', 'c-text-live tw-stat__icon', e('figure', 'ffz-i-clock')),
+						inst.ffz_uptime_span = e('span', 'tw-stat__value')
+					]),
+					inst.ffz_uptime_tt = e('div', 'tw-tooltip tw-tooltip--down tw-tooltip--align-center')
+				])));
+
+		if ( ! inst.ffz_update_timer )
+			inst.ffz_update_timer = setInterval(this.updateUptime.bind(this, inst, created_path, selector), 1000);
+
+		inst.ffz_uptime_span.textContent = up_text;
+		inst.ffz_uptime_tt.textContent = up_since.toLocaleString();
+	}
+}

src/sites/twitch-twilight/modules/following_link.off

@@ -16,7 +16,6 @@ export default class FollowingText extends SiteModule {
 
 		this.should_enable = true;
 
-		// this.inject('site');
 		this.inject('settings');
 		this.inject('site.router');
 		this.inject('site.apollo');