diff options
| -rw-r--r-- | src/view/com/composer/ExternalEmbed.tsx | 148 |
1 files changed, 63 insertions, 85 deletions
diff --git a/src/view/com/composer/ExternalEmbed.tsx b/src/view/com/composer/ExternalEmbed.tsx index 02dd1bbd7..3c2bf762d 100644 --- a/src/view/com/composer/ExternalEmbed.tsx +++ b/src/view/com/composer/ExternalEmbed.tsx @@ -1,18 +1,15 @@ import React from 'react' -import { - ActivityIndicator, - StyleSheet, - TouchableOpacity, - View, -} from 'react-native' +import {TouchableOpacity, View} from 'react-native' import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' -import {AutoSizedImage} from '../util/images/AutoSizedImage' -import {Text} from '../util/text/Text' -import {s} from 'lib/styles' -import {usePalette} from 'lib/hooks/usePalette' -import {ExternalEmbedDraft} from 'lib/api/index' -import {useLingui} from '@lingui/react' import {msg} from '@lingui/macro' +import {useLingui} from '@lingui/react' + +import {ExternalEmbedDraft} from 'lib/api/index' +import {s} from 'lib/styles' +import {ExternalLinkEmbed} from 'view/com/util/post-embeds/ExternalLinkEmbed' +import {atoms as a, useTheme} from '#/alf' +import {Loader} from '#/components/Loader' +import {Text} from '#/components/Typography' export const ExternalEmbed = ({ link, @@ -21,50 +18,69 @@ export const ExternalEmbed = ({ link?: ExternalEmbedDraft onRemove: () => void }) => { - const pal = usePalette('default') - const palError = usePalette('error') + const t = useTheme() const {_} = useLingui() - if (!link) { - return <View /> - } + + const linkInfo = React.useMemo( + () => + link && { + title: link.meta?.title ?? link.uri, + uri: link.uri, + description: link.meta?.description ?? '', + thumb: link.localThumb?.path, + }, + [link], + ) + + if (!link) return null + return ( - <View style={[styles.outer, pal.view, pal.border]}> + <View + style={[ + a.border, + a.rounded_sm, + a.mt_2xl, + a.mb_xl, + a.overflow_hidden, + t.atoms.border_contrast_medium, + ]}> {link.isLoading ? ( <View - style={[styles.image, {backgroundColor: pal.colors.backgroundLight}]}> - <ActivityIndicator size="large" style={styles.spinner} /> + style={[ + a.align_center, + a.justify_center, + a.py_5xl, + t.atoms.bg_contrast_25, + ]}> + <Loader size="xl" /> </View> - ) : link.localThumb ? ( - <AutoSizedImage uri={link.localThumb.path} style={styles.image} /> - ) : undefined} - <View style={styles.inner}> - {!!link.meta?.title && ( - <Text type="sm-bold" numberOfLines={2} style={[pal.text]}> - {link.meta.title} - </Text> - )} - <Text type="sm" numberOfLines={1} style={[pal.textLight, styles.uri]}> - {link.uri} - </Text> - {!!link.meta?.description && ( - <Text - type="sm" - numberOfLines={2} - style={[pal.text, styles.description]}> - {link.meta.description} + ) : link.meta?.error ? ( + <View + style={[a.justify_center, a.p_md, a.gap_xs, t.atoms.bg_contrast_25]}> + <Text numberOfLines={1} style={t.atoms.text_contrast_high}> + {link.uri} </Text> - )} - {link.meta?.error ? ( - <Text - type="sm" - numberOfLines={2} - style={[{color: palError.colors.background}, styles.description]}> + <Text numberOfLines={2} style={[{color: t.palette.negative_400}]}> {link.meta.error} </Text> - ) : null} - </View> + </View> + ) : linkInfo ? ( + <View style={{pointerEvents: 'none'}}> + <ExternalLinkEmbed link={linkInfo} /> + </View> + ) : null} <TouchableOpacity - style={styles.removeBtn} + style={{ + position: 'absolute', + top: 10, + right: 10, + height: 36, + width: 36, + backgroundColor: 'rgba(0, 0, 0, 0.75)', + borderRadius: 18, + alignItems: 'center', + justifyContent: 'center', + }} onPress={onRemove} accessibilityRole="button" accessibilityLabel={_(msg`Remove image preview`)} @@ -75,41 +91,3 @@ export const ExternalEmbed = ({ </View> ) } - -const styles = StyleSheet.create({ - outer: { - borderWidth: 1, - borderRadius: 8, - marginTop: 20, - marginBottom: 10, - }, - inner: { - padding: 10, - }, - image: { - borderTopLeftRadius: 6, - borderTopRightRadius: 6, - width: '100%', - maxHeight: 200, - }, - removeBtn: { - position: 'absolute', - top: 10, - right: 10, - width: 36, - height: 36, - backgroundColor: 'rgba(0, 0, 0, 0.75)', - borderRadius: 18, - alignItems: 'center', - justifyContent: 'center', - }, - spinner: { - marginTop: 60, - }, - uri: { - marginTop: 2, - }, - description: { - marginTop: 4, - }, -}) |