mirror of
https://github.com/FrankerFaceZ/FrankerFaceZ.git
synced 2025-09-01 02:40:56 +00:00
4.77.11
* Fixed: Scrolling issues after Twitch removed the simplebar library. (Fixes #1718) * Fixed: Chat action hotkeys not working correctly.
This commit is contained in:
SirStendec
parent
febd7da7c6
commit
5ce9e49496
8 changed files with 90 additions and 114 deletions
|
|
@ -1,7 +1,7 @@
|
||||||
{
|
{
|
||||||
"name": "frankerfacez",
|
"name": "frankerfacez",
|
||||||
"author": "Dan Salvato LLC",
|
"author": "Dan Salvato LLC",
|
||||||
"version": "4.77.10",
|
"version": "4.77.11",
|
||||||
"description": "FrankerFaceZ is a Twitch enhancement suite.",
|
"description": "FrankerFaceZ is a Twitch enhancement suite.",
|
||||||
"private": true,
|
"private": true,
|
||||||
"license": "Apache-2.0",
|
"license": "Apache-2.0",
|
||||||
|
|
|
||||||
|
|
@ -553,12 +553,8 @@ export default class Actions extends Module {
|
||||||
{reason_text ? <div class="tw-pd-05 tw-border-b">
|
{reason_text ? <div class="tw-pd-05 tw-border-b">
|
||||||
{reason_text}
|
{reason_text}
|
||||||
</div> : null}
|
</div> : null}
|
||||||
<div class="scrollable-area" data-simplebar>
|
<div class="ffz-scrollable scrollable-area simplebar-content">
|
||||||
<div class="simplebar-scroll-content">
|
<ul>{reason_elements}</ul>
|
||||||
<div class="simplebar-content">
|
|
||||||
<ul>{reason_elements}</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>);
|
</div>);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -21,6 +21,8 @@ import {has} from 'utilities/object';
|
||||||
|
|
||||||
import MAIN_URL from 'site/styles/main.scss';
|
import MAIN_URL from 'site/styles/main.scss';
|
||||||
|
|
||||||
|
//import SimpleBar from 'simplebar';
|
||||||
|
|
||||||
|
|
||||||
// ============================================================================
|
// ============================================================================
|
||||||
// The Site
|
// The Site
|
||||||
|
|
@ -67,10 +69,12 @@ export default class Twilight extends BaseSite {
|
||||||
onEnable() {
|
onEnable() {
|
||||||
this.settings = this.resolve('settings');
|
this.settings = this.resolve('settings');
|
||||||
|
|
||||||
this.web_munch.findModule('simplebar').then(sb => {
|
//window.ffzSimplebar = window.ffzSimplebar || SimpleBar;
|
||||||
|
|
||||||
|
/*this.web_munch.findModule('simplebar').then(sb => {
|
||||||
if (! window.ffzSimplebar && sb )
|
if (! window.ffzSimplebar && sb )
|
||||||
window.ffzSimplebar = sb;
|
window.ffzSimplebar = sb;
|
||||||
}).catch(() => {});
|
}).catch(() => {});*/
|
||||||
|
|
||||||
const thing = this.fine.searchNode(null, n => n?.pendingProps?.store?.getState),
|
const thing = this.fine.searchNode(null, n => n?.pendingProps?.store?.getState),
|
||||||
store = this.store = thing?.pendingProps?.store;
|
store = this.store = thing?.pendingProps?.store;
|
||||||
|
|
@ -466,6 +470,8 @@ Twilight.ROUTES = {
|
||||||
'user-events': '/:userName/events',
|
'user-events': '/:userName/events',
|
||||||
'user-followers': '/:userName/followers',
|
'user-followers': '/:userName/followers',
|
||||||
'user-following': '/:userName/following',
|
'user-following': '/:userName/following',
|
||||||
|
'user-schedule': '/:userName/schedule',
|
||||||
|
'user-about': '/:userName/about',
|
||||||
'product': '/products/:productName',
|
'product': '/products/:productName',
|
||||||
'prime': '/prime',
|
'prime': '/prime',
|
||||||
'turbo': '/turbo',
|
'turbo': '/turbo',
|
||||||
|
|
|
||||||
|
|
@ -2749,83 +2749,73 @@ export default class EmoteMenu extends Module {
|
||||||
<div class={`emote-picker${whisper ? '__whisper' : ''}`}>
|
<div class={`emote-picker${whisper ? '__whisper' : ''}`}>
|
||||||
<div class="tw-flex">
|
<div class="tw-flex">
|
||||||
<div
|
<div
|
||||||
class={`emote-picker__tab-content${whisper ? '-whisper' : ''} tw-full-width scrollable-area scrollable-area--suppress-scroll-x`}
|
ref={this.saveScrollRef}
|
||||||
data-test-selector="scrollable-area-wrapper"
|
class={`emote-picker__tab-content${whisper ? '-whisper' : ''} tw-full-width ffz-emote-menu--scroll-area`}
|
||||||
data-simplebar
|
|
||||||
>
|
>
|
||||||
<div ref={this.saveScrollRef} class="simplebar-scroll-content">
|
{loading && this.renderLoading()}
|
||||||
<div class="simplebar-content">
|
{!loading && sets && sets.map((data,idx) => data && (! visibility || (! data.emoji && ! data.is_favorites)) && createElement(
|
||||||
{loading && this.renderLoading()}
|
data.emoji ? t.EmojiSection : t.MenuSection,
|
||||||
{!loading && sets && sets.map((data,idx) => data && (! visibility || (! data.emoji && ! data.is_favorites)) && createElement(
|
{
|
||||||
data.emoji ? t.EmojiSection : t.MenuSection,
|
key: data.key,
|
||||||
{
|
idx,
|
||||||
key: data.key,
|
data,
|
||||||
idx,
|
ffz_sub_data: this.state.ffz_sub_data,
|
||||||
data,
|
emote_modifiers: this.state.emote_modifiers,
|
||||||
ffz_sub_data: this.state.ffz_sub_data,
|
animated: this.state.animated,
|
||||||
emote_modifiers: this.state.emote_modifiers,
|
combineTabs: this.state.combineTabs,
|
||||||
animated: this.state.animated,
|
showHeading: this.state.showHeading,
|
||||||
combineTabs: this.state.combineTabs,
|
filtered: this.state.filtered,
|
||||||
showHeading: this.state.showHeading,
|
visibility_control: visibility,
|
||||||
filtered: this.state.filtered,
|
onClickToken: this.props.onClickToken,
|
||||||
visibility_control: visibility,
|
addSection: this.addSection,
|
||||||
onClickToken: this.props.onClickToken,
|
removeSection: this.removeSection,
|
||||||
addSection: this.addSection,
|
startObserving: this.startObserving,
|
||||||
removeSection: this.removeSection,
|
stopObserving: this.stopObserving
|
||||||
startObserving: this.startObserving,
|
}
|
||||||
stopObserving: this.stopObserving
|
))}
|
||||||
}
|
{! loading && (! sets || ! sets.length) && this.renderEmpty()}
|
||||||
))}
|
|
||||||
{! loading && (! sets || ! sets.length) && this.renderEmpty()}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
{(! loading && this.state.quickNav && ! is_favs) && (<div class={`emote-picker__nav_content${whisper ? '-whisper' : ''} tw-block tw-border-radius-none tw-c-background-alt-2`}>
|
{(! loading && this.state.quickNav && ! is_favs) && (<div class={`emote-picker__nav_content${whisper ? '-whisper' : ''} tw-block tw-border-radius-none tw-c-background-alt-2`}>
|
||||||
<div
|
<div
|
||||||
class={`emote-picker__nav-content-overflow${whisper ? '-whisper' : ''} scrollable-area scrollable-area--suppress-scroll-x`}
|
ref={this.saveNavRef}
|
||||||
data-test-selector="scrollable-area-wrapper"
|
class={`emote-picker__nav-content-overflow${whisper ? '-whisper' : ''} ffz-emote-menu--scroll-area tw-pd-x-05`}
|
||||||
data-simplebar
|
|
||||||
>
|
>
|
||||||
<div ref={this.saveNavRef} class="simplebar-scroll-content">
|
{!loading && sets && sets.map(data => {
|
||||||
<div class="simplebar-content">
|
if ( ! data || (visibility && (data.is_favorites || data.emoji)) )
|
||||||
{!loading && sets && sets.map(data => {
|
return null;
|
||||||
if ( ! data || (visibility && (data.is_favorites || data.emoji)) )
|
|
||||||
return null;
|
|
||||||
|
|
||||||
const active = this.state.active_nav === data.key;
|
const active = this.state.active_nav === data.key;
|
||||||
|
|
||||||
return (<button
|
return (<button
|
||||||
key={data.key}
|
key={data.key}
|
||||||
class={`${active ? 'emote-picker-tab-item-wrapper__active ' : ''}${padding ? 'tw-mg-y-05' : 'tw-mg-y-1'} tw-c-text-inherit tw-interactable ffz-interactive ffz-interactable--hover-enabled ffz-interactable--default tw-block tw-full-width ffz-tooltip ffz-tooltip--no-mouse`}
|
class={`${active ? 'emote-picker-tab-item-wrapper__active ' : ''}${padding ? 'tw-mg-y-05' : 'tw-mg-y-1'} tw-c-text-inherit tw-interactable ffz-interactive ffz-interactable--hover-enabled ffz-interactable--default tw-block tw-full-width ffz-tooltip ffz-tooltip--no-mouse`}
|
||||||
data-key={data.key}
|
data-key={data.key}
|
||||||
data-title={`${data.i18n ? t.i18n.t(data.i18n, data.title) : data.title}\n${data.source_i18n ? t.i18n.t(data.source_i18n, data.source) : data.source}${data.channel_source ? ` (${data.channel_source})` : ''}`}
|
data-title={`${data.i18n ? t.i18n.t(data.i18n, data.title) : data.title}\n${data.source_i18n ? t.i18n.t(data.source_i18n, data.source) : data.source}${data.channel_source ? ` (${data.channel_source})` : ''}`}
|
||||||
data-tooltip-side="left"
|
data-tooltip-side="left"
|
||||||
onClick={this.clickSideNav}
|
onClick={this.clickSideNav}
|
||||||
>
|
>
|
||||||
<div class={`tw-align-items-center tw-flex tw-justify-content-center ${padding ? '' : 'tw-pd-x-05 '}tw-pd-y-05${active ? ' emote-picker-tab-item-avatar__active tw-c-text-link' : ''}`}>
|
<div class={`tw-align-items-center tw-flex tw-justify-content-center ${padding ? '' : 'tw-pd-x-05 '}tw-pd-y-05${active ? ' emote-picker-tab-item-avatar__active tw-c-text-link' : ''}`}>
|
||||||
{data.image ? <figure class="ffz-avatar ffz-avatar--size-20">
|
{data.image ? <figure class="ffz-avatar ffz-avatar--size-20">
|
||||||
<img
|
<img
|
||||||
class="tw-block tw-border-radius-rounded tw-img tw-image-avatar"
|
class="tw-block tw-border-radius-rounded tw-img tw-image-avatar"
|
||||||
src={data.image}
|
src={data.image}
|
||||||
srcSet={data.image_set}
|
srcSet={data.image_set}
|
||||||
/>
|
/>
|
||||||
</figure> : <figure class={`ffz-emote-picker--nav-icon ffz-i-${data.icon || 'zreknarf'}`} />}
|
</figure> : <figure class={`ffz-emote-picker--nav-icon ffz-i-${data.icon || 'zreknarf'}`} />}
|
||||||
</div>
|
</div>
|
||||||
</button>);
|
</button>);
|
||||||
})}
|
})}
|
||||||
{no_tabs && <div class="tw-mg-y-1 tw-mg-x-05 tw-border-t" />}
|
{no_tabs && <div class="tw-mg-y-1 tw-mg-x-05 tw-border-t" />}
|
||||||
{no_tabs && (<button
|
{no_tabs && (<button
|
||||||
class="tw-mg-y-1 tw-c-text-inherit tw-interactable ffz-interactive ffz-interactable--hover-enabled ffz-interactable--default tw-block tw-full-width ffz-tooltip ffz-tooltip--no-mouse"
|
class="tw-mg-y-1 tw-c-text-inherit tw-interactable ffz-interactive ffz-interactable--hover-enabled ffz-interactable--default tw-block tw-full-width ffz-tooltip ffz-tooltip--no-mouse"
|
||||||
data-title={t.i18n.t('emote-menu.settings', 'Open Settings')}
|
data-title={t.i18n.t('emote-menu.settings', 'Open Settings')}
|
||||||
data-tooltip-side="left"
|
data-tooltip-side="left"
|
||||||
onClick={this.clickSettings}
|
onClick={this.clickSettings}
|
||||||
>
|
>
|
||||||
<div class={`tw-align-items-center tw-flex tw-justify-content-center ${padding ? '' : 'tw-pd-x-05 '}tw-pd-y-05`}>
|
<div class={`tw-align-items-center tw-flex tw-justify-content-center ${padding ? '' : 'tw-pd-x-05 '}tw-pd-y-05`}>
|
||||||
<figure class="ffz-emote-picker--nav-icon ffz-i-cog" />
|
<figure class="ffz-emote-picker--nav-icon ffz-i-cog" />
|
||||||
</div>
|
|
||||||
</button>)}
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</button>)}
|
||||||
</div>
|
</div>
|
||||||
</div>)}
|
</div>)}
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -562,10 +562,11 @@ export default class Scroller extends Module {
|
||||||
cls.prototype.ffz_updateActing = function() {
|
cls.prototype.ffz_updateActing = function() {
|
||||||
this._ffz_key_frame_acting = null;
|
this._ffz_key_frame_acting = null;
|
||||||
|
|
||||||
if ( ! this.scrollRef?.root )
|
const root = t.fine.getChildNode(this);
|
||||||
|
if ( ! root )
|
||||||
return;
|
return;
|
||||||
|
|
||||||
this.scrollRef.root.dataset.acting = this.ffz_acting;
|
root.dataset.acting = this.ffz_acting;
|
||||||
}
|
}
|
||||||
|
|
||||||
cls.prototype.ffzUpdateKeyTags = function() {
|
cls.prototype.ffzUpdateKeyTags = function() {
|
||||||
|
|
@ -579,13 +580,14 @@ export default class Scroller extends Module {
|
||||||
if ( ! t.use_keys && this.ffz_use_keys === t.use_keys )
|
if ( ! t.use_keys && this.ffz_use_keys === t.use_keys )
|
||||||
return;
|
return;
|
||||||
|
|
||||||
if ( ! this.scrollRef?.root )
|
const root = t.fine.getChildNode(this);
|
||||||
|
if ( ! root )
|
||||||
return;
|
return;
|
||||||
|
|
||||||
this.ffz_use_keys = t.use_keys;
|
this.ffz_use_keys = t.use_keys;
|
||||||
this.scrollRef.root.classList.toggle('ffz--keys', t.use_keys);
|
root.classList.toggle('ffz--keys', t.use_keys);
|
||||||
|
|
||||||
const ds = this.scrollRef.root.dataset;
|
const ds = root.dataset;
|
||||||
|
|
||||||
if ( ! t.use_keys ) {
|
if ( ! t.use_keys ) {
|
||||||
delete ds.alt;
|
delete ds.alt;
|
||||||
|
|
|
||||||
|
|
@ -538,3 +538,9 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.ffz-emote-menu--scroll-area {
|
||||||
|
overflow-y: auto;
|
||||||
|
overflow-x: hidden;
|
||||||
|
scrollbar-width: thin;;
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -2,17 +2,9 @@
|
||||||
<div
|
<div
|
||||||
ref="scroller"
|
ref="scroller"
|
||||||
:class="classes"
|
:class="classes"
|
||||||
:data-simplebar-auto-hide="autoHide"
|
class="ffz-scrollable scrollable-area simplebar-content"
|
||||||
:data-simplebar-scrollbar-min-size="scrollbarMinSize"
|
|
||||||
data-simplebar
|
|
||||||
class="scrollable-area"
|
|
||||||
@scroll="onScroll"
|
|
||||||
>
|
>
|
||||||
<div class="simplebar-scroll-content">
|
<slot />
|
||||||
<div class="simplebar-content">
|
|
||||||
<slot />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
@ -29,27 +21,7 @@ export default {
|
||||||
type: Number,
|
type: Number,
|
||||||
default: 10
|
default: 10
|
||||||
}
|
}
|
||||||
},
|
|
||||||
|
|
||||||
mounted() {
|
|
||||||
const scroller = this.$refs.scroller;
|
|
||||||
if (!scroller || ! window.ffzSimplebar || scroller.SimpleBar)
|
|
||||||
return;
|
|
||||||
|
|
||||||
new ffzSimplebar(scroller, ffzSimplebar.getElOptions(scroller));
|
|
||||||
},
|
|
||||||
|
|
||||||
methods: {
|
|
||||||
onScroll() {
|
|
||||||
// We do this to avoid the scroll position getting screwed up on
|
|
||||||
// an element that should never scroll. Thanks, web browsers.
|
|
||||||
const scroller = this.$refs.scroller;
|
|
||||||
if ( ! scroller || scroller.scrollTop == 0 )
|
|
||||||
return;
|
|
||||||
|
|
||||||
scroller.scrollTop = 0;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
|
|
@ -180,3 +180,7 @@
|
||||||
.ffz-aspect--align-bottom > :not(.ffz-aspect__spacer) {
|
.ffz-aspect--align-bottom > :not(.ffz-aspect__spacer) {
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.ffz-scrollable {
|
||||||
|
scrollbar-width: thin;
|
||||||
|
}
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue