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)

fontello.config.json

@@ -703,6 +703,20 @@
       "search": [
         "eq-off-mini"
       ]
+    },
+    {
+      "uid": "a40ae65481bf77a9ad8bea62df45b93a",
+      "css": "viewers",
+      "code": 59456,
+      "src": "custom_icons",
+      "selected": true,
+      "svg": {
+        "path": "M250 350A250 250 0 1 1 559.6 592.8 100 100 0 0 0 650 650H700A150 150 0 0 1 850 800V900H750V800A50 50 0 0 0 700 750H650A199.5 199.5 0 0 1 500 682.3 199.5 199.5 0 0 1 350 750H300A50 50 0 0 0 250 800V900H150V800A150 150 0 0 1 300 650H350A100 100 0 0 0 440.4 592.8 250.1 250.1 0 0 1 250 350ZM500 500A150 150 0 1 1 500 200 150 150 0 0 1 500 500Z",
+        "width": 1000
+      },
+      "search": [
+        "viewers-saved"
+      ]
     }
   ]
 }

package.json

@@ -1,7 +1,7 @@
 {
   "name": "frankerfacez",
   "author": "Dan Salvato LLC",
-  "version": "4.20.5",
+  "version": "4.20.6",
   "description": "FrankerFaceZ is a Twitch enhancement suite.",
   "license": "Apache-2.0",
   "scripts": {

res/font/ffz-fontello.svg

@@ -134,6 +134,8 @@
 
 <glyph glyph-name="comp-off" unicode="&#xe83f;" d="M850 648c28 0 50-23 50-50v-493c0-28-22-50-50-50s-50 22-50 50v493c0 27 22 50 50 50z m-280 34c28 0 50-22 50-50v-562c0-28-22-50-50-50s-50 22-50 50v562c0 28 22 50 50 50z m140-96c28 0 50-23 50-50v-369c0-28-22-50-50-50s-50 22-50 50v369c0 27 22 50 50 50z m-280 166c28 0 50-22 50-50v-702c0-27-22-50-50-50s-50 23-50 50v702c0 28 22 50 50 50z m-140-119c28 0 50-22 50-50v-463c0-28-22-50-50-50s-50 22-50 50v463c0 28 22 50 50 50z m-140-83c28 0 50-22 50-50v-298c0-28-22-50-50-50s-50 22-50 50v298c0 28 22 50 50 50z" horiz-adv-x="1000" />
 
+<glyph glyph-name="viewers" unicode="&#xe840;" d="M250 500a250 250 0 1 0 310-243 100 100 0 0 1 90-57h50a150 150 0 0 0 150-150v-100h-100v100a50 50 0 0 1-50 50h-50a200 200 0 0 0-150 68 200 200 0 0 0-150-68h-50a50 50 0 0 1-50-50v-100h-100v100a150 150 0 0 0 150 150h50a100 100 0 0 1 90 57 250 250 0 0 0-190 243z m250-150a150 150 0 1 0 0 300 150 150 0 0 0 0-300z" horiz-adv-x="1000" />
+
 <glyph glyph-name="link-ext" unicode="&#xf08e;" d="M786 332v-178q0-67-47-114t-114-47h-464q-67 0-114 47t-47 114v464q0 66 47 113t114 48h393q7 0 12-5t5-13v-36q0-8-5-13t-12-5h-393q-37 0-63-26t-27-63v-464q0-37 27-63t63-27h464q37 0 63 27t26 63v178q0 8 5 13t13 5h36q8 0 13-5t5-13z m214 482v-285q0-15-11-25t-25-11-25 11l-98 98-364-364q-5-6-13-6t-12 6l-64 64q-6 5-6 12t6 13l364 364-98 98q-11 11-11 25t11 25 25 11h285q15 0 25-11t11-25z" horiz-adv-x="1000" />
 
 <glyph glyph-name="twitter" unicode="&#xf099;" d="M904 622q-37-54-90-93 0-8 0-23 0-73-21-145t-64-139-103-117-144-82-181-30q-151 0-276 81 19-2 43-2 126 0 224 77-59 1-105 36t-64 89q19-3 34-3 24 0 48 6-63 13-104 62t-41 115v2q38-21 82-23-37 25-59 64t-22 86q0 49 25 91 68-83 164-133t208-55q-5 21-5 41 0 75 53 127t127 53q79 0 132-57 61 12 115 44-21-64-80-100 52 6 104 28z" horiz-adv-x="928.6" />

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
+				} else {
-					return old_render.call(this);
+					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"
 ];

styles/fontello/ffz-fontello-codes.scss

@@ -63,6 +63,7 @@
 .ffz-i-fast-fw:before { content: '\e83d'; } /* '' */
 .ffz-i-comp-on:before { content: '\e83e'; } /* '' */
 .ffz-i-comp-off:before { content: '\e83f'; } /* '' */
+.ffz-i-viewers:before { content: '\e840'; } /* '' */
 .ffz-i-link-ext:before { content: '\f08e'; } /* '' */
 .ffz-i-twitter:before { content: '\f099'; } /* '' */
 .ffz-i-github:before { content: '\f09b'; } /* '' */

styles/fontello/ffz-fontello-ie7-codes.scss

@@ -63,6 +63,7 @@
 .ffz-i-fast-fw { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
 .ffz-i-comp-on { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
 .ffz-i-comp-off { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
+.ffz-i-viewers { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
 .ffz-i-link-ext { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
 .ffz-i-twitter { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
 .ffz-i-github { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }

styles/fontello/ffz-fontello-ie7.scss

@@ -74,6 +74,7 @@
 .ffz-i-fast-fw { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
 .ffz-i-comp-on { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
 .ffz-i-comp-off { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
+.ffz-i-viewers { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
 .ffz-i-link-ext { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
 .ffz-i-twitter { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
 .ffz-i-github { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }

styles/fontello/ffz-fontello.scss

@@ -1,11 +1,11 @@
 @font-face {
   font-family: 'ffz-fontello';
-  src: url('../font/ffz-fontello.eot?47364399');
+  src: url('../font/ffz-fontello.eot?75662346');
-  src: url('../font/ffz-fontello.eot?47364399#iefix') format('embedded-opentype'),
+  src: url('../font/ffz-fontello.eot?75662346#iefix') format('embedded-opentype'),
-       url('../font/ffz-fontello.woff2?47364399') format('woff2'),
+       url('../font/ffz-fontello.woff2?75662346') format('woff2'),
-       url('../font/ffz-fontello.woff?47364399') format('woff'),
+       url('../font/ffz-fontello.woff?75662346') format('woff'),
-       url('../font/ffz-fontello.ttf?47364399') format('truetype'),
+       url('../font/ffz-fontello.ttf?75662346') format('truetype'),
-       url('../font/ffz-fontello.svg?47364399#ffz-fontello') format('svg');
+       url('../font/ffz-fontello.svg?75662346#ffz-fontello') format('svg');
   font-weight: normal;
   font-style: normal;
 }
@@ -15,7 +15,7 @@
 @media screen and (-webkit-min-device-pixel-ratio:0) {
   @font-face {
     font-family: 'ffz-fontello';
-    src: url('../font/ffz-fontello.svg?47364399#ffz-fontello') format('svg');
+    src: url('../font/ffz-fontello.svg?75662346#ffz-fontello') format('svg');
   }
 }
 */
@@ -24,7 +24,7 @@
   font-family: "ffz-fontello";
   font-style: normal;
   font-weight: normal;
-  speak: none;
+  speak: never;
  
   display: inline-block;
   text-decoration: inherit;
@@ -119,6 +119,7 @@
 .ffz-i-fast-fw:before { content: '\e83d'; } /* '' */
 .ffz-i-comp-on:before { content: '\e83e'; } /* '' */
 .ffz-i-comp-off:before { content: '\e83f'; } /* '' */
+.ffz-i-viewers:before { content: '\e840'; } /* '' */
 .ffz-i-link-ext:before { content: '\f08e'; } /* '' */
 .ffz-i-twitter:before { content: '\f099'; } /* '' */
 .ffz-i-github:before { content: '\f09b'; } /* '' */