octo/tooot
octo/tooot
1
0
Fork 0
mirror of https://github.com/tooot-app/app synced 2025-01-06 23:01:51 +01:00
Code Issues Projects Releases Wiki Activity

Card use blurhash

Browse Source
This commit is contained in:
Zhiyuan Zheng 2020-12-25 21:24:07 +01:00
parent b5b9c0669c
commit 087f50577f
No known key found for this signature in database
GPG Key ID: 078A93AB607D85E0
1 changed files with 21 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
src/components/Timelines/Timeline/Shared/Card.tsx
View File

@ -1,8 +1,10 @@
import React from 'react'
import React, { useEffect, useMemo, useState } from 'react'
import { Image, Pressable, StyleSheet, Text, View } from 'react-native'
import { StyleConstants } from '@utils/styles/constants'
import { useTheme } from '@utils/styles/ThemeManager'
import openLink from '@root/utils/openLink'
import { Surface } from 'gl-react-expo'
import { Blurhash } from 'gl-react-blurhash'
export interface Props {
card: Mastodon.Card
@ -11,16 +13,29 @@ export interface Props {
const TimelineCard: React.FC<Props> = ({ card }) => {
const { theme } = useTheme()
const [imageLoaded, setImageLoaded] = useState(false)
useEffect(
() => card.image && Image.getSize(card.image, () => setImageLoaded(true)),
[]
)
const cardVisual = useMemo(() => {
if (imageLoaded) {
return <Image source={{ uri: card.image }} style={styles.image} />
} else {
return (
<Surface style={styles.image}>
<Blurhash hash={card.blurhash} />
</Surface>
)
}
}, [imageLoaded])
return (
<Pressable
style={[styles.card, { borderColor: theme.border }]}
onPress={async () => await openLink(card.url)}
>
{card.image && (
<View style={styles.left}>
<Image source={{ uri: card.image }} style={styles.image} />
</View>
)}
{card.image && <View style={styles.left}>{cardVisual}</View>}
<View style={styles.right}>
<Text
numberOfLines={2}