this repo has no description
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

Visual improvements to post embeds for external links

+51 -16
+51 -16
src/view/com/util/PostEmbeds.tsx
··· 1 1 import React from 'react' 2 - import {StyleSheet, StyleProp, View, ViewStyle} from 'react-native' 2 + import {Image, StyleSheet, StyleProp, View, ViewStyle} from 'react-native' 3 3 import {AppBskyEmbedImages, AppBskyEmbedExternal} from '@atproto/api' 4 + import LinearGradient from 'react-native-linear-gradient' 4 5 import {Link} from '../util/Link' 5 6 import {Text} from './text/Text' 6 7 import {AutoSizedImage} from './images/AutoSizedImage' ··· 8 9 import {ImagesLightbox} from '../../../state/models/shell-ui' 9 10 import {useStores} from '../../../state' 10 11 import {usePalette} from '../../lib/hooks/usePalette' 12 + import {gradients} from '../../lib/styles' 13 + import {DEF_AVATAR} from '../../lib/assets' 11 14 12 15 type Embed = 13 16 | AppBskyEmbedImages.Presented ··· 80 83 href={link.uri} 81 84 noFeedback> 82 85 {link.thumb ? ( 83 - <AutoSizedImage uri={link.thumb} containerStyle={{borderRadius: 4}} /> 84 - ) : undefined} 85 - <Text type="h5" numberOfLines={2} style={pal.text}> 86 - {link.title || link.uri} 87 - </Text> 88 - <Text type="body2" numberOfLines={1} style={pal.textLight}> 89 - {link.uri} 90 - </Text> 91 - {link.description ? ( 86 + <AutoSizedImage uri={link.thumb} containerStyle={styles.extImage} /> 87 + ) : ( 88 + <LinearGradient 89 + colors={[gradients.blue.start, gradients.blue.end]} 90 + start={{x: 0, y: 0}} 91 + end={{x: 1, y: 1}} 92 + style={[styles.extImage, styles.extImageFallback]} 93 + /> 94 + )} 95 + <View style={styles.extInner}> 92 96 <Text 93 - type="body1" 97 + type="body2" 94 98 numberOfLines={2} 95 - style={[pal.text, styles.extDescription]}> 96 - {link.description} 99 + style={[pal.text, styles.extTitle]}> 100 + {link.title || link.uri} 101 + </Text> 102 + <Text 103 + type="body2" 104 + numberOfLines={1} 105 + style={[pal.textLight, styles.extUri]}> 106 + {link.uri} 97 107 </Text> 98 - ) : undefined} 108 + {link.description ? ( 109 + <Text 110 + type="body2" 111 + numberOfLines={2} 112 + style={[pal.text, styles.extDescription]}> 113 + {link.description} 114 + </Text> 115 + ) : undefined} 116 + </View> 99 117 </Link> 100 118 ) 101 119 } ··· 107 125 marginTop: 4, 108 126 }, 109 127 extOuter: { 110 - padding: 10, 111 128 borderWidth: 1, 112 - borderRadius: 4, 129 + borderRadius: 8, 113 130 marginTop: 4, 131 + }, 132 + extInner: { 133 + padding: 10, 134 + }, 135 + extImage: { 136 + borderTopLeftRadius: 6, 137 + borderTopRightRadius: 6, 138 + width: '100%', 139 + height: 200, 140 + }, 141 + extImageFallback: { 142 + height: 160, 143 + }, 144 + extTitle: { 145 + fontWeight: '600', 146 + }, 147 + extUri: { 148 + marginTop: 2, 114 149 }, 115 150 extDescription: { 116 151 marginTop: 4,