Add getEmotes method to chat.emotes. Remove emoji mentions from chat.emotes because that'll have its own module as chat.emoji. Fix bug with Room objects changing their login if FFZ's server has outdated name info. Use getEmotes in emote tokenization. Move channel bar Apollo modifiers into the channel bar module. Rename CHAT_TYPES variable to use proper casing. Add touchmove handler to scroller for people with touchscreens. Fix spacing under the player in theatre mode with whispers disabled. Add navigate method to FineRouter.

changelog.html

@@ -1,3 +1,10 @@
+<div class="list-header">4.0.0-beta1.3<span>@da5b35d5323e5151e3ea</span> <time datetime="2017-11-22">(2017-11-22)</time></div>
+<ul class="chat-menu-content menu-side-padding">
+	<li>Fixed: Add a touch scroll event handler for chat scrolling, as Twitch left that out for some reason.</li>
+	<li>Fixed: Don't use the user login from the FFZ API unless we don't already have the login for a room.</li>
+	<li>Fixed: Don't leave a gap under the player in theatre mode when whispers are hidden.</li>
+</ul>
+
 <div class="list-header">4.0.0-beta1.3<span>@1ee69894e169e3173e19</span> <time datetime="2017-11-20">(2017-11-20)</time></div>
 <ul class="chat-menu-content menu-side-padding">
 	<li>Fixed: Twitch removed the current route from the output of <code>store.getState()</code>, causing loading issues with FFZ enabled.</li>

src/modules/chat/emotes.js

@@ -86,7 +86,6 @@ export default class Emotes extends Module {
 		}
 
 		this.loadGlobalSets();
-		this.loadEmojiData();
 		this.loadTwitchInventory();
 	}
 
@@ -110,6 +109,17 @@ export default class Emotes extends Module {
 			.map(set_id => this.emote_sets[set_id]);
 	}
 
+	getEmotes(user_id, user_login, room_id, room_login) {
+		const emotes = {};
+		for(const emote_set of this.getSets(user_id, user_login, room_id, room_login))
+			if ( emote_set && emote_set.emotes )
+				for(const emote of Object.values(emote_set.emotes) )
+					if ( emote && ! has(emotes, emote.name) )
+						emotes[emote.name] = emote;
+
+		return emotes;
+	}
+
 	// ========================================================================
 	// FFZ Emote Sets
 	// ========================================================================
@@ -267,15 +277,6 @@ export default class Emotes extends Module {
 	}
 
 
-	// ========================================================================
-	// Emoji
-	// ========================================================================
-
-	loadEmojiData() {
-		this.log.debug('Unimplemented: loadEmojiData');
-	}
-
-
 	// ========================================================================
 	// Twitch Data Lookup
 	// ========================================================================
@@ -304,8 +305,6 @@ export default class Emotes extends Module {
 			return;
 		}
 
-
-
 		this.twitch_inventory_sets = data.emoticon_sets ? Object.keys(data.emoticon_sets) : [];
 		this.log.info('Twitch Inventory Sets:', this.twitch_inventory_sets);
 	}

src/modules/chat/room.js

@@ -137,7 +137,11 @@ export default class Room extends EventEmitter {
 			return false;
 		}
 
+		if ( ! this.login )
 			this.login = d.id;
+		else if ( this.login !== d.id )
+			this.manager.log.warn(`Login mismatch for room ${this.id}:${this.login}. Got "${d.id}" from FFZ's API.`);
+
 		this.data = d;
 
 		if ( d.set )

src/modules/chat/tokenizers.js

@@ -549,27 +549,17 @@ export const AddonEmotes = {
 		if ( ! tokens || ! tokens.length )
 			return tokens;
 
-		const applicable_sets = this.emotes.getSets(
+		const emotes = this.emotes.getEmotes(
 				msg.user.userID,
 				msg.user.userLogin,
 				msg.roomID,
 				msg.roomLogin
 			),
-			emotes = {},
 			out = [];
 
-		if ( ! applicable_sets || ! applicable_sets.length )
+		if ( ! emotes )
 			return tokens;
 
-		for(const emote_set of applicable_sets)
-			if ( emote_set && emote_set.emotes )
-				for(const emote_id in emote_set.emotes ) { // eslint-disable-line guard-for-in
-					const emote = emote_set.emotes[emote_id];
-					if ( ! has(emotes, emote.name) )
-						emotes[emote.name] = emote;
-				}
-
-
 		let last_token, emote;
 		for(const token of tokens) {
 			if ( ! token )
@@ -600,7 +590,7 @@ export const AddonEmotes = {
 
 					if ( text.length ) {
 						// We have pending text. Join it together, with an extra space.
-						const t = {type: 'text', text: text.join(' ') + ' '};
+						const t = {type: 'text', text: `${text.join(' ')} `};
 						out.push(t);
 						if ( t.text.trim().length )
 							last_token = t;

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

@@ -5,7 +5,7 @@
 // ============================================================================
 
 import Module from 'utilities/module';
-import {sanitize, createElement as e} from 'utilities/dom';
+import {deep_copy} from 'utilities/object';
 
 export default class ChannelBar extends Module {
 	constructor(...args) {
@@ -14,9 +14,28 @@ export default class ChannelBar extends Module {
 		this.should_enable = true;
 
 		this.inject('site.fine');
+		this.inject('site.apollo');
 		this.inject('metadata');
 
 
+		this.apollo.registerModifier('ChannelPage_ChannelInfoBar_User', `query {
+			user {
+				stream {
+					createdAt
+					type
+				}
+			}
+		}`);
+
+		this.apollo.registerModifier('ChannelPage_ChannelInfoBar_User', data => {
+			const u = data && data.data && data.data.user;
+			if ( u ) {
+				const o = u.profileViewCount = new Number(u.profileViewCount || 0);
+				o.data = deep_copy(u);
+			}
+		}, false);
+
+
 		this.ChannelBar = this.fine.define(
 			'channel-bar',
 			n => n.getTitle && n.getGame && n.renderGame

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

@@ -16,7 +16,7 @@ import SettingsMenu from './settings_menu';
 //import EmoteMenu from './emote_menu';
 
 
-const ChatTypes = (e => {
+const CHAT_TYPES = (e => {
 	e[e.Post = 0] = 'Post';
 	e[e.Action = 1] = 'Action';
 	e[e.PostWithMention = 2] = 'PostWithMention';
@@ -275,11 +275,11 @@ export default class ChatHook extends Module {
 	onEnable() {
 		this.on('site.web_munch:loaded', () => {
 			const ct = this.web_munch.getModule('chat-types');
-			this.chatTypes = ct && ct.a || ChatTypes;
+			this.chat_types = ct && ct.a || CHAT_TYPES;
 		})
 
 		const ct = this.web_munch.getModule('chat-types');
-		this.chatTypes = ct && ct.a || ChatTypes;
+		this.chat_types = ct && ct.a || CHAT_TYPES;
 
 		this.chat.context.on('changed:chat.width', this.updateChatCSS, this);
 		this.chat.context.on('changed:chat.font-size', this.updateChatCSS, this);
@@ -364,7 +364,7 @@ export default class ChatHook extends Module {
 		cls.prototype.toArray = function() {
 			const buf = this.buffer,
 				size = t.chat.context.get('chat.scrollback-length'),
-				ct = t.chatTypes || ChatTypes,
+				ct = t.chat_types || CHAT_TYPES,
 				target = buf.length - size;
 
 			if ( target > 0 ) {

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

@@ -53,7 +53,7 @@ export default class ChatLine extends Module {
 
 
 			cls.prototype.render = function() {
-				const types = t.parent.chatTypes || {},
+				const types = t.parent.chat_types || {},
 
 					msg = this.props.message,
 					is_action = msg.type === types.Action,

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

@@ -183,6 +183,14 @@ export default class Scroller extends Module {
 					if ( e.type === 'mousedown' && t.ffz_frozen )
 						return;
 
+					if ( t.scroll && e.type === 'touchmove' ) {
+						t.scroll.scrollContent.scrollHeight - t.scroll.scrollContent.scrollTop - t.scroll.scrollContent.offsetHeight <= 10 ? t.setState({
+							isAutoScrolling: !0
+						}) : t.setState({
+							isAutoScrolling: !1
+						})
+					}
+
 					return t._ffz_handleScroll(e);
 				}
 
@@ -190,6 +198,7 @@ export default class Scroller extends Module {
 				if ( scroller ) {
 					scroller.removeEventListener('mousedown', this._ffz_handleScroll);
 					scroller.addEventListener('mousedown', this.handleScrollEvent);
+					scroller.addEventListener('touchmove', this.handleScrollEvent);
 				}
 			}
 

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

@@ -33,7 +33,7 @@ export default class SettingsMenu extends Module {
 
 		const e = React.createElement;
 
-		this.SettingsMenu.ready((cls, instances) => {
+		this.SettingsMenu.ready(cls => {
 			const old_universal = cls.prototype.renderUniversalOptions;
 
 			cls.prototype.renderUniversalOptions = function() {

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

@@ -43,6 +43,14 @@ export default class Player extends Module {
 
 		this.settings.add('player.theatre.no-whispers', {
 			default: false,
+			requires: ['whispers.show'],
+			process(ctx, val) {
+				if ( ! ctx.get('whispers.show') )
+					return true;
+
+				return val;
+			},
+
 			ui: {
 				path: 'Channel > Player >> Theatre Mode',
 				title: 'Hide whispers when Theatre Mode is enabled.',

src/utilities/compat/apollo.js

@@ -6,7 +6,7 @@
 // ============================================================================
 
 import Module from 'utilities/module';
-import {has, get, deep_copy} from 'utilities/object';
+import {has, get} from 'utilities/object';
 
 export default class Apollo extends Module {
 	constructor(...args) {
@@ -18,24 +18,6 @@ export default class Apollo extends Module {
 		this.inject('..web_munch');
 		this.inject('..fine');
 
-		this.registerModifier('ChannelPage_ChannelInfoBar_User', `query {
-	user {
-		stream {
-			createdAt
-			type
-		}
-	}
-}`);
-
-		this.registerModifier('ChannelPage_ChannelInfoBar_User', data => {
-			const u = data && data.data && data.data.user;
-			if ( u ) {
-				const o = u.profileViewCount = new Number(u.profileViewCount || 0);
-				o.data = deep_copy(u);
-			}
-		}, false);
-
-
 		this.registerModifier('FollowedIndex_CurrentUser', `query {
 	currentUser {
 		followedLiveUsers {

src/utilities/compat/fine-router.js

@@ -25,7 +25,7 @@ export default class FineRouter extends Module {
 		const root = this.fine.getParent(this.fine.react),
 			ctx = this.context = root && root._context,
 			router = ctx && ctx.router,
-			history = router && router.history;
+			history = this.history = router && router.history;
 
 		if ( ! history )
 			return new Promise(r => setTimeout(r, 50)).then(() => this.onEnable());
@@ -38,6 +38,15 @@ export default class FineRouter extends Module {
 		this._navigateTo(history.location);
 	}
 
+	navigate(route, data, opts) {
+		const r = this.routes[route];
+		if ( ! r )
+			throw new Error(`unable to find route "${route}"`);
+
+		const url = r.url(data, opts);
+		this.history.push(url);
+	}
+
 	_navigateTo(location) {
 		this.log.debug('New Location', location);
 		const path = location.pathname;