69 lines
2.2 KiB
TypeScript
69 lines
2.2 KiB
TypeScript
import {
|
|
EmbeddedEmojiParser,
|
|
EmbeddedHashtagParser,
|
|
EmbeddedMentionParser,
|
|
EmbeddedNormalUrlParser,
|
|
EmbeddedWebsocketUrlParser,
|
|
parseContent
|
|
} from '@/lib/content-parser'
|
|
import { extractEmojiInfosFromTags, extractImageInfosFromEventTags, isNsfwEvent } from '@/lib/event'
|
|
import { cn } from '@/lib/utils'
|
|
import { Event } from 'nostr-tools'
|
|
import { memo, useMemo } from 'react'
|
|
import {
|
|
EmbeddedHashtag,
|
|
EmbeddedMention,
|
|
EmbeddedNormalUrl,
|
|
EmbeddedWebsocketUrl
|
|
} from '../Embedded'
|
|
import { ImageCarousel } from '../ImageCarousel'
|
|
import Emoji from '../Emoji'
|
|
|
|
const PictureContent = memo(({ event, className }: { event: Event; className?: string }) => {
|
|
const images = useMemo(() => extractImageInfosFromEventTags(event), [event])
|
|
const isNsfw = isNsfwEvent(event)
|
|
|
|
const nodes = parseContent(event.content, [
|
|
EmbeddedNormalUrlParser,
|
|
EmbeddedWebsocketUrlParser,
|
|
EmbeddedHashtagParser,
|
|
EmbeddedMentionParser,
|
|
EmbeddedEmojiParser
|
|
])
|
|
|
|
const emojiInfos = extractEmojiInfosFromTags(event.tags)
|
|
|
|
return (
|
|
<div className={cn('text-wrap break-words whitespace-pre-wrap space-y-2', className)}>
|
|
<ImageCarousel images={images} isNsfw={isNsfw} />
|
|
<div className="px-4">
|
|
{nodes.map((node, index) => {
|
|
if (node.type === 'text') {
|
|
return node.data
|
|
}
|
|
if (node.type === 'url') {
|
|
return <EmbeddedNormalUrl key={index} url={node.data} />
|
|
}
|
|
if (node.type === 'websocket-url') {
|
|
return <EmbeddedWebsocketUrl key={index} url={node.data} />
|
|
}
|
|
if (node.type === 'hashtag') {
|
|
return <EmbeddedHashtag key={index} hashtag={node.data} />
|
|
}
|
|
if (node.type === 'mention') {
|
|
return <EmbeddedMention key={index} userId={node.data.split(':')[1]} />
|
|
}
|
|
if (node.type === 'emoji') {
|
|
const shortcode = node.data.split(':')[1]
|
|
const emoji = emojiInfos.find((e) => e.shortcode === shortcode)
|
|
if (!emoji) return node.data
|
|
return <Emoji key={index} emoji={emoji} />
|
|
}
|
|
})}
|
|
</div>
|
|
</div>
|
|
)
|
|
})
|
|
PictureContent.displayName = 'PictureContent'
|
|
export default PictureContent
|