diff --git a/package.json b/package.json index e5c2bc46..b1d2cea0 100755 --- a/package.json +++ b/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": { diff --git a/src/sites/twitch-twilight/modules/css_tweaks/index.js b/src/sites/twitch-twilight/modules/css_tweaks/index.js index 29ba9fe2..02839276 100644 --- a/src/sites/twitch-twilight/modules/css_tweaks/index.js +++ b/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() { diff --git a/src/sites/twitch-twilight/modules/layout.js b/src/sites/twitch-twilight/modules/layout.js index 21a4803a..a70ac13b 100644 --- a/src/sites/twitch-twilight/modules/layout.js +++ b/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 ) diff --git a/src/sites/twitch-twilight/modules/player.jsx b/src/sites/twitch-twilight/modules/player.jsx index 6711d0e7..0c30fe2e 100644 --- a/src/sites/twitch-twilight/modules/player.jsx +++ b/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({ diff --git a/src/sites/twitch-twilight/modules/theme/index.js b/src/sites/twitch-twilight/modules/theme/index.js index 552519dd..5a64c978 100644 --- a/src/sites/twitch-twilight/modules/theme/index.js +++ b/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(); } } \ No newline at end of file