4.20.43

* Fixed: The player not resizing appropriately when certain layout overrides are applied to the Twitch page. (Closes #925)

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": {

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() {

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() {

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')
 	}

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;