diff --git a/src/main.js b/src/main.js index f06891ad..e409dd2b 100644 --- a/src/main.js +++ b/src/main.js @@ -149,7 +149,7 @@ ${typeof x[1] === 'string' ? x[1] : JSON.stringify(x[1], null, 4)}` FrankerFaceZ.Logger = Logger; const VER = FrankerFaceZ.version_info = { - major: 4, minor: 0, revision: 0, extra: '-rc16', + major: 4, minor: 0, revision: 0, extra: '-rc16.1', commit: __git_commit__, build: __webpack_hash__, toString: () => diff --git a/src/modules/chat/actions/index.jsx b/src/modules/chat/actions/index.jsx index 5cf9d53a..f66b56d8 100644 --- a/src/modules/chat/actions/index.jsx +++ b/src/modules/chat/actions/index.jsx @@ -166,7 +166,7 @@ export default class Actions extends Module { target._ffz_destroy = target._ffz_outside = null; } - const parent = document.body.querySelector('.twilight-root,.twilight-minimal-root') || document.body, + const parent = document.body.querySelector('#root>div') || document.body, tt = target._ffz_popup = new Tooltip(parent, target, { logger: this.log, manual: true, diff --git a/src/modules/metadata.jsx b/src/modules/metadata.jsx index df584b3b..a9091402 100644 --- a/src/modules/metadata.jsx +++ b/src/modules/metadata.jsx @@ -738,7 +738,7 @@ export default class Metadata extends Module { el._ffz_destroy = el._ffz_outside = null; }; - const parent = document.body.querySelector('.twilight-root') || document.body, + const parent = document.body.querySelector('#root>div') || document.body, tt = el._ffz_popup = new Tooltip(parent, el, { logger: this.log, manual: true, @@ -809,7 +809,7 @@ export default class Metadata extends Module { subcontainer.appendChild(el); if ( def.tooltip ) { - const parent = document.body.querySelector('.twilight-root') || document.body; + const parent = document.body.querySelector('#root>div') || document.body; el.tooltip = new Tooltip(parent, el, { logger: this.log, live: false, diff --git a/src/modules/tooltips.js b/src/modules/tooltips.js index 639e2f05..576aa84f 100644 --- a/src/modules/tooltips.js +++ b/src/modules/tooltips.js @@ -36,10 +36,10 @@ export default class TooltipProvider extends Module { } onEnable() { - const container = document.querySelector('.twilight-root,.twilight-minimal-root,.clips-root') || document.body, - is_minimal = container && container.classList.contains('twilight-minimal-root'); + const container = document.querySelector('#root>div,#root,.clips-root') || document.body, + is_minimal = false; //container && container.classList.contains('twilight-minimal-root'); - this.tips = new Tooltip(is_minimal ? '.twilight-minimal-root,body' : 'body #root,body', 'ffz-tooltip', { + this.tips = new Tooltip(is_minimal ? '.twilight-minimal-root,body' : '#root>div,#root,body', 'ffz-tooltip', { html: true, delayHide: this.checkDelayHide.bind(this), delayShow: this.checkDelayShow.bind(this), diff --git a/src/modules/viewer_cards/index.js b/src/modules/viewer_cards/index.js index cd3cb4ab..43b915cf 100644 --- a/src/modules/viewer_cards/index.js +++ b/src/modules/viewer_cards/index.js @@ -167,7 +167,7 @@ export default class ViewerCards extends Module { el.style.top = `${pos_y}px`; el.style.left = `${pos_x}px` - const container = document.querySelector('.twilight-root>.tw-full-height,.twilight-minimal-root>.tw-full-height'); + const container = document.querySelector('#root>div>.tw-full-height,.twilight-minimal-root>.tw-full-height'); container.appendChild(el); requestAnimationFrame(() => child.constrain()); diff --git a/src/sites/twitch-twilight/index.js b/src/sites/twitch-twilight/index.js index a318cbba..7940d843 100644 --- a/src/sites/twitch-twilight/index.js +++ b/src/sites/twitch-twilight/index.js @@ -217,6 +217,6 @@ Twilight.ROUTES = { } -Twilight.DIALOG_EXCLUSIVE = '.twilight-main,.twilight-minimal-root>div,.twilight-root>.tw-full-height,.clips-root'; -Twilight.DIALOG_MAXIMIZED = '.twilight-main,.twilight-minimal-root,.twilight-root .dashboard-side-nav+.tw-full-height,.clips-root>.tw-full-height .scrollable-area'; -Twilight.DIALOG_SELECTOR = '.twilight-root>.tw-full-height,.twilight-minimal-root>.tw-full-height,.clips-root>.tw-full-height .scrollable-area'; \ No newline at end of file +Twilight.DIALOG_EXCLUSIVE = '.twilight-main,.twilight-minimal-root>div,#root>div>.tw-full-height,.clips-root'; +Twilight.DIALOG_MAXIMIZED = '.twilight-main,.twilight-minimal-root,#root .dashboard-side-nav+.tw-full-height,.clips-root>.tw-full-height .scrollable-area'; +Twilight.DIALOG_SELECTOR = '#root>div>.tw-full-height,.twilight-minimal-root>.tw-full-height,.clips-root>.tw-full-height .scrollable-area'; \ No newline at end of file diff --git a/src/sites/twitch-twilight/modules/chat/line.js b/src/sites/twitch-twilight/modules/chat/line.js index 86f5dc54..74bb469e 100644 --- a/src/sites/twitch-twilight/modules/chat/line.js +++ b/src/sites/twitch-twilight/modules/chat/line.js @@ -254,7 +254,7 @@ export default class ChatLine extends Module { this._ffz_show = show; return show !== old_show || - state.ffz_expanded !== this.state.ffz_expanded || + (state && this.state && (state.ffz_expanded !== this.state.ffz_expanded)) || //state.renderDebug !== this.state.renderDebug || props.message !== this.props.message || props.isCurrentUserModerator !== this.props.isCurrentUserModerator || diff --git a/src/sites/twitch-twilight/modules/css_tweaks/styles/minimal-navigation.scss b/src/sites/twitch-twilight/modules/css_tweaks/styles/minimal-navigation.scss index bb14d747..6430088a 100644 --- a/src/sites/twitch-twilight/modules/css_tweaks/styles/minimal-navigation.scss +++ b/src/sites/twitch-twilight/modules/css_tweaks/styles/minimal-navigation.scss @@ -1,4 +1,4 @@ -.twilight-root { +#root { .top-nav { > div { height: 5rem !important; diff --git a/src/sites/twitch-twilight/modules/css_tweaks/styles/portrait-swapped.scss b/src/sites/twitch-twilight/modules/css_tweaks/styles/portrait-swapped.scss index 6897a5c9..3130e6c6 100644 --- a/src/sites/twitch-twilight/modules/css_tweaks/styles/portrait-swapped.scss +++ b/src/sites/twitch-twilight/modules/css_tweaks/styles/portrait-swapped.scss @@ -1,5 +1,5 @@ // Unnecessarily expressive rule to make it more important. -.twilight-root .right-column .right-column__toggle-visibility { +#root .right-column .right-column__toggle-visibility { right: unset !important; left: 0.5rem !important; } \ No newline at end of file diff --git a/src/sites/twitch-twilight/modules/css_tweaks/styles/portrait.scss b/src/sites/twitch-twilight/modules/css_tweaks/styles/portrait.scss index 4c4414c8..ba54b9d3 100644 --- a/src/sites/twitch-twilight/modules/css_tweaks/styles/portrait.scss +++ b/src/sites/twitch-twilight/modules/css_tweaks/styles/portrait.scss @@ -1,4 +1,4 @@ -.twilight-root { +#root { --ffz-player-width: calc(100vw - var(--ffz-portrait-extra-width)); --ffz-player-height: calc(calc(calc(var(--ffz-player-width) * 0.5625) + var(--ffz-portrait-extra-height))); --ffz-theater-height: calc(calc(100vw * 0.5625) + var(--ffz-portrait-extra-height)); diff --git a/src/sites/twitch-twilight/modules/css_tweaks/styles/theatre-nav.scss b/src/sites/twitch-twilight/modules/css_tweaks/styles/theatre-nav.scss index 4a84be39..f23cbbae 100644 --- a/src/sites/twitch-twilight/modules/css_tweaks/styles/theatre-nav.scss +++ b/src/sites/twitch-twilight/modules/css_tweaks/styles/theatre-nav.scss @@ -1,4 +1,4 @@ -.twilight-root { +#root { .top-nav { z-index: 9999; } diff --git a/src/sites/twitch-twilight/modules/directory/following.jsx b/src/sites/twitch-twilight/modules/directory/following.jsx index caaa5ec6..eb3ec173 100644 --- a/src/sites/twitch-twilight/modules/directory/following.jsx +++ b/src/sites/twitch-twilight/modules/directory/following.jsx @@ -127,6 +127,9 @@ export default class Following extends SiteModule { out = []; for(const edge of edges) { + if ( ! edge ) + continue; + const node = edge.node || edge, hosted = node.hosting, stream = hosted && hosted.stream; @@ -291,7 +294,7 @@ export default class Following extends SiteModule { ); - const root = (document.body.querySelector('.twilight-root') || document.body); + const root = (document.body.querySelector('#root>div') || document.body); root.appendChild(this.hostMenu); this.hostMenuPopper = new Popper(document.body, this.hostMenu, { diff --git a/src/sites/twitch-twilight/modules/directory/index.jsx b/src/sites/twitch-twilight/modules/directory/index.jsx index 6aba543b..54e54f33 100644 --- a/src/sites/twitch-twilight/modules/directory/index.jsx +++ b/src/sites/twitch-twilight/modules/directory/index.jsx @@ -343,6 +343,9 @@ export default class Directory extends SiteModule { blocked_games = this.settings.provider.get('directory.game.blocked-games', []); for(const edge of edges) { + if ( ! edge ) + continue; + const node = edge.node || edge, stream = node.stream || node; diff --git a/src/sites/twitch-twilight/modules/following_link.off b/src/sites/twitch-twilight/modules/following_link.off index 8ced3f3f..5a85ab64 100644 --- a/src/sites/twitch-twilight/modules/following_link.off +++ b/src/sites/twitch-twilight/modules/following_link.off @@ -57,7 +57,7 @@ export default class FollowingText extends SiteModule { textContent: 'Following' }); - const height = document.body.querySelector('.twilight-root').clientHeight - 50; + const height = document.body.querySelector('#root>div').clientHeight - 50; const max_lines = Math.max(Math.floor(height / 40) - 1, 2); let c = 0; diff --git a/src/sites/twitch-twilight/styles/chat.scss b/src/sites/twitch-twilight/styles/chat.scss index 722de55d..21d203b7 100644 --- a/src/sites/twitch-twilight/styles/chat.scss +++ b/src/sites/twitch-twilight/styles/chat.scss @@ -180,7 +180,7 @@ @media only screen and (max-height: 750px) { .emote-picker__tab-content { - .twilight-root & { + #root & { max-height: calc(100vh - 31rem); } diff --git a/src/sites/twitch-twilight/styles/theme.scss b/src/sites/twitch-twilight/styles/theme.scss index b2b21339..a0025318 100644 --- a/src/sites/twitch-twilight/styles/theme.scss +++ b/src/sites/twitch-twilight/styles/theme.scss @@ -1535,7 +1535,7 @@ .tw-elevation-5 { box-shadow: 0 14px 20px 8px var(--ffz-color-36), 0 10px 22px -8px var(--ffz-color-37), 0 8px 38px 0 var(--ffz-color-38) !important; } - .twilight-root { + #root { background-color: var(--ffz-color-21); color: var(--ffz-color-1); } diff --git a/src/sites/twitch-twilight/switchboard.js b/src/sites/twitch-twilight/switchboard.js index 3a7b5016..b9ccd1a4 100644 --- a/src/sites/twitch-twilight/switchboard.js +++ b/src/sites/twitch-twilight/switchboard.js @@ -34,7 +34,7 @@ export default class Switchboard extends Module { async onEnable() { - await this.parent.awaitElement('.twilight-minimal-root,.twilight-root'); + await this.parent.awaitElement('.twilight-minimal-root,.twilight-root,#root>div'); if ( this.web_munch._require || this.web_munch.v4 === false ) return; @@ -44,7 +44,6 @@ export default class Switchboard extends Module { if ( ! da_switch ) return new Promise(r => setTimeout(r, 50)).then(() => this.onEnable()); - // Identify Router this.log.info(`Found Router and Switch with ${da_switch.props.children.length} routes.`);