feat: add YouTube embedded player (#460)

Co-authored-by: Daniel  Vergara <daniel.omar.vergara@gmail.com>

src/components/Content/index.tsx

@@ -9,6 +9,7 @@ import {
   EmbeddedMentionParser,
   EmbeddedNormalUrlParser,
   EmbeddedWebsocketUrlParser,
+  EmbeddedYoutubeParser,
   parseContent
 } from '@/lib/content-parser'
 import { getImageInfosFromEvent } from '@/lib/event'
@@ -30,10 +31,12 @@ import Emoji from '../Emoji'
 import ImageGallery from '../ImageGallery'
 import MediaPlayer from '../MediaPlayer'
 import WebPreview from '../WebPreview'
+import YoutubeEmbeddedPlayer from '../YoutubeEmbeddedPlayer'
 
 const Content = memo(({ event, className }: { event: Event; className?: string }) => {
   const translatedEvent = useTranslatedEvent(event.id)
   const nodes = parseContent(translatedEvent?.content ?? event.content, [
+    EmbeddedYoutubeParser,
     EmbeddedImageParser,
     EmbeddedMediaParser,
     EmbeddedNormalUrlParser,
@@ -119,6 +122,9 @@ const Content = memo(({ event, className }: { event: Event; className?: string }
           if (!emoji) return node.data
           return <Emoji emoji={emoji} key={index} className="size-4" />
         }
+        if (node.type === 'youtube') {
+          return <YoutubeEmbeddedPlayer key={index} url={node.data} className="mt-2" />
+        }
         return null
       })}
       {lastNormalUrl && <WebPreview className="mt-2" url={lastNormalUrl} />}

src/components/WebPreview/index.tsx

@@ -7,6 +7,7 @@ import Image from '../Image'
 export default function WebPreview({ url, className }: { url: string; className?: string }) {
   const { isSmallScreen } = useScreenSize()
   const { title, description, image } = useFetchWebMetadata(url)
+
   const hostname = useMemo(() => {
     try {
       return new URL(url).hostname

src/components/YoutubeEmbeddedPlayer/index.tsx

@@ -0,0 +1,86 @@
+import { cn } from '@/lib/utils'
+import mediaManager from '@/services/media-manager.service'
+import { YouTubePlayer } from '@/types/youtube'
+import { useEffect, useMemo, useRef } from 'react'
+
+export default function YoutubeEmbeddedPlayer({
+  url,
+  className
+}: {
+  url: string
+  className?: string
+}) {
+  const videoId = useMemo(() => extractVideoId(url), [url])
+  const playerRef = useRef<YouTubePlayer | null>(null)
+  const containerRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    if (!videoId || !containerRef.current) return
+
+    if (!window.YT) {
+      const script = document.createElement('script')
+      script.src = 'https://www.youtube.com/iframe_api'
+      document.body.appendChild(script)
+
+      window.onYouTubeIframeAPIReady = () => {
+        initPlayer()
+      }
+    } else {
+      initPlayer()
+    }
+
+    function initPlayer() {
+      if (!videoId || !containerRef.current) return
+      playerRef.current = new window.YT.Player(containerRef.current, {
+        videoId: videoId,
+        events: {
+          onStateChange: (event: any) => {
+            if (event.data === window.YT.PlayerState.PLAYING) {
+              mediaManager.play(playerRef.current)
+            } else if (event.data === window.YT.PlayerState.PAUSED) {
+              mediaManager.pause(playerRef.current)
+            }
+          }
+        }
+      })
+    }
+
+    return () => {
+      if (playerRef.current) {
+        playerRef.current.destroy()
+      }
+    }
+  }, [videoId])
+
+  if (!videoId) {
+    return (
+      <a
+        href={url}
+        className="text-primary hover:underline"
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        {url}
+      </a>
+    )
+  }
+
+  return (
+    <div className={cn('rounded-lg border overflow-hidden w-full aspect-video', className)}>
+      <div ref={containerRef} className="w-full h-full" />
+    </div>
+  )
+}
+
+function extractVideoId(url: string) {
+  const patterns = [
+    /(?:youtube\.com\/watch\?v=|youtu\.be\/|youtube\.com\/embed\/)([^&\n?#]+)/,
+    /youtube\.com\/watch\?.*v=([^&\n?#]+)/
+  ]
+
+  for (const pattern of patterns) {
+    const match = url.match(pattern)
+    if (match) return match[1]
+  }
+  return null
+}