Fix notification descriptions and render images for your own posts in notifs

zio/stable
Paul Frazee 2023-01-17 12:12:17 -06:00
parent b9778b7943
commit ee8d311795
3 changed files with 63 additions and 13 deletions

View File

@ -11,6 +11,7 @@ import {ago, pluralize} from '../../../lib/strings'
import {UpIconSolid} from '../../lib/icons'
import {Text} from '../util/text/Text'
import {UserAvatar} from '../util/UserAvatar'
import {ImageHorzList} from '../util/images/ImageHorzList'
import {ErrorMessage} from '../util/error/ErrorMessage'
import {Post} from '../post/Post'
import {Link} from '../util/Link'
@ -181,6 +182,7 @@ export const FeedItem = observer(function FeedItem({
</Text>
</>
) : undefined}
<Text style={[styles.metaItem, pal.text]}>{action}</Text>
<Text style={[styles.metaItem, pal.textLight]}>
{ago(item.indexedAt)}
</Text>
@ -208,17 +210,21 @@ function AdditionalPostText({
if (additionalPost.error) {
return <ErrorMessage message={additionalPost.error} />
}
const record = additionalPost.thread?.postRecord
let text = record.text
if (
AppBskyEmbedImages.isMain(record.embed) &&
AppBskyEmbedImages.validateMain(record.embed).success
) {
for (let i = 0; i < record.embed.images.length; i++) {
text += ` [${record.embed.images[i].alt || `image${i + 1}`}]`
}
}
return <Text style={pal.textLight}>{text}</Text>
const text = additionalPost.thread?.postRecord.text
const images = (
additionalPost.thread.post.embed as AppBskyEmbedImages.Presented
)?.images
return (
<>
{text?.length > 0 && <Text style={pal.textLight}>{text}</Text>}
{images && images?.length > 0 && (
<ImageHorzList
uris={images?.map(img => img.thumb)}
style={styles.additionalPostImages}
/>
)}
</>
)
}
const styles = StyleSheet.create({
@ -264,6 +270,11 @@ const styles = StyleSheet.create({
paddingBottom: 5,
color: colors.black,
},
additionalPostImages: {
marginTop: 5,
marginLeft: 2,
opacity: 0.8,
},
addedContainer: {
paddingTop: 4,

View File

@ -0,0 +1,39 @@
import React from 'react'
import {
Image,
StyleProp,
StyleSheet,
TouchableWithoutFeedback,
View,
ViewStyle,
} from 'react-native'
export function ImageHorzList({
uris,
onPress,
style,
}: {
uris: string[]
onPress?: (index: number) => void
style?: StyleProp<ViewStyle>
}) {
return (
<View style={[styles.flexRow, style]}>
{uris.map((uri, i) => (
<TouchableWithoutFeedback key={i} onPress={() => onPress?.(i)}>
<Image source={{uri}} style={styles.image} />
</TouchableWithoutFeedback>
))}
</View>
)
}
const styles = StyleSheet.create({
flexRow: {flexDirection: 'row'},
image: {
width: 100,
height: 100,
borderRadius: 4,
marginRight: 5,
},
})

View File

@ -24,7 +24,7 @@ export function ImageLayoutGrid({
style,
}: {
type: ImageLayoutGridType
uris: string
uris: string[]
onPress?: (index: number) => void
style?: StyleProp<ViewStyle>
}) {
@ -58,7 +58,7 @@ function ImageLayoutGridInner({
containerInfo,
}: {
type: ImageLayoutGridType
uris: string
uris: string[]
onPress?: (index: number) => void
containerInfo: Dim
}) {