diff --git a/bskyembed/src/components/embed.tsx b/bskyembed/src/components/embed.tsx index 2f9f6b3cdb..d880199652 100644 --- a/bskyembed/src/components/embed.tsx +++ b/bskyembed/src/components/embed.tsx @@ -9,23 +9,33 @@ import { AppBskyLabelerDefs, } from '@atproto/api' import {ComponentChildren, h} from 'preact' +import {useMemo} from 'preact/hooks' import infoIcon from '../../assets/circleInfo_stroke2_corner0_rounded.svg' +import {CONTENT_LABELS, labelsToInfo} from '../labels' import {getRkey} from '../utils' import {Link} from './link' -export function Embed({content}: {content: AppBskyFeedDefs.PostView['embed']}) { +export function Embed({ + content, + labels, +}: { + content: AppBskyFeedDefs.PostView['embed'] + labels: AppBskyFeedDefs.PostView['labels'] +}) { + const labelInfo = useMemo(() => labelsToInfo(labels), [labels]) + if (!content) return null try { // Case 1: Image if (AppBskyEmbedImages.isView(content)) { - return + return } // Case 2: External link if (AppBskyEmbedExternal.isView(content)) { - return + return } // Case 3: Record (quote or linked post) @@ -50,15 +60,22 @@ export function Embed({content}: {content: AppBskyFeedDefs.PostView['embed']}) { if (AppBskyFeedPost.isRecord(record.value)) { text = record.value.text } + + const isAuthorLabeled = record.author.labels?.some(label => + CONTENT_LABELS.includes(label.val), + ) + return (
- +
+ +

{record.author.displayName} @@ -74,7 +91,11 @@ export function Embed({content}: {content: AppBskyFeedDefs.PostView['embed']}) { return false }) .map(embed => ( - + ))} ) @@ -137,15 +158,19 @@ export function Embed({content}: {content: AppBskyFeedDefs.PostView['embed']}) { } // Case 4: Record with media - if (AppBskyEmbedRecordWithMedia.isView(content)) { + if ( + AppBskyEmbedRecordWithMedia.isView(content) && + AppBskyEmbedRecord.isViewRecord(content.record.record) + ) { return (

- +
) @@ -168,7 +193,17 @@ function Info({children}: {children: ComponentChildren}) { ) } -function ImageEmbed({content}: {content: AppBskyEmbedImages.View}) { +function ImageEmbed({ + content, + labelInfo, +}: { + content: AppBskyEmbedImages.View + labelInfo?: string +}) { + if (labelInfo) { + return {labelInfo} + } + switch (content.images.length) { case 1: return ( @@ -229,7 +264,13 @@ function ImageEmbed({content}: {content: AppBskyEmbedImages.View}) { } } -function ExternalEmbed({content}: {content: AppBskyEmbedExternal.View}) { +function ExternalEmbed({ + content, + labelInfo, +}: { + content: AppBskyEmbedExternal.View + labelInfo?: string +}) { function toNiceDomain(url: string): string { try { const urlp = new URL(url) @@ -238,6 +279,11 @@ function ExternalEmbed({content}: {content: AppBskyEmbedExternal.View}) { return url } } + + if (labelInfo) { + return {labelInfo} + } + return ( + CONTENT_LABELS.includes(label.val), + ) + let record: AppBskyFeedPost.Record | null = null if (AppBskyFeedPost.isRecord(post.record)) { record = post.record @@ -28,10 +33,12 @@ export function Post({thread}: Props) {
- +
+ +
- +