Make changes to how forceUpdate() is called to hopefully reduce errors with React being stupid and not understanding how the DOM works. Also don't display an empty message for a resub with no attached message.

changelog.html

@@ -1,3 +1,14 @@
+<div class="list-header">4.0.0-beta1.6<span>@5442f1e095968e230f60</span> <time datetime="2018-03-01">(2018-03-01)</time></div>
+<ul class="chat-menu-content menu-side-padding">
+	<li>Fixed: Stop displaying empty messages with resub notices that don't have a message.</li>
+	<li>Changed: Make adjustments to timing and how errors are handled when forcing React components to update to hopefully resolve an impossible to reproduce issue with chat disappearing.</li>
+</ul>
+
+<div class="list-header">4.0.0-beta1.6<span>@e9ed380d87da80b42502</span> <time datetime="2018-02-28">(2018-02-28)</time></div>
+<ul class="chat-menu-content menu-side-padding">
+	<li>Changed: Update setting that hides pinned cheers for the new Top Cheerers leaderboards.</li>
+</ul>
+
 <div class="list-header">4.0.0-beta1.6<span>@1d563b0f42b9912f8494</span> <time datetime="2018-02-28">(2018-02-28)</time></div>
 <ul class="chat-menu-content menu-side-padding">
 	<li>Added: Prime Reminder! Display a crown on subscription buttons when your free channel sub with Prime is available.</li>

src/modules/chat/index.js

@@ -435,6 +435,9 @@ export default class Chat extends Module {
 		if ( msg.sender && ! msg.user )
 			msg.user = msg.sender;
 
+		if ( ! msg.message )
+			return [];
+
 		let tokens = [{type: 'text', text: msg.message}];
 		if ( ! tokens[0].text )
 			return tokens;

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

@@ -177,8 +177,8 @@ export default class ChatHook extends Module {
 		this.settings.add('chat.bits.show-pinned', {
 			default: true,
 			ui: {
-				path: 'Chat > Bits and Cheering >> Pinned Cheers',
-				title: 'Display Pinned Cheer',
+				path: 'Chat > Bits and Cheering >> Appearance',
+				title: 'Display Top Cheerers',
 
 				component: 'setting-check-box'
 			}
@@ -514,9 +514,7 @@ export default class ChatHook extends Module {
 
 
 	updateChatLines() {
-		for(const inst of this.PinnedCheer.instances)
-			inst.forceUpdate();
-
+		this.PinnedCheer.forceUpdate();
 		this.chat_line.updateLines();
 	}
 

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

@@ -100,7 +100,7 @@ export default class ChatLine extends Module {
 				const tokens = msg.ffz_tokens = msg.ffz_tokens || t.chat.tokenizeMessage(msg, {login: this.props.currentUserLogin, display: this.props.currentUserDisplayName});
 
 				let cls = 'chat-line__message',
-					out = tokens.length ? [
+					out = (tokens.length || ! msg.ffz_type) ? [
 						this.props.showTimestamps && e('span', {
 							className: 'chat-line__timestamp'
 						}, t.chat.formatTime(msg.timestamp)),
@@ -212,8 +212,9 @@ export default class ChatLine extends Module {
 				}, out);
 			}
 
-			for(const inst of instances)
-				inst.forceUpdate();
+			// Do this after a short delay to hopefully reduce the chance of React
+			// freaking out on us.
+			setTimeout(() => this.ChatLine.forceUpdate());
 		})
 	}
 
@@ -223,9 +224,9 @@ export default class ChatLine extends Module {
 			const msg = inst.props.message;
 			if ( msg )
 				msg.ffz_tokens = null;
-
-			inst.forceUpdate();
 		}
+
+		this.ChatLine.forceUpdate();
 	}
 }
 

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

@@ -20,7 +20,7 @@ const CLASSES = {
 	'player-ext': '.player-extensions',
 	'player-ext-hover': '.player[data-controls="false"] .player-extensions',
 
-	'pinned-cheer': '.pinned-cheer',
+	'pinned-cheer': '.pinned-cheer,.pinned-cheer-v2',
 	'whispers': '.whispers',
 
 	'dir-live-ind': '.live-channel-card:not([data-a-target*="host"]) .stream-type-indicator.stream-type-indicator--live',

src/utilities/compat/fine.js

@@ -504,7 +504,11 @@ export class FineWrapper extends EventEmitter {
 
 	forceUpdate() {
 		for(const inst of this.instances)
-			inst.forceUpdate();
+			try {
+				inst.forceUpdate();
+			} catch(err) {
+				this.fine.log.error(`An error occured when calling forceUpdate on an instance of ${this.name}`, err);
+			}
 	}