1
0
Fork 0
mirror of https://github.com/FrankerFaceZ/FrankerFaceZ.git synced 2025-06-27 21:05:53 +00:00
* Fixed: Inconsistent localized string for active profiles.
* Fixed: Hide mega-cheer recipient call-outs in chat when the relevant setting is enabled.
* Fixed: Styling of the chat settings menu modifications.
* Fixed: The FFZ menu button in the navigation bar not applying its loading state.
* Fixed: Incompatibility with BetterTTV menu options.
This commit is contained in:
SirStendec 2019-10-14 00:58:00 -04:00
parent 7257e4d2eb
commit c77d2bdd10
18 changed files with 152 additions and 75 deletions

View file

@ -567,6 +567,12 @@
"css": "minus",
"code": 59445,
"src": "fontawesome"
},
{
"uid": "d870630ff8f81e6de3958ecaeac532f2",
"css": "left-open",
"code": 59446,
"src": "fontawesome"
}
]
}

View file

@ -1,7 +1,7 @@
{
"name": "frankerfacez",
"author": "Dan Salvato LLC",
"version": "4.14.3",
"version": "4.14.4",
"description": "FrankerFaceZ is a Twitch enhancement suite.",
"license": "Apache-2.0",
"scripts": {

Binary file not shown.

View file

@ -114,6 +114,8 @@
<glyph glyph-name="minus" unicode="&#xe835;" d="M786 439v-107q0-22-16-38t-38-15h-678q-23 0-38 15t-16 38v107q0 23 16 38t38 16h678q23 0 38-16t16-38z" horiz-adv-x="785.7" />
<glyph glyph-name="left-open" unicode="&#xe836;" d="M654 682l-297-296 297-297q10-10 10-25t-10-25l-93-93q-11-10-25-10t-25 10l-414 415q-11 10-11 25t11 25l414 414q10 11 25 11t25-11l93-93q10-10 10-25t-10-25z" horiz-adv-x="714.3" />
<glyph glyph-name="link-ext" unicode="&#xf08e;" d="M786 332v-178q0-67-47-114t-114-47h-464q-67 0-114 47t-47 114v464q0 66 47 113t114 48h393q7 0 12-5t5-13v-36q0-8-5-13t-12-5h-393q-37 0-63-26t-27-63v-464q0-37 27-63t63-27h464q37 0 63 27t26 63v178q0 8 5 13t13 5h36q8 0 13-5t5-13z m214 482v-285q0-15-11-25t-25-11-25 11l-98 98-364-364q-5-6-13-6t-12 6l-64 64q-6 5-6 12t6 13l364 364-98 98q-11 11-11 25t11 25 25 11h285q15 0 25-11t11-25z" horiz-adv-x="1000" />
<glyph glyph-name="twitter" unicode="&#xf099;" d="M904 622q-37-54-90-93 0-8 0-23 0-73-21-145t-64-139-103-117-144-82-181-30q-151 0-276 81 19-2 43-2 126 0 224 77-59 1-105 36t-64 89q19-3 34-3 24 0 48 6-63 13-104 62t-41 115v2q38-21 82-23-37 25-59 64t-22 86q0 49 25 91 68-83 164-133t208-55q-5 21-5 41 0 75 53 127t127 53q79 0 132-57 61 12 115 44-21-64-80-100 52 6 104 28z" horiz-adv-x="928.6" />

Before

Width:  |  Height:  |  Size: 33 KiB

After

Width:  |  Height:  |  Size: 33 KiB

Before After
Before After

Binary file not shown.

Binary file not shown.

Binary file not shown.

View file

@ -64,7 +64,7 @@
class="tw-tooltip-wrapper ffz--profile-row__icon ffz-i-ok tw-absolute"
>
<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
{{ t('setting.profiles.active', 'This profile is active.') }}
{{ t('setting.profiles.active', 'This profile is enabled and active.') }}
</div>
</div>

View file

@ -0,0 +1,38 @@
'use strict';
// ============================================================================
// BetterTTV Compatibility
// ============================================================================
import Module from 'utilities/module';
const CHAT_EVENTS = [
'chat-input'
];
export default class BTTVCompat extends Module {
constructor(...args) {
super(...args);
this.should_enable = true;
}
onEnable() {
this.on('core:dom-update', this.handleDomUpdate, this);
}
handleDomUpdate(key) {
if ( ! window.BetterTTV?.watcher?.emitLoad )
return;
if ( ! CHAT_EVENTS.includes(key) )
return;
this.log.info('Sending chat reload event to BetterTTV.');
try {
window.BetterTTV.watcher.emitLoad('chat');
} catch(err) {
this.log.error('An error occurred with BetterTTV:', err);
}
}
}

View file

@ -671,11 +671,16 @@ export default class ChatHook extends Module {
const old_render = cls.prototype.render;
cls.prototype.render = function() {
try {
const callout = this.props?.event?.callout;
if ( callout?.trackingType === 'community_points_reward' && ! t.chat.context.get('chat.points.show-callouts') )
const callout = this.props?.event?.callout,
ctype = callout?.trackingType;
if ( ctype === 'community_points_reward' && ! t.chat.context.get('chat.points.show-callouts') )
return null;
if ( callout?.trackingType === 'prime_gift_bomb' && ! t.chat.context.get('chat.community-chest.show') )
if ( ctype === 'prime_gift_bomb' && ! t.chat.context.get('chat.community-chest.show') )
return null;
if ( ctype === 'megacheer_emote_recipient' && ! t.chat.context.get('chat.bits.show-rewards') )
return null;
} catch(err) {
@ -702,6 +707,9 @@ export default class ChatHook extends Module {
if ( ctype === 'community-points-rewards' && ! t.chat.context.get('chat.points.show-callouts') )
return null;
if ( (ctype === 'mega-recipient-rewards' || ctype === 'mega-benefactor-rewards') && ! t.chat.context.get('chat.bits.show-rewards') )
return null;
} catch(err) {
t.log.capture(err);
t.log.error(err);

View file

@ -57,7 +57,7 @@ export default class SettingsMenu extends Module {
this.ffzPauseClick = () => this.setState({ffzPauseMenu: ! this.state.ffzPauseMenu});
val.props.children.push(<div class="tw-full-width tw-relative">
<button class="tw-block tw-border-radius-medium tw-full-width tw-interactable tw-interactable--hover-enabled tw-interactable--inverted tw-interactive" onClick={this.ffzSettingsClick}>
<button class="tw-block tw-border-radius-medium tw-full-width tw-interactable tw-interactable--hover-enabled tw-interactable--alpha tw-interactive" onClick={this.ffzSettingsClick}>
<div class="tw-align-items-center tw-flex tw-pd-05 tw-relative">
<div class="tw-flex-grow-1">
{t.i18n.t('site.menu_button', 'FrankerFaceZ Control Center')}
@ -85,7 +85,7 @@ export default class SettingsMenu extends Module {
val.props.children.push(<div class="tw-full-width tw-relative">
<button
class="tw-block tw-border-radius-medium tw-full-width tw-interactable tw-interactable--hover-enabled tw-interactable--inverted tw-interactive"
class="tw-block tw-border-radius-medium tw-full-width tw-interactable tw-interactable--hover-enabled tw-interactable--alpha tw-interactive"
onClick={this.ffzPauseClick}
>
<div class="tw-align-items-center tw-flex tw-pd-05 tw-relative">
@ -110,41 +110,50 @@ export default class SettingsMenu extends Module {
if ( ! this.ffzPauseClick )
this.ffzPauseClick = () => this.setState({ffzPauseMenu: ! this.state.ffzPauseMenu});
return (<div class="tw-absolute tw-balloon tw-balloon--up tw-block">
<div class="tw-border tw-border-radius-medium tw-c-background-base tw-elevation-1">
<div class="chat-settings scrollable-area scrollable-area--suppress-scroll-x" data-simplebar>
<div class="chat-settings__content tw-c-background-base tw-c-text-base tw-pd-2">
<button
class="tw-interactive tw-link tw-link--button tw-link--hover-underline-none"
onClick={this.ffzPauseClick}
>
<span class="tw-c-text-link ffz-i-left-dir">
{t.i18n.t('chat.settings.back', 'Back')}
</span>
</button>
<div class="tw-mg-b-1 tw-mg-t-2">
<p class="tw-c-text-alt-2 tw-upcase">
{t.i18n.t('chat.settings.pause', 'Pause Chat')}
return (<div class="tw-absolute tw-balloon tw-balloon--auto tw-balloon--up tw-block" data-a-target="chat-settings-balloon">
<div class="tw-border-radius-large tw-c-background-base tw-c-text-inherit tw-elevation-2">
<div class="chat-settings__popover">
<div class="chat-settings__header tw-align-items-center tw-c-background-base tw-flex tw-pd-x-1 tw-relative">
<div class="chat-settings__back-icon-container tw-left-0 tw-mg-r-05">
<button
class="tw-align-items-center tw-align-middle tw-border-bottom-left-radius-medium tw-border-bottom-right-radius-medium tw-border-top-left-radius-medium tw-border-top-right-radius-medium tw-button-icon tw-core-button tw-core-button--border tw-inline-flex tw-interactive tw-justify-content-center tw-overflow-hidden tw-relative"
data-test-selector="chat-settings-back-button"
aria-label={t.i18n.t('chat.settings.back', 'Back')}
onClick={this.ffzPauseClick}
>
<div class="tw-align-items-center tw-flex tw-flex-grow-0">
<span class="tw-button-icon__icon">
<figure class="ffz-i-left-open" />
</span>
</div>
</button>
</div>
<div class="tw-align-center tw-align-items-center tw-flex tw-flex-grow-1 tw-justify-content-center">
<p class="tw-c-text-alt tw-font-size-5 tw-semibold">
{ t.i18n.t('chat.settings.pause', 'Pause Chat') }
</p>
</div>
<p>
{t.i18n.t('chat.settings.pause-explain', 'FrankerFaceZ overrides the behavior of Pause Chat entirely. Please use FFZ\'s Scrolling settings within the FFZ Control Center under Chat > Behavior.')}
</p>
<div class="tw-mg-t-1">
<button
class="tw-button tw-full-width"
data-page="chat.behavior"
onClick={this.ffzSettingsClick}
>
<span class="tw-button__text">
{t.i18n.t('chat.settings.open-settings', 'Open Control Center')}
</span>
</button>
{t.cant_window && <div class="tw-mg-t-05 tw-c-text-alt-2">
<span class="ffz-i-attention">
{t.i18n.t('popup.error', 'We tried opening a pop-up window and could not. Make sure to allow pop-ups from Twitch.')}
</span>
</div>}
</div>
<div class="chat-settings scrollable-area scrollable-area--suppress-scroll-x" data-simplebar>
<div class="chat-settings__content tw-border-bottom-left-radius-medium tw-border-bottom-right-radius-medium tw-c-background-base tw-c-text-base tw-pd-1">
<div class="tw-pd-x-05">
<div class="tw-border-b tw-mg-b-1 tw-pd-b-1">
<p class="tw-c-text-alt-2">
{ t.i18n.t('chat.settings.pause-explain', 'FrankerFaceZ overrides the behavior of Pause Chat entirely. Please use FFZ\'s Scrolling settings within the FFZ Control Center under Chat > Behavior.') }
</p>
</div>
<button
class="tw-block tw-border-radius-medium tw-full-width tw-interactable tw-interactable--hover-enabled tw-interactable--alpha tw-interactive"
data-page="chat.behavior"
onClick={this.ffzSettingsClick}
>
<div class="tw-align-items-center tw-flex tw-pd-05 tw-relative">
<div class="tw-flex-grow-1">
{t.i18n.t('chat.settings.open-settings', 'Open Control Center')}
</div>
</div>
</button>
</div>
</div>
</div>
</div>
@ -166,14 +175,15 @@ export default class SettingsMenu extends Module {
const old_render = cls.prototype.render;
cls.prototype.render = function() {
const out = old_render.call(this);
const out = old_render.call(this),
children = out?.props?.children?.[0]?.props?.children;
if ( out.props && Array.isArray(out.props.children) ) {
let i = out.props.children.length;
if ( Array.isArray(children) ) {
let i = children.length;
while(i--) {
const thing = out.props.children[i];
const thing = children[i];
if ( thing && thing.props && has(thing.props, 'chatPauseSetting') ) {
out.props.children.splice(i, 1);
children.splice(i, 1);
break;
}
}

View file

@ -7,6 +7,7 @@
import {DEBUG} from 'utilities/constants';
import {SiteModule} from 'utilities/module';
import {createElement, ClickOutside, setChildren} from 'utilities/dom';
import { timeout, sleep } from 'src/utilities/object';
export default class MenuButton extends SiteModule {
constructor(...args) {
@ -23,6 +24,7 @@ export default class MenuButton extends SiteModule {
this._important_update = false;
this._new_settings = 0;
this._error = null;
this._loading = false;
this.settings.add('ffz.show-new-settings', {
default: true,
@ -40,6 +42,18 @@ export default class MenuButton extends SiteModule {
);
}
get loading() {
return this._loading;
}
set loading(val) {
if ( val === this._loading )
return;
this._loading = val;
this.update();
}
get has_error() {
return this._error != null;
}
@ -183,14 +197,12 @@ export default class MenuButton extends SiteModule {
const pill = this.formatPill(),
extra_pill = this.formatExtraPill();
// TODO: Pill.
el = (<div
class="ffz-top-nav tw-align-self-center tw-flex-grow-0 tw-flex-nowrap tw-flex-shrink-0 tw-mg-x-05 tw-relative"
>
<div class="tw-inline-flex tw-relative tw-tooltip-wrapper">
{btn = (<button
class="tw-align-items-center tw-align-middle tw-border-bottom-left-radius-medium tw-border-bottom-right-radius-medium tw-border-top-left-radius-medium tw-border-top-right-radius-medium tw-button-icon tw-core-button tw-core-button--border tw-inline-flex tw-interactive tw-justify-content-center tw-overflow-hidden tw-relative"
class={`tw-align-items-center tw-align-middle tw-border-bottom-left-radius-medium tw-border-bottom-right-radius-medium tw-border-top-left-radius-medium tw-border-top-right-radius-medium tw-button-icon tw-core-button tw-core-button--border tw-inline-flex tw-interactive tw-justify-content-center tw-overflow-hidden tw-relative${this.loading ? ' loading' : ''}`}
onClick={e => this.handleClick(e, btn)} // eslint-disable-line react/jsx-no-bind
onContextMenu={e => this.renderContext(e, btn)} // eslint-disable-line react/jsx-no-bind
>
@ -363,7 +375,7 @@ export default class MenuButton extends SiteModule {
<div class="tw-inline-flex tw-relative tw-tooltip-wrapper">
<button
class="tw-align-items-center tw-align-middle tw-border-radius-medium tw-button-icon tw-button-icon--secondary tw-core-button tw-core-button--border tw-inline-flex tw-interactive tw-justify-content-center tw-overflow-hidden"
onClick={e => this.openSettings(e)} // eslint-disable-line react/jsx-no-bind
onClick={e => {this.openSettings(e, btn); destroy()}} // eslint-disable-line react/jsx-no-bind
>
<span class="tw-button-icon__icon">
<figure class="ffz-i-cog" />
@ -399,7 +411,7 @@ export default class MenuButton extends SiteModule {
}
openSettings() {
openSettings(event, btn) {
const menu = this.resolve('main_menu');
if ( ! menu )
return;
@ -408,7 +420,7 @@ export default class MenuButton extends SiteModule {
if ( menu.showing )
return;
this.emit(':clicked');
this.emit(':clicked', event, btn);
}
@ -417,18 +429,15 @@ export default class MenuButton extends SiteModule {
if ( ! menu )
return;
const cl = btn && btn.classList;
if ( cl )
cl.add('loading');
if ( page )
menu.requestPage(page);
if ( menu.showing )
return;
this.loading = true;
menu.enable(event).then(() => {
if ( cl )
cl.remove('loading');
this.loading = false;
}).catch(err => {
this.log.capture(err);
@ -439,11 +448,9 @@ export default class MenuButton extends SiteModule {
text: 'There was an error loading the FFZ Control Center. Please refresh and try again.'
};
if ( cl )
cl.remove('loading');
this.loading = false;
this.once(':clicked', this.loadMenu);
})
});
}
onDisable() {

View file

@ -81,5 +81,6 @@ export default [
"user",
"clip",
"youtube-play",
"minus"
"minus",
"left-open"
];

View file

@ -53,6 +53,7 @@
.ffz-i-user:before { content: '\e833'; } /* '' */
.ffz-i-clip:before { content: '\e834'; } /* '' */
.ffz-i-minus:before { content: '\e835'; } /* '' */
.ffz-i-left-open:before { content: '\e836'; } /* '' */
.ffz-i-link-ext:before { content: '\f08e'; } /* '' */
.ffz-i-twitter:before { content: '\f099'; } /* '' */
.ffz-i-github:before { content: '\f09b'; } /* '' */

File diff suppressed because one or more lines are too long

View file

@ -53,6 +53,7 @@
.ffz-i-user { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe833;&nbsp;'); }
.ffz-i-clip { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe834;&nbsp;'); }
.ffz-i-minus { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe835;&nbsp;'); }
.ffz-i-left-open { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe836;&nbsp;'); }
.ffz-i-link-ext { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf08e;&nbsp;'); }
.ffz-i-twitter { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf099;&nbsp;'); }
.ffz-i-github { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf09b;&nbsp;'); }

View file

@ -64,6 +64,7 @@
.ffz-i-user { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe833;&nbsp;'); }
.ffz-i-clip { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe834;&nbsp;'); }
.ffz-i-minus { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe835;&nbsp;'); }
.ffz-i-left-open { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe836;&nbsp;'); }
.ffz-i-link-ext { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf08e;&nbsp;'); }
.ffz-i-twitter { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf099;&nbsp;'); }
.ffz-i-github { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf09b;&nbsp;'); }

View file

@ -1,11 +1,11 @@
@font-face {
font-family: 'ffz-fontello';
src: url('../font/ffz-fontello.eot?15513462');
src: url('../font/ffz-fontello.eot?15513462#iefix') format('embedded-opentype'),
url('../font/ffz-fontello.woff2?15513462') format('woff2'),
url('../font/ffz-fontello.woff?15513462') format('woff'),
url('../font/ffz-fontello.ttf?15513462') format('truetype'),
url('../font/ffz-fontello.svg?15513462#ffz-fontello') format('svg');
src: url('../font/ffz-fontello.eot?60288408');
src: url('../font/ffz-fontello.eot?60288408#iefix') format('embedded-opentype'),
url('../font/ffz-fontello.woff2?60288408') format('woff2'),
url('../font/ffz-fontello.woff?60288408') format('woff'),
url('../font/ffz-fontello.ttf?60288408') format('truetype'),
url('../font/ffz-fontello.svg?60288408#ffz-fontello') format('svg');
font-weight: normal;
font-style: normal;
}
@ -15,7 +15,7 @@
@media screen and (-webkit-min-device-pixel-ratio:0) {
@font-face {
font-family: 'ffz-fontello';
src: url('../font/ffz-fontello.svg?15513462#ffz-fontello') format('svg');
src: url('../font/ffz-fontello.svg?60288408#ffz-fontello') format('svg');
}
}
*/
@ -109,6 +109,7 @@
.ffz-i-user:before { content: '\e833'; } /* '' */
.ffz-i-clip:before { content: '\e834'; } /* '' */
.ffz-i-minus:before { content: '\e835'; } /* '' */
.ffz-i-left-open:before { content: '\e836'; } /* '' */
.ffz-i-link-ext:before { content: '\f08e'; } /* '' */
.ffz-i-twitter:before { content: '\f099'; } /* '' */
.ffz-i-github:before { content: '\f09b'; } /* '' */