forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
improve external link design (#2577)
* improve external link design
* slight changes
* use 1.91 aspect for images
+19
-25
+19
-25
src/view/com/util/post-embeds/ExternalLinkEmbed.tsx
+19
-25
src/view/com/util/post-embeds/ExternalLinkEmbed.tsx
···
29
29
}, [link.uri, externalEmbedPrefs])
30
30
31
31
return (
32
-
<View style={{flexDirection: 'column'}}>
32
+
<View style={styles.container}>
33
33
{link.thumb && !embedPlayerParams ? (
34
-
<View
35
-
style={{
36
-
borderTopLeftRadius: 6,
37
-
borderTopRightRadius: 6,
38
-
width: '100%',
39
-
height: isMobile ? 200 : 300,
40
-
overflow: 'hidden',
41
-
}}>
42
-
<Image
43
-
style={styles.extImage}
44
-
source={{uri: link.thumb}}
45
-
accessibilityIgnoresInvertColors
46
-
/>
47
-
</View>
34
+
<Image
35
+
style={{aspectRatio: 1.91}}
36
+
source={{uri: link.thumb}}
37
+
accessibilityIgnoresInvertColors
38
+
/>
48
39
) : undefined}
49
40
{(embedPlayerParams?.isGif && (
50
41
<ExternalGifEmbed link={link} params={embedPlayerParams} />
···
52
43
(embedPlayerParams && (
53
44
<ExternalPlayer link={link} params={embedPlayerParams} />
54
45
))}
55
-
<View
56
-
style={{
57
-
paddingHorizontal: isMobile ? 10 : 14,
58
-
paddingTop: 8,
59
-
paddingBottom: 10,
60
-
}}>
46
+
<View style={[styles.info, {paddingHorizontal: isMobile ? 10 : 14}]}>
61
47
<Text
62
48
type="sm"
63
49
numberOfLines={1}
···
65
51
{toNiceDomain(link.uri)}
66
52
</Text>
67
53
{!embedPlayerParams?.isGif && (
68
-
<Text type="lg-bold" numberOfLines={4} style={[pal.text]}>
54
+
<Text type="lg-bold" numberOfLines={3} style={[pal.text]}>
69
55
{link.title || link.uri}
70
56
</Text>
71
57
)}
72
58
{link.description && !embedPlayerParams?.hideDetails ? (
73
59
<Text
74
60
type="md"
75
-
numberOfLines={4}
61
+
numberOfLines={link.thumb ? 2 : 4}
76
62
style={[pal.text, styles.extDescription]}>
77
63
{link.description}
78
64
</Text>
···
83
69
}
84
70
85
71
const styles = StyleSheet.create({
86
-
extImage: {
87
-
flex: 1,
72
+
container: {
73
+
flexDirection: 'column',
74
+
borderRadius: 6,
75
+
overflow: 'hidden',
76
+
},
77
+
info: {
78
+
width: '100%',
79
+
bottom: 0,
80
+
paddingTop: 8,
81
+
paddingBottom: 10,
88
82
},
89
83
extUri: {
90
84
marginTop: 2,