lenooby09.tech
mirror of https://git.lenooby09.tech/LeNooby09/social-app.git
1import React from 'react'
2import {
3 ActivityIndicator,
4 StyleSheet,
5 TouchableOpacity,
6 View,
7} from 'react-native'
8import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
9import {AutoSizedImage} from '../util/images/AutoSizedImage'
10import {Text} from '../util/text/Text'
11import {s} from 'lib/styles'
12import {usePalette} from 'lib/hooks/usePalette'
13import {ExternalEmbedDraft} from 'lib/api/index'
14import {useLingui} from '@lingui/react'
15import {msg} from '@lingui/macro'
16
17export const ExternalEmbed = ({
18 link,
19 onRemove,
20}: {
21 link?: ExternalEmbedDraft
22 onRemove: () => void
23}) => {
24 const pal = usePalette('default')
25 const palError = usePalette('error')
26 const {_} = useLingui()
27 if (!link) {
28 return <View />
29 }
30 return (
31 <View style={[styles.outer, pal.view, pal.border]}>
32 {link.isLoading ? (
33 <View
34 style={[styles.image, {backgroundColor: pal.colors.backgroundLight}]}>
35 <ActivityIndicator size="large" style={styles.spinner} />
36 </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}
55 </Text>
56 )}
57 {link.meta?.error ? (
58 <Text
59 type="sm"
60 numberOfLines={2}
61 style={[{color: palError.colors.background}, styles.description]}>
62 {link.meta.error}
63 </Text>
64 ) : null}
65 </View>
66 <TouchableOpacity
67 style={styles.removeBtn}
68 onPress={onRemove}
69 accessibilityRole="button"
70 accessibilityLabel={_(msg`Remove image preview`)}
71 accessibilityHint={`Removes default thumbnail from ${link.uri}`}
72 onAccessibilityEscape={onRemove}>
73 <FontAwesomeIcon size={18} icon="xmark" style={s.white} />
74 </TouchableOpacity>
75 </View>
76 )
77}
78
79const 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})