4.0.0-rc8.1

* Fixed: Size of emojis in Clips chat.

Move a couple settings out of sites and into core modules.

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: '-rc8',
+	major: 4, minor: 0, revision: 0, extra: '-rc8.1',
 	commit: __git_commit__,
 	build: __webpack_hash__,
 	toString: () =>

src/modules/chat/index.js

@@ -62,6 +62,48 @@ export default class Chat extends Module {
 		// Settings
 		// ========================================================================
 
+		this.settings.add('chat.font-size', {
+			default: 12,
+			ui: {
+				path: 'Chat > Appearance >> General',
+				title: 'Font Size',
+				description: "How large should text in chat be, in pixels. This may be affected by your browser's zoom and font size settings.",
+				component: 'setting-text-box',
+				process(val) {
+					val = parseInt(val, 10);
+					if ( isNaN(val) || ! isFinite(val) || val <= 0 )
+						return 12;
+
+					return val;
+				}
+			}
+		});
+
+		this.settings.add('chat.font-family', {
+			default: '',
+			ui: {
+				path: 'Chat > Appearance >> General',
+				title: 'Font Family',
+				description: 'Set the font used for displaying chat messages.',
+				component: 'setting-text-box'
+			}
+		});
+
+		this.settings.add('chat.lines.emote-alignment', {
+			default: 0,
+			ui: {
+				path: 'Chat > Appearance >> Chat Lines',
+				title: 'Emote Alignment',
+				description: 'Change how emotes are positioned in chat, potentially making messages taller in order to avoid having emotes overlap.',
+				component: 'setting-select-box',
+				data: [
+					{value: 0, title: 'Standard'},
+					{value: 1, title: 'Padded'},
+					{value: 2, title: 'Baseline (BTTV-Like)'}
+				]
+			}
+		});
+
 		this.settings.add('chat.rich.enabled', {
 			default: true,
 			ui: {

src/sites/twitch-clips/modules/chat/index.js

@@ -5,7 +5,7 @@
 // ============================================================================
 
 import {get} from 'utilities/object';
-import {ColorAdjuster, Color} from 'utilities/color';
+import {ColorAdjuster} from 'utilities/color';
 
 import Module from 'utilities/module';
 
@@ -29,6 +29,7 @@ export default class Chat extends Module {
 
 		this.inject('site');
 		this.inject('site.fine');
+		this.inject('site.css_tweaks');
 
 		this.inject(Line);
 
@@ -39,6 +40,9 @@ export default class Chat extends Module {
 	}
 
 	onEnable() {
+		this.chat.context.on('changed:chat.font-size', this.updateChatCSS, this);
+		this.chat.context.on('changed:chat.font-family', this.updateChatCSS, this);
+		this.chat.context.on('changed:chat.lines.emote-alignment', this.updateChatCSS, this);
 		this.chat.context.on('changed:chat.adjustment-mode', this.updateColors, this);
 		this.chat.context.on('changed:chat.adjustment-contrast', this.updateColors, this);
 		this.chat.context.on('changed:theme.is-dark', this.updateColors, this);
@@ -53,10 +57,31 @@ export default class Chat extends Module {
 		});
 
 		this.loadBadges();
+		this.updateChatCSS();
 		this.updateColors();
 	}
 
 
+	updateChatCSS() {
+		const size = this.chat.context.get('chat.font-size'),
+			emote_alignment = this.chat.context.get('chat.lines.emote-alignment'),
+			lh = Math.round((20/12) * size);
+
+		let font = this.chat.context.get('chat.font-family') || 'inherit';
+		if ( font.indexOf(' ') !== -1 && font.indexOf(',') === -1 && font.indexOf('"') === -1 && font.indexOf("'") === -1 )
+			font = `"${font}"`;
+
+		this.css_tweaks.setVariable('chat-font-size', `${size/10}rem`);
+		this.css_tweaks.setVariable('chat-line-height', `${lh/10}rem`);
+		this.css_tweaks.setVariable('chat-font-family', font);
+
+		this.css_tweaks.toggle('chat-font', size !== 12 || font);
+
+		this.css_tweaks.toggle('emote-alignment-padded', emote_alignment === 1);
+		this.css_tweaks.toggle('emote-alignment-baseline', emote_alignment === 2);
+	}
+
+
 	updateColors() {
 		const is_dark = this.chat.context.get('theme.is-dark'),
 			mode = this.chat.context.get('chat.adjustment-mode'),

src/sites/twitch-clips/modules/css_tweaks/index.js

@@ -0,0 +1,92 @@
+'use strict';
+
+// ============================================================================
+// CSS Tweaks for Twitch Twilight
+// ============================================================================
+
+import Module from 'utilities/module';
+import {ManagedStyle} from 'utilities/dom';
+import {has} from 'utilities/object';
+
+
+const CLASSES = {
+
+};
+
+
+export default class CSSTweaks extends Module {
+	constructor(...args) {
+		super(...args);
+
+		this.should_enable = true;
+
+		this.inject('settings');
+		this.inject('site.chat');
+		this.inject('site.theme');
+
+		this.style = new ManagedStyle;
+		this.chunks = {};
+		this.chunks_loaded = false;
+	}
+
+	onEnable() {
+
+	}
+
+
+	toggleHide(key, val) {
+		const k = `hide--${key}`;
+		if ( ! val ) {
+			this.style.delete(k);
+			return;
+		}
+
+		if ( ! has(CLASSES, key) )
+			throw new Error(`cannot find class for "${key}"`);
+
+		this.style.set(k, `${CLASSES[key]} { display: none !important }`);
+	}
+
+
+	async toggle(key, val) {
+		if ( ! val ) {
+			this.style.delete(key);
+			return;
+		}
+
+		if ( ! this.chunks_loaded )
+			await this.populate();
+
+		if ( ! has(this.chunks, key) )
+			throw new Error(`cannot find chunk "${key}"`);
+
+		this.style.set(key, this.chunks[key]);
+	}
+
+
+	set(key, val) { return this.style.set(key, val) }
+	delete(key) { return this.style.delete(key) }
+
+	setVariable(key, val, scope = 'body') {
+		this.style.set(`var--${key}`, `${scope} { --ffz-${key}: ${val}; }`);
+	}
+
+	deleteVariable(key) { this.style.delete(`var--${key}`) }
+
+
+	populate() {
+		if ( this.chunks_loaded )
+			return;
+
+		return new Promise(async r => {
+			const raw = (await import(/* webpackChunkName: "site-css-tweaks" */ './styles.js')).default;
+			for(const key of raw.keys()) {
+				const k = key.slice(2, key.length - (key.endsWith('.scss') ? 5 : 4));
+				this.chunks[k] = raw(key);
+			}
+
+			this.chunks_loaded = true;
+			r();
+		})
+	}
+}

src/sites/twitch-clips/modules/css_tweaks/styles.js

@@ -0,0 +1,3 @@
+'use strict';
+
+export default require.context('!raw-loader!sass-loader!./styles', false, /\.s?css$/);

src/sites/twitch-clips/modules/css_tweaks/styles/chat-font.scss

@@ -0,0 +1,5 @@
+.clips-chat-replay {
+	font-size: var(--ffz-chat-font-size);
+	line-height: var(--ffz-chat-line-height);
+	font-family: var(--ffz-chat-font-family);
+}

src/sites/twitch-clips/modules/css_tweaks/styles/emote-alignment-baseline.scss

@@ -0,0 +1,8 @@
+.message > .chat-line__message--emote {
+	vertical-align: baseline;
+	padding-top: 5px;
+}
+
+.message > .chat-line__message--emote.ffz-emoji {
+	padding-top: 0px;
+}

src/sites/twitch-clips/modules/css_tweaks/styles/emote-alignment-padded.scss

@@ -0,0 +1,3 @@
+.message > .chat-line__message--emote {
+	margin: -1px 0 0;
+}

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

@@ -192,33 +192,6 @@ export default class ChatHook extends Module {
 			}
 		});
 
-		this.settings.add('chat.font-size', {
-			default: 12,
-			ui: {
-				path: 'Chat > Appearance >> General',
-				title: 'Font Size',
-				description: "How large should text in chat be, in pixels. This may be affected by your browser's zoom and font size settings.",
-				component: 'setting-text-box',
-				process(val) {
-					val = parseInt(val, 10);
-					if ( isNaN(val) || ! isFinite(val) || val <= 0 )
-						return 12;
-
-					return val;
-				}
-			}
-		});
-
-		this.settings.add('chat.font-family', {
-			default: '',
-			ui: {
-				path: 'Chat > Appearance >> General',
-				title: 'Font Family',
-				description: 'Set the font used for displaying chat messages.',
-				component: 'setting-text-box'
-			}
-		});
-
 		this.settings.add('chat.bits.show-pinned', {
 			default: true,
 			ui: {
@@ -271,21 +244,6 @@ export default class ChatHook extends Module {
 				]
 			}
 		});
-
-		this.settings.add('chat.lines.emote-alignment', {
-			default: 0,
-			ui: {
-				path: 'Chat > Appearance >> Chat Lines',
-				title: 'Emote Alignment',
-				description: 'Change how emotes are positioned in chat, potentially making messages taller in order to avoid having emotes overlap.',
-				component: 'setting-select-box',
-				data: [
-					{value: 0, title: 'Standard'},
-					{value: 1, title: 'Padded'},
-					{value: 2, title: 'Baseline (BTTV-Like)'}
-				]
-			}
-		});
 	}