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.js

@@ -1,68 +0,0 @@
-// @ts-check
-
-import { decode } from 'blurhash';
-import PropTypes from 'prop-types';
-import React, { useRef, useEffect } from 'react';
-
-/**
- * @typedef BlurhashPropsBase
- * @property {string?} hash Hash to render
- * @property {number} width
- * Width of the blurred region in pixels. Defaults to 32
- * @property {number} [height]
- * Height of the blurred region in pixels. Defaults to width
- * @property {boolean} [dummy]
- * Whether dummy mode is enabled. If enabled, nothing is rendered
- * and canvas left untouched
- */
-
-/** @typedef {JSX.IntrinsicElements['canvas'] & BlurhashPropsBase} BlurhashProps */
-
-/**
- * Component that is used to render blurred of blurhash string
- *
- * @param {BlurhashProps} param1 Props of the component
- * @returns Canvas which will render blurred region element to embed
- */
-function Blurhash({
-  hash,
-  width = 32,
-  height = width,
-  dummy = false,
-  ...canvasProps
-}) {
-  const canvasRef = /** @type {import('react').MutableRefObject<HTMLCanvasElement>} */ (useRef());
-
-  useEffect(() => {
-    const { current: canvas } = canvasRef;
-
-    // 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);
-
-      // @ts-ignore
-      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} />
-  );
-}
-
-Blurhash.propTypes = {
-  hash: PropTypes.string,
-  width: PropTypes.number,
-  height: PropTypes.number,
-  dummy: PropTypes.bool,
-};
-
-export default React.memo(Blurhash);

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