4.20.18

* Added: Setting to apply username colors to chat mentions. (Closes #753)
* Changed: Stream links now use a darker color.
* Changed: Make the icon for FFZ's Alternative Viewer Count slightly larger.
* Fixed: Crazy flickering when disabling hosting.
* Fixed: Stream links showing up on the home page and not just the live page.
* Fixed: Better detection for channels where the Host button should appear.
* Fixed: FFZ's Alternative Viewer Count metadata not updating correctly when FS Chat is in use.

src/modules/chat/index.js

@@ -628,6 +628,16 @@ export default class Chat extends Module {
 			}
 		});
 
+		this.settings.add('chat.filtering.color-mentions', {
+			default: false,
+			ui: {
+				component: 'setting-check-box',
+				path: 'Chat > Filtering >> Appearance',
+				title: 'Display mentions in chat with username colors.',
+				description: '**Note:** Not compatible with color overrides as mentions do not include user IDs.'
+			}
+		});
+
 		this.settings.add('chat.filtering.bold-mentions', {
 			default: true,
 			ui: {
@@ -853,6 +863,21 @@ export default class Chat extends Module {
 			for(const room of this.iterateRooms())
 				room.buildBitsCSS();
 		});
+
+		this.context.on('changed:chat.filtering.color-mentions', async val => {
+			if ( val )
+				await this.createColorCache();
+			else
+				this.color_cache = null;
+
+			this.emit(':update-lines');
+		});
+	}
+
+
+	async createColorCache() {
+		const LRUCache = await require(/* webpackChunkName: 'utils' */ 'mnemonist/lru-cache');
+		this.color_cache = new LRUCache(150);
 	}
 
 
@@ -866,6 +891,9 @@ export default class Chat extends Module {
 
 
 	onEnable() {
+		if ( this.context.get('chat.filtering.color-mentions') )
+			this.createColorCache().then(() => this.emit(':update-lines'));
+
 		for(const key in TOKENIZERS)
 			if ( has(TOKENIZERS, key) )
 				this.addTokenizer(TOKENIZERS[key]);
@@ -1143,6 +1171,9 @@ export default class Chat extends Module {
 		user.displayName = user.displayName || user.userDisplayName || user.login || ext.displayName;
 		user.isIntl = user.login && user.displayName && user.displayName.trim().toLowerCase() !== user.login;
 
+		if ( this.color_cache && user.color )
+			this.color_cache.set(user.login, user.color);
+
 		// Standardize Message Content
 		if ( ! msg.message && msg.messageParts )
 			this.detokenizeMessage(msg);

src/modules/chat/tokenizers.jsx

@@ -209,8 +209,15 @@ export const Mentions = {
 	},
 
 	render(token, createElement) {
+		let color = token.color;
+		if ( color ) {
+			const chat = this.resolve('site.chat');
+			color = chat ? chat.colors.process(color) : color;
+		}
+
 		return (<strong
 			class={`chat-line__message-mention${token.me ? ' ffz--mention-me' : ''}`}
+			style={{color}}
 			data-login={token.recipient}
 			onClick={this.handleMentionClick}
 		>
@@ -270,11 +277,15 @@ export const Mentions = {
 						mentioned = mentionable;
 					}
 
+					const rlower = recipient ? recipient.toLowerCase() : '',
+						color = this.color_cache ? this.color_cache.get(rlower) : null;
+
 					out.push({
 						type: 'mention',
 						text: `${at}${recipient}`,
 						me: mentioned,
-						recipient: recipient ? recipient.toLowerCase() : ''
+						color,
+						recipient: rlower
 					});
 
 					if ( mentioned ) {

src/modules/main_menu/components/performance.vue

@@ -0,0 +1,44 @@
+<template>
+	<div>
+		<pre>{{ JSON.stringify(events, null, '\t') }}</pre>
+	</div>
+</template>
+
+<script>
+
+import {deep_copy} from 'utilities/object';
+
+export default {
+	props: ['item', 'context'],
+
+	data() {
+		return {
+			events: deep_copy(this.item.getEvents())
+		}
+	},
+
+	computed: {
+		initial_time() {
+			const event = this.events[0];
+			return event ? event.ts : 0;
+		}
+	},
+
+	created() {
+		this.onEvent = this.onEvent.bind(this);
+		this.item.setListener(this.onEvent);
+	},
+
+	destroyed() {
+		this.onEvent = null;
+		this.item.setListener(null);
+	},
+
+	methods: {
+		onEvent(event) {
+			this.events.push(deep_copy(event));
+		}
+	}
+}
+
+</script>