4.77.7

* Fixed: Custom font sizes not being applied correctly.
* Fixed: Emote previews in the chat input sometimes displaying a broken image. (Closes #1610)
* Fixed: A specific system message displaying the incorrect channel name during Shared Chat sessions.

package.json

@@ -1,7 +1,7 @@
 {
 	"name": "frankerfacez",
 	"author": "Dan Salvato LLC",
-	"version": "4.77.6",
+	"version": "4.77.7",
 	"description": "FrankerFaceZ is a Twitch enhancement suite.",
 	"private": true,
 	"license": "Apache-2.0",

src/sites/clips/theme.js

@@ -42,15 +42,15 @@ export default class ThemeEngine extends Module {
 		// Font
 
 		this.settings.add('theme.font.size', {
-			default: 13,
+			default: 14,
 			process(ctx, val) {
 				if ( typeof val !== 'number' )
 					try {
 						val = parseFloat(val);
 					} catch(err) { val = null; }
 
-				if ( ! val || val < 1 || isNaN(val) || ! isFinite(val) || val > 25 )
+				if ( ! val || val < 6 || isNaN(val) || ! isFinite(val) || val > 25 )
-					val = 13;
+					val = 14;
 
 				return val;
 			},
@@ -148,14 +148,25 @@ export default class ThemeEngine extends Module {
 		else if ( typeof size !== 'number' )
 			size = null;
 
-		if ( ! size || isNaN(size) || ! isFinite(size) || size < 1 || size === 13 ) {
+		if ( ! size || isNaN(size) || ! isFinite(size) || size < 1 || size === 14 ) {
 			this.css_tweaks.delete('font-size');
 			return;
 		}
 
 		size = size / 10;
 
-		this.css_tweaks.set('font-size', `html body {
+		// Old sizes:
+		// fs-1 = 5.4rem
+		// fs-2 = 3.6rem
+		// fs-3 = 2.4rem
+		// fs-4 = 1.8rem
+		// fs-5 = 1.4rem
+		// fs-6 = 1.3rem
+		// fs-7 = 1.2rem
+		// fs-8 = 1.2rem
+		// fs-base = 1.3rem
+
+		/*this.css_tweaks.set('font-size', `html body {
 	--font-size-1: ${(54/13) * size}rem;
 	--font-size-2: ${(36/13) * size}rem;
 	--font-size-3: ${(24/13) * size}rem;
@@ -166,7 +177,31 @@ export default class ThemeEngine extends Module {
 	--font-size-8: ${(12/13) * size}rem;
 	--font-size-base: ${size}rem;
 }
+`);*/
+
+		// New sizes:
+		// fs-1 = 6rem
+		// fs-2 = 2.4rem
+		// fs-3 = 1.8rem
+		// fs-4 = 1.4rem
+		// fs-5 = 1.2rem
+		// fs-6 = 1.4rem
+		// fs-7 = 1.2rem
+		// fs-8 = 1.2rem
+		// fs-base = 1.4rem
+
+		this.css_tweaks.set('font-size', `html body {
+	--font-size-1: ${(60/14) * size}rem;
+	--font-size-2: ${(24/14) * size}rem;
+	--font-size-3: ${(18/14) * size}rem;
+	--font-size-4: ${size}rem;
+	--font-size-5: ${(12/14) * size}rem;
+	--font-size-6: ${size}rem;
+	--font-size-7: ${(12/14) * size}rem;
+	--font-size-8: ${(12/14) * size}rem;
+	--font-size-base: ${size}rem;
 `);
+
 	}
 
 	updateCSS() {
@@ -461,4 +496,4 @@ export default class ThemeEngine extends Module {
 		this.updateCSS();
 		this.updateFont();
 	}
-}
+}

src/sites/twitch-twilight/modules/chat/input.jsx

@@ -418,7 +418,7 @@ export default class Input extends Module {
 			return;
 
 		const el = this.fine.getHostNode(inst),
-			target = el && el.querySelector('.chat-input__textarea');
+			target = el; // && el.querySelector('.chat-input__textarea');
 		if ( ! target )
 			return;
 

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

@@ -386,7 +386,7 @@ export default class ChatLine extends Module {
 
 			getClass: () => 'ffz--subscribe-line',
 
-			renderNotice: (msg, user, room, inst, e) => {
+			renderNotice: (msg, user, room, inst, e, source) => {
 				const mystery = msg.mystery;
 				if ( mystery )
 					mystery.line = inst;
@@ -404,7 +404,7 @@ export default class ChatLine extends Module {
 						}, msg.user.displayName)),
 					count: msg.sub_count,
 					tier: SUB_TIERS[msg.sub_plan] || 1,
-					channel: msg.roomLogin
+					channel: source?.displayName || source?.login || msg.roomLogin
 				});
 
 				if ( msg.sub_total === 1 )
@@ -989,13 +989,13 @@ other {# messages were deleted by a moderator.}
 
 				if ( type ) {
 					if ( type.render )
-						return type.render(msg, current_user, current_room, this, e);
+						return type.render(msg, current_user, current_room, this, e, source);
 
 					if ( type.renderNotice )
-						notice = type.renderNotice(msg, current_user, current_room, this, e);
+						notice = type.renderNotice(msg, current_user, current_room, this, e, source);
 
 					if ( type.getClass )
-						klass = type.getClass(msg, current_user, current_room, this, e);
+						klass = type.getClass(msg, current_user, current_room, this, e, source);
 				}
 
 				// Render the line.
@@ -1201,7 +1201,7 @@ other {# messages were deleted by a moderator.}
 
 					// The reply element for Twitch style.
 					const twitch_reply = reply_mode === 1 && this.props.reply && this.props.repliesAppearancePreference && this.props.repliesAppearancePreference === 'expanded'
-						? this.renderReplyLine()
+						? e('div', {className: 'ffz--fix-reply-line'}, this.renderReplyLine())
 						: null;
 
 					// Now assemble the pieces.

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

@@ -16,4 +16,10 @@ textarea[data-a-target="chat-input"],
 textarea[data-a-target="video-chat-input"] {
 	font-family: var(--ffz-chat-font-family) !important;
 	font-size: var(--ffz-chat-font-size) !important;
-}
+}
+
+.ffz--fix-reply-line p {
+	font-size: var(--ffz-chat-font-size) !important;
+	line-height: var(--ffz-chat-line-height) !important;
+	font-family: var(--ffz-chat-font-family) !important;
+}

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

@@ -104,22 +104,22 @@ export default class ThemeEngine extends Module {
 		// Font
 
 		this.settings.add('theme.font.size', {
-			default: 13,
+			default: 14,
 			process(ctx, val) {
 				if ( typeof val !== 'number' )
 					try {
 						val = parseFloat(val);
 					} catch(err) { val = null; }
 
-				if ( ! val || val < 1 || isNaN(val) || ! isFinite(val) || val > 25 )
+				if ( ! val || val < 6 || isNaN(val) || ! isFinite(val) || val > 25 )
-					val = 13;
+					val = 14;
 
 				return val;
 			},
 			ui: {
 				path: 'Appearance > Theme >> Fonts @{"sort": 2}',
 				title: 'Font Size',
-				description: '**Minimum:** `1`, **Maximum:** `25`, *Old Default:* `12`\n\nHow large should normal text be, in pixels. This may be affected by your browser\'s zoom and font settings.',
+				description: '**Minimum:** `6`, **Maximum:** `25`, *Old Default:* `13`\n\nHow large should normal text be, in pixels. This may be affected by your browser\'s zoom and font settings.',
 				component: 'setting-text-box',
 				type: 'number'
 			},
@@ -270,14 +270,25 @@ export default class ThemeEngine extends Module {
 		else if ( typeof size !== 'number' )
 			size = null;
 
-		if ( ! size || isNaN(size) || ! isFinite(size) || size < 1 || size === 13 ) {
+		if ( ! size || isNaN(size) || ! isFinite(size) || size < 1 || size === 14 ) {
 			this.css_tweaks.delete('font-size');
 			return;
 		}
 
 		size = size / 10;
 
-		this.css_tweaks.set('font-size', `html body {
+		// Old sizes:
+		// fs-1 = 5.4rem
+		// fs-2 = 3.6rem
+		// fs-3 = 2.4rem
+		// fs-4 = 1.8rem
+		// fs-5 = 1.4rem
+		// fs-6 = 1.3rem
+		// fs-7 = 1.2rem
+		// fs-8 = 1.2rem
+		// fs-base = 1.3rem
+
+		/*this.css_tweaks.set('font-size', `html body {
 	--font-size-1: ${(54/13) * size}rem;
 	--font-size-2: ${(36/13) * size}rem;
 	--font-size-3: ${(24/13) * size}rem;
@@ -288,6 +299,29 @@ export default class ThemeEngine extends Module {
 	--font-size-8: ${(12/13) * size}rem;
 	--font-size-base: ${size}rem;
 }
+`);*/
+
+		// New sizes:
+		// fs-1 = 6rem
+		// fs-2 = 2.4rem
+		// fs-3 = 1.8rem
+		// fs-4 = 1.4rem
+		// fs-5 = 1.2rem
+		// fs-6 = 1.4rem
+		// fs-7 = 1.2rem
+		// fs-8 = 1.2rem
+		// fs-base = 1.4rem
+
+		this.css_tweaks.set('font-size', `html body {
+	--font-size-1: ${(60/14) * size}rem;
+	--font-size-2: ${(24/14) * size}rem;
+	--font-size-3: ${(18/14) * size}rem;
+	--font-size-4: ${size}rem;
+	--font-size-5: ${(12/14) * size}rem;
+	--font-size-6: ${size}rem;
+	--font-size-7: ${(12/14) * size}rem;
+	--font-size-8: ${(12/14) * size}rem;
+	--font-size-base: ${size}rem;
 `);
 	}