improve external link design (#2577)

* improve external link design

* slight changes

* use 1.91 aspect for images
zio/stable
Hailey 2024-01-19 15:24:17 -08:00 committed by GitHub
parent dafa0fb1e3
commit b96302beeb
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 19 additions and 25 deletions

View File

@ -29,22 +29,13 @@ export const ExternalLinkEmbed = ({
}, [link.uri, externalEmbedPrefs])
return (
<View style={{flexDirection: 'column'}}>
<View style={styles.container}>
{link.thumb && !embedPlayerParams ? (
<View
style={{
borderTopLeftRadius: 6,
borderTopRightRadius: 6,
width: '100%',
height: isMobile ? 200 : 300,
overflow: 'hidden',
}}>
<Image
style={styles.extImage}
style={{aspectRatio: 1.91}}
source={{uri: link.thumb}}
accessibilityIgnoresInvertColors
/>
</View>
) : undefined}
{(embedPlayerParams?.isGif && (
<ExternalGifEmbed link={link} params={embedPlayerParams} />
@ -52,12 +43,7 @@ export const ExternalLinkEmbed = ({
(embedPlayerParams && (
<ExternalPlayer link={link} params={embedPlayerParams} />
))}
<View
style={{
paddingHorizontal: isMobile ? 10 : 14,
paddingTop: 8,
paddingBottom: 10,
}}>
<View style={[styles.info, {paddingHorizontal: isMobile ? 10 : 14}]}>
<Text
type="sm"
numberOfLines={1}
@ -65,14 +51,14 @@ export const ExternalLinkEmbed = ({
{toNiceDomain(link.uri)}
</Text>
{!embedPlayerParams?.isGif && (
<Text type="lg-bold" numberOfLines={4} style={[pal.text]}>
<Text type="lg-bold" numberOfLines={3} style={[pal.text]}>
{link.title || link.uri}
</Text>
)}
{link.description && !embedPlayerParams?.hideDetails ? (
<Text
type="md"
numberOfLines={4}
numberOfLines={link.thumb ? 2 : 4}
style={[pal.text, styles.extDescription]}>
{link.description}
</Text>
@ -83,8 +69,16 @@ export const ExternalLinkEmbed = ({
}
const styles = StyleSheet.create({
extImage: {
flex: 1,
container: {
flexDirection: 'column',
borderRadius: 6,
overflow: 'hidden',
},
info: {
width: '100%',
bottom: 0,
paddingTop: 8,
paddingBottom: 10,
},
extUri: {
marginTop: 2,