4.31.2

* Fixed: Apply a maximum height to the ban reason pop-up to avoid long lists from going off screen.
* API Added: `removeTokenizer(type)` and `removeRichProvider(type)` methods for the chat module.
* API Changed: Chat tokenizers no longer need to return a token list, if tokens have not changed.

package.json

@@ -1,7 +1,7 @@
 {
   "name": "frankerfacez",
   "author": "Dan Salvato LLC",
-  "version": "4.31.1",
+  "version": "4.31.2",
   "description": "FrankerFaceZ is a Twitch enhancement suite.",
   "private": true,
   "license": "Apache-2.0",
@@ -42,9 +42,9 @@
     "extract-loader": "^2.0.1",
     "file-loader": "^4.3.0",
     "json-loader": "^0.5.7",
-    "jszip": "^3.7.1",
     "raw-loader": "^3.1.0",
     "rimraf": "^3.0.2",
+    "sass": "^1.43.4",
     "sass-loader": "^7.3.1",
     "semver": "^7.3.5",
     "terser-webpack-plugin": "4",
@@ -70,6 +70,7 @@
     "file-saver": "^2.0.5",
     "graphql": "^16.0.1",
     "graphql-tag": "^2.12.6",
+    "jszip": "^3.7.1",
     "js-cookie": "^2.2.1",
     "markdown-it": "^12.2.0",
     "markdown-it-link-attributes": "^3.0.0",
@@ -78,7 +79,6 @@
     "raven-js": "^3.27.2",
     "react": "^17.0.2",
     "safe-regex": "^2.1.1",
-    "sass": "^1.43.4",
     "sortablejs": "^1.14.0",
     "sourcemapped-stacktrace": "^1.1.11",
     "text-diff": "^1.0.1",

src/modules/chat/actions/index.jsx

@@ -311,7 +311,13 @@ export default class Actions extends Module {
 			{reason_text ? <div class="tw-pd-05 tw-border-b">
 				{reason_text}
 			</div> : null}
-			<ul>{reason_elements}</ul>
+			<div class="scrollable-area" data-simplebar>
+				<div class="simplebar-scroll-content">
+					<div class="simplebar-content">
+						<ul>{reason_elements}</ul>
+					</div>
+				</div>
+			</div>
 		</div>);
 	}
 

src/modules/chat/index.js

@@ -1854,6 +1854,24 @@ export default class Chat extends Module {
 		});
 	}
 
+	removeTokenizer(tokenizer) {
+		let type;
+		if ( typeof tokenizer === 'string' ) type = tokenizer;
+		else type = tokenizer.type;
+
+		tokenizer = this.tokenizers[type];
+		if ( ! tokenizer )
+			return null;
+
+		if ( tokenizer.tooltip )
+			delete this.tooltips.types[type];
+
+		const idx = this.__tokenizers.indexOf(tokenizer);
+		if ( idx !== -1 )
+			this.__tokenizers.splice(idx, 1);
+
+		return tokenizer;
+	}
 
 	addRichProvider(provider) {
 		const type = provider.type;
@@ -1869,12 +1887,39 @@ export default class Chat extends Module {
 		});
 	}
 
+	removeRichProvider(provider) {
+		let type;
+		if ( typeof provider === 'string' ) type = provider;
+		else type = provider.type;
 
-	tokenizeString(message, msg) {
+		provider = this.rich_providers[type];
+		if ( ! provider )
+			return null;
+
+		const idx = this.__rich_providers.indexOf(provider);
+		if ( idx !== -1 )
+			this.__rich_providers.splice(idx, 1);
+
+		return provider;
+	}
+
+
+	tokenizeString(message, msg, user, haltable = false) {
 		let tokens = [{type: 'text', text: message}];
 
-		for(const tokenizer of this.__tokenizers)
+		for(const tokenizer of this.__tokenizers) {
-			tokens = tokenizer.process.call(this, tokens, msg);
+			if ( ! tokenizer.process )
+				continue;
+
+			const new_tokens = tokenizer.process.call(this, tokens, msg, user, haltable);
+			if ( new_tokens )
+				tokens = new_tokens;
+
+			if ( haltable && msg.ffz_halt_tokens ) {
+				msg.ffz_halt_tokens = undefined;
+				break;
+			}
+		}
 
 		return tokens;
 	}
@@ -1914,7 +1959,13 @@ export default class Chat extends Module {
 		let tokens = [{type: 'text', text: msg.message}];
 
 		for(const tokenizer of this.__tokenizers) {
-			tokens = tokenizer.process.call(this, tokens, msg, user, haltable);
+			if ( ! tokenizer.process )
+				continue;
+
+			const new_tokens = tokenizer.process.call(this, tokens, msg, user, haltable);
+			if ( new_tokens )
+				tokens = new_tokens;
+
 			if ( haltable && msg.ffz_halt_tokens ) {
 				msg.ffz_halt_tokens = undefined;
 				break;

src/modules/chat/tokenizers.jsx

@@ -34,7 +34,7 @@ export const FilterTester = {
 
 	process(tokens, msg) {
 		if ( ! tokens || ! tokens.length || ! this.context.get('chat.filtering.debug') )
-			return tokens;
+			return;
 
 		msg.filters = [];
 
@@ -178,9 +178,7 @@ export const Links = {
 
 	process(tokens) {
 		if ( ! tokens || ! tokens.length )
-			return tokens;
+			return;
-
-		//const use_new = this.experiments.getAssignment('new_links');
 
 		const out = [];
 		for(const token of tokens) {
@@ -189,7 +187,6 @@ export const Links = {
 				continue;
 			}
 
-			//LINK_REGEX.lastIndex = 0;
 			NEW_LINK_REGEX.lastIndex = 0;
 			const text = token.text;
 			let idx = 0, match;
@@ -251,41 +248,6 @@ Links.tooltip.delayHide = function(target) {
 };
 
 
-// ============================================================================
-// Rich Content
-// ============================================================================
-
-/*export const RichContent = {
-	type: 'rich-content',
-
-	render(token, e) {
-		return e('div', {
-			className: 'ffz--rich-content elevation-1 mg-y-05',
-		}, e('a', {
-			className: 'clips-chat-card flex flex-nowrap pd-05',
-			target: '_blank',
-			href: token.url
-		}, [
-			e('div', {
-				className: 'clips-chat-card__thumb align-items-center flex justify-content-center'
-			})
-		]));
-	},
-
-	process(tokens, msg) {
-		if ( ! tokens || ! tokens.length )
-			return tokens;
-
-		for(const token of tokens) {
-			if ( token.type !== 'link' )
-				continue;
-
-
-		}
-	}
-}*/
-
-
 // ============================================================================
 // Replies (Styled Like Mentions)
 // ============================================================================
@@ -333,10 +295,6 @@ export const Replies = {
 				reply.parentMessageBody
 			])
 		];
-	},
-
-	process(tokens) {
-		return tokens;
 	}
 }
 
@@ -351,11 +309,11 @@ export const Mentions = {
 
 	component: () => import(/* webpackChunkName: 'vue-chat' */ './components/chat-mention.vue'),
 
-	oldRender(token, createElement) {
+	/*oldRender(token, createElement) {
 		return (<strong class={`chat-line__message-mention${token.me ? ' ffz--mention-me' : ''}`}>
 			{token.text}
 		</strong>);
-	},
+	},*/
 
 	render(token, createElement) {
 		let color = token.color;
@@ -376,7 +334,7 @@ export const Mentions = {
 
 	process(tokens, msg, user) {
 		if ( ! tokens || ! tokens.length )
-			return tokens;
+			return;
 
 		const can_highlight_user = user && user.login && user.login == msg.user.login && ! this.context.get('chat.filtering.process-own'),
 			priority = this.context.get('chat.filtering.mention-priority');
@@ -467,19 +425,17 @@ export const UserHighlights = {
 
 	process(tokens, msg, user) {
 		if ( user && user.login && user.login == msg.user.login && ! this.context.get('chat.filtering.process-own') )
-			return tokens;
+			return;
 
 		const list = this.context.get('__filter:highlight-users');
 		if ( ! list || ! list.length )
-			return tokens;
+			return;
 
 		const u = msg.user;
 		for(const [priority, color, regex] of list) {
 			if ( regex.test(u.login) || regex.test(u.displayName) )
 				this.applyHighlight(msg, priority, color, 'user');
 		}
-
-		return tokens;
 	}
 }
 
@@ -489,12 +445,12 @@ export const BlockedUsers = {
 
 	process(tokens, msg, user, haltable) {
 		if ( user && user.login && user.login == msg.user.login && ! this.context.get('chat.filtering.process-own') )
-			return tokens;
+			return;
 
 		const u = msg.user,
 			regexes = this.context.get('__filter:block-users');
 		if ( ! regexes )
-			return tokens;
+			return;
 
 		if ( regexes[1] && (regexes[1].test(u.login) || regexes[1].test(u.displayName)) ) {
 			msg.deleted = true;
@@ -504,8 +460,6 @@ export const BlockedUsers = {
 
 		} else if ( ! msg.deleted && regexes[0] && (regexes[0].test(u.login) || regexes[0].test(u.displayName)) )
 			msg.deleted = true;
-
-		return tokens;
 	}
 }
 
@@ -530,17 +484,17 @@ export const BadgeStuff = {
 
 	process(tokens, msg, user, haltable) {
 		if ( user && user.login && user.login == msg.user.login && ! this.context.get('chat.filtering.process-own') )
-			return tokens;
+			return;
 
 		const highlights = this.context.get('__filter:highlight-badges'),
 			list = this.context.get('__filter:block-badges');
 
 		if ( ! highlights && ! list )
-			return tokens;
+			return;
 
 		const keys = getBadgeIDs(msg);
 		if ( ! keys || ! keys.length )
-			return tokens;
+			return;
 
 		for(const badge of keys) {
 			if ( list && list[1].includes(badge) ) {
@@ -548,7 +502,7 @@ export const BadgeStuff = {
 				msg.ffz_removed = true;
 				if ( haltable )
 					msg.ffz_halt_tokens = true;
-				return tokens;
+				return;
 			}
 
 			if ( list && ! msg.deleted && list[0].includes(badge) )
@@ -560,8 +514,6 @@ export const BadgeStuff = {
 					this.applyHighlight(msg, details[0], details[1], 'badge');
 			}
 		}
-
-		return tokens;
 	}
 }
 
@@ -609,14 +561,14 @@ export const CustomHighlights = {
 
 	process(tokens, msg, user) {
 		if ( ! tokens || ! tokens.length )
-			return tokens;
+			return;
 
 		if ( user && user.login && user.login == msg.user.login && ! this.context.get('chat.filtering.process-own') )
-			return tokens;
+			return;
 
 		const data = this.context.get('__filter:highlight-terms');
 		if ( ! data )
-			return tokens;
+			return;
 
 		let had_match = false;
 		if ( data.non ) {
@@ -781,14 +733,14 @@ export const BlockedTerms = {
 
 	process(tokens, msg, user, haltable) {
 		if ( ! tokens || ! tokens.length )
-			return tokens;
+			return;
 
 		if ( user && user.login && user.login == msg.user.login && ! this.context.get('chat.filtering.process-own') )
-			return tokens;
+			return;
 
 		const regexes = this.context.get('__filter:block-terms');
 		if ( ! regexes )
-			return tokens;
+			return;
 
 		if ( regexes.remove ) {
 			tokens = blocked_process(tokens, msg, regexes.remove, true, haltable);
@@ -863,7 +815,7 @@ export const AutomoddedTerms = {
 
 	process(tokens, msg, user, haltable) {
 		if ( ! tokens || ! tokens.length || ! msg.flags || ! Array.isArray(msg.flags.list) )
-			return tokens;
+			return;
 
 		const cats = msg.flags.preferences,
 			flagged = msg.flags.list.filter(x => {
@@ -882,7 +834,7 @@ export const AutomoddedTerms = {
 			f_length = flagged.length;
 
 		if ( ! f_length )
-			return tokens;
+			return;
 
 		const out = [];
 		let idx = 0,
@@ -898,7 +850,7 @@ export const AutomoddedTerms = {
 			msg.ffz_removed = true;
 			if ( haltable )
 				msg.ffz_halt_tokens = true;
-			return tokens;
+			return;
 		}
 
 		for(const token of tokens) {
@@ -1050,13 +1002,13 @@ export const CheerEmotes = {
 
 	process(tokens, msg) {
 		if ( ! tokens || ! tokens.length || ! msg.bits )
-			return tokens;
+			return;
 
 		const room = this.getRoom(msg.roomID, msg.roomLogin, true),
 			actions = room && room.bitsConfig;
 
 		if ( ! actions )
-			return tokens;
+			return;
 
 		const matcher = new RegExp(`^(${Object.keys(actions).join('|')})(\\d+)$`, 'i');
 
@@ -1464,10 +1416,10 @@ export const AddonEmotes = {
 
 	process(tokens, msg) {
 		if ( ! tokens || ! tokens.length )
-			return tokens;
+			return;
 
 		if ( this.context.get('chat.emotes.enabled') !== 2 )
-			return tokens;
+			return;
 
 		const emotes = this.emotes.getEmotes(
 			msg.user.id,
@@ -1477,7 +1429,7 @@ export const AddonEmotes = {
 		);
 
 		if ( ! emotes )
-			return tokens;
+			return;
 
 		const big = this.context.get('chat.emotes.2x'),
 			anim = this.context.get('chat.emotes.animated'),
@@ -1574,14 +1526,15 @@ export const Emoji = {
 
 	process(tokens) {
 		if ( ! tokens || ! tokens.length )
-			return tokens;
+			return;
 
 		const splitter = this.emoji.splitter,
-			style = this.context.get('chat.emoji.style'),
+			style = this.context.get('chat.emoji.style');
-			out = [];
 
 		if ( style === 0 )
-			return tokens;
+			return;
+
+		const out = [];
 
 		for(const token of tokens) {
 			if ( ! token )
@@ -1648,10 +1601,10 @@ export const TwitchEmotes = {
 
 	process(tokens, msg) {
 		if ( ! msg.ffz_emotes )
-			return tokens;
+			return;
 
 		if ( this.context.get('chat.emotes.enabled') < 1 )
-			return tokens;
+			return;
 
 		const data = msg.ffz_emotes,
 			anim = this.context.get('chat.emotes.animated'),
@@ -1666,11 +1619,12 @@ export const TwitchEmotes = {
 					emotes.push([emote_id, match.startIndex, match.endIndex + 1]);
 			}
 
-		const out = [],
+		const e_length = emotes.length;
-			e_length = emotes.length;
 
 		if ( ! e_length )
-			return tokens;
+			return;
+
+		const out = [];
 
 		emotes.sort((a,b) => a[1] !== b[1] ? a[1] - b[1] : b[0] - a[0]);
 

src/modules/main_menu/components/main-menu.vue

@@ -110,7 +110,7 @@
 					:context="context"
 					:item="currentItem"
 					:filter="filter"
-					:nav_keys="nav_keys"
+					:nav-keys="navKeys"
 					@change-item="changeItem"
 					@mark-seen="markSeen"
 					@navigate="navigate"
@@ -257,7 +257,7 @@ export default {
 		navigate(...keys) {
 			let item;
 			for(const key of keys) {
-				item = this.nav_keys[key];
+				item = this.navKeys[key];
 				if ( item )
 					break;
 			}

src/modules/main_menu/components/menu-page.vue

@@ -83,7 +83,7 @@
 				ref="children"
 				:context="context"
 				:item="i"
-				:nav_keys="nav_keys"
+				:nav-keys="navKeys"
 				:filter="filter"
 				@change-item="changeItem"
 				@mark-seen="markSeen"
@@ -96,7 +96,7 @@
 <script>
 
 export default {
-	props: ['item', 'context', 'filter', 'nav_keys'],
+	props: ['item', 'context', 'filter', 'navKeys'],
 
 	computed: {
 		breadcrumbs() {

src/modules/main_menu/index.js

@@ -462,7 +462,7 @@ export default class MainMenu extends Module {
 			tree = this.getSettingsTree();
 
 		root.nav = tree;
-		root.nav_keys = tree.keys;
+		root.navKeys = tree.keys;
 
 		let current, restored = true;
 
@@ -1119,7 +1119,7 @@ export default class MainMenu extends Module {
 			nav: settings,
 			currentItem: current,
 			restoredItem: true, // restored, -- Look into making this smoother later.
-			nav_keys: settings.keys,
+			navKeys: settings.keys,
 
 			has_unseen,
 

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

@@ -20,10 +20,6 @@ const SUB_TIERS = {
 	3000: 3
 };
 
-function getGiftThemeURL(theme) {
-	return `https://static-cdn.jtvnw.net/subs-image-assets/TUN-${theme}.png`;
-}
-
 
 export default class ChatLine extends Module {
 	constructor(...args) {

styles/chat.scss

@@ -24,6 +24,10 @@
 
 .ffz--inline-reasons {
 	max-width: 30rem;
+
+	.scrollable-area {
+		max-height: min(90vh, max(30rem, 50vh));
+	}
 }
 
 .ffz--inline-actions {