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' }