forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
Use the existing `ExternalLinkEmbed` for embed previews in the composer (#3579)
* use existing `ExternalLinkEmbed` for showing previews
* cleanup
+63
-85
+63
-85
src/view/com/composer/ExternalEmbed.tsx
+63
-85
src/view/com/composer/ExternalEmbed.tsx
···
1
1
import React from 'react'
2
-
import {
3
-
ActivityIndicator,
4
-
StyleSheet,
5
-
TouchableOpacity,
6
-
View,
7
-
} from 'react-native'
2
+
import {TouchableOpacity, View} from 'react-native'
8
3
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
9
-
import {AutoSizedImage} from '../util/images/AutoSizedImage'
10
-
import {Text} from '../util/text/Text'
4
+
import {msg} from '@lingui/macro'
5
+
import {useLingui} from '@lingui/react'
6
+
7
+
import {ExternalEmbedDraft} from 'lib/api/index'
11
8
import {s} from 'lib/styles'
12
-
import {usePalette} from 'lib/hooks/usePalette'
13
-
import {ExternalEmbedDraft} from 'lib/api/index'
14
-
import {useLingui} from '@lingui/react'
15
-
import {msg} from '@lingui/macro'
9
+
import {ExternalLinkEmbed} from 'view/com/util/post-embeds/ExternalLinkEmbed'
10
+
import {atoms as a, useTheme} from '#/alf'
11
+
import {Loader} from '#/components/Loader'
12
+
import {Text} from '#/components/Typography'
16
13
17
14
export const ExternalEmbed = ({
18
15
link,
···
21
18
link?: ExternalEmbedDraft
22
19
onRemove: () => void
23
20
}) => {
24
-
const pal = usePalette('default')
25
-
const palError = usePalette('error')
21
+
const t = useTheme()
26
22
const {_} = useLingui()
27
-
if (!link) {
28
-
return <View />
29
-
}
23
+
24
+
const linkInfo = React.useMemo(
25
+
() =>
26
+
link && {
27
+
title: link.meta?.title ?? link.uri,
28
+
uri: link.uri,
29
+
description: link.meta?.description ?? '',
30
+
thumb: link.localThumb?.path,
31
+
},
32
+
[link],
33
+
)
34
+
35
+
if (!link) return null
36
+
30
37
return (
31
-
<View style={[styles.outer, pal.view, pal.border]}>
38
+
<View
39
+
style={[
40
+
a.border,
41
+
a.rounded_sm,
42
+
a.mt_2xl,
43
+
a.mb_xl,
44
+
a.overflow_hidden,
45
+
t.atoms.border_contrast_medium,
46
+
]}>
32
47
{link.isLoading ? (
33
48
<View
34
-
style={[styles.image, {backgroundColor: pal.colors.backgroundLight}]}>
35
-
<ActivityIndicator size="large" style={styles.spinner} />
49
+
style={[
50
+
a.align_center,
51
+
a.justify_center,
52
+
a.py_5xl,
53
+
t.atoms.bg_contrast_25,
54
+
]}>
55
+
<Loader size="xl" />
36
56
</View>
37
-
) : link.localThumb ? (
38
-
<AutoSizedImage uri={link.localThumb.path} style={styles.image} />
39
-
) : undefined}
40
-
<View style={styles.inner}>
41
-
{!!link.meta?.title && (
42
-
<Text type="sm-bold" numberOfLines={2} style={[pal.text]}>
43
-
{link.meta.title}
44
-
</Text>
45
-
)}
46
-
<Text type="sm" numberOfLines={1} style={[pal.textLight, styles.uri]}>
47
-
{link.uri}
48
-
</Text>
49
-
{!!link.meta?.description && (
50
-
<Text
51
-
type="sm"
52
-
numberOfLines={2}
53
-
style={[pal.text, styles.description]}>
54
-
{link.meta.description}
57
+
) : link.meta?.error ? (
58
+
<View
59
+
style={[a.justify_center, a.p_md, a.gap_xs, t.atoms.bg_contrast_25]}>
60
+
<Text numberOfLines={1} style={t.atoms.text_contrast_high}>
61
+
{link.uri}
55
62
</Text>
56
-
)}
57
-
{link.meta?.error ? (
58
-
<Text
59
-
type="sm"
60
-
numberOfLines={2}
61
-
style={[{color: palError.colors.background}, styles.description]}>
63
+
<Text numberOfLines={2} style={[{color: t.palette.negative_400}]}>
62
64
{link.meta.error}
63
65
</Text>
64
-
) : null}
65
-
</View>
66
+
</View>
67
+
) : linkInfo ? (
68
+
<View style={{pointerEvents: 'none'}}>
69
+
<ExternalLinkEmbed link={linkInfo} />
70
+
</View>
71
+
) : null}
66
72
<TouchableOpacity
67
-
style={styles.removeBtn}
73
+
style={{
74
+
position: 'absolute',
75
+
top: 10,
76
+
right: 10,
77
+
height: 36,
78
+
width: 36,
79
+
backgroundColor: 'rgba(0, 0, 0, 0.75)',
80
+
borderRadius: 18,
81
+
alignItems: 'center',
82
+
justifyContent: 'center',
83
+
}}
68
84
onPress={onRemove}
69
85
accessibilityRole="button"
70
86
accessibilityLabel={_(msg`Remove image preview`)}
···
75
91
</View>
76
92
)
77
93
}
78
-
79
-
const styles = StyleSheet.create({
80
-
outer: {
81
-
borderWidth: 1,
82
-
borderRadius: 8,
83
-
marginTop: 20,
84
-
marginBottom: 10,
85
-
},
86
-
inner: {
87
-
padding: 10,
88
-
},
89
-
image: {
90
-
borderTopLeftRadius: 6,
91
-
borderTopRightRadius: 6,
92
-
width: '100%',
93
-
maxHeight: 200,
94
-
},
95
-
removeBtn: {
96
-
position: 'absolute',
97
-
top: 10,
98
-
right: 10,
99
-
width: 36,
100
-
height: 36,
101
-
backgroundColor: 'rgba(0, 0, 0, 0.75)',
102
-
borderRadius: 18,
103
-
alignItems: 'center',
104
-
justifyContent: 'center',
105
-
},
106
-
spinner: {
107
-
marginTop: 60,
108
-
},
109
-
uri: {
110
-
marginTop: 2,
111
-
},
112
-
description: {
113
-
marginTop: 4,
114
-
},
115
-
})