acetheking987/bsky-social-app
1
0
Fork 0
Code Issues Actions Packages Projects Releases 1 Wiki Activity

Handle record-with-media separately, clarify intent using enums

Browse Source
This commit is contained in:
Eric Bailey
2024-09-04 11:04:03 -05:00
parent 8ca7776578
commit b7017c0b7b
8 changed files with 105 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/dms/MessageItemEmbed.tsx
+6 -2
View File
@@ -2,7 +2,7 @@ import React from 'react'
import {View} from 'react-native'
import {AppBskyEmbedRecord} from '@atproto/api'
import {PostEmbeds} from '#/view/com/util/post-embeds'
import {PostEmbeds, PostEmbedViewContext} from '#/view/com/util/post-embeds'
import {atoms as a, native, useTheme} from '#/alf'
let MessageItemEmbed = ({
@@ -14,7 +14,11 @@ let MessageItemEmbed = ({
return (
<View style={[a.my_xs, t.atoms.bg, native({flexBasis: 0})]}>
<PostEmbeds embed={embed} allowNestedQuotes />
<PostEmbeds
embed={embed}
allowNestedQuotes
viewContext={PostEmbedViewContext.Feed}
/>
</View>
)
}
src/view/com/post-thread/PostThreadItem.tsx
+7 -3
View File
@@ -43,7 +43,7 @@ import {ErrorMessage} from '../util/error/ErrorMessage'
import {Link, TextLink} from '../util/Link'
import {formatCount} from '../util/numeric/format'
import {PostCtrls} from '../util/post-ctrls/PostCtrls'
import {PostEmbeds} from '../util/post-embeds'
import {PostEmbeds, PostEmbedViewContext} from '../util/post-embeds'
import {PostMeta} from '../util/PostMeta'
import {Text} from '../util/text/Text'
import {PreviewableUserAvatar} from '../util/UserAvatar'
@@ -366,7 +366,7 @@ let PostThreadItemLoaded = ({
<PostEmbeds
embed={post.embed}
moderation={moderation}
viewContext="thread-highlighted"
viewContext={PostEmbedViewContext.ThreadHighlighted}
/>
</View>
)}
@@ -595,7 +595,11 @@ let PostThreadItemLoaded = ({
) : undefined}
{post.embed && (
<View style={[a.pb_xs]}>
<PostEmbeds embed={post.embed} moderation={moderation} />
<PostEmbeds
embed={post.embed}
moderation={moderation}
viewContext={PostEmbedViewContext.Feed}
/>
</View>
)}
<PostCtrls
src/view/com/post/Post.tsx
+6 -2
View File
@@ -32,7 +32,7 @@ import {LabelsOnMyPost} from '../../../components/moderation/LabelsOnMe'
import {PostAlerts} from '../../../components/moderation/PostAlerts'
import {Link, TextLink} from '../util/Link'
import {PostCtrls} from '../util/post-ctrls/PostCtrls'
import {PostEmbeds} from '../util/post-embeds'
import {PostEmbeds, PostEmbedViewContext} from '../util/post-embeds'
import {PostMeta} from '../util/PostMeta'
import {Text} from '../util/text/Text'
import {PreviewableUserAvatar} from '../util/UserAvatar'
@@ -238,7 +238,11 @@ function PostInner({
/>
) : undefined}
{post.embed ? (
<PostEmbeds embed={post.embed} moderation={moderation} />
<PostEmbeds
embed={post.embed}
moderation={moderation}
viewContext={PostEmbedViewContext.Feed}
/>
) : null}
</ContentHider>
<PostCtrls
src/view/com/posts/FeedItem.tsx
+2 -1
View File
@@ -34,7 +34,7 @@ import {useComposerControls} from '#/state/shell/composer'
import {useMergedThreadgateHiddenReplies} from '#/state/threadgate-hidden-replies'
import {FeedNameText} from '#/view/com/util/FeedInfoText'
import {PostCtrls} from '#/view/com/util/post-ctrls/PostCtrls'
import {PostEmbeds} from '#/view/com/util/post-embeds'
import {PostEmbeds, PostEmbedViewContext} from '#/view/com/util/post-embeds'
import {PostMeta} from '#/view/com/util/PostMeta'
import {Text} from '#/view/com/util/text/Text'
import {PreviewableUserAvatar} from '#/view/com/util/UserAvatar'
@@ -488,6 +488,7 @@ let PostContent = ({
embed={postEmbed}
moderation={moderation}
onOpen={onOpenEmbed}
viewContext={PostEmbedViewContext.Feed}
/>
</View>
) : null}
src/view/com/util/images/AutoSizedImage.tsx
+11 -8
View File
@@ -55,11 +55,13 @@ export function useImageAspectRatio({
}
}
export function SquareFramedImage({
export function ConstrainedImage({
aspectRatio,
fullBleed,
children,
}: {
aspectRatio: number
fullBleed?: boolean
children: React.ReactNode
}) {
const t = useTheme()
@@ -82,7 +84,7 @@ export function SquareFramedImage({
a.rounded_sm,
a.overflow_hidden,
t.atoms.bg_contrast_25,
{aspectRatio},
{aspectRatio: fullBleed ? 1 : aspectRatio},
]}>
{children}
</View>
@@ -94,13 +96,13 @@ export function SquareFramedImage({
export function AutoSizedImage({
image,
disableCrop,
crop = 'constrained',
onPress,
onLongPress,
onPressIn,
}: {
image: AppBskyEmbedImages.ViewImage
disableCrop?: boolean
crop?: 'none' | 'square' | 'constrained'
onPress?: () => void
onLongPress?: () => void
onPressIn?: () => void
@@ -116,7 +118,8 @@ export function AutoSizedImage({
src: image.thumb,
dimensions: image.aspectRatio,
})
const isCropped = rawIsCropped && !disableCrop
const cropDisabled = crop === 'none'
const isCropped = rawIsCropped && !cropDisabled
const hasAlt = !!image.alt
const contents = (
@@ -169,7 +172,7 @@ export function AutoSizedImage({
</>
)
if (disableCrop) {
if (cropDisabled) {
return (
<Pressable
onPress={onPress}
@@ -190,7 +193,7 @@ export function AutoSizedImage({
)
} else {
return (
<SquareFramedImage aspectRatio={constrained}>
<ConstrainedImage fullBleed={crop === 'square'} aspectRatio={constrained}>
<Pressable
onPress={onPress}
onLongPress={onLongPress}
@@ -201,7 +204,7 @@ export function AutoSizedImage({
style={[a.h_full]}>
{contents}
</Pressable>
</SquareFramedImage>
</ConstrainedImage>
)
}
}
src/view/com/util/post-embeds/QuoteEmbed.tsx
+43 -9
View File
@@ -41,17 +41,20 @@ import {Link} from '../Link'
import {PostMeta} from '../PostMeta'
import {Text} from '../text/Text'
import {PostEmbeds} from '.'
import {PostEmbedViewContext, QuoteEmbedViewContext} from './types'
export function MaybeQuoteEmbed({
embed,
onOpen,
style,
allowNestedQuotes,
viewContext,
}: {
embed: AppBskyEmbedRecord.View
onOpen?: () => void
style?: StyleProp<ViewStyle>
allowNestedQuotes?: boolean
viewContext?: QuoteEmbedViewContext
}) {
const pal = usePalette('default')
const {currentAccount} = useSession()
@@ -67,6 +70,7 @@ export function MaybeQuoteEmbed({
onOpen={onOpen}
style={style}
allowNestedQuotes={allowNestedQuotes}
viewContext={viewContext}
/>
)
} else if (AppBskyEmbedRecord.isViewBlocked(embed.record)) {
@@ -113,12 +117,14 @@ function QuoteEmbedModerated({
onOpen,
style,
allowNestedQuotes,
viewContext,
}: {
viewRecord: AppBskyEmbedRecord.ViewRecord
postRecord: AppBskyFeedPost.Record
onOpen?: () => void
style?: StyleProp<ViewStyle>
allowNestedQuotes?: boolean
viewContext?: QuoteEmbedViewContext
}) {
const moderationOpts = useModerationOpts()
const moderation = React.useMemo(() => {
@@ -144,6 +150,7 @@ function QuoteEmbedModerated({
onOpen={onOpen}
style={style}
allowNestedQuotes={allowNestedQuotes}
viewContext={viewContext}
/>
)
}
@@ -154,12 +161,14 @@ export function QuoteEmbed({
onOpen,
style,
allowNestedQuotes,
viewContext,
}: {
quote: ComposerOptsQuote
moderation?: ModerationDecision
onOpen?: () => void
style?: StyleProp<ViewStyle>
allowNestedQuotes?: boolean
viewContext?: QuoteEmbedViewContext
}) {
const queryClient = useQueryClient()
const pal = usePalette('default')
@@ -226,15 +235,40 @@ export function QuoteEmbed({
{moderation ? (
<PostAlerts modui={moderation.ui('contentView')} style={[a.py_xs]} />
) : null}
{richText ? (
<RichText
value={richText}
style={a.text_md}
numberOfLines={20}
disableLinks
/>
) : null}
{embed && <PostEmbeds embed={embed} moderation={moderation} />}
{viewContext === QuoteEmbedViewContext.FeedEmbedRecordWithMedia ? (
<View style={[a.flex_row, a.gap_md]}>
{embed && (
<View style={[{width: 100}]}>
<PostEmbeds
embed={embed}
moderation={moderation}
viewContext={PostEmbedViewContext.FeedEmbedRecordWithMedia}
/>
</View>
)}
{richText ? (
<RichText
value={richText}
style={a.text_md}
numberOfLines={20}
disableLinks
/>
) : null}
</View>
) : (
<>
{richText ? (
<RichText
value={richText}
style={a.text_md}
numberOfLines={20}
disableLinks
/>
) : null}
{embed && <PostEmbeds embed={embed} moderation={moderation} />}
</>
)}
</Link>
</ContentHider>
)
src/view/com/util/post-embeds/index.tsx
+21 -3
View File
@@ -32,8 +32,11 @@ import {AutoSizedImage} from '../images/AutoSizedImage'
import {ImageLayoutGrid} from '../images/ImageLayoutGrid'
import {ExternalLinkEmbed} from './ExternalLinkEmbed'
import {MaybeQuoteEmbed} from './QuoteEmbed'
import {PostEmbedViewContext, QuoteEmbedViewContext} from './types'
import {VideoEmbed} from './VideoEmbed'
export * from './types'
type Embed =
| AppBskyEmbedRecord.View
| AppBskyEmbedImages.View
@@ -55,7 +58,7 @@ export function PostEmbeds({
onOpen?: () => void
style?: StyleProp<ViewStyle>
allowNestedQuotes?: boolean
viewContext?: 'thread-highlighted'
viewContext?: PostEmbedViewContext
}) {
const {openLightbox} = useLightboxControls()
@@ -70,7 +73,15 @@ export function PostEmbeds({
onOpen={onOpen}
viewContext={viewContext}
/>
<MaybeQuoteEmbed embed={embed.record} onOpen={onOpen} />
<MaybeQuoteEmbed
embed={embed.record}
onOpen={onOpen}
viewContext={
viewContext === PostEmbedViewContext.Feed
? QuoteEmbedViewContext.FeedEmbedRecordWithMedia
: undefined
}
/>
</View>
)
}
@@ -129,7 +140,14 @@ export function PostEmbeds({
<ContentHider modui={moderation?.ui('contentMedia')}>
<View style={[styles.container, style]}>
<AutoSizedImage
disableCrop={viewContext === 'thread-highlighted'}
crop={
viewContext === PostEmbedViewContext.ThreadHighlighted
? 'none'
: viewContext ===
PostEmbedViewContext.FeedEmbedRecordWithMedia
? 'square'
: 'constrained'
}
image={image}
onPress={() => _openLightbox(0)}
onPressIn={() => onPressIn(0)}
src/view/com/util/post-embeds/types.ts
+9
View File
@@ -0,0 +1,9 @@
export enum PostEmbedViewContext {
ThreadHighlighted = 'ThreadHighlighted',
Feed = 'Feed',
FeedEmbedRecordWithMedia = 'FeedEmbedRecordWithMedia',
}
export enum QuoteEmbedViewContext {
FeedEmbedRecordWithMedia = PostEmbedViewContext.FeedEmbedRecordWithMedia,
}