Use the existing `ExternalLinkEmbed` for embed previews in the composer (#3579)

* use existing `ExternalLinkEmbed` for showing previews

* cleanup
zio/stable
Hailey 2024-04-16 13:38:47 -07:00 committed by GitHub
parent a66c9d0bc4
commit 48bd98f9ef
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 63 additions and 85 deletions

View File

@ -1,18 +1,15 @@
import React from 'react' import React from 'react'
import { import {TouchableOpacity, View} from 'react-native'
ActivityIndicator,
StyleSheet,
TouchableOpacity,
View,
} from 'react-native'
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' 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 {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 = ({ export const ExternalEmbed = ({
link, link,
@ -21,50 +18,69 @@ export const ExternalEmbed = ({
link?: ExternalEmbedDraft link?: ExternalEmbedDraft
onRemove: () => void onRemove: () => void
}) => { }) => {
const pal = usePalette('default') const t = useTheme()
const palError = usePalette('error')
const {_} = useLingui() 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 ( 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 ? ( {link.isLoading ? (
<View <View
style={[styles.image, {backgroundColor: pal.colors.backgroundLight}]}> style={[
<ActivityIndicator size="large" style={styles.spinner} /> a.align_center,
a.justify_center,
a.py_5xl,
t.atoms.bg_contrast_25,
]}>
<Loader size="xl" />
</View> </View>
) : link.localThumb ? ( ) : link.meta?.error ? (
<AutoSizedImage uri={link.localThumb.path} style={styles.image} /> <View
) : undefined} style={[a.justify_center, a.p_md, a.gap_xs, t.atoms.bg_contrast_25]}>
<View style={styles.inner}> <Text numberOfLines={1} style={t.atoms.text_contrast_high}>
{!!link.meta?.title && ( {link.uri}
<Text type="sm-bold" numberOfLines={2} style={[pal.text]}>
{link.meta.title}
</Text> </Text>
)} <Text numberOfLines={2} style={[{color: t.palette.negative_400}]}>
<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}
</Text>
)}
{link.meta?.error ? (
<Text
type="sm"
numberOfLines={2}
style={[{color: palError.colors.background}, styles.description]}>
{link.meta.error} {link.meta.error}
</Text> </Text>
) : null} </View>
</View> ) : linkInfo ? (
<View style={{pointerEvents: 'none'}}>
<ExternalLinkEmbed link={linkInfo} />
</View>
) : null}
<TouchableOpacity <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} onPress={onRemove}
accessibilityRole="button" accessibilityRole="button"
accessibilityLabel={_(msg`Remove image preview`)} accessibilityLabel={_(msg`Remove image preview`)}
@ -75,41 +91,3 @@ export const ExternalEmbed = ({
</View> </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,
},
})