From 05cf8fa1fdc1b1fbd5c03ed1b47bc9a332175097 Mon Sep 17 00:00:00 2001 From: SirStendec Date: Fri, 4 Dec 2020 14:32:26 -0500 Subject: [PATCH] 4.20.55 * Fixed: Spacing of the `Watch in Squad Mode` button when the un-follow button is hidden. * Fixed: Hiding channels in the sidebar based on being offline, a re-run, or streaming a blocked game. * Fixed: Overly specific CSS selector causing thumbnails to not be hidden in the Deck add-on. --- package.json | 2 +- .../modules/css_tweaks/index.js | 2 +- .../css_tweaks/styles/dir-no-blur.scss | 1 + .../styles/hide-unfollow-button.scss | 4 +- src/sites/twitch-twilight/modules/layout.js | 62 ++++++++++++++++--- .../twitch-twilight/styles/directory.scss | 1 + 6 files changed, 59 insertions(+), 13 deletions(-) diff --git a/package.json b/package.json index 14efeee1..2384ad46 100755 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "frankerfacez", "author": "Dan Salvato LLC", - "version": "4.20.54", + "version": "4.20.55", "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 ae1f5e00..82e80ccc 100644 --- a/src/sites/twitch-twilight/modules/css_tweaks/index.js +++ b/src/sites/twitch-twilight/modules/css_tweaks/index.js @@ -11,7 +11,7 @@ import {has} from 'utilities/object'; const STYLE_VALIDATOR = document.createElement('span'); const CLASSES = { - 'unfollow': '.follow-btn__follow-btn--following,.follow-btn--following', + //'unfollow': '.follow-btn__follow-btn--following,.follow-btn--following', 'top-discover': '.navigation-link[data-a-target="discover-link"]', 'side-nav': '.side-nav,#sideNav', 'side-rec-channels': '.side-nav .recommended-channels,.side-nav .side-nav-section + .side-nav-section:not(.online-friends)', diff --git a/src/sites/twitch-twilight/modules/css_tweaks/styles/dir-no-blur.scss b/src/sites/twitch-twilight/modules/css_tweaks/styles/dir-no-blur.scss index 0db661c0..c60d4f17 100644 --- a/src/sites/twitch-twilight/modules/css_tweaks/styles/dir-no-blur.scss +++ b/src/sites/twitch-twilight/modules/css_tweaks/styles/dir-no-blur.scss @@ -1,4 +1,5 @@ .ffz-hide-thumbnail a[data-a-target="preview-card-image-link"] { + .ffz-aspect, .tw-aspect { &:before { content: ''; diff --git a/src/sites/twitch-twilight/modules/css_tweaks/styles/hide-unfollow-button.scss b/src/sites/twitch-twilight/modules/css_tweaks/styles/hide-unfollow-button.scss index b2ec18da..af8e5e50 100644 --- a/src/sites/twitch-twilight/modules/css_tweaks/styles/hide-unfollow-button.scss +++ b/src/sites/twitch-twilight/modules/css_tweaks/styles/hide-unfollow-button.scss @@ -1,5 +1,5 @@ -.metadata-layout__secondary-button-spacing { - margin-right: 0 !important; +.follow-btn__follow-notify-container--following { + margin-left: 3rem; } .follow-btn__follow-btn--following,.follow-btn--following { diff --git a/src/sites/twitch-twilight/modules/layout.js b/src/sites/twitch-twilight/modules/layout.js index 95cac74b..2fd52156 100644 --- a/src/sites/twitch-twilight/modules/layout.js +++ b/src/sites/twitch-twilight/modules/layout.js @@ -6,7 +6,7 @@ import { IS_FIREFOX } from 'src/utilities/constants'; // ============================================================================ import Module from 'utilities/module'; -import {has} from 'utilities/object'; +import {debounce, has} from 'utilities/object'; const PORTRAIT_ROUTES = ['user', 'video', 'user-video', 'user-clip', 'user-videos', 'user-clips', 'user-collections', 'user-events', 'user-followers', 'user-following']; const MINIMAL_ROUTES = ['popout', 'embed-chat', 'dash-chat']; @@ -20,6 +20,7 @@ export default class Layout extends Module { this.inject('settings'); this.inject('site.fine'); this.inject('site.css_tweaks'); + this.inject('site.elemental'); /*this.TopNav = this.fine.define( 'top-nav', @@ -36,10 +37,17 @@ export default class Layout extends Module { n => n.maybeDebounceOnScroll && n.setGrowDivRef && n.props.onResize ); - this.SideBarChannels = this.fine.define( + this.SideBar = this.elemental.define( + 'sidebar', + '.side-bar-contents', + null, + {childNodes: true, subtree: true}, 1 + ); + + /*this.SideBarChannels = this.fine.define( 'nav-cards', t => t.getCardSlideInContent && t.props && has(t.props, 'tooltipContent') - ); + );*/ this.settings.add('layout.portrait', { default: false, @@ -219,8 +227,9 @@ export default class Layout extends Module { this.css_tweaks.setVariable('portrait-extra-height', `${this.settings.get('layout.portrait-extra-height')}rem`); this.on('site.directory:update-cards', () => { - for(const inst of this.SideBarChannels.instances) - this.updateCardClass(inst); + this.SideBar.each(el => this._updateSidebar(el)); + //for(const inst of this.SideBarChannels.instances) + // this.updateCardClass(inst); }); this.ResizeDetector.ready(() => { @@ -230,13 +239,17 @@ export default class Layout extends Module { } }); - this.SideBarChannels.ready((cls, instances) => { + this.SideBar.on('mount', this.updateSidebar, this); + this.SideBar.on('mutate', this.updateSidebar, this); + this.SideBar.each(el => this.updateSidebar(el)); + + /*this.SideBarChannels.ready((cls, instances) => { for(const inst of instances) this.updateCardClass(inst); }); this.SideBarChannels.on('mount', this.updateCardClass, this); - this.SideBarChannels.on('update', this.updateCardClass, this); + this.SideBarChannels.on('update', this.updateCardClass, this);*/ /*const t = this; this.RightColumn.ready((cls, instances) => { @@ -310,7 +323,38 @@ export default class Layout extends Module { return this.settings.get('layout.is-minimal') } - updateCardClass(inst) { + updateSidebar(el) { + if ( ! el ) + return; + + if ( ! el._ffz_update ) + el._ffz_update = debounce(() => requestAnimationFrame(() => this._updateSidebar(el)), 1000, 2); + + el._ffz_update(); + } + + _updateSidebar(el) { + if ( ! el ) + return; + + const cards = el.querySelectorAll('.side-nav-card'), + blocked_games = this.settings.provider.get('directory.game.blocked-games', []); + + for(const card of cards) { + const react = this.fine.getReactInstance(card), + props = react?.return?.return?.memoizedProps, + stream = props?.metadataRight?.props?.stream, + rerun = stream?.type === 'rerun' ?? false, + game = stream?.game?.displayName, + offline = props?.offline ?? false; + + card.classList.toggle('ffz--side-nav-card-rerun', rerun); + card.classList.toggle('ffz--side-nav-card-offline', offline); + card.classList.toggle('tw-hide', game ? blocked_games.includes(game) : false); + } + } + + /*updateCardClass(inst) { const node = this.fine.getChildNode(inst); if ( node ) { @@ -324,7 +368,7 @@ export default class Layout extends Module { const game = inst.props?.tooltipContent?.props?.gameName || inst.props?.metadataLeft?.props?.activity?.stream?.game?.name || inst.props?.metadataLeft; node.classList.toggle('tw-hide', this.settings.provider.get('directory.game.blocked-games', []).includes(game)); } - } + }*/ updateNavLinks() { diff --git a/src/sites/twitch-twilight/styles/directory.scss b/src/sites/twitch-twilight/styles/directory.scss index cbd246f0..2f35b9c6 100644 --- a/src/sites/twitch-twilight/styles/directory.scss +++ b/src/sites/twitch-twilight/styles/directory.scss @@ -28,6 +28,7 @@ .ffz-hide-thumbnail a[data-a-target="preview-card-image-link"] { + .ffz-aspect, .tw-aspect { img { filter: blur(2.5rem);