fix: 🐛

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(
-  ({
+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,6 +87,14 @@ const Content = memo(
     const lastNormalUrl =
       typeof lastNormalUrlNode?.data === 'string' ? lastNormalUrlNode.data : undefined
 
+    return { nodes, allImages, emojiInfos, lastNormalUrl }
+  }, [event])
+
+  if (!nodes || nodes.length === 0) {
+    return null
+  }
+
+  let imageIndex = 0
   return (
     <div className={cn('text-wrap break-words whitespace-pre-wrap', className)}>
       {nodes.map((node, index) => {
@@ -154,7 +161,4 @@ const Content = memo(
       {lastNormalUrl && <WebPreview className="mt-2" url={lastNormalUrl} />}
     </div>
   )
-  }
-)
-Content.displayName = 'Content'
-export default Content
+}

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 (
-      <a
-        href={url}
-        className="text-primary hover:underline"
-        target="_blank"
-        rel="noopener noreferrer"
-      >
-        {url}
-      </a>
-    )
+    return <ExternalLink url={url} />
   }
-
   return (
     <div
       className={cn(

src/lib/content-parser.ts

@@ -94,7 +94,7 @@ export const EmbeddedUrlParser: TContentParser = (content: string) => {
       type = 'image'
     } else if (isMedia(url)) {
       type = 'media'
-    } else if (YOUTUBE_URL_REGEX.test(url)) {
+    } else if (url.match(YOUTUBE_URL_REGEX)) {
       type = 'youtube'
     }