4.29.1

* Changed: Apply the full width clips page setting to the create new clip page.
* Fixed: Issue with Apollo failing to initialize breaking multiple parts of FFZ.
* API Changed: Support `sfw_images` when rendering rich tokens.

package.json

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

src/sites/clips/css_tweaks/full-width.scss

@@ -1,4 +1,9 @@
 @media (min-width: 1200px) {
+	.clips-edit-clip-wrapper {
+		max-width: #{"min(calc(100vw - 4rem),calc(16 / 9 * calc(100vh - 31rem)))"};
+		width: 100vw;
+	}
+
 	.clips-watch {
 		max-width: #{"min(calc(100vw - 2rem),calc(calc(16 / 9 * calc(100vh - 15rem)) + 36rem))"};
 	}

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

@@ -1,6 +1,7 @@
 .user-avatar-animated,
 .search-result-card,
 .ffz-avatar,
+.tw-halo,
 .tw-avatar {
 	--border-radius-rounded: 0 !important;
 }

src/utilities/compat/apollo.js

@@ -85,9 +85,14 @@ export default class Apollo extends Module {
 			const root = this.fine.react,
 				inst = root && root.stateNode;
 
-			client = this.client = inst?.props?.client || root?.memoizedProps?.client;
+			client = inst?.props?.client || root?.memoizedProps?.client;
-			if ( root && ! client )
+			if ( root && ! client ) {
 				client = this.fine.searchTree(null, n => n.props?.client?.queryManager, 500);
+				if ( client )
+					client = client?.props?.client;
+			}
+
+			this.client = client;
 		}
 
 		if ( ! client )

src/utilities/rich_tokens.js

@@ -548,11 +548,15 @@ function header_vue(token, h, ctx) {
 		]
 	}, content);
 
-	if ( token.image ) {
+	let imtok = token.sfw_image;
-		const aspect = token.image.aspect;
+	if ( token.image && canShowImage(token.image, ctx) )
+		imtok = token.image;
+
+	if ( imtok ) {
+		const aspect = imtok.aspect;
 
 		let image = render_image({
-			...token.image,
+			...imtok,
 			aspect: undefined
 		}, h, ctx);
 		const right = token.image_side === 'right';
@@ -634,11 +638,15 @@ function header_normal(token, createElement, ctx) {
 		className: `tw-flex tw-full-width tw-overflow-hidden ${token.compact ? 'ffz--rich-header ffz--compact-header tw-align-items-center' : 'tw-justify-content-center tw-flex-column tw-flex-grow-1'}`
 	}, content);
 
-	if ( token.image ) {
+	let imtok = token.sfw_image;
-		const aspect = token.image.aspect;
+	if ( token.image && canShowImage(token.image, ctx) )
+		imtok = token.image;
+
+	if ( imtok ) {
+		const aspect = imtok.aspect;
 
 		let image = render_image({
-			...token.image,
+			...imtok,
 			aspect: undefined
 		}, createElement, ctx);
 		const right = token.image_side === 'right';
@@ -717,8 +725,12 @@ TOKEN_TYPES.icon = function(token, createElement, ctx) {
 // Token Type: Image
 // ============================================================================
 
+function canShowImage(token, ctx) {
+	return !(has(token, 'sfw') && ! token.sfw && ! ctx.allow_unsafe);
+}
+
 function render_image(token, createElement, ctx) {
-	if ( ! token.url || (has(token, 'sfw') && ! token.sfw && ! ctx.allow_unsafe) )
+	if ( ! token.url || ! canShowImage(token, ctx) )
 		return null;
 
 	const round = getRoundClass(token.rounding);