this repo has no description
Visual improvements to post embeds for external links
+51
-16
+51
-16
src/view/com/util/PostEmbeds.tsx
+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,