From 12a99b3635b901a7162c62d080ad77d11115065f Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Fri, 29 Apr 2022 09:46:33 -0500
Subject: [PATCH] Card: display Blurhash behind link preview cards
 https://github.com/mastodon/mastodon/commit/8e96510b2528056e84cf8d0ed68d2e686e566180

---
 app/soapbox/features/status/components/card.tsx | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/app/soapbox/features/status/components/card.tsx b/app/soapbox/features/status/components/card.tsx
index ea09afe57..9aeeda38a 100644
--- a/app/soapbox/features/status/components/card.tsx
+++ b/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>
     );