1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
|
import React, {useEffect, useState} from 'react'
import {
ActivityIndicator,
StyleSheet,
StyleProp,
Text,
View,
ViewStyle,
} from 'react-native'
import {Entity} from '../../../third-party/api/src/client/types/app/bsky/feed/post'
import {Link} from '../util/Link'
import {LinkMeta, getLikelyType, LikelyType} from '../../../lib/link-meta'
import {colors} from '../../lib/styles'
import {useStores} from '../../../state'
export function PostEmbeds({
entities,
style,
}: {
entities?: Entity[]
style?: StyleProp<ViewStyle>
}) {
const store = useStores()
const [linkMeta, setLinkMeta] = useState<LinkMeta | undefined>(undefined)
const link = entities?.find(
ent =>
ent.type === 'link' && getLikelyType(ent.value || '') === LikelyType.HTML,
)
useEffect(() => {
let aborted = false
store.linkMetas.getLinkMeta(link?.value || '').then(linkMeta => {
if (!aborted) {
setLinkMeta(linkMeta)
}
})
return () => {
aborted = true
}
}, [link])
if (!link) {
return <View />
}
return (
<Link style={[styles.outer, style]} href={link.value}>
{linkMeta ? (
<>
<Text numberOfLines={1} style={styles.title}>
{linkMeta.title || linkMeta.url}
</Text>
<Text numberOfLines={1} style={styles.url}>
{linkMeta.url}
</Text>
{linkMeta.description ? (
<Text numberOfLines={2} style={styles.description}>
{linkMeta.description}
</Text>
) : undefined}
</>
) : (
<ActivityIndicator />
)}
</Link>
)
}
const styles = StyleSheet.create({
outer: {
borderWidth: 1,
borderColor: colors.gray2,
borderRadius: 8,
padding: 10,
},
title: {
fontSize: 16,
fontWeight: 'bold',
},
description: {
marginTop: 4,
fontSize: 15,
},
url: {
color: colors.gray4,
},
})
|
