diff options
| -rw-r--r-- | src/view/com/util/images/ImageLayoutGrid.tsx | 18 | ||||
| -rw-r--r-- | src/view/com/util/post-embeds/QuoteEmbed.tsx | 19 | ||||
| -rw-r--r-- | src/view/com/util/post-embeds/index.tsx | 75 |
3 files changed, 43 insertions, 69 deletions
diff --git a/src/view/com/util/images/ImageLayoutGrid.tsx b/src/view/com/util/images/ImageLayoutGrid.tsx index 7f9a6fdbd..f4fe59522 100644 --- a/src/view/com/util/images/ImageLayoutGrid.tsx +++ b/src/view/com/util/images/ImageLayoutGrid.tsx @@ -1,5 +1,4 @@ -import {Dimensions} from 'lib/media/types' -import React, {useState} from 'react' +import React, {useMemo, useState} from 'react' import { LayoutChangeEvent, StyleProp, @@ -9,10 +8,11 @@ import { ViewStyle, } from 'react-native' import {Image, ImageStyle} from 'expo-image' +import {Dimensions} from 'lib/media/types' export const DELAY_PRESS_IN = 500 -export type ImageLayoutGridType = 'two' | 'three' | 'four' +export type ImageLayoutGridType = number export function ImageLayoutGrid({ type, @@ -69,8 +69,8 @@ function ImageLayoutGridInner({ onPressIn?: (index: number) => void containerInfo: Dimensions }) { - const size1 = React.useMemo<ImageStyle>(() => { - if (type === 'three') { + const size1 = useMemo<ImageStyle>(() => { + if (type === 3) { const size = (containerInfo.width - 10) / 3 return {width: size, height: size, resizeMode: 'cover', borderRadius: 4} } else { @@ -79,7 +79,7 @@ function ImageLayoutGridInner({ } }, [type, containerInfo]) const size2 = React.useMemo<ImageStyle>(() => { - if (type === 'three') { + if (type === 3) { const size = ((containerInfo.width - 10) / 3) * 2 + 5 return {width: size, height: size, resizeMode: 'cover', borderRadius: 4} } else { @@ -88,7 +88,7 @@ function ImageLayoutGridInner({ } }, [type, containerInfo]) - if (type === 'two') { + if (type === 2) { return ( <View style={styles.flexRow}> <TouchableOpacity @@ -109,7 +109,7 @@ function ImageLayoutGridInner({ </View> ) } - if (type === 'three') { + if (type === 3) { return ( <View style={styles.flexRow}> <TouchableOpacity @@ -140,7 +140,7 @@ function ImageLayoutGridInner({ </View> ) } - if (type === 'four') { + if (type === 4) { return ( <View style={styles.flexRow}> <View> diff --git a/src/view/com/util/post-embeds/QuoteEmbed.tsx b/src/view/com/util/post-embeds/QuoteEmbed.tsx index 94e837238..3836132d5 100644 --- a/src/view/com/util/post-embeds/QuoteEmbed.tsx +++ b/src/view/com/util/post-embeds/QuoteEmbed.tsx @@ -35,7 +35,7 @@ export function QuoteEmbed({ ) return ( <Link - style={[styles.container, pal.border, style]} + style={[styles.container, pal.borderDark, style]} href={itemHref} title={itemTitle}> <PostMeta @@ -46,15 +46,11 @@ export function QuoteEmbed({ postHref={itemHref} timestamp={quote.indexedAt} /> - <Text type="post-text" style={pal.text} numberOfLines={6}> - {isEmpty ? ( - <Text style={pal.link} lineHeight={1.5}> - View post - </Text> - ) : ( - quote.text - )} - </Text> + {!isEmpty ? ( + <Text type="post-text" style={pal.text} numberOfLines={6}> + {quote.text} + </Text> + ) : null} {AppBskyEmbedImages.isView(imagesEmbed) && ( <PostEmbeds embed={imagesEmbed} /> )} @@ -70,7 +66,8 @@ export default QuoteEmbed const styles = StyleSheet.create({ container: { borderRadius: 8, - paddingVertical: 8, + marginTop: 8, + paddingVertical: 12, paddingHorizontal: 12, borderWidth: 1, }, diff --git a/src/view/com/util/post-embeds/index.tsx b/src/view/com/util/post-embeds/index.tsx index 726bea6e7..c15986b76 100644 --- a/src/view/com/util/post-embeds/index.tsx +++ b/src/view/com/util/post-embeds/index.tsx @@ -107,54 +107,31 @@ export function PostEmbeds({ }) } - if (embed.images.length === 4) { - return ( - <View style={[styles.imagesContainer, style]}> - <ImageLayoutGrid - type="four" - uris={embed.images.map(img => img.thumb)} - onPress={openLightbox} - onLongPress={onLongPress} - onPressIn={onPressIn} - /> - </View> - ) - } else if (embed.images.length === 3) { - return ( - <View style={[styles.imagesContainer, style]}> - <ImageLayoutGrid - type="three" - uris={embed.images.map(img => img.thumb)} - onPress={openLightbox} - onLongPress={onLongPress} - onPressIn={onPressIn} - /> - </View> - ) - } else if (embed.images.length === 2) { - return ( - <View style={[styles.imagesContainer, style]}> - <ImageLayoutGrid - type="two" - uris={embed.images.map(img => img.thumb)} - onPress={openLightbox} - onLongPress={onLongPress} - onPressIn={onPressIn} - /> - </View> - ) - } else { - return ( - <View style={[styles.imagesContainer, style]}> - <AutoSizedImage - uri={embed.images[0].thumb} - onPress={() => openLightbox(0)} - onLongPress={() => onLongPress(0)} - onPressIn={() => onPressIn(0)} - style={styles.singleImage} - /> - </View> - ) + switch (embed.images.length) { + case 1: + return ( + <View style={[styles.imagesContainer, style]}> + <AutoSizedImage + uri={embed.images[0].thumb} + onPress={() => openLightbox(0)} + onLongPress={() => onLongPress(0)} + onPressIn={() => onPressIn(0)} + style={styles.singleImage} + /> + </View> + ) + default: + return ( + <View style={[styles.imagesContainer, style]}> + <ImageLayoutGrid + type={embed.images.length} + uris={embed.images.map(img => img.thumb)} + onPress={openLightbox} + onLongPress={onLongPress} + onPressIn={onPressIn} + /> + </View> + ) } } } @@ -184,7 +161,7 @@ const styles = StyleSheet.create({ gap: 6, }, imagesContainer: { - marginTop: 4, + marginTop: 8, }, singleImage: { borderRadius: 8, |