diff --git a/package.json b/package.json index bd7ea275..76bb0112 100755 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "frankerfacez", "author": "Dan Salvato LLC", - "version": "4.20.42", + "version": "4.20.43", "description": "FrankerFaceZ is a Twitch enhancement suite.", "license": "Apache-2.0", "scripts": { diff --git a/src/sites/twitch-twilight/modules/chat/index.js b/src/sites/twitch-twilight/modules/chat/index.js index a6e7c4b8..f8c46370 100644 --- a/src/sites/twitch-twilight/modules/chat/index.js +++ b/src/sites/twitch-twilight/modules/chat/index.js @@ -639,6 +639,7 @@ export default class ChatHook extends Module { this.emit(':update-chat-css'); this.emit('site.player:fix-player'); + this.emit('site.layout:resize'); } updateLineBorders() { diff --git a/src/sites/twitch-twilight/modules/css_tweaks/index.js b/src/sites/twitch-twilight/modules/css_tweaks/index.js index c4b426bf..f2fe2c27 100644 --- a/src/sites/twitch-twilight/modules/css_tweaks/index.js +++ b/src/sites/twitch-twilight/modules/css_tweaks/index.js @@ -111,6 +111,7 @@ export default class CSSTweaks extends Module { this.toggle('chat-fix', val); this.emit('site.player:fix-player'); + this.emit('site.layout:resize'); } }); @@ -237,7 +238,10 @@ export default class CSSTweaks extends Module { component: 'setting-check-box' }, - changed: val => this.toggle('swap-sidebars', val) + changed: val => { + this.toggle('swap-sidebars', val); + this.emit('site.layout:resize'); + } }); this.settings.add('layout.minimal-navigation', { @@ -257,7 +261,10 @@ export default class CSSTweaks extends Module { component: 'setting-check-box' }, - changed: val => this.toggle('minimal-navigation', val) + changed: val => { + this.toggle('minimal-navigation', val); + this.emit('site.layout:resize'); + } }); this.settings.add('layout.theatre-navigation', { @@ -271,7 +278,10 @@ export default class CSSTweaks extends Module { title: 'Show the minimized navigation bar when in theatre mode.', component: 'setting-check-box' }, - changed: val => this.toggle('theatre-nav', val) + changed: val => { + this.toggle('theatre-nav', val); + this.emit('site.layout:resize'); + } }); this.settings.add('layout.discover', { @@ -307,7 +317,10 @@ export default class CSSTweaks extends Module { title: 'Display Whispers', component: 'setting-check-box' }, - changed: val => this.toggleHide('whispers', !val) + changed: val => { + this.toggleHide('whispers', !val); + this.emit('site.layout:resize'); + } }); this.settings.add('chat.bits.show', { @@ -431,6 +444,7 @@ export default class CSSTweaks extends Module { this.updateTopNav(); this.emit('site.player:fix-player'); + this.emit('site.layout:resize'); } updateTopNav() { diff --git a/src/sites/twitch-twilight/modules/layout.js b/src/sites/twitch-twilight/modules/layout.js index 1b273160..04fc80f9 100644 --- a/src/sites/twitch-twilight/modules/layout.js +++ b/src/sites/twitch-twilight/modules/layout.js @@ -30,6 +30,11 @@ export default class Layout extends Module { n => n.hideOnBreakpoint && n.handleToggleVisibility );*/ + this.ResizeDetector = this.fine.define( + 'resize-detector', + n => n.maybeDebounceOnScroll && n.setGrowDivRef && n.props.onResize + ); + this.SideBarChannels = this.fine.define( 'nav-cards', t => t.getCardSlideInContent && t.props && has(t.props, 'tooltipContent') @@ -184,6 +189,7 @@ export default class Layout extends Module { document.body.classList.toggle('ffz--portrait-invert', this.settings.get('layout.portrait-invert')); this.on(':update-nav', this.updateNavLinks, this); + this.on(':resize', this.handleResize, 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')); @@ -251,6 +257,22 @@ export default class Layout extends Module { });*/ } + handleResize() { + if ( this._resize_timer ) + return; + + this._resize_timer = requestAnimationFrame(() => this._handleResize()); + } + + _handleResize() { + cancelAnimationFrame(this._resize_timer); + this._resize_timer = null; + + for(const inst of this.ResizeDetector.instances) { + inst?.props?.onResize?.(); + } + } + get is_minimal() { return this.settings.get('layout.is-minimal') } diff --git a/src/sites/twitch-twilight/modules/player.jsx b/src/sites/twitch-twilight/modules/player.jsx index 9fbfeed5..ee27cc52 100644 --- a/src/sites/twitch-twilight/modules/player.jsx +++ b/src/sites/twitch-twilight/modules/player.jsx @@ -60,10 +60,10 @@ export default class Player extends Module { PLAYER_ROUTES );*/ - this.PersistentPlayer = this.fine.define( + /*this.PersistentPlayer = this.fine.define( 'persistent-player', n => n.state && n.state.playerStyles - ); + );*/ this.Player = this.fine.define( 'highwind-player', @@ -527,7 +527,7 @@ export default class Player extends Module { this.installVisibilityHook(); this.on(':reset', this.resetAllPlayers, this); - this.on(':fix-player', () => this.PersistentPlayer.forceUpdate(), this); + //this.on(':fix-player', () => this.PersistentPlayer.forceUpdate(), this); const t = this;