diff --git a/src/state/shell/composer.tsx b/src/state/shell/composer.tsx index 9cf8ef8d..51376fd5 100644 --- a/src/state/shell/composer.tsx +++ b/src/state/shell/composer.tsx @@ -11,6 +11,7 @@ export interface ComposerOptsPostRef { displayName?: string avatar?: string } + embed?: AppBskyEmbedRecord.ViewRecord['embed'] } export interface ComposerOptsQuote { uri: string diff --git a/src/view/com/composer/Composer.tsx b/src/view/com/composer/Composer.tsx index b15afe6f..a834cfc0 100644 --- a/src/view/com/composer/Composer.tsx +++ b/src/view/com/composer/Composer.tsx @@ -29,8 +29,6 @@ import {UserAvatar} from '../util/UserAvatar' import * as apilib from 'lib/api/index' import {ComposerOpts} from 'state/shell/composer' import {s, colors, gradients} from 'lib/styles' -import {sanitizeDisplayName} from 'lib/strings/display-names' -import {sanitizeHandle} from 'lib/strings/handles' import {cleanError} from 'lib/strings/errors' import {shortenLinks} from 'lib/strings/rich-text-manip' import {toShortUrl} from 'lib/strings/url-helpers' @@ -63,6 +61,7 @@ import {useComposerControls} from '#/state/shell/composer' import {emitPostCreated} from '#/state/events' import {ThreadgateSetting} from '#/state/queries/threadgate' import {logger} from '#/logger' +import {ComposerReplyTo} from 'view/com/composer/ComposerReplyTo' type Props = ComposerOpts export const ComposePost = observer(function ComposePost({ @@ -379,22 +378,7 @@ export const ComposePost = observer(function ComposePost({ - {replyTo ? ( - - - - - {sanitizeDisplayName( - replyTo.author.displayName || - sanitizeHandle(replyTo.author.handle), - )} - - - {replyTo.text} - - - - ) : undefined} + {replyTo ? : undefined} { + setShowFull(prev => !prev) + LayoutAnimation.configureNext({ + duration: 350, + update: {type: 'spring', springDamping: 0.7}, + }) + }, []) + + const quote = React.useMemo(() => { + if ( + AppBskyEmbedRecord.isView(embed) && + AppBskyEmbedRecord.isViewRecord(embed.record) && + AppBskyFeedPost.isRecord(embed.record.value) + ) { + // Not going to include the images right now + return { + author: embed.record.author, + cid: embed.record.cid, + uri: embed.record.uri, + indexedAt: embed.record.indexedAt, + text: embed.record.value.text, + } + } else if ( + AppBskyEmbedRecordWithMedia.isView(embed) && + AppBskyEmbedRecord.isViewRecord(embed.record.record) && + AppBskyFeedPost.isRecord(embed.record.record.value) + ) { + return { + author: embed.record.record.author, + cid: embed.record.record.cid, + uri: embed.record.record.uri, + indexedAt: embed.record.record.indexedAt, + text: embed.record.record.value.text, + } + } + }, [embed]) + + const images = React.useMemo(() => { + if (AppBskyEmbedImages.isView(embed)) { + return embed.images + } else if ( + AppBskyEmbedRecordWithMedia.isView(embed) && + AppBskyEmbedImages.isView(embed.media) + ) { + return embed.media.images + } + }, [embed]) + + return ( + + + + + {sanitizeDisplayName( + replyTo.author.displayName || sanitizeHandle(replyTo.author.handle), + )} + + + + + {replyTo.text} + + + {images && ( + + )} + + {showFull && quote && } + + + ) +} + +function ComposerReplyToImages({ + images, +}: { + images: AppBskyEmbedImages.ViewImage[] + showFull: boolean +}) { + return ( + + + {(images.length === 1 && ( + + )) || + (images.length === 2 && ( + + + + + )) || + (images.length === 3 && ( + + + + + + + + )) || + (images.length === 4 && ( + + + + + + + + + + + ))} + + + ) +} + +const styles = StyleSheet.create({ + replyToLayout: { + flexDirection: 'row', + borderTopWidth: 1, + paddingTop: 16, + paddingBottom: 16, + }, + replyToPost: { + flex: 1, + paddingLeft: 13, + paddingRight: 8, + }, + replyToBody: { + flexDirection: 'row', + gap: 10, + }, + replyToText: { + flex: 1, + flexGrow: 1, + }, + imagesContainer: { + borderRadius: 6, + overflow: 'hidden', + marginTop: 2, + }, + imagesInner: { + gap: 2, + }, + imagesRow: { + flexDirection: 'row', + }, + singleImage: { + width: 65, + height: 65, + }, + doubleImageTall: { + width: 32.5, + height: 65, + }, + doubleImage: { + width: 32.5, + height: 32.5, + }, +}) diff --git a/src/view/com/post-thread/PostThreadItem.tsx b/src/view/com/post-thread/PostThreadItem.tsx index 986fd70b..fc03c0d9 100644 --- a/src/view/com/post-thread/PostThreadItem.tsx +++ b/src/view/com/post-thread/PostThreadItem.tsx @@ -214,6 +214,7 @@ let PostThreadItemLoaded = ({ displayName: post.author.displayName, avatar: post.author.avatar, }, + embed: post.embed, }, onPost: onPostReply, }) diff --git a/src/view/com/post/Post.tsx b/src/view/com/post/Post.tsx index fca4171c..ac4689d2 100644 --- a/src/view/com/post/Post.tsx +++ b/src/view/com/post/Post.tsx @@ -118,6 +118,7 @@ function PostInner({ displayName: post.author.displayName, avatar: post.author.avatar, }, + embed: post.embed, }, }) }, [openComposer, post, record]) diff --git a/src/view/com/posts/FeedItem.tsx b/src/view/com/posts/FeedItem.tsx index 942d7bf7..2a5abcd6 100644 --- a/src/view/com/posts/FeedItem.tsx +++ b/src/view/com/posts/FeedItem.tsx @@ -131,6 +131,7 @@ let FeedItemInner = ({ displayName: post.author.displayName, avatar: post.author.avatar, }, + embed: post.embed, }, }) }, [post, record, openComposer]) diff --git a/src/view/screens/PostThread.tsx b/src/view/screens/PostThread.tsx index 9f50c8b7..6f843441 100644 --- a/src/view/screens/PostThread.tsx +++ b/src/view/screens/PostThread.tsx @@ -67,6 +67,7 @@ export function PostThreadScreen({route}: Props) { displayName: thread.post.author.displayName, avatar: thread.post.author.avatar, }, + embed: thread.post.embed, }, onPost: () => queryClient.invalidateQueries({