refactor: split YouTube and X post into separate components

src/components/XEmbeddedPost/Post.tsx

@@ -0,0 +1,130 @@
+import { Skeleton } from '@/components/ui/skeleton'
+import { toExternalContent } from '@/lib/link'
+import { cn, isTouchDevice } from '@/lib/utils'
+import { useSecondaryPage } from '@/PageManager'
+import { useTheme } from '@/providers/ThemeProvider'
+import { MessageCircle } from 'lucide-react'
+import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+
+interface PostProps {
+  tweetId: string
+  url: string
+  className?: string
+  embedded?: boolean
+}
+
+const Post = memo(({ tweetId, url, className, embedded = true }: PostProps) => {
+  const { t } = useTranslation()
+  const { theme } = useTheme()
+  const { push } = useSecondaryPage()
+  const supportTouch = useMemo(() => isTouchDevice(), [])
+  const [loaded, setLoaded] = useState(false)
+  const loadingRef = useRef<boolean>(false)
+  const containerRef = useRef<HTMLDivElement>(null)
+  const unmountedRef = useRef(false)
+
+  useEffect(() => {
+    unmountedRef.current = false
+
+    if (!tweetId || !containerRef.current || 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 = () => {
+        if (!unmountedRef.current) {
+          embedTweet()
+        }
+      }
+      script.onerror = () => {
+        if (!unmountedRef.current) {
+          console.error('Failed to load Twitter widgets script')
+          loadingRef.current = false
+        }
+      }
+      document.body.appendChild(script)
+    } else {
+      embedTweet()
+    }
+
+    function embedTweet() {
+      if (!containerRef.current || !window.twttr || !tweetId || unmountedRef.current) 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 (unmountedRef.current) return
+          if (element) {
+            setTimeout(() => {
+              if (!unmountedRef.current) {
+                setLoaded(true)
+              }
+            }, 100)
+          } else {
+            console.error('Failed to embed tweet')
+          }
+        })
+        .catch((error) => {
+          if (!unmountedRef.current) {
+            console.error('Error embedding tweet:', error)
+          }
+        })
+        .finally(() => {
+          loadingRef.current = false
+        })
+    }
+
+    return () => {
+      unmountedRef.current = true
+      // Clear the container to prevent memory leaks
+      if (containerRef.current) {
+        containerRef.current.innerHTML = ''
+      }
+    }
+  }, [tweetId, theme])
+
+  const handleViewComments = useCallback(
+    (e: React.MouseEvent) => {
+      e.stopPropagation()
+      push(toExternalContent(url))
+    },
+    [url, push]
+  )
+
+  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>
+  )
+})
+
+Post.displayName = 'XPost'
+
+export default Post

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 { useEffect, useMemo, useState } from 'react'
-import { MessageCircle } from 'lucide-react'
-import { useCallback, useEffect, useMemo, useRef, 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 [display, setDisplay] = useState(autoLoadMedia || mustLoad)
-  const supportTouch = useMemo(() => isTouchDevice(), [])
-  const [display, setDisplay] = useState(autoLoadMedia)
-  const [loaded, setLoaded] = useState(false)
-  const [error, setError] = useState(false)
   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) {
-    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) {
     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 (
+  return <Post tweetId={tweetId} url={url} className={className} embedded={embedded} />
-    <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>
-  )
 }
 
 function parseXUrl(url: string): { tweetId: string | null } {

src/components/YoutubeEmbeddedPlayer/Player.tsx

@@ -0,0 +1,170 @@
+import { cn } from '@/lib/utils'
+import { useUserPreferences } from '@/providers/UserPreferencesProvider'
+import mediaManager from '@/services/media-manager.service'
+import { YouTubePlayer } from '@/types/youtube'
+import { memo, useEffect, useRef, useState } from 'react'
+
+interface PlayerProps {
+  videoId: string
+  isShort: boolean
+  className?: string
+}
+
+const Player = memo(({ videoId, isShort, className }: PlayerProps) => {
+  const { muteMedia, updateMuteMedia } = useUserPreferences()
+  const [initSuccess, setInitSuccess] = useState(false)
+  const playerRef = useRef<YouTubePlayer | null>(null)
+  const containerRef = useRef<HTMLDivElement>(null)
+  const wrapperRef = useRef<HTMLDivElement>(null)
+  const muteStateRef = useRef(muteMedia)
+  const playerIdRef = useRef(`yt-player-${Math.random().toString(36).substr(2, 9)}`)
+  const unmountedRef = useRef(false)
+
+  useEffect(() => {
+    unmountedRef.current = false
+
+    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 = () => {
+        if (!unmountedRef.current) {
+          initPlayer()
+        }
+      }
+    } else {
+      initPlayer()
+    }
+
+    let checkMutedInterval: NodeJS.Timeout | null = null
+    function initPlayer() {
+      try {
+        if (!videoId || !containerRef.current || !window.YT.Player || unmountedRef.current) return
+
+        let currentMuteState = muteStateRef.current
+        // Use string ID to avoid React DOM manipulation conflicts
+        playerRef.current = new window.YT.Player(playerIdRef.current as any, {
+          videoId: videoId,
+          playerVars: {
+            mute: currentMuteState ? 1 : 0
+          },
+          events: {
+            onStateChange: (event: any) => {
+              if (unmountedRef.current) return
+
+              if (event.data === window.YT.PlayerState.PLAYING) {
+                mediaManager.play(playerRef.current)
+              } else if (
+                event.data === window.YT.PlayerState.PAUSED ||
+                event.data === window.YT.PlayerState.ENDED
+              ) {
+                mediaManager.pause(playerRef.current)
+              }
+            },
+            onReady: () => {
+              if (unmountedRef.current) {
+                playerRef.current?.destroy()
+                return
+              }
+              setInitSuccess(true)
+              checkMutedInterval = setInterval(() => {
+                if (playerRef.current && !unmountedRef.current) {
+                  const mute = playerRef.current.isMuted()
+                  if (mute !== currentMuteState) {
+                    currentMuteState = mute
+
+                    if (mute !== muteStateRef.current) {
+                      updateMuteMedia(currentMuteState)
+                    }
+                  } else if (muteStateRef.current !== mute) {
+                    if (muteStateRef.current) {
+                      playerRef.current.mute()
+                    } else {
+                      playerRef.current.unMute()
+                    }
+                  }
+                }
+              }, 200)
+            },
+            onError: () => {
+              if (unmountedRef.current) return
+              console.error('YouTube player error')
+            }
+          }
+        })
+      } catch (error) {
+        console.error('Failed to initialize YouTube player:', error)
+        return
+      }
+    }
+
+    return () => {
+      unmountedRef.current = true
+      if (checkMutedInterval) {
+        clearInterval(checkMutedInterval)
+        checkMutedInterval = null
+      }
+      if (playerRef.current) {
+        try {
+          playerRef.current.destroy()
+        } catch {
+          // Ignore errors during cleanup
+        }
+        playerRef.current = null
+      }
+    }
+  }, [videoId])
+
+  useEffect(() => {
+    muteStateRef.current = muteMedia
+  }, [muteMedia])
+
+  useEffect(() => {
+    const wrapper = wrapperRef.current
+
+    if (!wrapper || !initSuccess) return
+
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        const player = playerRef.current
+        if (!player || unmountedRef.current) return
+
+        if (
+          !entry.isIntersecting &&
+          [window.YT.PlayerState.PLAYING, window.YT.PlayerState.BUFFERING].includes(
+            player.getPlayerState()
+          )
+        ) {
+          mediaManager.pause(player)
+        }
+      },
+      { threshold: 1 }
+    )
+
+    observer.observe(wrapper)
+
+    return () => {
+      observer.unobserve(wrapper)
+    }
+  }, [initSuccess])
+
+  return (
+    <div
+      ref={wrapperRef}
+      className={cn(
+        'rounded-xl border overflow-hidden',
+        isShort ? 'aspect-[9/16] max-h-[80vh] sm:max-h-[60vh]' : 'aspect-video max-h-[60vh]',
+        className
+      )}
+    >
+      <div id={playerIdRef.current} ref={containerRef} className="w-full h-full" />
+    </div>
+  )
+})
+
+Player.displayName = 'YoutubePlayer'
+
+export default Player

src/components/YoutubeEmbeddedPlayer/index.tsx

@@ -1,11 +1,8 @@
-import { cn } from '@/lib/utils'
 import { useContentPolicy } from '@/providers/ContentPolicyProvider'
-import { useUserPreferences } from '@/providers/UserPreferencesProvider'
+import { useEffect, useMemo, useState } from 'react'
-import mediaManager from '@/services/media-manager.service'
-import { YouTubePlayer } from '@/types/youtube'
-import { useEffect, useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import ExternalLink from '../ExternalLink'
+import Player from './Player'
 
 export default function YoutubeEmbeddedPlayer({
   url,
@@ -18,141 +15,20 @@ export default function YoutubeEmbeddedPlayer({
 }) {
   const { t } = useTranslation()
   const { autoLoadMedia } = useContentPolicy()
-  const { muteMedia, updateMuteMedia } = useUserPreferences()
+  const [display, setDisplay] = useState(autoLoadMedia || mustLoad)
-  const [display, setDisplay] = useState(autoLoadMedia)
   const { videoId, isShort } = useMemo(() => parseYoutubeUrl(url), [url])
-  const [initSuccess, setInitSuccess] = useState(false)
-  const [error, setError] = useState(false)
-  const playerRef = useRef<YouTubePlayer | null>(null)
-  const containerRef = useRef<HTMLDivElement>(null)
-  const wrapperRef = useRef<HTMLDivElement>(null)
-  const muteStateRef = useRef(muteMedia)
 
   useEffect(() => {
-    if (autoLoadMedia) {
+    if (autoLoadMedia || mustLoad) {
       setDisplay(true)
-    } else {
-      setDisplay(false)
     }
-  }, [autoLoadMedia])
+  }, [autoLoadMedia, mustLoad])
 
-  useEffect(() => {
+  if (!videoId) {
-    if (!videoId || !containerRef.current || (!mustLoad && !display)) 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()
-    }
-
-    let checkMutedInterval: NodeJS.Timeout | null = null
-    function initPlayer() {
-      try {
-        if (!videoId || !containerRef.current || !window.YT.Player) return
-
-        let currentMuteState = muteStateRef.current
-        playerRef.current = new window.YT.Player(containerRef.current, {
-          videoId: videoId,
-          playerVars: {
-            mute: currentMuteState ? 1 : 0
-          },
-          events: {
-            onStateChange: (event: any) => {
-              if (event.data === window.YT.PlayerState.PLAYING) {
-                mediaManager.play(playerRef.current)
-              } else if (
-                event.data === window.YT.PlayerState.PAUSED ||
-                event.data === window.YT.PlayerState.ENDED
-              ) {
-                mediaManager.pause(playerRef.current)
-              }
-            },
-            onReady: () => {
-              setInitSuccess(true)
-              checkMutedInterval = setInterval(() => {
-                if (playerRef.current) {
-                  const mute = playerRef.current.isMuted()
-                  if (mute !== currentMuteState) {
-                    currentMuteState = mute
-
-                    if (mute !== muteStateRef.current) {
-                      updateMuteMedia(currentMuteState)
-                    }
-                  } else if (muteStateRef.current !== mute) {
-                    if (muteStateRef.current) {
-                      playerRef.current.mute()
-                    } else {
-                      playerRef.current.unMute()
-                    }
-                  }
-                }
-              }, 200)
-            },
-            onError: () => setError(true)
-          }
-        })
-      } catch (error) {
-        console.error('Failed to initialize YouTube player:', error)
-        setError(true)
-        return
-      }
-    }
-
-    return () => {
-      if (playerRef.current) {
-        playerRef.current.destroy()
-      }
-      if (checkMutedInterval) {
-        clearInterval(checkMutedInterval)
-        checkMutedInterval = null
-      }
-    }
-  }, [videoId, display, mustLoad])
-
-  useEffect(() => {
-    muteStateRef.current = muteMedia
-  }, [muteMedia])
-
-  useEffect(() => {
-    const wrapper = wrapperRef.current
-
-    if (!wrapper || !initSuccess) return
-
-    const observer = new IntersectionObserver(
-      ([entry]) => {
-        const player = playerRef.current
-        if (!player) return
-
-        if (
-          !entry.isIntersecting &&
-          [window.YT.PlayerState.PLAYING, window.YT.PlayerState.BUFFERING].includes(
-            player.getPlayerState()
-          )
-        ) {
-          mediaManager.pause(player)
-        }
-      },
-      { threshold: 1 }
-    )
-
-    observer.observe(wrapper)
-
-    return () => {
-      observer.unobserve(wrapper)
-    }
-  }, [videoId, display, mustLoad, initSuccess])
-
-  if (error) {
     return <ExternalLink url={url} />
   }
 
-  if (!mustLoad && !display) {
+  if (!display) {
     return (
       <div
         className="text-primary hover:underline truncate w-fit cursor-pointer"
@@ -166,22 +42,7 @@ export default function YoutubeEmbeddedPlayer({
     )
   }
 
-  if (!videoId && !initSuccess) {
+  return <Player videoId={videoId} isShort={isShort} className={className} />
-    return <ExternalLink url={url} />
-  }
-
-  return (
-    <div
-      ref={wrapperRef}
-      className={cn(
-        'rounded-xl border overflow-hidden',
-        isShort ? 'aspect-[9/16] max-h-[80vh] sm:max-h-[60vh]' : 'aspect-video max-h-[60vh]',
-        className
-      )}
-    >
-      <div ref={containerRef} className="w-full h-full" />
-    </div>
-  )
 }
 
 function parseYoutubeUrl(url: string) {