From 9017dd644f62b31e58c24894a6a191dd4549c377 Mon Sep 17 00:00:00 2001 From: SirStendec Date: Fri, 14 Oct 2022 17:23:45 -0400 Subject: [PATCH] 4.37.1 * Added: "Pin This Message" chat action to allow moderators to pin messages as a quick fix until I can implement the normal vanilla pin button. * Fixed: FrankerFaceZ failing to load correctly on moderation view pages. --- package.json | 2 +- src/modules/chat/actions/index.jsx | 8 +-- src/modules/chat/actions/types.jsx | 51 +++++++++++++++++++ src/sites/twitch-twilight/index.js | 13 ++--- .../twitch-twilight/modules/chat/line.js | 50 +++++++++++------- 5 files changed, 96 insertions(+), 28 deletions(-) diff --git a/package.json b/package.json index 39e62d68..7be8243c 100755 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "frankerfacez", "author": "Dan Salvato LLC", - "version": "4.37.0", + "version": "4.37.1", "description": "FrankerFaceZ is a Twitch enhancement suite.", "private": true, "license": "Apache-2.0", diff --git a/src/modules/chat/actions/index.jsx b/src/modules/chat/actions/index.jsx index 10ff20f0..4ed509df 100644 --- a/src/modules/chat/actions/index.jsx +++ b/src/modules/chat/actions/index.jsx @@ -743,7 +743,7 @@ export default class Actions extends Module { } - renderInline(msg, mod_icons, current_user, current_room, createElement) { + renderInline(msg, mod_icons, current_user, current_room, createElement, instance = null) { const actions = []; const current_level = this.getUserLevel(current_room, current_user), @@ -778,11 +778,11 @@ export default class Actions extends Module { if ( is_self && ! act.can_self ) continue; - if ( maybe_call(act.hidden, this, data, msg, current_room, current_user, mod_icons) ) + if ( maybe_call(act.hidden, this, data, msg, current_room, current_user, mod_icons, instance) ) continue; if ( act.override_appearance ) { - const out = act.override_appearance.call(this, Object.assign({}, ap), data, msg, current_room, current_user, mod_icons); + const out = act.override_appearance.call(this, Object.assign({}, ap), data, msg, current_room, current_user, mod_icons, instance); if ( out ) ap = out; } @@ -792,7 +792,7 @@ export default class Actions extends Module { continue; const has_color = def.colored && ap.color, - disabled = maybe_call(act.disabled, this, data, msg, current_room, current_user, mod_icons) || false, + disabled = maybe_call(act.disabled, this, data, msg, current_room, current_user, mod_icons, instance) || false, color = has_color && (chat && chat.colors ? chat.colors.process(ap.color) : ap.color), contents = def.render.call(this, ap, createElement, color); diff --git a/src/modules/chat/actions/types.jsx b/src/modules/chat/actions/types.jsx index da02fa29..ded79ae1 100644 --- a/src/modules/chat/actions/types.jsx +++ b/src/modules/chat/actions/types.jsx @@ -3,6 +3,57 @@ import {createElement} from 'utilities/dom'; +// ============================================================================ +// Pin Message +// ============================================================================ + +export const pin = { + presets: [{ + appearance: { + type: 'icon', + icon: 'ffz-i-pin' + } + }], + + required_context: ['message'], + + title: 'Pin This Message', + description: 'Allows you to pin a chat message. Only functions in channels that have access to Twitch\'s pinned messages experiment.', + + can_self: true, + + tooltip() { + return this.i18n.t('chat.actions.pin', 'Pin This Message') + }, + + hidden(data, message, current_room, current_user, mod_icons, instance) { + let line = instance; + + if ( ! line ) + return true; + + if ( ! line.props.isPinnable || ! line.onPinMessageClick ) + return true; + }, + + click(event, data) { + let line = data.line; + if ( ! line ) { + const fine = this.resolve('site.fine'); + line = fine ? fine.searchParent(event.target, n => n.setMessageTray && n.props && n.props.message) : null; + } + + if ( ! line || ! line.props.isPinnable || ! line.onPinMessageClick ) + return; + + if ( line.props.pinnedMessage?.message?.id === data.message_id ) + return; + + line.onPinMessageClick(); + } +} + + // ============================================================================ // Send Reply // ============================================================================ diff --git a/src/sites/twitch-twilight/index.js b/src/sites/twitch-twilight/index.js index c63f0bbe..f8e55c24 100644 --- a/src/sites/twitch-twilight/index.js +++ b/src/sites/twitch-twilight/index.js @@ -249,19 +249,20 @@ Twilight.KNOWN_MODULES = { } } -const VEND_CHUNK = n => ! n || n.includes('vendor'); +//const VEND_CHUNK = n => ! n || n.includes('vendor'); +const VEND_CORE = n => ! n || n.includes('vendor') || n.includes('core'); Twilight.KNOWN_MODULES.core.use_result = true; //Twilight.KNOWN_MODULES.core.chunks = 'core'; -Twilight.KNOWN_MODULES.simplebar.chunks = VEND_CHUNK; -Twilight.KNOWN_MODULES.react.chunks = VEND_CHUNK; -Twilight.KNOWN_MODULES.cookie.chunks = VEND_CHUNK; +Twilight.KNOWN_MODULES.simplebar.chunks = VEND_CORE; +Twilight.KNOWN_MODULES.react.chunks = VEND_CORE; +Twilight.KNOWN_MODULES.cookie.chunks = VEND_CORE; Twilight.KNOWN_MODULES['gql-printer'].use_result = true; -Twilight.KNOWN_MODULES['gql-printer'].chunks = VEND_CHUNK; +Twilight.KNOWN_MODULES['gql-printer'].chunks = VEND_CORE; -Twilight.KNOWN_MODULES.mousetrap.chunks = VEND_CHUNK; +Twilight.KNOWN_MODULES.mousetrap.chunks = VEND_CORE; const CHAT_CHUNK = n => ! n || n.includes('chat'); diff --git a/src/sites/twitch-twilight/modules/chat/line.js b/src/sites/twitch-twilight/modules/chat/line.js index b2825f39..ccb65cb1 100644 --- a/src/sites/twitch-twilight/modules/chat/line.js +++ b/src/sites/twitch-twilight/modules/chat/line.js @@ -741,7 +741,7 @@ other {# messages were deleted by a moderator.} Object.assign(user_props.style, msg.ffz_user_style); const user_bits = [ - t.actions.renderInline(msg, this.props.showModerationIcons, u, r, e), + t.actions.renderInline(msg, this.props.showModerationIcons, u, r, e, this), this.renderInlineHighlight ? this.renderInlineHighlight() : null, e('span', { className: 'chat-line__message--badges' @@ -876,7 +876,7 @@ other {# messages were deleted by a moderator.} out ? null : extra_ts && (this.props.showTimestamps || this.props.isHistorical) && e('span', { className: 'chat-line__timestamp' }, t.chat.formatTime(msg.timestamp)), - (out || msg.sub_anon) ? null : t.actions.renderInline(msg, this.props.showModerationIcons, u, r, e), + (out || msg.sub_anon) ? null : t.actions.renderInline(msg, this.props.showModerationIcons, u, r, e, this), sub_msg ]), mystery ? e('div', { @@ -949,7 +949,7 @@ other {# messages were deleted by a moderator.} out ? null : extra_ts && (this.props.showTimestamps || this.props.isHistorical) && e('span', { className: 'chat-line__timestamp' }, t.chat.formatTime(msg.timestamp)), - (out || msg.sub_anon) ? null : t.actions.renderInline(msg, this.props.showModerationIcons, u, r, e), + (out || msg.sub_anon) ? null : t.actions.renderInline(msg, this.props.showModerationIcons, u, r, e, this), sub_msg ]) ]), @@ -1014,7 +1014,7 @@ other {# messages were deleted by a moderator.} out ? null : extra_ts && (this.props.showTimestamps || this.props.isHistorical) && e('span', { className: 'chat-line__timestamp' }, t.chat.formatTime(msg.timestamp)), - out ? null : t.actions.renderInline(msg, this.props.showModerationIcons, u, r, e), + out ? null : t.actions.renderInline(msg, this.props.showModerationIcons, u, r, e, this), sub_msg ]) ]), @@ -1073,7 +1073,7 @@ other {# messages were deleted by a moderator.} out ? null : extra_ts && (this.props.showTimestamps || this.props.isHistorical) && e('span', { className: 'chat-line__timestamp' }, t.chat.formatTime(msg.timestamp)), - out ? null : t.actions.renderInline(msg, this.props.showModerationIcons, u, r, e), + out ? null : t.actions.renderInline(msg, this.props.showModerationIcons, u, r, e, this), out ? t.i18n.tList('chat.points.redeemed', 'Redeemed {reward} {cost}', {reward, cost}) : t.i18n.tList('chat.points.user-redeemed', '{user} redeemed {reward} {cost}', { @@ -1102,7 +1102,7 @@ other {# messages were deleted by a moderator.} out ? null : extra_ts && (this.props.showTimestamps || this.props.isHistorical) && e('span', { className: 'chat-line__timestamp' }, t.chat.formatTime(msg.timestamp)), - out ? null : t.actions.renderInline(msg, this.props.showModerationIcons, u, r, e), + out ? null : t.actions.renderInline(msg, this.props.showModerationIcons, u, r, e, this), t.i18n.tList('chat.bits-message', 'Cheered {count, plural, one {# Bit} other {# Bits}}', {count: msg.bits || 0}) ]), out && e('div', { @@ -1140,17 +1140,33 @@ other {# messages were deleted by a moderator.} this.props.repliesAppearancePreference && this.props.repliesAppearancePreference === 'expanded' ? this.renderReplyLine() : null, out ]), - e('div', { - className: 'chat-line__reply-icon tw-absolute tw-border-radius-medium tw-c-background-base tw-elevation-1' - }, e('button', { - className: '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 ffz-core-button tw-inline-flex tw-interactive tw-justify-content-center tw-overflow-hidden tw-relative ffz-tooltip ffz-tooltip--no-mouse', - 'data-test-selector': 'chat-reply-button', - 'aria-label': title, - 'data-title': title, - onClick: this.ffz_open_reply - }, e('span', { - className: 'tw-button-icon__icon' - }, icon))) + /*e('div', { + className: 'chat-line__icons' + }, [*/ + /*e('div', { + className: 'chat-line__pin-icon tw-absolute tw-border-radius-medium tw-c-background-base tw-elevation-1' + }, e('button', { + className: '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 ffz-core-button tw-inline-flex tw-interactive tw-justify-content-center tw-overflow-hidden tw-relative ffz-tooltip ffz-tooltip--no-mouse', + 'data-test-selector': 'chat-pin-button', + 'aria-label': 'Pin This Message', + 'data-title': 'Pin This Message', + onClick: this.onPinMessageClick + }, e('span', { + className: 'tw-button-icon__icon' + }, e('figure', {className: 'ffz-i-'})))), + //this.renderPinButton(),*/ + e('div', { + className: 'chat-line__reply-icon tw-absolute tw-border-radius-medium tw-c-background-base tw-elevation-1' + }, e('button', { + className: '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 ffz-core-button tw-inline-flex tw-interactive tw-justify-content-center tw-overflow-hidden tw-relative ffz-tooltip ffz-tooltip--no-mouse', + 'data-test-selector': 'chat-reply-button', + 'aria-label': title, + 'data-title': title, + onClick: this.ffz_open_reply + }, e('span', { + className: 'tw-button-icon__icon' + }, icon))) + //]) ]; }