4.12.3

* Changed: Prevent the video quality from dropping when using Picture-in-Picture. (This is handled via an override to the Page Visibility API, preventing the player from detecting the page is hidden when PIP is active. This override *only* functions when Picture-in-Picture is in use.)
* Fixed: Recalculate the position of the navigation bar underline when showing/hiding the Discover link.
* Fixed: Don't load our color normalization CSS if the user isn't making use of a custom theme.

package.json

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

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

@@ -183,7 +183,10 @@ export default class CSSTweaks extends Module {
 				title: 'Show Discover link.',
 				component: 'setting-check-box'
 			},
-			changed: val => this.toggleHide('top-discover', !val)
+			changed: val => {
+				this.toggleHide('top-discover', !val);
+				this.updateTopNav();
+			}
 		});
 
 		this.settings.add('layout.prime-offers', {
@@ -297,6 +300,11 @@ export default class CSSTweaks extends Module {
 		this.toggleHide('whispers', !this.settings.get('whispers.show'));
 
 		this.updateFont();
+		this.updateTopNav();
+	}
+
+	updateTopNav() {
+		requestAnimationFrame(() => this.emit('site.layout:update-nav'));
 	}
 
 	updateFont() {

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

@@ -20,6 +20,11 @@ export default class Layout extends Module {
 		this.inject('site.fine');
 		this.inject('site.css_tweaks');
 
+		this.TopNav = this.fine.define(
+			'top-nav',
+			n => n.computeStyles && n.navigationLinkSize
+		);
+
 		this.RightColumn = this.fine.define(
 			'tw-rightcolumn',
 			n => n.hideOnBreakpoint && n.handleToggleVisibility
@@ -159,6 +164,8 @@ export default class Layout extends Module {
 	onEnable() {
 		document.body.classList.toggle('ffz--portrait-invert', this.settings.get('layout.portrait-invert'));
 
+		this.on(':update-nav', this.updateNavLinks, this);
+
 		this.css_tweaks.toggle('portrait', this.settings.get('layout.inject-portrait'));
 		this.css_tweaks.toggle('portrait-swapped', this.settings.get('layout.use-portrait-swapped'));
 		this.css_tweaks.setVariable('portrait-extra-width', `${this.settings.get('layout.portrait-extra-width')}rem`);
@@ -222,6 +229,13 @@ export default class Layout extends Module {
 		return this.settings.get('layout.is-minimal')
 	}
 
+	updateNavLinks() {
+		for(const inst of this.TopNav.instances)
+			try {
+				inst.computeStyles();
+			} catch(err) { /* no-op */ }
+	}
+
 	updatePopular(inst) {
 		const node = this.fine.getChildNode(inst);
 		if ( node )

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

@@ -417,6 +417,7 @@ export default class Player extends Module {
 		this.css_tweaks.toggleHide('player-rerun-bar', this.settings.get('player.hide-rerun-bar'));
 		this.updateHideExtensions();
 		this.updateCaptionsCSS();
+		this.installVisibilityHook();
 
 		const t = this;
 
@@ -472,6 +473,30 @@ export default class Player extends Module {
 		});
 	}
 
+	installVisibilityHook() {
+		if ( ! document.pictureInPictureEnabled ) {
+			this.log.info('Skipping visibility hook. Picture-in-Picture is not available.');
+			return;
+		}
+
+		try {
+			Object.defineProperty(document, 'hidden', {
+				configurable: true,
+				get() {
+					// If Picture in Picture is active, then we should not
+					// drop quality. Therefore, we need to trick Twitch
+					// into thinking the document is still active.
+					if ( document.pictureInPictureElement != null )
+						return false;
+
+					return document.visibilityState === 'hidden';
+				}
+			});
+		} catch(err) {
+			this.log.warning('Unable to install document visibility hook.', err);
+		}
+	}
+
 
 	updateSquadContext() {
 		this.settings.updateContext({

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

@@ -115,6 +115,12 @@ The CSS loaded by this setting is far too heavy and can cause performance issues
 	updateCSS() {
 		this.updateOldCSS();
 
+		if ( ! this.settings.get('theme.can-dark') ) {
+			this.toggleNormalizer(false);
+			this.css_tweaks.delete('colors');
+			return;
+		}
+
 		let dark = this.settings.get('theme.is-dark');
 		const bits = [];
 
@@ -127,9 +133,6 @@ The CSS loaded by this setting is far too heavy and can cause performance issues
 				luma = hsla.l;
 			dark = luma < 0.5;
 
-			if ( dark && ! this.settings.get('theme.can-dark') )
-				return this.css_tweaks.delete('colors');
-
 			// Make sure the Twitch theme is set correctly.
 			try {
 				const store = this.resolve('site').store,
@@ -170,10 +173,13 @@ The CSS loaded by this setting is far too heavy and can cause performance issues
 		}
 
 
-		if ( bits.length )
+		if ( bits.length ) {
 			this.css_tweaks.set('colors', `body {${bits.join('\n')}}`);
-		else
+			this.toggleNormalizer(true);
+		} else {
 			this.css_tweaks.delete('colors');
+			this.toggleNormalizer(false);
+		}
 	}
 
 	toggleNormalizer(enable) {
@@ -221,7 +227,6 @@ The CSS loaded by this setting is far too heavy and can cause performance issues
 
 	onEnable() {
 		this.updateSetting(this.settings.get('theme.dark'));
-		this.toggleNormalizer(true);
 		this.updateCSS();
 	}
 }