mirror of
https://github.com/FrankerFaceZ/FrankerFaceZ.git
synced 2025-08-31 18:31:06 +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",
|
||||
"author": "Dan Salvato LLC",
|
||||
"version": "4.77.10",
|
||||
"version": "4.77.11",
|
||||
"description": "FrankerFaceZ is a Twitch enhancement suite.",
|
||||
"private": true,
|
||||
"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> : null}
|
||||
<div class="scrollable-area" data-simplebar>
|
||||
<div class="simplebar-scroll-content">
|
||||
<div class="simplebar-content">
|
||||
<ul>{reason_elements}</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ffz-scrollable scrollable-area simplebar-content">
|
||||
<ul>{reason_elements}</ul>
|
||||
</div>
|
||||
</div>);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -21,6 +21,8 @@ import {has} from 'utilities/object';
|
|||
|
||||
import MAIN_URL from 'site/styles/main.scss';
|
||||
|
||||
//import SimpleBar from 'simplebar';
|
||||
|
||||
|
||||
// ============================================================================
|
||||
// The Site
|
||||
|
|
@ -67,10 +69,12 @@ export default class Twilight extends BaseSite {
|
|||
onEnable() {
|
||||
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 )
|
||||
window.ffzSimplebar = sb;
|
||||
}).catch(() => {});
|
||||
}).catch(() => {});*/
|
||||
|
||||
const thing = this.fine.searchNode(null, n => n?.pendingProps?.store?.getState),
|
||||
store = this.store = thing?.pendingProps?.store;
|
||||
|
|
@ -466,6 +470,8 @@ Twilight.ROUTES = {
|
|||
'user-events': '/:userName/events',
|
||||
'user-followers': '/:userName/followers',
|
||||
'user-following': '/:userName/following',
|
||||
'user-schedule': '/:userName/schedule',
|
||||
'user-about': '/:userName/about',
|
||||
'product': '/products/:productName',
|
||||
'prime': '/prime',
|
||||
'turbo': '/turbo',
|
||||
|
|
|
|||
|
|
@ -2749,83 +2749,73 @@ export default class EmoteMenu extends Module {
|
|||
<div class={`emote-picker${whisper ? '__whisper' : ''}`}>
|
||||
<div class="tw-flex">
|
||||
<div
|
||||
class={`emote-picker__tab-content${whisper ? '-whisper' : ''} tw-full-width scrollable-area scrollable-area--suppress-scroll-x`}
|
||||
data-test-selector="scrollable-area-wrapper"
|
||||
data-simplebar
|
||||
ref={this.saveScrollRef}
|
||||
class={`emote-picker__tab-content${whisper ? '-whisper' : ''} tw-full-width ffz-emote-menu--scroll-area`}
|
||||
>
|
||||
<div ref={this.saveScrollRef} class="simplebar-scroll-content">
|
||||
<div class="simplebar-content">
|
||||
{loading && this.renderLoading()}
|
||||
{!loading && sets && sets.map((data,idx) => data && (! visibility || (! data.emoji && ! data.is_favorites)) && createElement(
|
||||
data.emoji ? t.EmojiSection : t.MenuSection,
|
||||
{
|
||||
key: data.key,
|
||||
idx,
|
||||
data,
|
||||
ffz_sub_data: this.state.ffz_sub_data,
|
||||
emote_modifiers: this.state.emote_modifiers,
|
||||
animated: this.state.animated,
|
||||
combineTabs: this.state.combineTabs,
|
||||
showHeading: this.state.showHeading,
|
||||
filtered: this.state.filtered,
|
||||
visibility_control: visibility,
|
||||
onClickToken: this.props.onClickToken,
|
||||
addSection: this.addSection,
|
||||
removeSection: this.removeSection,
|
||||
startObserving: this.startObserving,
|
||||
stopObserving: this.stopObserving
|
||||
}
|
||||
))}
|
||||
{! loading && (! sets || ! sets.length) && this.renderEmpty()}
|
||||
</div>
|
||||
</div>
|
||||
{loading && this.renderLoading()}
|
||||
{!loading && sets && sets.map((data,idx) => data && (! visibility || (! data.emoji && ! data.is_favorites)) && createElement(
|
||||
data.emoji ? t.EmojiSection : t.MenuSection,
|
||||
{
|
||||
key: data.key,
|
||||
idx,
|
||||
data,
|
||||
ffz_sub_data: this.state.ffz_sub_data,
|
||||
emote_modifiers: this.state.emote_modifiers,
|
||||
animated: this.state.animated,
|
||||
combineTabs: this.state.combineTabs,
|
||||
showHeading: this.state.showHeading,
|
||||
filtered: this.state.filtered,
|
||||
visibility_control: visibility,
|
||||
onClickToken: this.props.onClickToken,
|
||||
addSection: this.addSection,
|
||||
removeSection: this.removeSection,
|
||||
startObserving: this.startObserving,
|
||||
stopObserving: this.stopObserving
|
||||
}
|
||||
))}
|
||||
{! loading && (! sets || ! sets.length) && this.renderEmpty()}
|
||||
</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`}>
|
||||
<div
|
||||
class={`emote-picker__nav-content-overflow${whisper ? '-whisper' : ''} scrollable-area scrollable-area--suppress-scroll-x`}
|
||||
data-test-selector="scrollable-area-wrapper"
|
||||
data-simplebar
|
||||
ref={this.saveNavRef}
|
||||
class={`emote-picker__nav-content-overflow${whisper ? '-whisper' : ''} ffz-emote-menu--scroll-area tw-pd-x-05`}
|
||||
>
|
||||
<div ref={this.saveNavRef} class="simplebar-scroll-content">
|
||||
<div class="simplebar-content">
|
||||
{!loading && sets && sets.map(data => {
|
||||
if ( ! data || (visibility && (data.is_favorites || data.emoji)) )
|
||||
return null;
|
||||
{!loading && sets && sets.map(data => {
|
||||
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
|
||||
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`}
|
||||
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-tooltip-side="left"
|
||||
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' : ''}`}>
|
||||
{data.image ? <figure class="ffz-avatar ffz-avatar--size-20">
|
||||
<img
|
||||
class="tw-block tw-border-radius-rounded tw-img tw-image-avatar"
|
||||
src={data.image}
|
||||
srcSet={data.image_set}
|
||||
/>
|
||||
</figure> : <figure class={`ffz-emote-picker--nav-icon ffz-i-${data.icon || 'zreknarf'}`} />}
|
||||
</div>
|
||||
</button>);
|
||||
})}
|
||||
{no_tabs && <div class="tw-mg-y-1 tw-mg-x-05 tw-border-t" />}
|
||||
{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"
|
||||
data-title={t.i18n.t('emote-menu.settings', 'Open Settings')}
|
||||
data-tooltip-side="left"
|
||||
onClick={this.clickSettings}
|
||||
>
|
||||
<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" />
|
||||
</div>
|
||||
</button>)}
|
||||
return (<button
|
||||
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`}
|
||||
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-tooltip-side="left"
|
||||
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' : ''}`}>
|
||||
{data.image ? <figure class="ffz-avatar ffz-avatar--size-20">
|
||||
<img
|
||||
class="tw-block tw-border-radius-rounded tw-img tw-image-avatar"
|
||||
src={data.image}
|
||||
srcSet={data.image_set}
|
||||
/>
|
||||
</figure> : <figure class={`ffz-emote-picker--nav-icon ffz-i-${data.icon || 'zreknarf'}`} />}
|
||||
</div>
|
||||
</button>);
|
||||
})}
|
||||
{no_tabs && <div class="tw-mg-y-1 tw-mg-x-05 tw-border-t" />}
|
||||
{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"
|
||||
data-title={t.i18n.t('emote-menu.settings', 'Open Settings')}
|
||||
data-tooltip-side="left"
|
||||
onClick={this.clickSettings}
|
||||
>
|
||||
<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" />
|
||||
</div>
|
||||
</div>
|
||||
</button>)}
|
||||
</div>
|
||||
</div>)}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -562,10 +562,11 @@ export default class Scroller extends Module {
|
|||
cls.prototype.ffz_updateActing = function() {
|
||||
this._ffz_key_frame_acting = null;
|
||||
|
||||
if ( ! this.scrollRef?.root )
|
||||
const root = t.fine.getChildNode(this);
|
||||
if ( ! root )
|
||||
return;
|
||||
|
||||
this.scrollRef.root.dataset.acting = this.ffz_acting;
|
||||
root.dataset.acting = this.ffz_acting;
|
||||
}
|
||||
|
||||
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 )
|
||||
return;
|
||||
|
||||
if ( ! this.scrollRef?.root )
|
||||
const root = t.fine.getChildNode(this);
|
||||
if ( ! root )
|
||||
return;
|
||||
|
||||
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 ) {
|
||||
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
|
||||
ref="scroller"
|
||||
:class="classes"
|
||||
:data-simplebar-auto-hide="autoHide"
|
||||
:data-simplebar-scrollbar-min-size="scrollbarMinSize"
|
||||
data-simplebar
|
||||
class="scrollable-area"
|
||||
@scroll="onScroll"
|
||||
class="ffz-scrollable scrollable-area simplebar-content"
|
||||
>
|
||||
<div class="simplebar-scroll-content">
|
||||
<div class="simplebar-content">
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
<slot />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -29,27 +21,7 @@ export default {
|
|||
type: Number,
|
||||
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) {
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.ffz-scrollable {
|
||||
scrollbar-width: thin;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue