4.20.6

* Added: Settings for replacing the native Twitch viewer count with a custom display that doesn't animate when changing. (Closes #841)
* Fixed: Replace rendering for the Chat Paused footer so that we can render the correct text and disable mouse interaction when appropriate.
* Fixed: Hiding Recommended Channels causing the Online Friends section of the side navigation bar to disappear. (Closes #482)

src/modules/metadata.jsx

@@ -73,6 +73,46 @@ export default class Metadata extends Module {
 			changed: () => this.updateMetadata('uptime')
 		});
 
+		this.settings.add('metadata.viewers', {
+			default: false,
+
+			ui: {
+				path: 'Channel > Metadata >> Player',
+				title: 'Alternative Viewer Count',
+				description: "This displays the current channel's viewer count without an animation when it changes.",
+
+				component: 'setting-check-box'
+			},
+
+			changed: () => this.updateMetadata('viewers')
+		});
+
+
+		this.definitions.viewers = {
+
+			refresh() { return this.settings.get('metadata.viewers') },
+
+			setup(data) {
+				return data.getViewerCount();
+			},
+
+			order: 1,
+			icon: 'ffz-i-viewers',
+
+			label(data) {
+				if ( ! this.settings.get('metadata.viewers') )
+					return null;
+
+				return this.i18n.formatNumber(data)
+			},
+
+			tooltip() {
+				return this.i18n.t('metadata.viewers', 'Viewer Count');
+			},
+
+			color: 'var(--color-text-live)'
+		};
+
 
 		this.definitions.uptime = {
 			inherit: true,

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

@@ -204,6 +204,16 @@ export default class Channel extends Module {
 					display_name: props.hostDisplayName
 				},
 				el,
+				getViewerCount: () => {
+					const thing = el.querySelector('p[data-a-target="animated-channel-viewers-count"]'),
+						r = thing && this.fine.getReactInstance(thing),
+						p = r?.memoizedProps?.children?.props;
+
+					if ( p && p.value != null )
+						return p.value;
+
+					return 0;
+				},
 				getBroadcastID: () => this.getBroadcastID(el, props.channelID)
 			};
 

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

@@ -224,8 +224,19 @@ export default class Scroller extends Module {
 						}, createElement('span', {className: 'tw-button__text'}, 'Try Again'))
 					]);
 
-				} else
-					return old_render.call(this);
+				} else {
+					const out = old_render.call(this);
+
+					try {
+						const children = out?.props?.children?.props?.children,
+							child = children?.[2];
+
+						if ( child?.type?.displayName === 'ChatScrollFooter' )
+							children[2] = this.ffzRenderFooter();
+					} catch(err) { /* no-op */ }
+
+					return out;
+				}
 			}
 
 			cls.prototype.ffzInstallHandler = function() {
@@ -574,7 +585,7 @@ export default class Scroller extends Module {
 					});
 			}
 
-			cls.prototype.listFooter = function() {
+			cls.prototype.ffzRenderFooter = function() {
 				let msg, cls = '';
 				if ( this.state.isPaused ) {
 					const f = t.pause,
@@ -592,14 +603,30 @@ export default class Scroller extends Module {
 					cls = 'ffz--freeze-indicator';
 
 				} else if ( this.state.isAutoScrolling )
-					return null;
+					return createElement('div', {
+						className: `chat-scroll-footer__placeholder tw-flex tw-justify-content-center tw-relative ${cls}`
+					}, null);
 				else
 					msg = t.i18n.t('chat.messages-below', 'Chat Paused Due to Scroll');
 
 				return createElement('div', {
+					className: `chat-scroll-footer__placeholder tw-flex tw-justify-content-center tw-relative ${cls}`
+				}, createElement('div', {
+					className: 'tw-absolute tw-border-radius-medium tw-bottom-0 tw-c-background-overlay tw-c-text-overlay tw-mg-b-1'
+				}, createElement('button', {
+					className: 'tw-align-items-center tw-align-middle tw-border-bottom-left-radius-medium tw-border-bottom-right-radius-medium tw-border-top-left-radius-medium tw-border-top-right-radius-medium tw-core-button tw-core-button--overlay tw-core-button--text tw-inline-flex tw-interactive tw-justify-content-center tw-overflow-hidden tw-relative',
+					'data-a-target': 'chat-list-footer',
+					onClick: this.ffzFastResume
+				}, createElement('div', {
+					className: 'tw-align-items-center tw-core-button-label tw-flex tw-flex-grow-0'
+				}, createElement('div', {
+					className: 'tw-flex-grow-0'
+				}, msg)))));
+
+				/*return createElement('div', {
 					className: `chat-list__list-footer tw-absolute tw-align-items-center tw-border-radius-medium tw-bottom-0 tw-flex tw-justify-content-center tw-mg-b-1 tw-pd-x-2 tw-pd-y-05 ${cls}`,
 					onClick: this.ffzFastResume
-				}, createElement('div', null, msg));
+				}, createElement('div', null, msg));*/
 
 				/*return createElement('div', {
 					className: `chat-list__list-footer tw-absolute tw-align-items-center tw-border-radius-medium tw-bottom-0 tw-flex tw-full-width tw-justify-content-center tw-pd-05 ${cls}`,

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

@@ -13,11 +13,11 @@ const STYLE_VALIDATOR = document.createElement('span');
 const CLASSES = {
 	'top-discover': '.navigation-link[data-a-target="discover-link"]',
 	'side-nav': '.side-nav',
-	'side-rec-channels': '.side-nav .recommended-channels,.side-nav .side-nav-section + .side-nav-section',
+	'side-rec-channels': '.side-nav .recommended-channels,.side-nav .side-nav-section + .side-nav-section:not(.online-friends)',
 	//'side-rec-friends': '.side-nav .recommended-friends',
 	'side-friends': '.side-nav .online-friends',
 	'side-closed-friends': '.side-nav--collapsed .online-friends',
-	'side-closed-rec-channels': '.side-nav--collapsed .recommended-channels,.side-nav--collapsed .side-nav-section + .side-nav-section',
+	'side-closed-rec-channels': '.side-nav--collapsed .recommended-channels,.side-nav--collapsed .side-nav-section + .side-nav-section:not(.online-friends)',
 	'side-offline-channels': '.side-nav-card.ffz--offline-side-nav',
 	'side-rerun-channels': '.side-nav .ffz--side-nav-card-rerun',
 
@@ -60,6 +60,21 @@ export default class CSSTweaks extends Module {
 
 		// Layout
 
+		this.settings.add('metadata.viewers.no-native', {
+			requires: ['metadata.viewers'],
+			default: null,
+			process(ctx, val) {
+				return val == null ? ctx.get('metadata.viewers') : val
+			},
+			changed: val => this.toggle('hide-native-viewers', val),
+			ui: {
+				path: 'Channel > Metadata >> Player',
+				title: "Hide Twitch's native Viewer Count.",
+				description: "By default, this is enabled whenever FFZ's own Viewer Count display is enabled to avoid redundant information.",
+				component: 'setting-check-box'
+			}
+		});
+
 		this.settings.add('metadata.uptime.no-native', {
 			requires: ['metadata.uptime'],
 			default: null,
@@ -344,6 +359,7 @@ export default class CSSTweaks extends Module {
 
 	onEnable() {
 		this.toggle('hide-native-uptime', this.settings.get('metadata.uptime.no-native'));
+		this.toggle('hide-native-viewers', this.settings.get('metadata.viewers.no-native'));
 		this.toggle('chat-fix', this.settings.get('layout.use-chat-fix'));
 		this.toggle('swap-sidebars', this.settings.get('layout.swap-sidebars'));
 		this.toggle('minimal-navigation', this.settings.get('layout.minimal-navigation'));

src/utilities/ffz-icons.js

@@ -93,5 +93,6 @@ export default [
 	"channel-points",
 	"fast-fw",
 	"comp-on",
-	"comp-off"
+	"comp-off",
+	"viewers"
 ];