4.0.0-rc4.4

* Changed: Make usernames in chat line resub messages clickable.
* Fixed: Remove debug logging.
* Fixed: Make the code to automatically leave raids more resilient against Twitch wanting people to join raids automatically.

changelog.html

@@ -1,3 +1,10 @@
+<div class="list-header">4.0.0-rc4.4<span>@9e5af5443a7601d78faf</span> <time datetime="2018-07-09">(2018-07-09)</time></div>
+<ul class="chat-menu-content menu-side-padding">
+	<li>Changed: Make usernames clickable in resub notifications in chat, to match with native subscription messages.</li>
+	<li>Fixed: Make the code to automatically leave raids more robust.</li>
+	<li>Fixed: Remove debug logging.</li>
+</ul>
+
 <div class="list-header">4.0.0-rc4.3<span>@46f98c4cd4559eaa9828</span> <time datetime="2018-07-05">(2018-07-05)</time></div>
 <ul class="chat-menu-content menu-side-padding">
 	<li>Added: Settings Search</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: '-rc4.3',
+	major: 4, minor: 0, revision: 0, extra: '-rc4.4',
 	build: __webpack_hash__,
 	toString: () =>
 		`${VER.major}.${VER.minor}.${VER.revision}${VER.extra || ''}${DEBUG ? '-dev' : ''}`

src/sites/twitch-twilight/modules/channel.js

@@ -17,7 +17,7 @@ export default class Channel extends Module {
 		this.inject('settings');
 		this.inject('site.fine');
 
-		this.left_raids = new Set;
+		this.joined_raids = new Set;
 
 		this.settings.add('channel.hosting.enable', {
 			default: true,
@@ -56,12 +56,12 @@ export default class Channel extends Module {
 
 	onEnable() {
 		this.ChannelPage.on('mount', this.wrapChannelPage, this);
-		this.RaidController.on('mount', this.noAutoRaids, this);
+		this.RaidController.on('mount', this.wrapRaidController, this);
 		this.RaidController.on('update', this.noAutoRaids, this);
 
 		this.RaidController.ready((cls, instances) => {
 			for(const inst of instances)
-				this.noAutoRaids(inst);
+				this.wrapRaidController(inst);
 		});
 
 		this.ChannelPage.on('update', inst => {
@@ -85,16 +85,36 @@ export default class Channel extends Module {
 	}
 
 
+	wrapRaidController(inst) {
+		if ( inst._ffz_wrapped )
+			return this.noAutoRaids(inst);
+
+		inst._ffz_wrapped = true;
+
+		const t = this,
+			old_handle_join = inst.handleJoinRaid;
+
+		inst.handleJoinRaid = function(event, ...args) {
+			const raid_id = inst.state && inst.state.raid && inst.state.raid.id;
+			if ( event && event.type && raid_id )
+				t.joined_raids.add(raid_id);
+
+			return old_handle_join.call(this, event, ...args);
+		}
+
+		this.noAutoRaids(inst);
+	}
+
+
 	noAutoRaids(inst) {
 		if ( this.settings.get('channel.raids.no-autojoin') )
 			setTimeout(() => {
-				if ( inst.state.raid && inst.hasJoinedCurrentRaid ) {
+				if ( inst.state.raid && ! inst.isRaidCreator && inst.hasJoinedCurrentRaid ) {
 					const id = inst.state.raid.id;
-					if ( this.left_raids.has(id) )
+					if ( this.joined_raids.has(id) )
 						return;
 
 					this.log.info('Automatically leaving raid:', id);
-					this.left_raids.add(id);
 					inst.handleLeaveRaid();
 				}
 			});

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

@@ -983,8 +983,6 @@ export function findEmotes(msg, emotes) {
 	const out = {};
 	let idx = 0;
 
-	console.log('findEmotes', msg, emotes);
-
 	for(const part of msg.split(' ')) {
 		const len = split_chars(part).length;
 

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

@@ -233,7 +233,7 @@ export default class ChatLine extends Module {
 					bg_css = msg.mentioned && msg.mention_color ? t.parent.inverse_colors.process(msg.mention_color) : null;
 
 				if ( ! this.ffz_user_click_handler )
-					this.ffz_user_click_handler = event => event.ctrlKey ? this.usernameClickHandler(event) : t.viewer_cards.openCard(r, user, event);
+					this.ffz_user_click_handler = this.usernameClickHandler; // event => event.ctrlKey ? this.usernameClickHandler(event) : t.viewer_cards.openCard(r, user, event);
 
 				let cls = `chat-line__message${show_class ? ' ffz--deleted-message' : ''}`,
 					out = (tokens.length || ! msg.ffz_type) ? [
@@ -247,7 +247,7 @@ export default class ChatLine extends Module {
 						e('button', {
 							className: 'chat-line__username notranslate',
 							style: { color },
-							onClick: this.usernameClickHandler, // this.ffz_user_click_handler
+							onClick: this.ffz_user_click_handler
 						}, [
 							e('span', {
 								className: 'chat-author__display-name'
@@ -294,8 +294,13 @@ export default class ChatLine extends Module {
 					cls = 'user-notice-line tw-pd-y-05 tw-pd-r-2 ffz--subscribe-line';
 					out = [
 						e('div', {className: 'tw-c-text-alt-2'}, [
-							t.i18n.t('chat.sub.main', '%{user} just subscribed with %{plan}!', {
+							t.i18n.tList('chat.sub.main', '%{user} just subscribed with %{plan}!', {
-								user: user.userDisplayName,
+								user: e('button', {
+									className: 'chatter-name',
+									onClick: this.ffz_user_click_handler //e => this.props.onUsernameClick(user.login, null, msg.id, e.currentTarget.getBoundingClientRect().bottom)
+								}, e('span', {
+									className: 'tw-c-text tw-strong'
+								}, user.userDisplayName)),
 								plan: plan.prime ?
 									t.i18n.t('chat.sub.twitch-prime', 'Twitch Prime') :
 									t.i18n.t('chat.sub.plan', 'a Tier %{tier} sub', {tier})
@@ -322,8 +327,13 @@ export default class ChatLine extends Module {
 					let system_msg;
 					if ( msg.ritual === 'new_chatter' )
 						system_msg = e('div', {className: 'tw-c-text-alt-2'}, [
-							t.i18n.t('chat.ritual', '%{user} is new here. Say hello!', {
+							t.i18n.tList('chat.ritual', '%{user} is new here. Say hello!', {
-								user: user.userDisplayName
+								user: e('button', {
+									className: 'chatter-name',
+									onClick: this.ffz_user_click_handler
+								}, e('span', {
+									className: 'tw-c-text tw-strong'
+								}, user.userDisplayName))
 							})
 						]);
 

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

@@ -7,6 +7,7 @@
 import {createElement} from 'utilities/dom';
 import Twilight from 'site';
 import Module from 'utilities/module';
+import {IS_FIREFOX} from 'utilities/constants';
 
 export default class Scroller extends Module {
 	constructor(...args) {
@@ -27,7 +28,7 @@ export default class Scroller extends Module {
 		this.settings.add('chat.scroller.freeze', {
 			default: 0,
 			ui: {
-				path: 'Chat > Behavior >> General',
+				path: 'Chat > Behavior >> Scrolling @{"description": "Please note that FrankerFaceZ is dependant on Twitch\'s own scrolling code working correctly. There are bugs with Twitch\'s scrolling code that have existed for more than six months. If you are using Firefox, Edge, or other non-Webkit browsers, expect to have issues."}',
 				title: 'Freeze Chat Scrolling',
 				description: 'Automatically stop chat from scrolling when moving the mouse over it or holding a key.',
 				component: 'setting-select-box',
@@ -49,7 +50,7 @@ export default class Scroller extends Module {
 		this.settings.add('chat.scroller.smooth-scroll', {
 			default: 0,
 			ui: {
-				path: 'Chat > Behavior >> General',
+				path: 'Chat > Behavior >> Scrolling',
 				title: 'Smooth Scrolling',
 				description: 'Smoothly slide new chat messages into view. Speed will increase as necessary to keep up with chat.',
 				component: 'setting-select-box',

src/sites/twitch-twilight/styles/main_menu.scss

@@ -17,7 +17,11 @@
 		}
 
 		&.faded {
-			opacity: 0.5
+			opacity: 0.5;
+
+			&:hover {
+				opacity: 0.75;
+			}
 		}
 	}
 

src/utilities/constants.js

@@ -77,5 +77,6 @@ export const WS_CLUSTERS = {
 export const IS_OSX = navigator.platform ? navigator.platform.indexOf('Mac') !== -1 : /OS X/.test(navigator.userAgent);
 export const IS_WIN = navigator.platform ? navigator.platform.indexOf('Win') !== -1 : /Windows/.test(navigator.userAgent);
 export const IS_WEBKIT = navigator.userAgent.indexOf('AppleWebKit/') !== -1 && navigator.userAgent.indexOf('Edge/') === -1;
+export const IS_FIREFOX = navigator.userAgent.indexOf('Firefox/') !== -1;
 
 export const WEBKIT_CSS = IS_WEBKIT ? '-webkit-' : '';

src/utilities/module.js

@@ -458,6 +458,62 @@ export class Module extends EventEmitter {
 	}
 
 
+	injectAs(variable, name, module, require = true) {
+		if ( name instanceof Module || name.prototype instanceof Module ) {
+			require = module != null ? module : true;
+			module = name;
+			name = null;
+		}
+
+		const requires = this.requires = this.__get_requires() || [];
+
+		if ( module instanceof Module ) {
+			// Existing Instance
+			if ( ! name )
+				name = module.constructor.name.toSnakeCase();
+
+		} else if ( module && module.prototype instanceof Module ) {
+			// New Instance
+			if ( ! name )
+				name = module.name.toSnakeCase();
+
+			module = this.register(name, module);
+
+		} else if ( name ) {
+			// Just a Name
+			const full_name = name;
+			name = name.replace(/^(?:[^.]*\.)+/, '');
+			module = this.resolve(full_name);
+
+			// Allow injecting a module that doesn't exist yet?
+
+			if ( ! module || !(module instanceof Module) ) {
+				if ( module )
+					module[2].push([this.__path, variable]);
+				else
+					this.__modules[this.abs_path(full_name)] = [[], [], [[this.__path, variable]]]
+
+				requires.push(this.abs_path(full_name));
+
+				return this[variable] = null;
+			}
+
+		} else
+			throw new TypeError(`must provide a valid module name or class`);
+
+		if ( ! module )
+			throw new Error(`cannot find module ${name} or no module provided`);
+
+		if ( require )
+			requires.push(module.abs_path('.'));
+
+		if ( this.enabled && ! module.enabled )
+			module.enable();
+
+		return this[variable] = module;
+	}
+
+
 	register(name, module, inject_reference) {
 		if ( name.prototype instanceof Module ) {
 			inject_reference = module;