oss/FrankerFaceZ
oss/FrankerFaceZ
1
0
Fork 0
mirror of https://github.com/FrankerFaceZ/FrankerFaceZ.git synced 2025-06-27 21:05:53 +00:00
Code Wiki Activity

4.20.16

Browse source 
* Changed: Metadata now uses the global FFZ tool-tip handler when rendering tool-tips.
* Fixed: Metadata pop-ups not appearing when an element is open fullscreen.
* API Added: Callback for changing popper options before opening a tool-tip.
* API Added: Timing for module loading. WIP.
This commit is contained in:
SirStendec 2020-07-23 02:33:20 -04:00
parent 1c2bf202fc
commit 3d88836a0e
9 changed files with 172 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

39
package-lock.json generated
View file

@ -1,6 +1,6 @@
{
"name": "frankerfacez",
"version": "4.20.14",
"version": "4.20.15",
"lockfileVersion": 1,
"requires": true,
"dependencies": {
@ -1847,6 +1847,28 @@
"supports-color": "^5.3.0"
}
},
"chartjs": {
"version": "0.3.24",
"resolved": "https://registry.npmjs.org/chartjs/-/chartjs-0.3.24.tgz",
"integrity": "sha1-Ot3rWuNgaz6J40bCfVLKFYQW6T0="
},
"chartjs-plugin-waterfall": {
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/chartjs-plugin-waterfall/-/chartjs-plugin-waterfall-1.0.3.tgz",
"integrity": "sha1-wcntwyyX913U4qYwdQoKlZM3B0o=",
"requires": {
"lodash.groupby": "^4.6.0",
"lodash.merge": "^4.6.0"
}
},
"chartjs-plugin-zoom": {
"version": "0.7.7",
"resolved": "https://registry.npmjs.org/chartjs-plugin-zoom/-/chartjs-plugin-zoom-0.7.7.tgz",
"integrity": "sha512-8fOHPPiZTT2+K0w278TQWYs/DtPg06s1OpTqdXxPpdfH7QQbl6Io/WuE1FjPehDWVCxpe3tSTts+dPbxgq2Z5g==",
"requires": {
"hammerjs": "^2.0.8"
}
},
"chokidar": {
"version": "3.4.0",
"resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.4.0.tgz",
@ -4199,6 +4221,11 @@
"resolved": "https://registry.npmjs.org/graphql-tag/-/graphql-tag-2.10.3.tgz",
"integrity": "sha512-4FOv3ZKfA4WdOKJeHdz6B3F/vxBLSgmBcGeAFPf4n1F64ltJUvOOerNj0rsJxONQGdhUMynQIvd6LzB+1J5oKA=="
},
"hammerjs": {
"version": "2.0.8",
"resolved": "https://registry.npmjs.org/hammerjs/-/hammerjs-2.0.8.tgz",
"integrity": "sha1-BO93hiz/K7edMPdpIJWTAiK/YPE="
},
"handle-thing": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/handle-thing/-/handle-thing-2.0.1.tgz",
@ -5173,6 +5200,16 @@
"integrity": "sha512-JNvd8XER9GQX0v2qJgsaN/mzFCNA5BRe/j8JN9d+tWyGLSodKQHKFicdwNYzWwI3wjRnaKPsGj1XkBjx/F96DQ==",
"dev": true
},
"lodash.groupby": {
"version": "4.6.0",
"resolved": "https://registry.npmjs.org/lodash.groupby/-/lodash.groupby-4.6.0.tgz",
"integrity": "sha1-Cwih3PaDl8OXhVwyOXg4Mt90A9E="
},
"lodash.merge": {
"version": "4.6.2",
"resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
"integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ=="
},
"lodash.tail": {
"version": "4.1.1",
"resolved": "https://registry.npmjs.org/lodash.tail/-/lodash.tail-4.1.1.tgz",

5
package.json
View file

@ -1,7 +1,7 @@
{
"name": "frankerfacez",
"author": "Dan Salvato LLC",
"version": "4.20.15",
"version": "4.20.16",
"description": "FrankerFaceZ is a Twitch enhancement suite.",
"license": "Apache-2.0",
"scripts": {
@ -65,6 +65,9 @@
},
"dependencies": {
"@ffz/icu-msgparser": "^1.0.2",
"chartjs": "^0.3.24",
"chartjs-plugin-waterfall": "^1.0.3",
"chartjs-plugin-zoom": "^0.7.7",
"crypto-js": "^3.1.9-1",
"dayjs": "^1.8.29",
"displacejs": "^1.4.1",

5
src/main.js
View file

@ -16,6 +16,7 @@ import {TranslationManager} from './i18n';
import SocketClient from './socket';
import Site from 'site';
import Vue from 'utilities/vue';
//import Timing from 'utilities/timing';
class FrankerFaceZ extends Module {
constructor() {
@ -29,6 +30,10 @@ class FrankerFaceZ extends Module {
this.__state = 0;
this.__modules.core = this;
// Timing
//this.inject('timing', Timing);
this.__time('instance');
// ========================================================================
// Error Reporting and Logging
// ========================================================================

56
src/modules/metadata.jsx
View file

@ -18,6 +18,7 @@ export default class Metadata extends Module {
this.inject('settings');
this.inject('i18n');
this.inject('tooltips');
this.should_enable = true;
this.definitions = {};
@ -413,6 +414,43 @@ export default class Metadata extends Module {
}
}
onEnable() {
const md = this.tooltips.types.metadata = target => {
let el = target;
if ( el._ffz_stat )
el = el._ffz_stat;
else if ( ! el.classList.contains('ffz-stat') ) {
el = target.closest('.ffz-stat');
target._ffz_stat = el;
}
if ( ! el )
return;
const key = el.dataset.key,
def = this.definitions[key];
return maybe_call(def.tooltip, this, el._ffz_data)
};
md.onShow = (target, tip) => {
const el = target._ffz_stat || target;
el.tip = tip;
};
md.onHide = target => {
const el = target._ffz_stat || target;
el.tip = null;
el.tip_content = null;
}
md.popperConfig = (target, tip, opts) => {
opts.placement = 'bottom';
opts.modifiers.flip = {behavior: ['bottom','top']};
return opts;
}
}
get keys() {
return Object.keys(this.definitions);
@ -518,7 +556,8 @@ export default class Metadata extends Module {
tip_content={null}
>
{btn = (<button
class={`tw-align-items-center tw-align-middle tw-border-bottom-left-radius-medium tw-border-top-left-radius-medium tw-core-button tw-core-button--padded tw-core-button--text ${inherit ? 'ffz-c-text-inherit' : 'tw-c-text-base'} tw-inline-flex tw-interactive tw-justify-content-center tw-overflow-hidden tw-relative ${border ? 'tw-border-l tw-border-t tw-border-b' : 'tw-font-size-5 tw-regular'}`}
class={`tw-align-items-center tw-align-middle tw-border-bottom-left-radius-medium tw-border-top-left-radius-medium tw-core-button tw-core-button--padded tw-core-button--text ${inherit ? 'ffz-c-text-inherit' : 'tw-c-text-base'} tw-inline-flex tw-interactive tw-justify-content-center tw-overflow-hidden tw-relative ${border ? 'tw-border-l tw-border-t tw-border-b' : 'tw-font-size-5 tw-regular'}${def.tooltip ? ' ffz-tooltip ffz-tooltip--no-mouse' : ''}`}
data-tooltip-type="metadata"
>
<div class="tw-align-items-center tw-flex tw-flex-grow-0 tw-justify-center tw-pd-x-1">
{icon}
@ -526,7 +565,8 @@ export default class Metadata extends Module {
</div>
</button>)}
{popup = (<button
class={`tw-align-items-center tw-align-middle tw-border-bottom-right-radius-medium tw-border-top-right-radius-medium tw-core-button tw-core-button--text ${inherit ? 'ffz-c-text-inherit' : 'tw-c-text-base'} tw-inline-flex tw-interactive tw-justify-content-center tw-overflow-hidden tw-relative ${border ? 'tw-border' : 'tw-font-size-5 tw-regular'}`}
class={`tw-align-items-center tw-align-middle tw-border-bottom-right-radius-medium tw-border-top-right-radius-medium tw-core-button tw-core-button--text ${inherit ? 'ffz-c-text-inherit' : 'tw-c-text-base'} tw-inline-flex tw-interactive tw-justify-content-center tw-overflow-hidden tw-relative ${border ? 'tw-border' : 'tw-font-size-5 tw-regular'}${def.tooltip ? ' ffz-tooltip ffz-tooltip--no-mouse' : ''}`}
data-tooltip-type="metadata"
>
<div class="tw-align-items-center tw-flex tw-flex-grow-0 tw-justify-center">
<span>
@ -538,7 +578,8 @@ export default class Metadata extends Module {
} else
btn = popup = el = (<button
class={`ffz-stat tw-align-items-center tw-align-middle tw-border-bottom-left-radius-medium tw-border-top-left-radius-medium tw-border-bottom-right-radius-medium tw-border-top-right-radius-medium tw-core-button tw-core-button--text ${inherit ? 'ffz-c-text-inherit' : 'tw-c-text-base'} tw-inline-flex tw-interactive tw-justify-content-center tw-overflow-hidden tw-relative tw-pd-x-05 ffz-stat--fix-padding ${border ? 'tw-border tw-mg-r-1' : 'tw-font-size-5 tw-regular tw-mg-r-05 ffz-mg-l--05'}`}
class={`ffz-stat tw-align-items-center tw-align-middle tw-border-bottom-left-radius-medium tw-border-top-left-radius-medium tw-border-bottom-right-radius-medium tw-border-top-right-radius-medium tw-core-button tw-core-button--text ${inherit ? 'ffz-c-text-inherit' : 'tw-c-text-base'} tw-inline-flex tw-interactive tw-justify-content-center tw-overflow-hidden tw-relative tw-pd-x-05 ffz-stat--fix-padding ${border ? 'tw-border tw-mg-r-1' : 'tw-font-size-5 tw-regular tw-mg-r-05 ffz-mg-l--05'}${def.tooltip ? ' ffz-tooltip ffz-tooltip--no-mouse' : ''}`}
data-tooltip-type="metadata"
data-key={key}
tip_content={null}
>
@ -596,7 +637,7 @@ export default class Metadata extends Module {
el._ffz_destroy = el._ffz_outside = null;
};
const parent = document.body.querySelector('#root>div') || document.body,
const parent = document.fullscreenElement || document.body.querySelector('#root>div') || document.body,
tt = el._ffz_popup = new Tooltip(parent, el, {
logger: this.log,
i18n: this.i18n,
@ -637,7 +678,8 @@ export default class Metadata extends Module {
icon = (<span class="tw-stat__icon"><figure class={icon} /></span>);
el = (<div
class="tw-align-items-center tw-inline-flex tw-relative tw-tooltip-wrapper ffz-stat tw-stat tw-mg-r-1"
class={`tw-align-items-center tw-inline-flex tw-relative tw-tooltip-wrapper ffz-stat tw-stat tw-mg-r-1${def.tooltip ? ' ffz-tooltip ffz-tooltip--no-mouse' : ''}`}
data-tooltip-type="metadata"
data-key={key}
tip_content={null}
>
@ -668,7 +710,7 @@ export default class Metadata extends Module {
subcontainer.appendChild(el);
if ( def.tooltip ) {
/*if ( def.tooltip ) {
const parent = document.body.querySelector('#root>div') || document.body;
el.tooltip = new Tooltip(parent, el, {
logger: this.log,
@ -692,7 +734,7 @@ export default class Metadata extends Module {
}
}
});
}
}*/
} else {
stat = el.querySelector('.ffz-stat-text');

11
src/modules/tooltips.js
View file

@ -93,6 +93,7 @@ export default class TooltipProvider extends Module {
onShow: this.delegateOnShow.bind(this),
onHide: this.delegateOnHide.bind(this),
popperConfig: this.delegatePopperConfig.bind(this),
popper: {
placement: 'top',
modifiers: {
@ -131,6 +132,16 @@ export default class TooltipProvider extends Module {
this.tips.cleanup();
}
delegatePopperConfig(target, tip, pop_opts) {
const type = target.dataset.tooltipType,
handler = this.types[type];
if ( handler && handler.popperConfig )
return handler.popperConfig(target, tip, pop_opts);
return pop_opts;
}
delegateOnShow(target, tip) {
const type = target.dataset.tooltipType,
handler = this.types[type];

4
src/sites/twitch-twilight/modules/channel.js
View file

@ -163,7 +163,7 @@ export default class Channel extends Module {
}
_updateBar(el) {
if ( el._ffz_cont && ! el.contains(el._ffz_cont) ) {
if ( el._ffz_cont && ! document.contains(el._ffz_cont) ) {
el._ffz_cont.classList.remove('ffz--meta-tray');
el._ffz_cont = null;
}
@ -227,7 +227,7 @@ export default class Channel extends Module {
react = this.fine.getReactInstance(el),
props = react?.memoizedProps?.children?.props;
if ( ! cont || ! el.contains(cont) || ! props || ! props.channelID )
if ( ! cont || ! document.contains(cont) || ! props || ! props.channelID )
return;
if ( ! keys )

40
src/utilities/module.js
View file

@ -47,6 +47,7 @@ export class Module extends EventEmitter {
this.__state = this.onLoad || this.onEnable ?
State.DISABLED : State.ENABLED;
this.__time('instance');
this.emit(':registered');
}
@ -76,6 +77,20 @@ export class Module extends EventEmitter {
}
// ========================================================================
// Timing
// ========================================================================
__time(event) {
if ( this.root.timing ) {
if ( typeof event !== 'object' )
event = {event};
event.module = this.__path || 'core';
this.root.timing.addEvent(event);
}
}
// ========================================================================
// State! Glorious State
// ========================================================================
@ -115,6 +130,7 @@ export class Module extends EventEmitter {
chain.push(this);
this.__time('load-start');
this.__load_state = State.LOADING;
return this.__load_promise = (async () => {
if ( this.load_requires ) {
@ -130,17 +146,21 @@ export class Module extends EventEmitter {
await Promise.all(promises);
}
if ( this.onLoad )
if ( this.onLoad ) {
this.__time('load-self');
return this.onLoad(...args);
}
})().then(ret => {
this.__load_state = State.LOADED;
this.__load_promise = null;
this.__time('load-end');
this.emit(':loaded', this);
return ret;
}).catch(err => {
this.__load_state = State.UNLOADED;
this.__load_promise = null;
this.__time('load-end');
throw err;
});
}
@ -166,7 +186,7 @@ export class Module extends EventEmitter {
return Promise.reject(new CyclicDependencyError(`cyclic load requirements when unloading ${initial}`, chain));
chain.push(this);
this.__time('unload-start');
this.__load_state = State.UNLOADING;
return this.__load_promise = (async () => {
if ( this.__state !== State.DISABLED )
@ -185,16 +205,19 @@ export class Module extends EventEmitter {
await Promise.all(promises);
}
this.__time('unload-self');
return this.onUnload(...args);
})().then(ret => {
this.__load_state = State.UNLOADED;
this.__load_promise = null;
this.__time('unload-end');
this.emit(':unloaded', this);
return ret;
}).catch(err => {
this.__load_state = State.LOADED;
this.__load_promise = null;
this.__time('unload-end');
throw err;
});
}
@ -217,7 +240,7 @@ export class Module extends EventEmitter {
return Promise.reject(new CyclicDependencyError(`cyclic requirements when enabling ${initial}`, chain));
chain.push(this);
this.__time('enable-start');
this.__state = State.ENABLING;
return this.__state_promise = (async () => {
const promises = [],
@ -242,18 +265,22 @@ export class Module extends EventEmitter {
}
await Promise.all(promises);
if ( this.onEnable )
if ( this.onEnable ) {
this.__time('enable-self');
return this.onEnable(...args);
}
})().then(ret => {
this.__state = State.ENABLED;
this.__state_promise = null;
this.__time('enable-end');
this.emit(':enabled', this);
return ret;
}).catch(err => {
this.__state = State.DISABLED;
this.__state_promise = null;
this.__time('enable-end');
throw err;
});
}
@ -279,7 +306,7 @@ export class Module extends EventEmitter {
return Promise.reject(new CyclicDependencyError(`cyclic requirements when disabling ${initial}`, chain));
chain.push(this);
this.__time('disable-start');
this.__state = State.DISABLING;
return this.__state_promise = (async () => {
if ( this.__load_state !== State.LOADED )
@ -300,17 +327,20 @@ export class Module extends EventEmitter {
await Promise.all(promises);
}
this.__time('disable-self');
return this.onDisable(...args);
})().then(ret => {
this.__state = State.DISABLED;
this.__state_promise = null;
this.__time('disable-end');
this.emit(':disabled', this);
return ret;
}).catch(err => {
this.__state = State.ENABLED;
this.__state_promise = null;
this.__time('disable-end');
throw err;
});
}

24
src/utilities/timing.js Normal file
View file

@ -0,0 +1,24 @@
'use strict';
// ============================================================================
// Timing Tracker
// For figuring out FFZ loading
// ============================================================================
import Module from 'utilities/module';
export default class Timing extends Module {
constructor(...args) {
super(...args);
this.events = [];
}
__time() { /* no-op */ } // eslint-disable-line class-methods-use-this
addEvent(event) {
event.ts = performance.now();
this.events.push(event);
}
}

5
src/utilities/tooltip.js
View file

@ -291,7 +291,7 @@ export class Tooltip {
const use_html = maybe_call(opts.html, null, target, tip),
setter = use_html ? 'innerHTML' : 'textContent';
const pop_opts = Object.assign({
let pop_opts = Object.assign({
modifiers: {
flip: {
behavior: ['top', 'bottom', 'left', 'right']
@ -300,6 +300,9 @@ export class Tooltip {
arrowElement: arrow
}, opts.popper);
if ( opts.popperConfig )
pop_opts = opts.popperConfig(target, tip, pop_opts) ?? pop_opts;
pop_opts.onUpdate = tip._on_update = debounce(() => {
if ( ! opts.no_auto_remove && ! document.contains(tip.target) )
this.hide(tip);