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

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

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

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: '';

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 {

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

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