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