diff options
| -rw-r--r-- | src/view/com/util/PostEmbeds.tsx | 67 |
1 files changed, 51 insertions, 16 deletions
diff --git a/src/view/com/util/PostEmbeds.tsx b/src/view/com/util/PostEmbeds.tsx index b0122a700..d38dd6c08 100644 --- a/src/view/com/util/PostEmbeds.tsx +++ b/src/view/com/util/PostEmbeds.tsx @@ -1,6 +1,7 @@ import React from 'react' -import {StyleSheet, StyleProp, View, ViewStyle} from 'react-native' +import {Image, StyleSheet, StyleProp, View, ViewStyle} from 'react-native' import {AppBskyEmbedImages, AppBskyEmbedExternal} from '@atproto/api' +import LinearGradient from 'react-native-linear-gradient' import {Link} from '../util/Link' import {Text} from './text/Text' import {AutoSizedImage} from './images/AutoSizedImage' @@ -8,6 +9,8 @@ import {ImageLayoutGrid} from './images/ImageLayoutGrid' import {ImagesLightbox} from '../../../state/models/shell-ui' import {useStores} from '../../../state' import {usePalette} from '../../lib/hooks/usePalette' +import {gradients} from '../../lib/styles' +import {DEF_AVATAR} from '../../lib/assets' type Embed = | AppBskyEmbedImages.Presented @@ -80,22 +83,37 @@ export function PostEmbeds({ href={link.uri} noFeedback> {link.thumb ? ( - <AutoSizedImage uri={link.thumb} containerStyle={{borderRadius: 4}} /> - ) : undefined} - <Text type="h5" numberOfLines={2} style={pal.text}> - {link.title || link.uri} - </Text> - <Text type="body2" numberOfLines={1} style={pal.textLight}> - {link.uri} - </Text> - {link.description ? ( + <AutoSizedImage uri={link.thumb} containerStyle={styles.extImage} /> + ) : ( + <LinearGradient + colors={[gradients.blue.start, gradients.blue.end]} + start={{x: 0, y: 0}} + end={{x: 1, y: 1}} + style={[styles.extImage, styles.extImageFallback]} + /> + )} + <View style={styles.extInner}> <Text - type="body1" + type="body2" numberOfLines={2} - style={[pal.text, styles.extDescription]}> - {link.description} + style={[pal.text, styles.extTitle]}> + {link.title || link.uri} </Text> - ) : undefined} + <Text + type="body2" + numberOfLines={1} + style={[pal.textLight, styles.extUri]}> + {link.uri} + </Text> + {link.description ? ( + <Text + type="body2" + numberOfLines={2} + style={[pal.text, styles.extDescription]}> + {link.description} + </Text> + ) : undefined} + </View> </Link> ) } @@ -107,11 +125,28 @@ const styles = StyleSheet.create({ marginTop: 4, }, extOuter: { - padding: 10, borderWidth: 1, - borderRadius: 4, + borderRadius: 8, marginTop: 4, }, + extInner: { + padding: 10, + }, + extImage: { + borderTopLeftRadius: 6, + borderTopRightRadius: 6, + width: '100%', + height: 200, + }, + extImageFallback: { + height: 160, + }, + extTitle: { + fontWeight: '600', + }, + extUri: { + marginTop: 2, + }, extDescription: { marginTop: 4, }, |