From 2cfc613518b613cbe17df513fb67523994f4d913 Mon Sep 17 00:00:00 2001 From: SirStendec Date: Mon, 23 Nov 2020 18:12:07 -0500 Subject: [PATCH] 4.20.50 * Added: Settings for independently changing the colors of chat on Twitch. * Fixed: Incorrect color being applied to Stream Chat. * Changed: Style of in-line message reply tags. * Changed: Set more users to request link info from the API than the socket service. (75% vs old 50%) --- package.json | 2 +- src/experiments.json | 4 +- src/modules/chat/badges.jsx | 4 +- src/modules/chat/tokenizers.jsx | 2 +- .../twitch-twilight/modules/chat/index.js | 41 +++++- .../twitch-twilight/modules/chat/line.js | 6 +- .../modules/chat/rich_content.jsx | 2 +- .../twitch-twilight/modules/theme/index.js | 139 ++++++++++++++++-- src/sites/twitch-twilight/styles/chat.scss | 4 +- .../styles/color_normalizer.scss | 3 +- 10 files changed, 180 insertions(+), 27 deletions(-) diff --git a/package.json b/package.json index a7d619e0..fa744561 100755 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "frankerfacez", "author": "Dan Salvato LLC", - "version": "4.20.49", + "version": "4.20.50", "description": "FrankerFaceZ is a Twitch enhancement suite.", "license": "Apache-2.0", "scripts": { diff --git a/src/experiments.json b/src/experiments.json index 4b20e7e3..11e83ce7 100644 --- a/src/experiments.json +++ b/src/experiments.json @@ -11,8 +11,8 @@ "name": "API-Based Link Lookups", "description": "Use the new API to look up links instead of the socket cluster.", "groups": [ - {"value": true, "weight": 50}, - {"value": false, "weight": 50} + {"value": true, "weight": 75}, + {"value": false, "weight": 25} ] } } \ No newline at end of file diff --git a/src/modules/chat/badges.jsx b/src/modules/chat/badges.jsx index 2556cd99..9fe1102e 100644 --- a/src/modules/chat/badges.jsx +++ b/src/modules/chat/badges.jsx @@ -508,8 +508,8 @@ export default class Badges extends Module { } - render(msg, createElement) { // eslint-disable-line class-methods-use-this - const hidden_badges = this.parent.context.get('chat.badges.hidden') || {}, + render(msg, createElement, skip_hide = false) { // eslint-disable-line class-methods-use-this + const hidden_badges = skip_hide ? {} : (this.parent.context.get('chat.badges.hidden') || {}), badge_style = this.parent.context.get('chat.badges.style'), custom_mod = this.parent.context.get('chat.badges.custom-mod'), is_mask = badge_style > 5, diff --git a/src/modules/chat/tokenizers.jsx b/src/modules/chat/tokenizers.jsx index c5774476..4b51e8f2 100644 --- a/src/modules/chat/tokenizers.jsx +++ b/src/modules/chat/tokenizers.jsx @@ -251,7 +251,7 @@ export const Replies = { } return ( 1 || ! see_deleted) && this.isDeletable(msg.event) && msg.event.deleted ) continue; + const last = this.buffer[this.buffer.length - 1], + type = last?.type; + + if ( type === ct.Connected ) { + const non_null = this.buffer.filter(x => x && ct[x.type] && ! NULL_TYPES.includes(ct[x.type])); + if ( non_null.length > 1 ) + this.buffer.push({ + type: ct.LiveMessageSeparator, + id: 'live-message-separator' + }); + } + this.buffer.push(msg.event); changed = true; diff --git a/src/sites/twitch-twilight/modules/chat/line.js b/src/sites/twitch-twilight/modules/chat/line.js index bc0ccc87..22767905 100644 --- a/src/sites/twitch-twilight/modules/chat/line.js +++ b/src/sites/twitch-twilight/modules/chat/line.js @@ -338,7 +338,7 @@ export default class ChatLine extends Module { override_mode = t.chat.context.get('chat.filtering.display-deleted'), msg = t.chat.standardizeMessage(this.props.message), - reply_tokens = reply_mode === 2 ? ( msg.ffz_reply = msg.ffz_reply || t.chat.tokenizeReply(this.props.reply) ) : null, + reply_tokens = (reply_mode === 2 || (reply_mode === 1 && this.props.repliesAppearancePreference !== 'expanded')) ? ( msg.ffz_reply = msg.ffz_reply || t.chat.tokenizeReply(this.props.reply) ) : null, is_action = msg.messageType === types.Action, user = msg.user, @@ -520,7 +520,7 @@ other {# messages were deleted by a moderator.} let cls = `chat-line__message${show_class ? ' ffz--deleted-message' : ''}${twitch_clickable ? ' tw-relative' : ''}`, out = (tokens.length || ! msg.ffz_type) ? [ - this.props.showTimestamps && e('span', { + (this.props.showTimestamps || this.props.isHistorical) && e('span', { className: 'chat-line__timestamp' }, t.chat.formatTime(msg.timestamp)), //twitch_clickable ? @@ -864,7 +864,7 @@ other {# messages were deleted by a moderator.} e('div', { className: 'chat-line__message-container' }, [ - this.renderReplyLine(), + this.props.repliesAppearancePreference === 'expanded' ? this.renderReplyLine() : null, out ]), e('div', { diff --git a/src/sites/twitch-twilight/modules/chat/rich_content.jsx b/src/sites/twitch-twilight/modules/chat/rich_content.jsx index b50f0148..bc81efb0 100644 --- a/src/sites/twitch-twilight/modules/chat/rich_content.jsx +++ b/src/sites/twitch-twilight/modules/chat/rich_content.jsx @@ -243,7 +243,7 @@ export default class RichContent extends Module { class={`tw-border-radius-medium tw-elevation-1 ffz--chat-card tw-relative${this.state.unsafe ? ' ffz--unsafe' : ''}`} style={{'--ffz-color-accent': this.state.accent || null}} > -
+
{content}
); diff --git a/src/sites/twitch-twilight/modules/theme/index.js b/src/sites/twitch-twilight/modules/theme/index.js index 2cc17a53..38e0d0bb 100644 --- a/src/sites/twitch-twilight/modules/theme/index.js +++ b/src/sites/twitch-twilight/modules/theme/index.js @@ -58,7 +58,7 @@ export default class ThemeEngine extends Module { return val; }, ui: { - path: 'Appearance > Theme >> Fonts', + 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.', component: 'setting-text-box', @@ -73,7 +73,7 @@ export default class ThemeEngine extends Module { this.settings.add('theme.color.background', { default: '', ui: { - path: 'Appearance > Theme >> Colors @{"description": "This is a quick preview of a new system coming soon to FrankerFaceZ. Expect heavy changes here, including separate Basic and Advanced modes, and better color selection."}', + path: 'Appearance > Theme >> Colors @{"sort": 0, "description": "This is a quick preview of a new system coming soon to FrankerFaceZ. Expect heavy changes here, including separate Basic and Advanced modes, and better color selection."}', title: 'Background', description: 'Try `#0E0C13` for something close to the old dark theme, or `#0E0E0E` for a nice dark gray. Transparent colors not allowed.', component: 'setting-color-box', @@ -132,6 +132,45 @@ export default class ThemeEngine extends Module { changed: () => this.updateCSS() }); + + this.settings.add('theme.color.chat-background', { + default: '', + ui: { + path: 'Appearance > Theme >> Chat Colors @{"sort":1}', + title: 'Background', + component: 'setting-color-box', + sort: 0, + alpha: false + }, + changed: () => this.updateCSS() + }); + + this.settings.add('theme.color.chat-text', { + default: '', + ui: { + path: 'Appearance > Theme >> Chat Colors', + title: 'Text', + description: 'If not set, this will automatically be set to white or black based on the brightness of the background.', + component: 'setting-color-box', + sort: 1 + }, + changed: () => this.updateCSS() + }); + + this.settings.add('theme.color.chat-accent', { + default: '', + ui: { + path: 'Appearance > Theme >> Chat Colors', + title: 'Accent', + description: 'The accent color is used for buttons, links, etc.', + component: 'setting-color-box', + alpha: false, + sort: 2 + }, + changed: () => this.updateCSS() + }); + + /*this.settings.add('theme.dark', { requires: ['theme.is-dark'], default: false, @@ -275,6 +314,7 @@ The CSS loaded by this setting is far too heavy and can cause performance issues if ( text ) { bits.push(`--color-text-base: ${text.toCSS()};`); + bits.push(`--color-text-input: ${text.toCSS()};`); const hsla = text.toHSLA(), alpha = hsla.a; @@ -325,7 +365,6 @@ The CSS loaded by this setting is far too heavy and can cause performance issues } } - // Tooltips let tooltip_bg = Color.RGBA.fromCSS(this.settings.get('theme.color.tooltip.background')), tooltip_dark; @@ -358,13 +397,95 @@ The CSS loaded by this setting is far too heavy and can cause performance issues bits.push(`--color-text-tooltip-alt-2: ${hsla._a(alpha - 0.4).toCSS()};`); } - if ( bits.length ) { - this.css_tweaks.set('colors', `body {${bits.join('\n')}}.channel-info-content .tw-accent-region{${accent_bits.join('\n')}}`); - this.toggleNormalizer(true); - } else { - this.css_tweaks.delete('colors'); - this.toggleNormalizer(false); + + // Chat + const chat_bits = [], + chat_background = Color.RGBA.fromCSS(this.settings.get('theme.color.chat-background')); + let chat_dark = dark; + if ( chat_background ) { + chat_background.a = 1; + chat_bits.push(`--color-background-body: ${chat_background.toCSS()};`); + + const hsla = chat_background.toHSLA(), + luma = hsla.l; + chat_dark = luma < 0.5; + + chat_bits.push(`--color-background-input-focus: ${chat_background.toCSS()};`); + chat_bits.push(`--color-background-base: ${hsla._l(luma + (chat_dark ? .05 : -.05)).toCSS()};`); + chat_bits.push(`--color-background-alt: ${hsla._l(luma + (chat_dark ? .1 : -.1)).toCSS()};`); + chat_bits.push(`--color-background-alt-2: ${hsla._l(luma + (chat_dark ? .15 : -.15)).toCSS()};`); } + + let chat_text = Color.RGBA.fromCSS(this.settings.get('theme.color.chat-text')); + if ( ! chat_text && chat_background ) { + chat_text = Color.RGBA.fromCSS(chat_dark ? '#FFF' : '#000'); + } + + if ( chat_text ) { + chat_bits.push(`--color-text-base: ${chat_text.toCSS()};`); + chat_bits.push(`--color-text-input: ${chat_text.toCSS()};`); + + const hsla = chat_text.toHSLA(), + alpha = hsla.a; + + chat_bits.push(`--color-text-label: ${chat_text.toCSS()};`); + chat_bits.push(`--color-text-label-optional: ${hsla._a(alpha - 0.4).toCSS()};`); + + chat_bits.push(`--color-text-alt: ${hsla._a(alpha - 0.2).toCSS()};`); + chat_bits.push(`--color-text-alt-2: ${hsla._a(alpha - 0.4).toCSS()};`); + } + + // Accent + const chat_accent = Color.RGBA.fromCSS(this.settings.get('theme.color.chat-accent')), + chat_accent_bits = []; + //this.toggleAccentNormal(! accent); + if ( chat_accent ) { + chat_accent.a = 1; + + const hsla = chat_accent.toHSLA(), + luma = hsla.l; + + const colors = COLORS.map(x => { + if ( x === 0 ) + return chat_accent.toCSS(); + + return hsla._l(luma + x).toCSS() + }); + + for(let i=0; i < colors.length; i++) { + chat_bits.push(`--ffz-color-accent-${i+1}:${colors[i]};`); + } + + let source = chat_dark ? ACCENT_COLORS.dark : ACCENT_COLORS.light; + + for(const [key,val] of Object.entries(source.c)) { + if ( typeof val !== 'number' ) + continue; + + chat_bits.push(`--color-${key}:${colors[val-1]};`); + } + + source = chat_dark ? ACCENT_COLORS.accent_dark : ACCENT_COLORS.accent_light; + + for(const [key,val] of Object.entries(source.c)) { + if ( typeof val !== 'number' ) + continue; + + chat_accent_bits.push(`--color-${key}:${colors[val-1]} !important;`); + } + } + + if ( chat_bits.length ) + this.css_tweaks.set('chat-colors', `.chat-shell {${chat_bits.join('\n')}}.chat-shell .tw-accent-region{${chat_accent_bits.join('\n')}}`); + else + this.css_tweaks.delete('chat-colors'); + + this.toggleNormalizer(chat_bits.length || bits.length); + + if ( bits.length ) + this.css_tweaks.set('colors', `body {${bits.join('\n')}}.channel-info-content .tw-accent-region{${accent_bits.join('\n')}}`); + else + this.css_tweaks.delete('colors'); } toggleAccentNormal(enable) { diff --git a/src/sites/twitch-twilight/styles/chat.scss b/src/sites/twitch-twilight/styles/chat.scss index 88daff00..f25f4310 100644 --- a/src/sites/twitch-twilight/styles/chat.scss +++ b/src/sites/twitch-twilight/styles/chat.scss @@ -93,7 +93,9 @@ white-space: nowrap; &:before { - font-size: 0.8em; + font-size: 1.2em; + vertical-align: middle; + color: var(--color-text-base); } background-color: rgba(0,0,0,0.15); diff --git a/src/sites/twitch-twilight/styles/color_normalizer.scss b/src/sites/twitch-twilight/styles/color_normalizer.scss index 06ea941b..c8e031f7 100644 --- a/src/sites/twitch-twilight/styles/color_normalizer.scss +++ b/src/sites/twitch-twilight/styles/color_normalizer.scss @@ -2,7 +2,6 @@ body, .channel-header, .channel-root__right-column, - .chat-room, .chat-viewers__pane, .sunlight-tile, .multi-stream-player-layout, @@ -13,6 +12,8 @@ .clmgr-table__row, .stream-manager--page-view .mosaic-window-body, .room-upsell, + .chat-room, + .qa-vod-chat, .video-card { background-color: var(--color-background-base) !important; }