bigbuffet/bigbuffet-rw
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Card: display Blurhash behind link preview cards

Browse source 
8e96510b25
This commit is contained in:
Alex Gleason 2022-04-29 09:46:33 -05:00
parent 151cc8b149
commit 12a99b3635
No known key found for this signature in database
GPG key ID: 7211D1F99744FBB7
1 changed files with 10 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
app/soapbox/features/status/components/card.tsx
View file

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