4.22.8

* Fixed: Setting to display square avatars not functioning. (Closes #1042)
* Fixed: Chat message backgrounds on clips pages not appearing as full width.
* Fixed: Style of the Gain Control input element.
* Fixed: Shortcuts not being appended to live channel pages next to the channel name.
* Fixed: The Mod View button not being hidden correctly. (Closes #1044)
* Fixed: The "Hide Stream Info" button not being hidden in mod view.
* Fixed: The setting to use the FFZ logo for the emote menu button not functioning.
* Fixed: Multiple issues with portrait mode appearing incorrectly.
* Fixed: Block and Hide Thumbnails buttons not appearing on game directory pages.

package.json

@@ -1,7 +1,7 @@
 {
   "name": "frankerfacez",
   "author": "Dan Salvato LLC",
-  "version": "4.22.7",
+  "version": "4.22.8",
   "description": "FrankerFaceZ is a Twitch enhancement suite.",
   "private": true,
   "license": "Apache-2.0",

src/sites/clips/chat.jsx

@@ -151,6 +151,11 @@ export default class Chat extends Module {
 
 		const room = thing._ffz_room = this.chat.getRoom(channel_id, null, false, true);
 		room.ref(thing);
+
+		this.settings.updateContext({
+			channelID: channel_id
+		});
+
 		return room;
 	}
 
@@ -161,6 +166,10 @@ export default class Chat extends Module {
 
 		thing._ffz_room.unref(thing);
 		thing._ffz_room = null;
+
+		this.settings.updateContext({
+			channelID: null
+		});
 	}
 
 

src/sites/clips/css_tweaks/square-avatars.scss

@@ -5,6 +5,7 @@
 	--border-radius-rounded: 0 !important;
 }
 
+.tw-image-avatar,
 .user-avatar-card__halo,
 .player-streaminfo__picture img[src] {
 	border-radius: 0 !important;

src/sites/clips/styles/clips-main.scss

@@ -31,9 +31,7 @@
 }
 
 .clips-chat-replay {
-	&.tw-flex {
+	display: block !important;
-		display: block !important;
-	}
 
 	& > div {
 		margin: 0 -1rem !important;

src/sites/clips/theme.js

@@ -396,7 +396,7 @@ export default class ThemeEngine extends Module {
 		this.toggleNormalizer(chat_bits.length || bits.length);
 
 		if ( bits.length )
-			this.css_tweaks.set('colors', `body {${bits.join('\n')}}.channel-info-content .tw-accent-region,.channel-info-content .gocjHQ{${accent_bits.join('\n')}}`);
+			this.css_tweaks.set('colors', `body {${bits.join('\n')}}.channel-info-content .tw-accent-region,.channel-info-content div[class^="ScAccentRegion"]{${accent_bits.join('\n')}}`);
 		else
 			this.css_tweaks.delete('colors');
 	}

src/sites/shared/player.jsx

@@ -1187,7 +1187,7 @@ export default class PlayerBase extends Module {
 					<label class="tw-hide-accessible">{this.i18n.t('player.gain.label','Gain Control')}</label>
 					<div class="tw-flex tw-full-width tw-relative tw-z-above">
 						{input = (<input
-							class="tw-range tw-range--overlay"
+							class="ffz-range ffz-range--overlay"
 							type="range"
 							min="0"
 							max="100"
@@ -1195,11 +1195,11 @@ export default class PlayerBase extends Module {
 							data-a-target="player-gain-slider"
 							value="100"
 						/>)}
-						<div class="tw-absolute tw-border-radius-large tw-bottom-0 tw-flex tw-flex-column tw-full-width tw-justify-content-center tw-range__fill tw-range__fill--overlay tw-top-0 tw-z-below">
+						<div class="tw-absolute tw-border-radius-large tw-bottom-0 tw-flex tw-flex-column tw-full-width tw-justify-content-center ffz-range__fill ffz-range__fill--overlay tw-top-0 tw-z-below">
-							<div class="tw-border-radius-large tw-range__fill-container">
+							<div class="tw-border-radius-large ffz-range__fill-container">
 								{fill = (<div
-									class="tw-border-radius-large tw-range__fill-value ffz--gain-value"
+									class="tw-border-radius-large ffz-range__fill-value ffz--gain-value"
-									data-test-selector="tw-range__fill-value-selector"
+									data-test-selector="ffz-range__fill-value-selector"
 								/>)}
 							</div>
 						</div>

src/sites/twitch-twilight/modules/channel.jsx

@@ -332,9 +332,9 @@ export default class Channel extends Module {
 		}
 
 		if ( ! el._ffz_links && want_links ) {
-			const link = el.querySelector('a .tw-line-height-heading'),
+			const link = el.querySelector('a .tw-title'),
 				anchor = link && link.closest('a'),
-				cont = anchor && anchor.closest('.tw-flex');
+				cont = anchor && anchor.closest('div');
 
 			if ( cont && el.contains(cont) ) {
 				el._ffz_links = <div class="ffz--links tw-mg-l-1"></div>;

src/sites/twitch-twilight/modules/css_tweaks/index.js

@@ -22,7 +22,7 @@ const CLASSES = {
 	'side-closed-rec-channels': '.side-nav--collapsed .recommended-channels,.side-nav--collapsed .side-nav-section + .side-nav-section:not(.online-friends)',
 	'side-offline-channels': '.ffz--side-nav-card-offline',
 	'side-rerun-channels': '.side-nav .ffz--side-nav-card-rerun',
-	'modview-hide-info': '.tw-flex.modview-player-widget__hide-stream-info',
+	'modview-hide-info': '.modview-player-widget__hide-stream-info',
 
 	'community-highlights': '.community-highlight-stack__card',
 
@@ -44,7 +44,7 @@ const CLASSES = {
 	'not-live-bar': 'div[data-test-selector="non-live-video-banner-layout"]',
 	'channel-live-ind': '.channel-header__user .tw-channel-status-text-indicator,.channel-info-content .tw-halo__indicator',
 	'celebration': 'body .celebration__overlay',
-	'mod-view': '.chat-input__buttons-container .tw-core-button[href*="/moderator"]'
+	'mod-view': '.chat-input__buttons-container a[href*="/moderator"]'
 };
 
 

src/sites/twitch-twilight/modules/css_tweaks/styles/emote-menu.scss

@@ -1,8 +1,10 @@
 button[data-a-target="emote-picker-button"] {
-    .tw-button-icon__icon {
+    div[class^="ScButtonIcon"] {
-        padding: .6rem .4rem .2rem .4rem;
+        padding: .2rem .2rem 0 0;
 
         div > div {
+            overflow: unset !important;
+
             &:before {
                 display: inline-block;
                 width: 2.4rem;
@@ -12,8 +14,6 @@ button[data-a-target="emote-picker-button"] {
                 font-weight: normal;
                 speak: none;
 
-                margin-top: -.3rem;
-
                 font-variant: normal;
                 text-transform: none;
 

src/sites/twitch-twilight/modules/css_tweaks/styles/portrait.scss

@@ -4,7 +4,7 @@
 	--ffz-theater-height: calc(calc(100vw * 0.5625) + var(--ffz-portrait-extra-height));
 	--ffz-chat-height: calc(100vh - var(--ffz-player-height));
 
-	& > .tw-flex-column > .tw-full-height {
+	& > div:first-child > div[class^="sc"] {
 		.ffz--portrait-invert & {
 			position: absolute;
 			left: 0;

src/sites/twitch-twilight/modules/css_tweaks/styles/square-avatars.scss

@@ -5,6 +5,7 @@
 	--border-radius-rounded: 0 !important;
 }
 
+.tw-image-avatar,
 .user-avatar-card__halo,
 .player-streaminfo__picture img[src],
 .channel-info-content .tw-halo,

src/sites/twitch-twilight/modules/directory/game.jsx

@@ -63,10 +63,22 @@ export default class Game extends SiteModule {
 			for(const inst of instances)
 				this.updateGameHeader(inst);
 		});
+
+		this.on('site.router:route', route => {
+			if ( route && route.name === 'dir-game-index' )
+				this.updateGameHeader();
+		})
 	}
 
 
 	updateGameHeader(inst) {
+		if ( inst === undefined ) {
+			for(const inst of this.GameHeader.instances)
+				this.updateGameHeader(inst);
+
+			return;
+		}
+
 		this.updateButtons(inst);
 
 		const category = inst?.props?.data?.game;
@@ -83,14 +95,14 @@ export default class Game extends SiteModule {
 		if ( get('data.game', inst.props) == null || ! container || ! container.querySelector )
 			return;
 
-		const buttons = container.querySelector('.tw-flex > .tw-flex-column');
+		const ffz_buttons = container.querySelector('.ffz-directory-buttons');
-		if ( ! buttons )
-			return;
-
-		const ffz_buttons = buttons.querySelector('.ffz-directory-buttons');
 		if ( ffz_buttons )
 			ffz_buttons.remove();
 
+		const buttons = container.querySelector('.directory-header-new__info > div > div + div');
+		if ( ! buttons )
+			return;
+
 		let block_btn, block_label,
 			hidden_btn, hidden_label;
 

src/sites/twitch-twilight/modules/theme/index.js

@@ -485,7 +485,7 @@ The CSS loaded by this setting is far too heavy and can cause performance issues
 		this.toggleNormalizer(chat_bits.length || bits.length);
 
 		if ( bits.length )
-			this.css_tweaks.set('colors', `body,body .tw-root--theme-light,body .tw-root--theme-dark {${bits.join('\n')}}.channel-info-content .tw-accent-region,.channel-info-content .gocjHQ{${accent_bits.join('\n')}}`);
+			this.css_tweaks.set('colors', `body,body .tw-root--theme-light,body .tw-root--theme-dark {${bits.join('\n')}}.channel-info-content .tw-accent-region,.channel-info-content div[class^="ScAccentRegion"]{${accent_bits.join('\n')}}`);
 		else
 			this.css_tweaks.delete('colors');
 	}

src/sites/twitch-twilight/styles/channel.scss

@@ -1,4 +1,4 @@
-.channel-info-bar__content-right > .tw-align-items-start > .tw-flex:last-child,
+/*.channel-info-bar__content-right > .tw-align-items-start > .tw-flex:last-child,
 .channel-info-bar__action-container > .tw-flex {
 	.channel-info-bar__viewers-wrapper > div:first-child {
 		margin-right: 0;
@@ -32,7 +32,7 @@
 	& > .tw-flex:last-child > :last-child {
 		margin-right: 0 !important
 	}
-}
+}*/
 
 .tw-root--theme-ffz, .tw-root--theme-ffz.tw-root--theme-dark, .tw-root--theme-dark, body {
 	.ffz-stat > .tw-button--text,
@@ -70,21 +70,14 @@
 	}
 }
 
-
+.ffz--meta-tray {
-.ffz--meta-tray:not(.tw-flex-wrap) {
 	& > *:not(.ffz-stat) {
 		order: 500;
 	}
-}
 
-.ffz--meta-tray.tw-flex-wrap {
+	& > :first-child:not(.ffz-stat) {
-	& > :first-child {
 		order: 1;
 	}
-
-	& > :nth-child(0n+2) {
-		order: 500;
-	}
 }
 
 .ffz-stat {

styles/native/index.scss

@@ -7,4 +7,5 @@
 @import "tag";
 @import "progress";
 @import "tooltip";
-@import "balloon";
+@import "balloon";
+@import "slider";

styles/native/slider.scss

@@ -0,0 +1,162 @@
+.ffz-range {
+	appearance: none;
+	cursor: pointer;
+	height: 1.6rem;
+	vertical-align: middle;
+	width: 100%;
+
+	&, &:active, &:hover, &:focus {
+		background: transparent;
+		border: none;
+		box-shadow: none;
+	}
+
+	&:disabled,
+	&:disabled + &__fill {
+		opacity: 0.5;
+		pointer-events: none;
+	}
+
+	&::-moz-range-track {
+		cursor: pointer;
+		height: .2rem;
+		width: 100%;
+	}
+	&::-ms-track {
+		cursor: pointer;
+		height: .2rem;
+		width: 100%;
+	}
+	&::-webkit-slider-runnable-track {
+		cursor: pointer;
+		height: .2rem;
+		width: 100%;
+	}
+
+	&::-moz-range-thumb {
+		appearance: none;
+		background: var(--color-white);
+		border: var(--border-width-default) solid var(--color-border-range-handle);
+		border-radius: var(--border-radius-rounded);
+		box-shadow: var(--shadow-elevation-1);
+		height: 1.6rem;
+		margin-top: -.7rem;
+		width: 1.6rem;
+	}
+	&::-ms-thumb {
+		appearance: none;
+		background: var(--color-white);
+		border: var(--border-width-default) solid var(--color-border-range-handle);
+		border-radius: var(--border-radius-rounded);
+		box-shadow: var(--shadow-elevation-1);
+		height: 1.6rem;
+		margin-top: -.7rem;
+		width: 1.6rem;
+	}
+	&::-webkit-slider-thumb {
+		appearance: none;
+		background: var(--color-white);
+		border: var(--border-width-default) solid var(--color-border-range-handle);
+		border-radius: var(--border-radius-rounded);
+		box-shadow: var(--shadow-elevation-1);
+		height: 1.6rem;
+		margin-top: -.7rem;
+		width: 1.6rem;
+	}
+
+	&[data-focus-visible-added] {
+		outline: none;
+
+		&::-moz-range-thumb {
+			border: var(--border-width-default) solid var(--color-background-range-fill);
+		}
+		&::-ms-thumb {
+			border: var(--border-width-default) solid var(--color-background-range-fill);
+		}
+		&::-webkit-slider-thumb {
+			border: var(--border-width-default) solid var(--color-background-range-fill);
+		}
+	}
+
+	&--error {
+		&::-moz-range-thumb {
+			border: var(--border-width-default) solid var(--color-border-input-error);
+		}
+		&::-ms-thumb {
+			border: var(--border-width-default) solid var(--color-border-input-error);
+		}
+		&::-webkit-slider-thumb {
+			border: var(--border-width-default) solid var(--color-border-input-error);
+		}
+	}
+
+	&--unfilled {
+		&::-moz-range-track {
+			background-color: var(--color-background-range);
+		}
+		&::-ms-track {
+			background-color: var(--color-background-range);
+		}
+		&::-webkit-slider-runnable-track {
+			background-color: var(--color-background-range);
+		}
+	}
+
+	&--unfilled.ffz-range-overlay {
+		&::-moz-range-track {
+			background-color: var(--color-background-range-overlay);
+		}
+		&::-ms-track {
+			background-color: var(--color-background-range-overlay);
+		}
+		&::-webkit-slider-runnable-track {
+			background-color: var(--color-background-range-overlay);
+		}
+	}
+
+	&--unfilled,
+	&--unfilled.ffz-range--overlay {
+		&::-moz-range-track {
+			border-radius: var(--border-radius-large);
+			cursor: pointer;
+			height: .2rem;
+			width: 100%;
+		}
+		&::-ms-track {
+			border-radius: var(--border-radius-large);
+			cursor: pointer;
+			height: .2rem;
+			width: 100%;
+		}
+		&::-webkit-slider-runnable-track {
+			border-radius: var(--border-radius-large);
+			cursor: pointer;
+			height: .2rem;
+			width: 100%;
+		}
+	}
+
+	&__fill {
+		height: 100%;
+
+		&-container {
+			background-color: var(--color-background-range);
+			cursor: pointer;
+			height: .2rem;
+			width: 100%;
+		}
+
+		&-value {
+			background-color: var(--color-background-range-fill);
+			height: 100%;
+		}
+
+		&--overlay &-container {
+			background-color: var(--color-background-range-overlay);
+		}
+
+		&--overlay &-value {
+			background-color: var(--color-background-range-overlay-fill);
+		}
+	}
+}