Merge branch 'next-blurhash' into 'next'

Card: display Blurhash behind link preview cards

See merge request soapbox-pub/soapbox-fe!1277

app/soapbox/components/blurhash.tsx

@@ -0,0 +1,59 @@
+import { decode } from 'blurhash';
+import React, { useRef, useEffect } from 'react';
+
+interface IBlurhash {
+  /** Hash to render */
+  hash: string | null | undefined,
+  /**  Width of the blurred region in pixels. Defaults to 32. */
+  width?: number,
+  /** Height of the blurred region in pixels. Defaults to width. */
+  height?: number,
+  /**
+   * Whether dummy mode is enabled. If enabled, nothing is rendered
+   * and canvas left untouched.
+   */
+  dummy?: boolean,
+  /** className of the canvas element. */
+  className?: string,
+}
+
+/**
+ * Renders a blurhash in a canvas element.
+ * @see {@link https://blurha.sh/}
+ */
+const Blurhash: React.FC<IBlurhash> = ({
+  hash,
+  width = 32,
+  height = width,
+  dummy = false,
+  ...canvasProps
+}) => {
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+
+  useEffect(() => {
+    const { current: canvas } = canvasRef;
+    if (!canvas) return;
+
+    // resets canvas
+    canvas.width = canvas.width; // eslint-disable-line no-self-assign
+
+    if (dummy || !hash) return;
+
+    try {
+      const pixels = decode(hash, width, height);
+      const ctx = canvas.getContext('2d');
+      const imageData = new ImageData(pixels, width, height);
+
+      if (!ctx) return;
+      ctx.putImageData(imageData, 0, 0);
+    } catch (err) {
+      console.error('Blurhash decoding failure', { err, hash });
+    }
+  }, [dummy, hash, width, height]);
+
+  return (
+    <canvas {...canvasProps} ref={canvasRef} width={width} height={height} />
+  );
+};
+
+export default React.memo(Blurhash);

app/soapbox/features/status/components/card.tsx

@@ -2,6 +2,7 @@ import classnames from 'classnames';
 import { List as ImmutableList } from 'immutable';
 import React, { useState, useEffect } from 'react';
 
+import Blurhash from 'soapbox/components/blurhash';
 import Icon from 'soapbox/components/icon';
 import { HStack } from 'soapbox/components/ui';
 import { normalizeAttachment } from 'soapbox/normalizers';
@@ -161,6 +162,13 @@ const Card: React.FC<ICard> = ({
 
   let embed: React.ReactNode = '';
 
+  const canvas = (
+    <Blurhash
+      className='absolute w-full h-full inset-0 -z-10'
+      hash={card.blurhash}
+    />
+  );
+
   const thumbnail = (
     <div
       style={{
@@ -184,6 +192,7 @@ const Card: React.FC<ICard> = ({
 
       embed = (
         <div className='status-card__image'>
+          {canvas}
           {thumbnail}
 
           <div className='absolute inset-0 flex items-center justify-center'>
@@ -226,6 +235,7 @@ const Card: React.FC<ICard> = ({
   } else if (card.image) {
     embed = (
       <div className='status-card__image'>
+        {canvas}
         {thumbnail}
       </div>
     );