feat(youtube): add YouTube embed support with yt-dlp integration for ad-free streaming

src/app/components/RenderMessageContent.tsx

@@ -24,7 +24,7 @@ import {
   UnsupportedContent,
   VideoContent,
 } from './message';
-import { UrlPreviewCard, UrlPreviewHolder } from './url-preview';
+import { UrlPreviewCard, UrlPreviewHolder, YouTubeEmbed, isYouTubeUrl } from './url-preview';
 import { Image, MediaControl, Video } from './media';
 import { ImageViewer } from './image-viewer';
 import { PdfViewer } from './Pdf-viewer';
@@ -65,12 +65,26 @@ export function RenderMessageContent({
     let filteredUrls = urls.filter((url) => !testMatrixTo(url));
     filteredUrls = filterDisabledUrls(filteredUrls, disabledEmbedPatterns ?? []);
     if (filteredUrls.length === 0) return undefined;
+
+    // Separate YouTube URLs from other URLs
+    const youtubeUrls = filteredUrls.filter(isYouTubeUrl);
+    const otherUrls = filteredUrls.filter((url) => !isYouTubeUrl(url));
+
     return (
-      <UrlPreviewHolder>
-        {filteredUrls.map((url) => (
-          <UrlPreviewCard key={url} url={url} ts={ts} />
+      <>
+        {/* Render YouTube embeds (ad-free via Piped) */}
+        {youtubeUrls.map((url) => (
+          <YouTubeEmbed key={url} url={url} />
         ))}
-      </UrlPreviewHolder>
+        {/* Render standard URL previews for other links */}
+        {otherUrls.length > 0 && (
+          <UrlPreviewHolder>
+            {otherUrls.map((url) => (
+              <UrlPreviewCard key={url} url={url} ts={ts} />
+            ))}
+          </UrlPreviewHolder>
+        )}
+      </>
     );
   };
   const renderCaption = () => {