4.0.0-rc13.7

* Fixed: Loading errors in the Browse Popular directory due to a renamed query field.
* Fixed: Block and Hide Thumbnail buttons not appearing in Game directories. (Fixes #538)
* Fixed: Custom chat width applying when portrait mode is active. (Fixes #540)
* Fixed: FrankerFaceZ not properly detecting the dark theme when theater mode is enabled and then not using appropriate colors. (Fixes #541)
* Fixed: Override badges appearing invisible with certain badge styles.

* Maintenance: Update the chat types enum to match current Twitch values.

changelog.html

@@ -350,7 +350,7 @@
 <ul class="chat-menu-content menu-side-padding">
 	<li>Changed: Reduce the size of badge previews in the badge visbility settings.</li>
 	<li>Changed: Use pop-out chat to host pop-out settings to reduce load times and avoid player ads.</li>
-	<li>Fixed: Tooltips and other things relying on <code>tw-theme--dark</code> to be set now work properly with pop-out chat.</li>
+	<li>Fixed: Tooltips and other things relying on <code>tw-root--theme-dark</code> to be set now work properly with pop-out chat.</li>
 </ul>
 
 <div class="list-header">4.0.0-beta1.7<span>@a50bda0e204137eb8f28</span> <time datetime="2018-03-22">(2018-03-22)</time></div>

src/main.js

@@ -100,7 +100,7 @@ class FrankerFaceZ extends Module {
 FrankerFaceZ.Logger = Logger;
 
 const VER = FrankerFaceZ.version_info = {
-	major: 4, minor: 0, revision: 0, extra: '-rc13.6',
+	major: 4, minor: 0, revision: 0, extra: '-rc13.7',
 	commit: __git_commit__,
 	build: __webpack_hash__,
 	toString: () =>

src/modules/chat/badges.jsx

@@ -435,12 +435,14 @@ export default class Badges extends Module {
 				}
 
 				if (no_invert) {
+					slotted[slot].full_size = true;
+
 					style.background = 'unset';
 					style.backgroundSize = 'unset';
 					style[CSS_MASK_IMAGE] = 'unset';
 				}
 
-				if ( has_image && urls ) {
+				if ( (has_image || color === 'transparent') && urls ) {
 					const image = `url("${urls[1]}")`;
 					let image_set;
 					if ( urls[2] || urls[4] )
@@ -464,7 +466,7 @@ export default class Badges extends Module {
 				const data = slotted[slot],
 					props = data.props;
 
-				props.className = 'ffz-tooltip ffz-badge';
+				props.className = `ffz-tooltip ffz-badge${data.full_size ? ' ffz-full-size' : ''}`;
 				props.key = `${props['data-provider']}-${props['data-badge']}`;
 				props['data-tooltip-type'] = 'badge';
 				props['data-badge-data'] = JSON.stringify(data.badges);

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

@@ -66,8 +66,8 @@ export default class ThemeEngine extends Module {
 		const dark = this.settings.get('theme.is-dark'),
 			gray = this.settings.get('theme.dark');
 
-		document.body.classList.toggle('tw-theme--dark', dark);
+		document.body.classList.toggle('tw-root--theme-dark', dark);
-		document.body.classList.toggle('tw-theme--ffz', gray);
+		document.body.classList.toggle('tw-root--theme-ffz', gray);
 
 	}
 

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

@@ -88,7 +88,9 @@ const CHAT_TYPES = make_enum(
 	'Subscription',
 	'Resubscription',
 	'GiftPaidUpgrade',
+	'AnonGiftPaidUpgrade',
 	'SubGift',
+	'AnonSubGift',
 	'Clear',
 	'RoomMods',
 	'RoomState',
@@ -102,7 +104,8 @@ const CHAT_TYPES = make_enum(
 	'BitsCharity',
 	'CrateGift',
 	'RewardGift',
-	'SubMysteryGift'
+	'SubMysteryGift',
+	'AnonSubMysteryGift'
 );
 
 

src/sites/twitch-twilight/modules/css_tweaks/styles/chat-borders-3d-inset.scss

@@ -14,7 +14,7 @@
 	border-top: 1px solid #aaa;
 	border-bottom-color: var rgba(255,255,255,0.5);
 
-	.tw-theme--dark & {
+	.tw-root--theme-dark & {
 		border-top-color: #000;
 		border-bottom-color: rgba(255,255,255,0.1);
 	}
@@ -30,7 +30,7 @@
 	border-top: 1px solid #aaa;
 	border-bottom-color: var rgba(255,255,255,0.5);
 
-	.tw-theme--dark & {
+	.tw-root--theme-dark & {
 		border-top-color: #000;
 		border-bottom-color: rgba(255,255,255,0.1);
 	}

src/sites/twitch-twilight/modules/css_tweaks/styles/chat-borders-3d.scss

@@ -12,7 +12,7 @@
 	border-top: 1px solid rgba(255,255,255,0.5);
 	border-bottom-color: #aaa;
 
-	.tw-theme--dark & {
+	.tw-root--theme-dark & {
 		border-top-color: rgba(255,255,255,0.1);
 		border-bottom-color: #000;
 	}
@@ -28,7 +28,7 @@
 	border-top: 1px solid rgba(255,255,255,0.5);
 	border-bottom-color: #aaa;
 
-	.tw-theme--dark & {
+	.tw-root--theme-dark & {
 		border-top-color: rgba(255,255,255,0.1);
 		border-bottom-color: #000;
 	}

src/sites/twitch-twilight/modules/css_tweaks/styles/chat-mention-bg-alt.scss

@@ -3,7 +3,7 @@
 	&.ffz-mentioned:not(.ffz-custom-color):nth-child(2n+0) {
 		background-color: rgba(255,127,127,.4) !important;
 
-		.tw-theme--dark & {
+		.tw-root--theme-dark & {
 			background-color: rgba(255,0,0,.3) !important;
 		}
 	}
@@ -12,7 +12,7 @@
 .video-chat__message-list-wrapper li:nth-child(2n+0) .vod-message.ffz-mentioned:not(.ffz-custom-color) {
 	background-color: rgba(255,127,127,.4) !important;
 
-	.tw-theme--dark & {
+	.tw-root--theme-dark & {
 		background-color: rgba(255,0,0,.3) !important;
 	}
 }

src/sites/twitch-twilight/modules/css_tweaks/styles/chat-mention-bg.scss

@@ -4,7 +4,7 @@
 	&.ffz-mentioned:not(.ffz-custom-color) {
 		background-color: rgba(255,127,127,.2) !important;
 
-		.tw-theme--dark & {
+		.tw-root--theme-dark & {
 			background-color: rgba(255,0,0,.2) !important;
 		}
 	}

src/sites/twitch-twilight/modules/css_tweaks/styles/chat-mention-token.scss

@@ -7,7 +7,7 @@
 	color: #fff;
 	background: rgba(0,0,0,0.5);
 
-	.tw-theme--dark & {
+	.tw-root--theme-dark & {
 		color: #000;
 		background-color: rgba(255,255,255,0.5);
 	}

src/sites/twitch-twilight/modules/css_tweaks/styles/chat-rows.scss

@@ -14,7 +14,7 @@
 		&:nth-child(2n+0) {
 			background-color: rgba(0,0,0,0.1) !important;
 
-			.tw-theme--dark & {
+			.tw-root--theme-dark & {
 				background-color: rgba(255,255,255,0.05) !important;
 			}
 		}
@@ -28,7 +28,7 @@
 .video-chat__message-list-wrapper li:nth-child(2n+0) .vod-message:not(.ffz-custom-color) {
 	background-color: rgba(0,0,0,0.1) !important;
 
-	.tw-theme--dark & {
+	.tw-root--theme-dark & {
 		background-color: rgba(255,255,255,0.05) !important;
 	}
 }

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

@@ -38,6 +38,7 @@
 		left: 0 !important;
 		right: 0 !important;
 		height: calc(100vh - var(--ffz-player-height)) !important;
+		width: unset !important;
 		border-top: 1px solid #dad8de;
 
 		.right-column__toggle-visibility {
@@ -60,7 +61,7 @@
 			}
 		}
 
-		.tw-theme--dark & {
+		.tw-root--theme-dark & {
 			border-top-color: #2a2a2a
 		}
 

src/sites/twitch-twilight/modules/css_tweaks/styles/swap-sidebars.scss

@@ -18,11 +18,11 @@
 	border-right: none !important;
 	border-left: 1px solid #dad8de;
 
-	.tw-theme--dark & {
+	.tw-root--theme-dark & {
 		border-left-color: #2c2541;
 
 	}
-	.tw-theme--ffz.tw-theme--dark & {
+	.tw-root--theme-ffz.tw-root--theme-dark & {
 		border-left-color: var(--ffz-color-20);
 	}
 }
@@ -31,12 +31,12 @@
 	border-left: none !important;
 	border-right: 1px solid #dad8de;
 
-	.tw-theme--dark & {
+	.tw-root--theme-dark & {
 		border-right-color: #2c2541;
 	}
 
 
-	.tw-theme--ffz.tw-theme--dark & {
+	.tw-root--theme-ffz.tw-root--theme-dark & {
 		border-right-color: var(--ffz-color-20);
 	}
 }

src/sites/twitch-twilight/modules/directory/browse_popular.gql

@@ -1,4 +1,4 @@
-fragment browsePagePopularStreamsWithTagsEdge2 on StreamEdge {
+fragment browsePagePopularStreamsWithTagsEdge on StreamEdge {
 	node {
 		createdAt
 	}

src/sites/twitch-twilight/modules/directory/browse_popular.js

@@ -25,7 +25,7 @@ export default class BrowsePopular extends SiteModule {
 		// Popular Directory Channel Cards
 		this.apollo.ensureQuery(
 			'BrowsePage_Popular',
-			'data.streams.edges.node.0.createdAt'
+			'data.streams.edges.0.node.createdAt'
 		);
 	}
 

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

@@ -72,21 +72,21 @@ export default class Game extends SiteModule {
 
 	updateButtons(inst) {
 		const container = this.fine.getChildNode(inst);
-		if ( get('data.variables.type', inst.props) !== 'GAME' || ! container || ! container.querySelector )
+		if ( get('data.game', inst.props) == null || ! container || ! container.querySelector )
 			return;
 
 		const buttons = container.querySelector('.tw-flex > .tw-inline-flex');
 		if ( ! buttons )
 			return;
 
-		const ffz_buttons = buttons.querySelector('.ffz-buttons');
+		const ffz_buttons = buttons.querySelector('.ffz-directory-buttons');
 		if ( ffz_buttons )
 			ffz_buttons.remove();
 
 		let block_btn, block_label,
 			hidden_btn, hidden_label;
 
-		const game = get('data.directory.name', inst.props),
+		const game = get('data.game.name', inst.props) || inst.props.directoryName,
 			update_block = () => {
 				const blocked_games = this.settings.provider.get('directory.game.blocked-games', []),
 					blocked = blocked_games.includes(game);
@@ -124,7 +124,7 @@ export default class Game extends SiteModule {
 
 		update_hidden();
 
-		buttons.appendChild(<div class="ffz-buttons">
+		buttons.appendChild(<div class="ffz-directory-buttons">
 			{block_btn}
 			{hidden_btn}
 		</div>);

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

@@ -52,9 +52,9 @@ This is a very early feature and will change as there is time.`,
 		});
 
 		this.settings.add('theme.is-dark', {
-			requires: ['theme.can-dark', 'context.ui.theme'],
+			requires: ['theme.can-dark', 'context.ui.theme', 'context.ui.theatreModeEnabled'],
 			process(ctx) {
-				return ctx.get('theme.can-dark') && ctx.get('context.ui.theme') === 1;
+				return ctx.get('context.ui.theatreModeEnabled') || (ctx.get('theme.can-dark') && ctx.get('context.ui.theme') === 1);
 			},
 			changed: () => this.updateCSS()
 		});
@@ -74,8 +74,8 @@ This is a very early feature and will change as there is time.`,
 		const dark = this.settings.get('theme.is-dark'),
 			gray = this.settings.get('theme.dark');
 
-		document.body.classList.toggle('tw-theme--dark', dark);
+		document.body.classList.toggle('tw-root--theme-dark', dark);
-		document.body.classList.toggle('tw-theme--ffz', gray);
+		document.body.classList.toggle('tw-root--theme-ffz', gray);
 
 		this.css_tweaks.setVariable('border-color', dark ? (gray ? '#2a2a2a'  : '#2c2541') : '#dad8de');
 	}

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

@@ -33,7 +33,7 @@
 	}
 }
 
-.tw-theme--ffz, .tw-theme--ffz.tw-theme--dark, .tw-theme--dark, body {
+.tw-root--theme-ffz, .tw-root--theme-ffz.tw-root--theme-dark, .tw-root--theme-dark, body {
 	.ffz-stat > .tw-button--text,
 	.ffz-stat.tw-button--text {
 		color: inherit;

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

@@ -101,7 +101,7 @@
     .ffz--action &,
     .tw-interactable:hover &,
     &:hover {
-        .tw-theme--dark &, & {
+        .tw-root--theme-dark &, & {
             &.tw-c-text-alt-2 {
                 color: inherit !important;
             }

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

@@ -9,6 +9,10 @@
 	pointer-events: all;
 }
 
+.ffz-directory-buttons {
+	order: 1;
+}
+
 
 // TODO: Color variables
 

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

@@ -1,4 +1,4 @@
-.tw-theme--dark .live-channel-card__boxart {
+.tw-root--theme-dark .live-channel-card__boxart {
 	border-right: none;
 	border-bottom: none;
 }

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

@@ -1,4 +1,4 @@
-.tw-theme--ffz {
+.tw-root--theme-ffz {
 	--ffz-color-0: #1d1d1d;
 	--ffz-color-1: #dadada;
 	--ffz-color-2: #a6a6a6;
@@ -78,7 +78,7 @@
 	--ffz-color-74: rgba(125, 125, 125, 0.5);
 }
 
-.tw-theme--ffz, .tw-theme--ffz .tw-theme--dark, .tw-theme--ffz.tw-theme--dark {
+.tw-root--theme-ffz, .tw-root--theme-ffz .tw-root--theme-dark, .tw-root--theme-ffz.tw-root--theme-dark {
 	.modal__backdrop {
 		background-color: var(--ffz-color-25);
 	}

styles/chat.scss

@@ -33,6 +33,13 @@
 	margin: 0 .3rem .2rem 0;
 	background-position: center;
 	vertical-align: middle;
+
+	&.ffz-full-size {
+		min-width: 1.8rem;
+		height: 1.8rem;
+		margin: 0 .3rem .2rem 0;
+		border-radius: 0;
+	}
 }
 
 

styles/dialog.scss

@@ -33,7 +33,7 @@
 		width: 100%;
 		height: 100%;
 
-		&, .tw-theme--dark & {
+		&, .tw-root--theme-dark & {
 			border: none !important;
 		}
 

styles/tooltips.scss

@@ -116,7 +116,7 @@ body {
 	}
 
 
-	.tw-theme--dark & {
+	.tw-root--theme-dark & {
 		background: #fff;
 		color: #0e0c13;
 

styles/widgets.scss

@@ -175,7 +175,7 @@
 		border-radius: 2px;
 		background-color: rgba(0,0,0,0.1);
 
-		.tw-theme--dark & {
+		.tw-root--theme-dark & {
 			background-color: rgba(255,255,255,0.05);
 		}
 	}

styles/widgets/color-picker.scss

@@ -8,7 +8,7 @@ $input-border: #392e5c;
 $input-active-border: #7d5bbe;
 
 
-.tw-theme--dark {
+.tw-root--theme-dark {
 	.vc-sketch {
 		background: $bg-color;
 		box-shadow: 0 0 0 1px $border-color,
@@ -57,7 +57,7 @@ $input-border: var(--ffz-color-26);
 $input-active-border: var(--ffz-color-5);
 
 
-.tw-theme--dark.tw-theme--ffz {
+.tw-root--theme-dark.tw-root--theme-ffz {
 	.vc-sketch {
 		background: $bg-color;
 		box-shadow: 0 0 0 1px $border-color,

styles/widgets/menu-container.scss

@@ -16,7 +16,7 @@
 
 		background-color: $bg-light;
 
-		.tw-theme--dark & {
+		.tw-root--theme-dark & {
 			background-color: $bg-dark;
 		}
 

styles/widgets/menu-tree.scss

@@ -19,7 +19,7 @@
 
 	.active > div,
 	.active > div:hover,
-	.tw-theme--dark & .active > div:hover {
+	.tw-root--theme-dark & .active > div:hover {
 		background-color: #6441a4;
 		color: #fff;
 	}
@@ -29,7 +29,7 @@
 
 		background-color: #fff;
 
-		.tw-theme--dark & {
+		.tw-root--theme-dark & {
 			background-color: #201c2b;
 		}
 	}

styles/widgets/profile-selector.scss

@@ -23,7 +23,7 @@
 		opacity: .5;
 		font-variant: italic;
 
-		.tw-theme--dark & {
+		.tw-root--theme-dark & {
 			opacity: .25;
 		}
 	}
@@ -37,7 +37,7 @@
 	}
 
 	&:last-child {
-		&, .tw-theme--dark & {
+		&, .tw-root--theme-dark & {
 			border-bottom: none !important
 		}
 	}
@@ -69,7 +69,7 @@
 	&:not(.live):not(:hover):not(:focus) {
 		opacity: 0.5;
 
-		.tw-theme--dark & {
+		.tw-root--theme-dark & {
 			opacity: .25;
 		}
 	}

styles/widgets/tab-container.scss

@@ -20,7 +20,7 @@
 
 		border-color: $border-light;
 
-		.tw-theme--dark & {
+		.tw-root--theme-dark & {
 			border-color: $border-dark;
 		}