4.0.0-rc12.5

* Added: Toggle the Player Stats pop-up when you click on the stream latency metadata tag.
* Fixed: Bug where the chat would not appear at full width when combining portrait mode, theater mode, and swap sidebars.

src/main.js

@@ -100,7 +100,7 @@ class FrankerFaceZ extends Module {
 FrankerFaceZ.Logger = Logger;
 
 const VER = FrankerFaceZ.version_info = {
-	major: 4, minor: 0, revision: 0, extra: '-rc12.4',
+	major: 4, minor: 0, revision: 0, extra: '-rc12.5',
 	commit: __git_commit__,
 	build: __webpack_hash__,
 	toString: () =>

src/modules/metadata.jsx

@@ -104,6 +104,8 @@ export default class Metadata extends Module {
 		}
 
 		this.definitions['player-stats'] = {
+			button: false,
+
 			refresh() {
 				return this.settings.get('metadata.player-stats')
 			},
@@ -170,6 +172,22 @@ export default class Metadata extends Module {
 					return `${delayed}${data.delay.toFixed(2)}s`;
 			},
 
+			click(data) {
+				const Player = this.resolve('site.player'),
+					internal = Player.getInternalPlayer();
+
+				if ( ! internal )
+					return;
+
+				const store = internal.context.store,
+					state = store.getState();
+
+				store.dispatch({
+					type: 'display stats',
+					displayed: ! (state.stats && state.stats.displayed)
+				});
+			},
+
 			color(data) {
 				const setting = this.settings.get('some.thing');
 				if ( setting == null || ! data.delay || data.old )
@@ -330,7 +348,7 @@ export default class Metadata extends Module {
 					tip_content={tooltip}
 				/>);
 
-				if ( def.popup || def.click ) {
+				if ( def.button !== false && (def.popup || def.click) ) {
 					button = true;
 
 					let btn, popup;
@@ -431,6 +449,14 @@ export default class Metadata extends Module {
 					el.appendChild(<div class="tw-align-items-center tw-flex tw-justify-content-center tw-font-size-4">
 						{stat = <div class="tw-strong ffz-sidebar-stat--label" />}
 					</div>);
+
+					if ( def.click )
+						el.addEventListener('click', e => {
+							if ( el._ffz_fading || el.disabled || el.classList.contains('disabled') )
+								return false;
+
+							def.click.call(this, el._ffz_data, e, () => refresh_fn(key));
+						});
 				}
 
 				el.appendChild(sub_el = <div class="tw-flex tw-justify-content-center tw-c-text-alt-2 tw-font-size-6 ffz-sidebar-stat--subtitle" />);

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

@@ -34,8 +34,9 @@
 		display: unset !important;
 		position: fixed !important;
 		z-index: 10000;
-		bottom: 0;
+		bottom: 0 !important;
-		left: 0; right: 0;
+		left: 0 !important;
+		right: 0 !important;
 		height: calc(100vh - var(--ffz-player-height)) !important;
 		border-top: 1px solid #dad8de;
 

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

@@ -530,6 +530,20 @@ export default class Player extends Module {
 	}
 
 
+	getInternalPlayer(inst) {
+		if ( ! inst )
+			inst = this.Player.first;
+
+		const node = this.fine.getChildNode(inst),
+			el = node && node.querySelector('.player-ui');
+
+		if ( ! el || ! el._reactRootContainer )
+			return null;
+
+		return this.fine.searchTree(el, n => n.props && n.props.player && n.context && n.context.store);
+	}
+
+
 	get current() {
 		// There should only ever be one player instance, but might change
 		// when they re-add support for the mini player.