4.19.10

* Fixed: The chat input field resizing when a different font size has been set. This is a Twitch bug, but I'm tired of users reporting it so FFZ will temporarily fix it until Twitch patches it themselves.
* Fixed: Highlighting messages when viewer cards are not open no longer working. Note: They still don't work in the Mod View, which is coded in a way that makes it harder to work with.
* Fixed: Appearance of the tool-tip for the FFZ Control Center button.
* Fixed: Player volume not saving correctly when using the mouse wheel to adjust volume, causing it to suddenly return to incorrect values in certain cases.
* Fixed: The Picture-in-Picture and Reset Player buttons appearing in the wrong location when using the Mod View.
* Changed: Updated strings for several settings to be less confusing, and added a disclaimer to Directory settings that they are currently broken due to changes Twitch made to how the directory functions.

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "frankerfacez",
-  "version": "4.17.11",
+  "version": "4.19.9",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

package.json

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

src/modules/chat/index.js

@@ -192,7 +192,7 @@ export default class Chat extends Module {
 			default: 1,
 			ui: {
 				path: 'Chat > Behavior >> Deleted Messages',
-				title: 'Deleted Message Style',
+				title: 'Detailed Message Style',
 				description: 'This style will be applied to deleted messages showed in Detailed rendering mode to differentiate them from normal chat messages.',
 				component: 'setting-select-box',
 				data: [
@@ -208,8 +208,9 @@ export default class Chat extends Module {
 			default: false,
 			ui: {
 				path: 'Chat > Behavior >> Deleted Messages',
+				sort: -1,
 				title: 'Rendering Mode',
-				description: 'This, when set, overrides the mode selected in Twitch chat settings. We do this to allow non-moderators access to the setting.',
+				description: 'This, when set, overrides the `Deleted Messages` mode selected in Twitch chat settings, which is normally only accessible for moderators. Brief hides messages entirely and shows a notice in chat that a number of messages were hidden. Detailed shows the contents of the message. Legacy shows `<message deleted>` with click to reveal.',
 				component: 'setting-select-box',
 				data: [
 					{value: false, title: 'Do Not Override'},

src/sites/twitch-twilight/modules/chat/input.jsx

@@ -267,7 +267,27 @@ export default class Input extends Module {
 		const t = this;
 
 		const originalOnKeyDown = inst.onKeyDown,
-			originalOnMessageSend = inst.onMessageSend;
+			originalOnMessageSend = inst.onMessageSend,
+			old_resize = inst.resizeInput;
+
+		inst.resizeInput = function(msg) {
+			if ( msg ) {
+				if ( inst.chatInputRef ) {
+					const style = getComputedStyle(inst.chatInputRef),
+						height = style && parseFloat(style.lineHeight || 18) || 18,
+						t = height * 1 + 20,
+						i = Math.ceil((inst.chatInputRef.scrollHeight - t) / height),
+						a = Math.min(1 + i, 4);
+
+					inst.setState({
+						numInputRows: a
+					});
+				}
+			} else
+				inst.setState({
+					numInputRows: 1
+				});
+		}
 
 		inst.messageHistory = [];
 		inst.tempInput = '';

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

@@ -38,7 +38,7 @@ export default class Scroller extends Module {
 			ui: {
 				path: 'Chat > Behavior >> Scrolling',
 				title: 'Pause Chat Scrolling',
-				description: 'Automatically stop chat from scrolling when moving the mouse over it or holding a key.',
+				description: 'Automatically stop chat from scrolling when moving the mouse over it or holding a key.\n\n**Note:** Scrolling up in chat will always prevent automatic scrolling, regardless of this setting.',
 				component: 'setting-select-box',
 				data: [
 					{value: 0, title: 'Disabled'},

src/sites/twitch-twilight/modules/chat/viewer_card.jsx

@@ -45,7 +45,7 @@ export default class ViewerCards extends Module {
 
 		this.ViewerCard = this.fine.define(
 			'chat-viewer-card',
-			n => n.toggleGiftPage && n.onWhisperButtonClick
+			n => n.trackViewerCardOpen && n.onWhisperButtonClick
 		);
 	}
 

src/sites/twitch-twilight/modules/directory/following.jsx

@@ -34,7 +34,7 @@ export default class Following extends SiteModule {
 			default: true,
 
 			ui: {
-				path: 'Directory > Following >> Hosts',
+				path: 'Directory > Following @{"description": "**Note:** These settings do not currently work due to changes made by Twitch to how the directory works."} >> Hosts',
 				title: 'Group Hosts',
 				description: 'Only show a given hosted channel once in the directory.',
 				component: 'setting-check-box'

src/sites/twitch-twilight/modules/directory/index.jsx

@@ -75,7 +75,7 @@ export default class Directory extends SiteModule {
 			default: 1,
 
 			ui: {
-				path: 'Directory > Channels >> Appearance',
+				path: 'Directory > Channels @{"description": "**Note:** These settings do not currently work due to changes made by Twitch to how the directory works."} >> Appearance',
 				title: 'Stream Uptime',
 				description: 'Display the stream uptime on the channel cards.',
 				component: 'setting-select-box',

src/sites/twitch-twilight/modules/menu_button.jsx

@@ -304,7 +304,7 @@ export default class MenuButton extends SiteModule {
 						</span>
 					</div>
 				</button>)}
-				{this.has_error && (<div class={`tw-absolute tw-balloon tw-balloon--lg tw-block ${is_mod ? 'tw-balloon--up tw-balloon--left' : 'tw-balloon--down tw-balloon--right'}`}>
+				{this.has_error && (<div class={`tw-absolute tw-balloon tw-balloon--lg tw-block ${is_mod ? 'tw-tooltip--up tw-tooltip--align-left' : 'tw-tooltip--down tw-tooltip--align-right'}`}>
 					<div class="tw-border-radius-large tw-c-background-base tw-c-text-inherit tw-elevation-4 tw-pd-1">
 						<div class="tw-flex tw-align-items-center">
 							<div class="tw-flex-grow-1">
@@ -321,7 +321,7 @@ export default class MenuButton extends SiteModule {
 						</div>
 					</div>
 				</div>)}
-				{! this.has_error && (<div class={`tw-tooltip ${is_mod ? 'tw-balloon--up tw-balloon--left' : 'tw-balloon--down tw-balloon--right'}`}>
+				{! this.has_error && (<div class={`tw-tooltip ${is_mod ? 'tw-tooltip--up tw-tooltip--align-left' : 'tw-tooltip--down tw-tooltip--align-right'}`}>
 					{this.i18n.t('site.menu_button', 'FrankerFaceZ Control Center')}
 					{this.has_update && (<div class="tw-mg-t-1">
 						{this.i18n.t('site.menu_button.update-desc', 'There is an update available. Please refresh your page.')}

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

@@ -714,17 +714,23 @@ export default class Player extends Module {
 					return;
 
 				const delta = event.wheelDelta || -(event.deltaY || event.detail || 0),
-					player = this.props?.mediaPlayerInstance;
+					player = this.props?.mediaPlayerInstance,
+					video = player?.mediaSinkManager?.video;
 
 				if ( ! player?.getVolume )
 					return;
 
 				const amount = t.settings.get('player.volume-scroll-steps'),
-					volume = Math.max(0, Math.min(1, player.getVolume() + (delta > 0 ? amount : -amount)));
+					old_volume = video?.volume ?? player.getVolume(),
+					volume = Math.max(0, Math.min(1, old_volume + (delta > 0 ? amount : -amount)));
 
 				player.setVolume(volume);
-				if ( volume !== 0 )
+				localStorage.volume = volume;
+
+				if ( volume !== 0 ) {
 					player.setMuted(false);
+					localStorage.setItem('video-muted', JSON.stringify({default: false}));
+				}
 
 				event.preventDefault();
 				return false;
@@ -1183,7 +1189,10 @@ export default class Player extends Module {
 				{tip = (<div class="tw-tooltip tw-tooltip--align-right tw-tooltip--up" role="tooltip" />)}
 			</div>);
 
-			const thing = container.querySelector('button[data-a-target="player-theatre-mode-button"]');
+			let thing = container.querySelector('button[data-a-target="player-theatre-mode-button"]');
+			if ( ! thing )
+					thing = container.querySelector('button[data-a-target="player-fullscreen-button"]');
+
 			if ( thing ) {
 				container.insertBefore(cont, thing.parentElement);
 			} else
@@ -1283,7 +1292,7 @@ export default class Player extends Module {
 				{tip = (<div class="tw-tooltip tw-tooltip--align-right tw-tooltip--up" role="tooltip" />)}
 			</div>);
 
-			const thing = container.querySelector('.ffz--player-pip button') || container.querySelector('button[data-a-target="player-theatre-mode-button"]');
+			const thing = container.querySelector('.ffz--player-pip button') || container.querySelector('button[data-a-target="player-theatre-mode-button"]') || container.querySelector('button[data-a-target="player-fullscreen-button"]');
 			if ( thing ) {
 				container.insertBefore(cont, thing.parentElement);
 			} else
@@ -1407,6 +1416,9 @@ export default class Player extends Module {
 			setTimeout(() => {
 				player.setVolume(vol);
 				player.setMuted(muted);
+
+				//localStorage.volume = vol;
+				//localStorage.setItem('video-muted', JSON.stringify({default: muted}));
 			}, 0);
 		}