diff --git a/src/components/Content/index.tsx b/src/components/Content/index.tsx
index f7aab9f8..2acaaed3 100644
--- a/src/components/Content/index.tsx
+++ b/src/components/Content/index.tsx
@@ -15,7 +15,7 @@ import { cn } from '@/lib/utils'
import mediaUpload from '@/services/media-upload.service'
import { TImetaInfo } from '@/types'
import { Event } from 'nostr-tools'
-import { memo } from 'react'
+import { useMemo } from 'react'
import {
EmbeddedHashtag,
EmbeddedLNInvoice,
@@ -30,21 +30,21 @@ import MediaPlayer from '../MediaPlayer'
import WebPreview from '../WebPreview'
import YoutubeEmbeddedPlayer from '../YoutubeEmbeddedPlayer'
-const Content = memo(
- ({
- event,
- content,
- className,
- mustLoadMedia
- }: {
- event?: Event
- content?: string
- className?: string
- mustLoadMedia?: boolean
- }) => {
- const translatedEvent = useTranslatedEvent(event?.id)
+export default function Content({
+ event,
+ content,
+ className,
+ mustLoadMedia
+}: {
+ event?: Event
+ content?: string
+ className?: string
+ mustLoadMedia?: boolean
+}) {
+ const translatedEvent = useTranslatedEvent(event?.id)
+ const { nodes, allImages, lastNormalUrl, emojiInfos } = useMemo(() => {
const _content = translatedEvent?.content ?? event?.content ?? content
- if (!_content) return null
+ if (!_content) return {}
const nodes = parseContent(_content, [
EmbeddedUrlParser,
@@ -80,7 +80,6 @@ const Content = memo(
})
.filter(Boolean)
.flat() as TImetaInfo[]
- let imageIndex = 0
const emojiInfos = getEmojiInfosFromEmojiTags(event?.tags)
@@ -88,73 +87,78 @@ const Content = memo(
const lastNormalUrl =
typeof lastNormalUrlNode?.data === 'string' ? lastNormalUrlNode.data : undefined
- return (
-
- {nodes.map((node, index) => {
- if (node.type === 'text') {
- return node.data
- }
- if (node.type === 'image' || node.type === 'images') {
- const start = imageIndex
- const end = imageIndex + (Array.isArray(node.data) ? node.data.length : 1)
- imageIndex = end
- return (
-
- )
- }
- if (node.type === 'media') {
- return (
-
- )
- }
- if (node.type === 'url') {
- return
- }
- if (node.type === 'invoice') {
- return
- }
- if (node.type === 'websocket-url') {
- return
- }
- if (node.type === 'event') {
- const id = node.data.split(':')[1]
- return
- }
- if (node.type === 'mention') {
- return
- }
- if (node.type === 'hashtag') {
- return
- }
- if (node.type === 'emoji') {
- const shortcode = node.data.split(':')[1]
- const emoji = emojiInfos.find((e) => e.shortcode === shortcode)
- if (!emoji) return node.data
- return
- }
- if (node.type === 'youtube') {
- return (
-
- )
- }
- return null
- })}
- {lastNormalUrl && }
-
- )
+ return { nodes, allImages, emojiInfos, lastNormalUrl }
+ }, [event])
+
+ if (!nodes || nodes.length === 0) {
+ return null
}
-)
-Content.displayName = 'Content'
-export default Content
+
+ let imageIndex = 0
+ return (
+
+ {nodes.map((node, index) => {
+ if (node.type === 'text') {
+ return node.data
+ }
+ if (node.type === 'image' || node.type === 'images') {
+ const start = imageIndex
+ const end = imageIndex + (Array.isArray(node.data) ? node.data.length : 1)
+ imageIndex = end
+ return (
+
+ )
+ }
+ if (node.type === 'media') {
+ return (
+
+ )
+ }
+ if (node.type === 'url') {
+ return
+ }
+ if (node.type === 'invoice') {
+ return
+ }
+ if (node.type === 'websocket-url') {
+ return
+ }
+ if (node.type === 'event') {
+ const id = node.data.split(':')[1]
+ return
+ }
+ if (node.type === 'mention') {
+ return
+ }
+ if (node.type === 'hashtag') {
+ return
+ }
+ if (node.type === 'emoji') {
+ const shortcode = node.data.split(':')[1]
+ const emoji = emojiInfos.find((e) => e.shortcode === shortcode)
+ if (!emoji) return node.data
+ return
+ }
+ if (node.type === 'youtube') {
+ return (
+
+ )
+ }
+ return null
+ })}
+ {lastNormalUrl && }
+
+ )
+}
diff --git a/src/components/YoutubeEmbeddedPlayer/index.tsx b/src/components/YoutubeEmbeddedPlayer/index.tsx
index 2ae8def3..fa4540b9 100644
--- a/src/components/YoutubeEmbeddedPlayer/index.tsx
+++ b/src/components/YoutubeEmbeddedPlayer/index.tsx
@@ -71,6 +71,7 @@ export default function YoutubeEmbeddedPlayer({
})
} catch (error) {
console.error('Failed to initialize YouTube player:', error)
+ setError(true)
return
}
}
@@ -101,18 +102,8 @@ export default function YoutubeEmbeddedPlayer({
}
if (!videoId && !initSuccess) {
- return (
-
- {url}
-
- )
+ return
}
-
return (
{
type = 'image'
} else if (isMedia(url)) {
type = 'media'
- } else if (YOUTUBE_URL_REGEX.test(url)) {
+ } else if (url.match(YOUTUBE_URL_REGEX)) {
type = 'youtube'
}