refactor: split YouTube and X post into separate components

src/components/XEmbeddedPost/index.tsx

@@ -1,13 +1,8 @@
-import { Skeleton } from '@/components/ui/skeleton'
-import { toExternalContent } from '@/lib/link'
-import { cn, isTouchDevice } from '@/lib/utils'
-import { useSecondaryPage } from '@/PageManager'
 import { useContentPolicy } from '@/providers/ContentPolicyProvider'
-import { useTheme } from '@/providers/ThemeProvider'
-import { MessageCircle } from 'lucide-react'
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { useEffect, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import ExternalLink from '../ExternalLink'
+import Post from './Post'
 
 export default function XEmbeddedPost({
   url,
@@ -21,84 +16,21 @@ export default function XEmbeddedPost({
   embedded?: boolean
 }) {
   const { t } = useTranslation()
-  const { theme } = useTheme()
   const { autoLoadMedia } = useContentPolicy()
-  const { push } = useSecondaryPage()
-  const supportTouch = useMemo(() => isTouchDevice(), [])
-  const [display, setDisplay] = useState(autoLoadMedia)
-  const [loaded, setLoaded] = useState(false)
-  const [error, setError] = useState(false)
+  const [display, setDisplay] = useState(autoLoadMedia || mustLoad)
   const { tweetId } = useMemo(() => parseXUrl(url), [url])
-  const loadingRef = useRef<boolean>(false)
-  const containerRef = useRef<HTMLDivElement>(null)
 
   useEffect(() => {
-    if (autoLoadMedia) {
+    if (autoLoadMedia || mustLoad) {
       setDisplay(true)
-    } else {
-      setDisplay(false)
     }
-  }, [autoLoadMedia])
+  }, [autoLoadMedia, mustLoad])
 
-  useEffect(() => {
-    if (!tweetId || !containerRef.current || (!mustLoad && !display) || loadingRef.current) return
-    loadingRef.current = true
-
-    // Load Twitter widgets script if not already loaded
-    if (!window.twttr) {
-      const script = document.createElement('script')
-      script.src = 'https://platform.twitter.com/widgets.js'
-      script.async = true
-      script.onload = () => {
-        embedTweet()
-      }
-      script.onerror = () => {
-        setError(true)
-        loadingRef.current = false
-      }
-      document.body.appendChild(script)
-    } else {
-      embedTweet()
-    }
-
-    function embedTweet() {
-      if (!containerRef.current || !window.twttr || !tweetId) return
-
-      window.twttr.widgets
-        .createTweet(tweetId, containerRef.current, {
-          theme: theme === 'light' ? 'light' : 'dark',
-          dnt: true, // Do not track
-          conversation: 'none' // Hide conversation thread
-        })
-        .then((element: HTMLElement | undefined) => {
-          if (element) {
-            setTimeout(() => setLoaded(true), 100)
-          } else {
-            setError(true)
-          }
-        })
-        .catch(() => {
-          setError(true)
-        })
-        .finally(() => {
-          loadingRef.current = false
-        })
-    }
-  }, [tweetId, display, mustLoad, theme])
-
-  const handleViewComments = useCallback(
-    (e: React.MouseEvent) => {
-      e.stopPropagation()
-      push(toExternalContent(url))
-    },
-    [url, push]
-  )
-
-  if (error || !tweetId) {
+  if (!tweetId) {
     return <ExternalLink url={url} />
   }
 
-  if (!mustLoad && !display) {
+  if (!display) {
     return (
       <div
         className="text-primary hover:underline truncate w-fit cursor-pointer"
@@ -112,30 +44,7 @@ export default function XEmbeddedPost({
     )
   }
 
-  return (
-    <div
-      className={cn('relative group', className)}
-      style={{
-        maxWidth: '550px',
-        minHeight: '225px'
-      }}
-    >
-      <div ref={containerRef} className="cursor-pointer" onClick={handleViewComments} />
-      {!loaded && <Skeleton className="absolute inset-0 w-full h-full rounded-lg" />}
-      {loaded && embedded && !supportTouch && (
-        /* Hover overlay mask */
-        <div
-          className="absolute inset-0 bg-muted/40 backdrop-blur-md opacity-0 group-hover:opacity-100 transition-opacity duration-200 flex items-center justify-center cursor-pointer rounded-lg"
-          onClick={handleViewComments}
-        >
-          <div className="flex flex-col items-center gap-3">
-            <MessageCircle className="size-12" strokeWidth={1.5} />
-            <span className="text-lg font-medium">{t('View Nostr comments')}</span>
-          </div>
-        </div>
-      )}
-    </div>
-  )
+  return <Post tweetId={tweetId} url={url} className={className} embedded={embedded} />
 }
 
 function parseXUrl(url: string): { tweetId: string | null } {