1
0
Fork 0
mirror of https://github.com/FrankerFaceZ/FrankerFaceZ.git synced 2025-08-03 00:18:31 +00:00
* Added: Support for the new Mod View.
* Fixed: Changes to chat room state not updating room actions correctly.
* Fixed: Chat room state not being detected correctly when the client loads.
This commit is contained in:
SirStendec 2020-03-31 18:14:27 -04:00
parent 0c1e9c5204
commit 99eee7396d
7 changed files with 78 additions and 25 deletions

View file

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

View file

@ -210,7 +210,8 @@ Twilight.CHAT_ROUTES = [
'embed-chat',
'squad',
'command-center',
'dash-stream-manager'
'dash-stream-manager',
'mod-view'
];
@ -262,7 +263,7 @@ Twilight.DASH_ROUTES = {
'dash-settings-moderation': '/u/:userName/settings/moderation',
'dash-settings-channel': '/u/:userName/settings/channel',
'dash-settings-revenue': '/u/:userName/settings/revenue',
'dash-extensions': '/u/:userName/extensions',
'dash-extensions': '/u/:userName/extensions',
'dash-streaming-tools': '/u/:userName/broadcast',
};
@ -300,10 +301,11 @@ Twilight.ROUTES = {
'user': '/:userName',
'squad': '/:userName/squad',
'command-center': '/:userName/commandcenter',
'embed-chat': '/embed/:userName/chat'
'embed-chat': '/embed/:userName/chat',
'mod-view': '/moderator/:userName'
};
Twilight.DIALOG_EXCLUSIVE = '.sunlight-root,.twilight-main,.twilight-minimal-root>div,#root>div>.tw-full-height,.clips-root';
Twilight.DIALOG_MAXIMIZED = '.sunlight-page,.twilight-main,.twilight-minimal-root,#root .dashboard-side-nav+.tw-full-height,.clips-root>.tw-full-height .scrollable-area';
Twilight.DIALOG_SELECTOR = '.sunlight-root,#root>div,.twilight-minimal-root>.tw-full-height,.clips-root>.tw-full-height .scrollable-area';
Twilight.DIALOG_EXCLUSIVE = '.moderation-root,.sunlight-root,.twilight-main,.twilight-minimal-root>div,#root>div>.tw-full-height,.clips-root';
Twilight.DIALOG_MAXIMIZED = '.moderation-view-page > div[data-highlight-selector="main-grid"],.sunlight-page,.twilight-main,.twilight-minimal-root,#root .dashboard-side-nav+.tw-full-height,.clips-root>.tw-full-height .scrollable-area';
Twilight.DIALOG_SELECTOR = '.moderation-root,.sunlight-root,#root>div,.twilight-minimal-root>.tw-full-height,.clips-root>.tw-full-height .scrollable-area';

View file

@ -6,7 +6,7 @@
import {ColorAdjuster} from 'utilities/color';
import {setChildren} from 'utilities/dom';
import {get, has, make_enum, split_chars, shallow_object_equals, set_equals} from 'utilities/object';
import {get, has, make_enum, split_chars, shallow_object_equals, set_equals, deep_equals} from 'utilities/object';
import {WEBKIT_CSS as WEBKIT} from 'utilities/constants';
import {FFZEvent} from 'utilities/events';
@ -892,6 +892,12 @@ export default class ChatHook extends Module {
inst._ffzInstall();
const channel = inst.joinedChannel,
state = inst.client?.session?.channelstate?.[`#${channel}`]?.roomState;
if ( state )
this.updateChatState(state);
inst.connectHandlers();
inst.props.setChatConnectionAPI({
@ -914,20 +920,19 @@ export default class ChatHook extends Module {
if ( handler )
handler.addMessageHandler(inst.handleMessage);
if ( Array.isArray(inst.buffer) ) {
// We grab this from the chat client now.
/*if ( Array.isArray(inst.buffer) ) {
let i = inst.buffer.length;
const ct = this.chat_types || CHAT_TYPES;
while(i--) {
const msg = inst.buffer[i];
if ( msg && msg.type === ct.RoomState && msg.state ) {
this.chat.context.updateContext({
chat_state: msg.state
});
this.updateChatState(msg.state);
break;
}
}
}
}*/
inst.props.setMessageBufferAPI({
addUpdateHandler: inst.addUpdateHandler,
@ -1105,6 +1110,19 @@ export default class ChatHook extends Module {
}
updateChatState(state) {
const old_state = this.chat.context.get('context.chat_state') || {};
if ( deep_equals(state, old_state) )
return;
this.chat.context.updateContext({
chat_state: state
});
this.input.updateInput();
}
updatePinnedCallouts() {
for(const inst of this.PinnedCallout.instances)
this.onPinnedCallout(inst);
@ -1708,9 +1726,7 @@ export default class ChatHook extends Module {
current = t.chat.context.get('context.channel');
if ( channel && (channel === current || channel === `#${current}`) )
t.chat.context.updateContext({
chat_state: e.state
});
t.updateChatState(e.state);
} catch(err) {
t.log.capture(err, {extra: e});

View file

@ -226,6 +226,15 @@ export default class Input extends Module {
this.on('site.css_tweaks:update-chat-css', this.resizeInput, this);
}
updateInput() {
for(const inst of this.ChatInput.instances) {
if ( inst ) {
inst.forceUpdate();
this.emit('site:dom-update', 'chat-input', inst);
}
}
}
resizeInput() {
if ( this._resize_waiter )
cancelAnimationFrame(this._resize_waiter);

View file

@ -49,7 +49,7 @@ export default class ChatLine extends Module {
this.WhisperLine = this.fine.define(
'whisper-line',
n => n.props && n.props.message && n.props.reportOutgoingWhisperRendered
n => n.props && n.props.message && has(n.props, 'reportOutgoingWhisperRendered')
)
}

View file

@ -38,6 +38,12 @@ export default class MenuButton extends SiteModule {
changed: () => this.update()
});
this.ModBar = this.fine.define(
'mod-view-bar',
n => n.actions && n.updateRoot && n.childContext,
['mod-view']
);
this.SunlightDash = this.fine.define(
'sunlight-dash',
n => n.getIsChannelEditor && n.getIsChannelModerator && n.getIsAdsEnabled && n.getIsSquadStreamsEnabled,
@ -188,6 +194,9 @@ export default class MenuButton extends SiteModule {
for(const inst of this.SunlightDash.instances)
this.updateButton(inst);
for(const inst of this.ModBar.instances)
this.updateButton(inst);
}
@ -208,6 +217,10 @@ export default class MenuButton extends SiteModule {
this.SunlightDash.on('mount', this.updateButton, this);
this.SunlightDash.on('update', this.updateButton, this);
this.ModBar.ready(() => this.update());
this.ModBar.on('mount', this.updateButton, this);
this.ModBar.on('update', this.updateButton, this);
this.on(':clicked', () => this.important_update = false);
this.once(':clicked', this.loadMenu);
@ -222,6 +235,7 @@ export default class MenuButton extends SiteModule {
const root = this.fine.getChildNode(inst);
let is_squad = false,
is_sunlight = false,
is_mod = false,
container = root && root.querySelector('.top-nav__menu');
if ( ! container ) {
@ -246,10 +260,16 @@ export default class MenuButton extends SiteModule {
is_sunlight = true;
}
if ( ! container && inst.childContext ) {
container = root && root.querySelector('.modview-dock > div:last-child');
if ( container )
is_mod = true;
}
if ( ! container )
return;
if ( ! is_squad ) {
if ( ! is_squad && ! is_mod ) {
let user_stuff = null;
try {
user_stuff = container.querySelector(':scope > .tw-justify-content-end:last-child');
@ -270,7 +290,7 @@ export default class MenuButton extends SiteModule {
extra_pill = this.formatExtraPill();
el = (<div
class={`ffz-top-nav tw-align-self-center tw-flex-grow-0 tw-flex-nowrap tw-flex-shrink-0 tw-relative ${is_sunlight ? 'tw-mg-l-05 tw-mg-r-2' : 'tw-mg-x-05'}`}
class={`ffz-top-nav ${is_mod ? 'ffz-mod-view-button tw-relative tw-mg-b-1' : `tw-align-self-center tw-flex-grow-0 tw-flex-nowrap tw-flex-shrink-0 tw-relative ${is_sunlight ? 'tw-mg-l-05 tw-mg-r-2' : 'tw-mg-x-05'}`}`}
>
<div class="tw-inline-flex tw-relative tw-tooltip-wrapper">
{btn = (<button
@ -284,7 +304,7 @@ export default class MenuButton extends SiteModule {
</span>
</div>
</button>)}
{this.has_error && (<div class="tw-absolute tw-balloon tw-balloon--down tw-balloon--lg tw-balloon--right tw-block">
{this.has_error && (<div class={`tw-absolute tw-balloon tw-balloon--lg tw-block ${is_mod ? 'tw-balloon--up tw-balloon--left' : 'tw-balloon--down tw-balloon--right'}`}>
<div class="tw-border-radius-large tw-c-background-base tw-c-text-inherit tw-elevation-4 tw-pd-1">
<div class="tw-flex tw-align-items-center">
<div class="tw-flex-grow-1">
@ -301,7 +321,7 @@ export default class MenuButton extends SiteModule {
</div>
</div>
</div>)}
{! this.has_error && (<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
{! this.has_error && (<div class={`tw-tooltip ${is_mod ? 'tw-balloon--up tw-balloon--left' : 'tw-balloon--down tw-balloon--right'}`}>
{this.i18n.t('site.menu_button', 'FrankerFaceZ Control Center')}
{this.has_update && (<div class="tw-mg-t-1">
{this.i18n.t('site.menu_button.update-desc', 'There is an update available. Please refresh your page.')}
@ -340,7 +360,10 @@ export default class MenuButton extends SiteModule {
</div>)}
</div>);
container.insertBefore(el, container.lastElementChild);
if ( is_mod )
container.insertBefore(el, container.firstElementChild);
else
container.insertBefore(el, container.lastElementChild);
if ( this._ctx_open )
this.renderContext(null, btn);
@ -380,7 +403,8 @@ export default class MenuButton extends SiteModule {
event.preventDefault();
}
const container = btn.parentElement.parentElement;
const container = btn.parentElement.parentElement,
is_mod = container.classList.contains('ffz-mod-view-button');
let ctx = container.querySelector('.ffz--menu-context');
if ( ctx ) {
if ( ctx._ffz_destroy )
@ -436,7 +460,7 @@ export default class MenuButton extends SiteModule {
}
ctx = (<div class="tw-absolute tw-balloon tw-balloon--down tw-balloon--lg tw-balloon--right tw-block ffz--menu-context">
ctx = (<div class={`tw-absolute tw-balloon tw-balloon--lg ${is_mod ? 'tw-balloon--up tw-balloon--left' : 'tw-balloon--down tw-balloon--right'} tw-block ffz--menu-context`}>
<div class="tw-border-radius-large tw-c-background-base tw-c-text-inherit tw-elevation-4">
<div class="tw-c-text-base tw-elevation-1 tw-flex tw-flex-shrink-0 tw-pd-x-1 tw-pd-y-05 tw-popover-header">
<div class="tw-flex tw-flex-column tw-justify-content-center tw-mg-l-05 tw-popover-header__icon-slot--left">

View file

@ -10,7 +10,9 @@ import {createElement, on, off} from 'utilities/dom';
export const PLAYER_ROUTES = [
'front-page', 'user', 'video', 'user-video', 'user-clip', 'user-videos',
'user-clips', 'user-collections', 'user-events', 'user-followers',
'user-following', 'dash', 'squad', 'command-center', 'dash-stream-manager'];
'user-following', 'dash', 'squad', 'command-center', 'dash-stream-manager',
'mod-view'
];
const HAS_COMPRESSOR = window.AudioContext && window.DynamicsCompressorNode != null;