Add chat:pre-send-message event for outgoing message processing. (Does not currently allow you to modify the message. Fixan issue with the emote menu. Add setting to always show deleted messages.

changelog.html

@@ -1,3 +1,10 @@
+<div class="list-header">4.0.0-rc1.11<span>@eed9eb9f5eb9acdb58ac</span> <time datetime="2018-05-22">(2018-05-22)</time></div>
+<ul class="chat-menu-content menu-side-padding">
+	<li>Added: Setting to always display deleted chat messages.</li>
+	<li>Fixed: Issue with the emote menu not loading when navigating to a new channel.</li>
+	<li>API Added: <code>chat:pre-send-message</code> event when sending a chat message to a room.</li>
+</ul>
+
 <div class="list-header">4.0.0-rc1.10<span>@d27dc686044b45c844e4</span> <time datetime="2018-05-21">(2018-05-21)</time></div>
 <ul class="chat-menu-content menu-side-padding">
 	<li>Changed: Add requested emote data support for merging emote sets and forcing certain emote sets to appear on the Channel tab of the emote menu.</li>

src/main.js

@@ -100,7 +100,7 @@ class FrankerFaceZ extends Module {
 FrankerFaceZ.Logger = Logger;
 
 const VER = FrankerFaceZ.version_info = {
-	major: 4, minor: 0, revision: 0, extra: '-rc1.10',
+	major: 4, minor: 0, revision: 0, extra: '-rc1.11',
 	build: __webpack_hash__,
 	toString: () =>
 		`${VER.major}.${VER.minor}.${VER.revision}${VER.extra || ''}${DEBUG ? '-dev' : ''}`

src/modules/chat/index.js

@@ -96,6 +96,18 @@ export default class Chat extends Module {
 			}
 		});
 
+
+		this.settings.add('chat.filtering.show-deleted', {
+			default: false,
+			ui: {
+				path: 'Chat > Filtering >> Appearance',
+				title: 'Always display deleted messages.',
+				description: 'Deleted messages will be faded and displayed with a line through the message text.',
+				component: 'setting-check-box'
+			}
+		});
+
+
 		this.settings.add('chat.filtering.highlight-mentions', {
 			default: false,
 			ui: {

src/sites/twitch-twilight/modules/chat/emote_menu.jsx

@@ -1019,7 +1019,7 @@ export default class EmoteMenu extends Module {
 							if ( ! all.includes(section) )
 								all.push(section);
 
-							if ( ! channel.includes(section) && maybe_call(section.force_global, this, emote_set, props.channel_data.user, me) )
+							if ( ! channel.includes(section) && maybe_call(section.force_global, this, emote_set, props.channel_data && props.channel_data.user, me) )
 								channel.push(section);
 						}
 					}

src/sites/twitch-twilight/modules/chat/index.js

@@ -7,6 +7,7 @@
 import {ColorAdjuster} from 'utilities/color';
 import {setChildren} from 'utilities/dom';
 import {has, split_chars} from 'utilities/object';
+import {FFZEvent} from 'utilities/events';
 
 import Module from 'utilities/module';
 
@@ -551,6 +552,16 @@ export default class ChatHook extends Module {
 				return false;
 			}
 
+			const event = new FFZEvent({
+				message: msg,
+				channel: this.channelLogin
+			});
+
+			t.emit('chat:pre-send-message', event);
+
+			if ( event.defaultPrevented )
+				return;
+
 			return old_send.call(this, msg);
 		}
 

src/sites/twitch-twilight/modules/chat/line.js

@@ -54,6 +54,7 @@ export default class ChatLine extends Module {
 		this.chat.context.on('changed:chat.rich.enabled', this.updateLines, this);
 		this.chat.context.on('changed:chat.rich.hide-tokens', this.updateLines, this);
 		this.chat.context.on('changed:chat.actions.inline', this.updateLines, this);
+		this.chat.context.on('changed:chat.filtering.show-deleted', this.updateLines, this);
 
 		const t = this,
 			React = await this.web_munch.findModule('react');
@@ -195,7 +196,17 @@ export default class ChatLine extends Module {
 				const user = msg.user,
 					color = t.parent.colors.process(user.color),
 					bg_css = null, //Math.random() > .7 ? t.parent.inverse_colors.process(user.color) : null,
-					show = this._ffz_show = this.state.alwaysShowMessage || ! msg.deleted;
+					show_deleted = t.chat.context.get('chat.filtering.show-deleted');
+
+				let show, show_class;
+
+				if ( show_deleted ) {
+					show = true;
+					show_class = msg.deleted;
+				} else {
+					show = this.state.alwaysShowMessage || ! msg.deleted;
+					show_class = false;
+				}
 
 				let room = msg.roomLogin ? msg.roomLogin : msg.channel ? msg.channel.slice(1) : undefined;
 
@@ -222,7 +233,7 @@ export default class ChatLine extends Module {
 				if ( ! this.ffz_user_click_handler )
 					this.ffz_user_click_handler = event => event.ctrlKey ? this.usernameClickHandler(event) : t.viewer_cards.openCard(r, user, event);
 
-				let cls = 'chat-line__message',
+				let cls = `chat-line__message${show_class ? ' ffz--deleted-message' : ''}`,
 					out = (tokens.length || ! msg.ffz_type) ? [
 						this.props.showTimestamps && e('span', {
 							className: 'chat-line__timestamp'

src/utilities/events.js

@@ -5,7 +5,8 @@
 
 import {has} from 'utilities/object';
 
-const Detach = {};
+const Detach = Symbol('Detach');
+const StopPropagation = Symbol('StopPropagation');
 
 const SNAKE_CAPS = /([a-z])([A-Z])/g,
 	SNAKE_SPACE = /[ \t\W]/g,
@@ -140,6 +141,9 @@ export class EventEmitter {
 				else
 					item[2] = ttl - 1;
 			}
+
+			if ( (args[0] instanceof FFZEvent && args[0].propagationStopped) || ret === StopPropagation )
+				break;
 		}
 
 		if ( removed.size ) {
@@ -187,6 +191,9 @@ export class EventEmitter {
 				else
 					item[2] = ttl - 1;
 			}
+
+			if ( (args[0] instanceof FFZEvent && args[0].propagationStopped) || ret === StopPropagation )
+				break;
 		}
 
 		if ( removed.size ) {
@@ -275,6 +282,26 @@ export class EventEmitter {
 }
 
 EventEmitter.Detach = Detach;
+EventEmitter.StopPropagation = StopPropagation;
+
+
+export class FFZEvent {
+	constructor(data) {
+		this.defaultPrevented = false;
+		this.propagationStopped = false;
+
+		Object.assign(this, data);
+	}
+
+	stopPropagation() {
+		this.propagationStopped = true;
+	}
+
+	preventDefault() {
+		this.defaultPrevented = true;
+	}
+}
+
 
 
 export class HierarchicalEventEmitter extends EventEmitter {

styles/chat.scss

@@ -19,6 +19,17 @@
 }
 
 
+.ffz--deleted-message {
+	&:not(:hover) > * {
+		opacity: 0.5;
+	}
+
+	.message {
+		text-decoration: line-through;
+	}
+}
+
+
 .ffz-badge {
 	display: inline-block;
 	min-width: 1.8rem;