diff --git a/src/main.js b/src/main.js index 2b5204fe..81edc57a 100644 --- a/src/main.js +++ b/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: () => diff --git a/src/modules/chat/index.js b/src/modules/chat/index.js index 5e289218..4e704201 100644 --- a/src/modules/chat/index.js +++ b/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: { diff --git a/src/sites/twitch-clips/modules/chat/index.js b/src/sites/twitch-clips/modules/chat/index.js index ae810ab7..57e58732 100644 --- a/src/sites/twitch-clips/modules/chat/index.js +++ b/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'), diff --git a/src/sites/twitch-clips/modules/css_tweaks/index.js b/src/sites/twitch-clips/modules/css_tweaks/index.js new file mode 100644 index 00000000..7aa7a059 --- /dev/null +++ b/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(); + }) + } +} \ No newline at end of file diff --git a/src/sites/twitch-clips/modules/css_tweaks/styles.js b/src/sites/twitch-clips/modules/css_tweaks/styles.js new file mode 100644 index 00000000..dd6cb65f --- /dev/null +++ b/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$/); \ No newline at end of file diff --git a/src/sites/twitch-clips/modules/css_tweaks/styles/chat-font.scss b/src/sites/twitch-clips/modules/css_tweaks/styles/chat-font.scss new file mode 100644 index 00000000..1aef9f17 --- /dev/null +++ b/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); +} \ No newline at end of file diff --git a/src/sites/twitch-clips/modules/css_tweaks/styles/emote-alignment-baseline.scss b/src/sites/twitch-clips/modules/css_tweaks/styles/emote-alignment-baseline.scss new file mode 100644 index 00000000..49750c1b --- /dev/null +++ b/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; +} diff --git a/src/sites/twitch-clips/modules/css_tweaks/styles/emote-alignment-padded.scss b/src/sites/twitch-clips/modules/css_tweaks/styles/emote-alignment-padded.scss new file mode 100644 index 00000000..8ea67d3d --- /dev/null +++ b/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; +} diff --git a/src/sites/twitch-twilight/modules/chat/index.js b/src/sites/twitch-twilight/modules/chat/index.js index 1f85fb81..c3c9dcfe 100644 --- a/src/sites/twitch-twilight/modules/chat/index.js +++ b/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)'} - ] - } - }); }