From a7c0b599720cd13daeb688b6cc24fa19feaefe54 Mon Sep 17 00:00:00 2001 From: SirStendec Date: Fri, 27 Jun 2025 17:15:22 -0400 Subject: [PATCH] 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 | 2 +- src/sites/clips/theme.js | 47 ++++++++++++++++--- .../twitch-twilight/modules/chat/input.jsx | 2 +- .../twitch-twilight/modules/chat/line.js | 12 ++--- .../modules/css_tweaks/styles/chat-font.scss | 8 +++- .../twitch-twilight/modules/theme/index.js | 46 +++++++++++++++--- 6 files changed, 96 insertions(+), 21 deletions(-) diff --git a/package.json b/package.json index 83962333..cfe2455b 100755 --- a/package.json +++ b/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", diff --git a/src/sites/clips/theme.js b/src/sites/clips/theme.js index 423c87c7..bfd0d661 100644 --- a/src/sites/clips/theme.js +++ b/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 ) - val = 13; + if ( ! val || val < 6 || isNaN(val) || ! isFinite(val) || val > 25 ) + 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(); } -} \ No newline at end of file +} diff --git a/src/sites/twitch-twilight/modules/chat/input.jsx b/src/sites/twitch-twilight/modules/chat/input.jsx index d995d40b..2f7eb79b 100644 --- a/src/sites/twitch-twilight/modules/chat/input.jsx +++ b/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; diff --git a/src/sites/twitch-twilight/modules/chat/line.js b/src/sites/twitch-twilight/modules/chat/line.js index c2382f74..00cf34b4 100644 --- a/src/sites/twitch-twilight/modules/chat/line.js +++ b/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. diff --git a/src/sites/twitch-twilight/modules/css_tweaks/styles/chat-font.scss b/src/sites/twitch-twilight/modules/css_tweaks/styles/chat-font.scss index b8fccc0a..6c0d90a6 100644 --- a/src/sites/twitch-twilight/modules/css_tweaks/styles/chat-font.scss +++ b/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; -} \ No newline at end of file +} + +.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; +} diff --git a/src/sites/twitch-twilight/modules/theme/index.js b/src/sites/twitch-twilight/modules/theme/index.js index a617696c..4c8d9c72 100644 --- a/src/sites/twitch-twilight/modules/theme/index.js +++ b/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 ) - val = 13; + if ( ! val || val < 6 || isNaN(val) || ! isFinite(val) || val > 25 ) + 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; `); }