4.28.4

* Fixed: Current channel detection, both on channel pages and on mod view. (Closes #1099)
* Fixed: Clicking the stream latency metadata not toggling the video stats display.
* Fixed: Portrait mode not correctly positioning page content, notably breaking portrait mode with chat on top.
* Fixed: Whisper messages not rendering correctly and logging error messages.
* Fixed: Clip messages not rendering correctly and logging error messages, on the clips subdomain.
* Fixed: Use `/3.0` URLs for Twitch's emote CDN rather than `/4.0` to prevent 404 errors. Kappa will look smaller to some users, but it's a price I'm willing to pay and entirely Twitch's fault anyways.
* Fixed: Volume control not being hidden when gain control has replaced the default volume control.

package.json

@@ -1,7 +1,7 @@
 {
   "name": "frankerfacez",
   "author": "Dan Salvato LLC",
-  "version": "4.28.3",
+  "version": "4.28.4",
   "description": "FrankerFaceZ is a Twitch enhancement suite.",
   "private": true,
   "license": "Apache-2.0",

src/modules/chat/index.js

@@ -1429,7 +1429,7 @@ export default class Chat extends Module {
 			offset = is_action ? 4 : 0,
 
 			out = msg._ffz_message = {
-				user: msg.from,
+				user: {...msg.from}, // Apollo seals this~
 				message: msg.content.slice(offset),
 				is_action,
 				ffz_emotes: emotes,

src/modules/metadata.jsx

@@ -407,6 +407,20 @@ export default class Metadata extends Module {
 			},
 
 			click() {
+				const Player = this.resolve('site.player'),
+					fine = this.resolve('site.fine'),
+					player = Player.Player?.first,
+					inst = fine && player && fine.searchTree(player, n => n.props?.setStatsOverlay, 200),
+					cont = inst && fine.getChildNode(player),
+					el = cont && cont.querySelector('[data-a-target="player-overlay-video-stats"]');
+
+				if ( ! inst )
+					return;
+
+				inst.props.setStatsOverlay(el ? 0 : 1);
+			},
+
+			/*click() {
 				const Player = this.resolve('site.player'),
 					ui = Player.playerUI;
 
@@ -414,7 +428,7 @@ export default class Metadata extends Module {
 					return;
 
 				ui.setStatsOverlay(ui.statsOverlay === 1 ? 0 : 1);
-			},
+			},*/
 
 			color(data) {
 				const setting = this.settings.get('metadata.stream-delay-warning');

src/sites/clips/line.jsx

@@ -26,6 +26,7 @@ export default class Line extends Module {
 		);
 
 		this.render = true;
+		this.messages = new WeakMap();
 
 		window.toggleLines = () => {
 			this.render = ! this.render;
@@ -126,7 +127,7 @@ export default class Line extends Module {
 			const msg = inst.props.node,
 				user = msg?.commentor;
 			if ( user && ((id && id == user.id) || (login && login == user.login)) ) {
-				msg._ffz_message = null;
+				this.messages.delete(msg);
 				inst.forceUpdate();
 			}
 		}
@@ -157,9 +158,7 @@ export default class Line extends Module {
 	_updateLines(clear_tokens = true, clear_badges = true) { // eslint-disable-line no-unused-vars
 		for(const inst of this.ChatLine.instances) {
 			const msg = inst.props.node;
-			// TODO: Selective state clear.
+			this.messages.delete(msg);
-			if ( msg?._ffz_message )
-				msg._ffz_message = null;
 		}
 
 		this.ChatLine.forceUpdate();
@@ -170,8 +169,8 @@ export default class Line extends Module {
 		if ( ! msg || ! msg.message )
 			return msg;
 
-		if ( msg._ffz_message )
+		if ( this.messages.has(msg) )
-			return msg._ffz_message;
+			return this.messages.get(msg);
 
 		const room = this.chat.getRoom(video.owner.id, null, true, true),
 			author = msg.commenter || {},
@@ -182,7 +181,7 @@ export default class Line extends Module {
 				if ( badge )
 					badges[badge.setID] = badge.version;
 
-		const out = msg._ffz_message = {
+		const out = {
 			user: {
 				color: author.chatColor,
 				id: author.id,
@@ -200,6 +199,8 @@ export default class Line extends Module {
 
 		this.detokenizeMessage(out, msg);
 
+		this.messages.set(msg, out);
+
 		return out;
 	}
 

src/sites/shared/player.jsx

@@ -995,9 +995,13 @@ export default class PlayerBase extends Module {
 					if ( document.pictureInPictureElement != null )
 						return false;
 
+					if ( this.settings.get('player.force-visible') )
+						return false;
+
 					return document.visibilityState === 'hidden';
 				}
 			});
+
 		} catch(err) {
 			this.log.warn('Unable to install document visibility hook.', err);
 		}

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

@@ -521,7 +521,9 @@ export default class Channel extends Module {
 			i=0;
 			while(state != null && channel == null && i < 50) {
 				state = state?.next;
-				channel = state?.memoizedState?.current?.previousData?.result?.data?.userOrError;
+				channel = state?.memoizedState?.current?.currentObservable?.lastResult?.data?.userOrError;
+				if ( ! channel )
+					channel = state?.memoizedState?.current?.previous?.result?.previousData?.userOrError;
 				i++;
 			}
 			node = node?.return;

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

@@ -28,10 +28,10 @@ const CLASSES = {
 
 	'prime-offers': '.top-nav__prime',
 
-	'player-gain-volume': '.video-player__overlay[data-compressed="true"] .volume-slider__slider-container:not(.ffz--player-gain)',
+	'player-gain-volume': '.video-player__container[data-compressed="true"] .volume-slider__slider-container:not(.ffz--player-gain)',
 
 	'player-ext': '.video-player .extension-taskbar,.video-player .extension-container,.video-player .extensions-dock__layout,.video-player .extensions-notifications,.video-player .extensions-video-overlay-size-container,.video-player .extensions-dock__layout',
-	'player-ext-hover': '.video-player__overlay[data-controls="false"] .extension-taskbar,.video-player__overlay[data-controls="false"] .extension-container,.video-player__overlay[data-controls="false"] .extensions-dock__layout,.video-player__overlay[data-controls="false"] .extensions-notifications,.video-player__overlay[data-controls="false"] .extensions-video-overlay-size-container',
+	'player-ext-hover': '.video-player__container[data-controls="false"] .extension-taskbar,.video-player__container[data-controls="false"] .extension-container,.video-player__container[data-controls="false"] .extensions-dock__layout,.video-player__container[data-controls="false"] .extensions-notifications,.video-player__container[data-controls="false"] .extensions-video-overlay-size-container',
 
 	'player-event-bar': '.channel-root .live-event-banner-ui__header',
 	'player-rerun-bar': '.channel-root__player-container div.tw-c-text-overlay:not([data-a-target="hosting-ui-header"])',

src/sites/twitch-twilight/modules/css_tweaks/styles/portrait.scss

@@ -4,7 +4,7 @@
 	--ffz-theater-height: calc(calc(100vw * 0.5625) + var(--ffz-portrait-extra-height));
 	--ffz-chat-height: calc(100vh - var(--ffz-player-height));
 
-	& > div:first-child > div[class^="sc"] {
+	& > div:first-child > div[class^="Layout-sc"] {
 		.ffz--portrait-invert & {
 			position: absolute;
 			left: 0;

src/sites/twitch-twilight/modules/mod-view.jsx

@@ -99,7 +99,10 @@ export default class ModView extends Module {
 			i = 0;
 			while(state != null && channel == null && i < 50) {
 				state = state?.next;
-				channel = state?.memoizedState?.current?.previousData?.result?.data?.user;
+				//channel = state?.memoizedState?.current?.previousData?.result?.data?.user;
+				channel = state?.memoizedState?.current?.currentObservable?.lastResult?.data?.user;
+				if ( ! channel )
+					channel = state?.memoizedState?.current?.previous?.result?.previousData?.user;
 				i++;
 			}
 			node = node?.child;

src/utilities/object.js

@@ -5,7 +5,7 @@ import {BAD_HOTKEYS, TWITCH_EMOTE_V2} from 'utilities/constants';
 const HOP = Object.prototype.hasOwnProperty;
 
 export function getTwitchEmoteURL(id, scale, animated = false, dark = true) {
-	return `${TWITCH_EMOTE_V2}/${id}/${animated ? 'default' : 'static'}/${dark ? 'dark' : 'light'}/${scale}.0`
+	return `${TWITCH_EMOTE_V2}/${id}/${animated ? 'default' : 'static'}/${dark ? 'dark' : 'light'}/${scale == 4 ? 3 : scale}.0`
 }
 
 export function getTwitchEmoteSrcSet(id, animated = false, dark = true, big = false) {