diff --git a/package.json b/package.json index 0e4db3c2..467bac84 100755 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "frankerfacez", "author": "Dan Salvato LLC", - "version": "4.20.65", + "version": "4.20.66", "description": "FrankerFaceZ is a Twitch enhancement suite.", "license": "Apache-2.0", "scripts": { diff --git a/src/i18n.js b/src/i18n.js index ef56d102..cf3af7ff 100644 --- a/src/i18n.js +++ b/src/i18n.js @@ -581,8 +581,14 @@ export class TranslationManager extends Module { return; } - if ( typeof ast === 'object' && ast.v ) - out[ast.v] = shallow_copy(get(ast.v, options)); + if ( typeof ast === 'object' && ast.v ) { + const val = get(ast.v, options); + // Skip React objects. + if ( val && val['$$typeof'] ) + return; + + out[ast.v] = shallow_copy(val); + } } diff --git a/src/modules/chat/badges.jsx b/src/modules/chat/badges.jsx index 8c6b0702..1c589554 100644 --- a/src/modules/chat/badges.jsx +++ b/src/modules/chat/badges.jsx @@ -7,7 +7,7 @@ import {NEW_API, SERVER, API_SERVER, IS_WEBKIT, IS_FIREFOX, WEBKIT_CSS as WEBKIT} from 'utilities/constants'; import {createElement, ManagedStyle} from 'utilities/dom'; -import {has} from 'utilities/object'; +import {has, maybe_call} from 'utilities/object'; import Module from 'utilities/module'; import { ColorAdjuster } from 'src/utilities/color'; @@ -66,10 +66,10 @@ const NO_REPEAT = 'background-repeat:no-repeat;background-position:center;', CSS_MASK_IMAGE = IS_WEBKIT ? 'webkitMaskImage' : 'maskImage', CSS_TEMPLATES = { - 0: data => `background:${data.image} ${data.color};background-size:${data.scale*1.8}rem;${data.svg ? '' : `background-image:${data.image_set};`}${NO_REPEAT}`, + 0: data => `${data.fore ? `color:${data.fore};` : ''}background:${data.image||''} ${data.color};background-size:${data.scale*1.8}rem;${data.svg ? '' : `background-image:${data.image_set};`}${NO_REPEAT}`, 1: data => `${CSS_TEMPLATES[0](data)}border-radius:${data.scale*.2}rem;`, 2: data => `${CSS_TEMPLATES[0](data)}border-radius:${data.scale*.9}rem;background-size:${data.scale*1.6}rem;`, - 3: data => `background:${data.color};border-radius:${data.scale*.9}rem;`, + 3: data => `${data.fore ? `color:${data.fore};` : ''}background:${data.color};border-radius:${data.scale*.9}rem;`, 4: data => `${CSS_TEMPLATES[3](data)}height:${data.scale}rem;min-width:${data.scale}rem;`, 5: data => `background:${data.image};background-size:${data.scale*1.8}rem;${data.svg ? `` : `background-image:${data.image_set};`}${NO_REPEAT}`, 6: data => `background:linear-gradient(${data.color},${data.color});${WEBKIT}mask-image:${data.image};${WEBKIT}mask-size:${data.scale*1.8}rem ${data.scale*1.8}rem;${data.svg ? `` : `${WEBKIT}mask-image:${data.image_set};`}` @@ -91,14 +91,15 @@ export function generateOverrideCSS(data, style) { } -export function generateBadgeCSS(badge, version, data, style, is_dark, badge_version = 2, color_fixer, scale = 1, clickable = false) { +export function generateBadgeCSS(badge, version, data, style, is_dark, badge_version = 2, color_fixer, fg_fixer, scale = 1, clickable = false) { let color = data.color || 'transparent', - base_image = data.image || `${BASE_IMAGE}${badge_version}/${badge}${data.svg ? '.svg' : `/${version}/`}`, + fore = data.fore || '#fff', + base_image = data.image || (data.addon ? null : `${BASE_IMAGE}${badge_version}/${badge}${data.svg ? '.svg' : `/${version}/`}`), trans = false, invert = false, svg, image, image_set; - if ( style > 4 ) { + if ( base_image && style > 4 ) { const td = data.trans || {}; color = td.color || color; @@ -106,7 +107,6 @@ export function generateBadgeCSS(badge, version, data, style, is_dark, badge_ver trans = true; if ( td.image !== true ) base_image = td.image; - } if ( has(td, 'invert') ) @@ -123,7 +123,7 @@ export function generateBadgeCSS(badge, version, data, style, is_dark, badge_ver if ( color === 'transparent' ) style = 0; - if ( style !== 3 && style !== 4 ) { + if ( base_image && style !== 3 && style !== 4 ) { svg = base_image.endsWith('.svg'); if ( data.urls ) image = `url("${data.urls[scale]}")`; @@ -147,10 +147,18 @@ export function generateBadgeCSS(badge, version, data, style, is_dark, badge_ver if ( color_fixer && color && color !== 'transparent' ) color = color_fixer.process(color) || color; - // TODO: Fix the click_url name once we actually support badge clicking. + if ( fg_fixer && fore && fore !== 'transparent' && color !== 'transparent' ) { + fg_fixer.base = color; + fore = fg_fixer.process(fore) || fore; + } + + if ( ! base_image && style > 3 ) + style = 1; + return `${clickable && (data.click_url || data.click_action) ? 'cursor:pointer;' : ''}${invert ? 'filter:invert(100%);' : ''}${CSS_TEMPLATES[style]({ scale: 1, color, + fore, image, image_set, svg @@ -419,7 +427,7 @@ export default class Badges extends Module { } else if ( p === 'ffz' ) { out.push(
- {show_previews &&
0 ? amount : -amount))); diff --git a/src/sites/twitch-twilight/modules/player.jsx b/src/sites/twitch-twilight/modules/player.jsx index 7de51812..002c54a9 100644 --- a/src/sites/twitch-twilight/modules/player.jsx +++ b/src/sites/twitch-twilight/modules/player.jsx @@ -258,7 +258,12 @@ export default class Player extends Module { path: 'Player > General >> Volume', title: 'Adjust volume by scrolling with the mouse wheel.', description: '*This setting will not work properly on streams with visible extensions when mouse interaction with extensions is allowed.*', - component: 'setting-check-box' + component: 'setting-select-box', + data: [ + {value: false, title: 'Disabled'}, + {value: true, title: 'Enabled'}, + {value: 2, title: 'Enabled with Right-Click'} + ] } }); @@ -713,8 +718,12 @@ export default class Player extends Module { if ( ! this._ffz_click_handler ) this._ffz_click_handler = this.ffzClickHandler.bind(this); + if ( ! this._ffz_menu_handler ) + this._ffz_menu_handler = this.ffzMenuHandler.bind(this); + on(cont, 'wheel', this._ffz_scroll_handler); on(cont, 'mousedown', this._ffz_click_handler); + on(cont, 'contextmenu', this._ffz_menu_handler); } cls.prototype.ffzRemoveListeners = function() { @@ -732,11 +741,24 @@ export default class Player extends Module { this._ffz_click_handler = null; } + if ( this._ffz_menu_handler ) { + off(cont, 'contextmenu', this._ffz_menu_handler); + this._ffz_menu_handler = null; + } + this._ffz_listeners = false; } cls.prototype.ffzClickHandler = function(event) { - if ( ! t.settings.get('player.mute-click') || ! event || event.button !== 1 ) + if ( ! event ) + return; + + if ( t.settings.get('player.volume-scroll') === 2 && event.button === 2 ) { + this.ffz_rmb = true; + this.ffz_scrolled = false; + } + + if ( ! t.settings.get('player.mute-click') || event.button !== 1 ) return; const player = this.props?.mediaPlayerInstance; @@ -750,8 +772,20 @@ export default class Player extends Module { return false; } + cls.prototype.ffzMenuHandler = function(event) { + this.ffz_rmb = false; + if ( this.ffz_scrolled ) { + event.preventDefault(); + event.stopPropagation(); + } + } + cls.prototype.ffzScrollHandler = function(event) { - if ( ! t.settings.get('player.volume-scroll') ) + const setting = t.settings.get('player.volume-scroll'); + if ( ! setting ) + return; + + if ( setting === 2 && ! this.ffz_rmb ) return; const delta = event.wheelDelta || -(event.deltaY || event.detail || 0), @@ -761,6 +795,9 @@ export default class Player extends Module { if ( ! player?.getVolume ) return; + if ( setting === 2 ) + this.ffz_scrolled = true; + const amount = t.settings.get('player.volume-scroll-steps'), old_volume = video?.volume ?? player.getVolume(), volume = Math.max(0, Math.min(1, old_volume + (delta > 0 ? amount : -amount)));