moon
/
soapbox
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Card: display Blurhash behind link preview cards 

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