1
0
Fork 0
mirror of https://github.com/FrankerFaceZ/FrankerFaceZ.git synced 2025-08-11 00:20:54 +00:00
* Fixed: The player not resizing appropriately when certain layout overrides are applied to the Twitch page. (Closes #925)
This commit is contained in:
SirStendec 2020-10-16 15:19:11 -04:00
parent b88e6f0f75
commit 8ea12ab73c
5 changed files with 45 additions and 8 deletions

View file

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

View file

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

View file

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

View file

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

View file

@ -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;