diff --git a/src/components/chat/ChatMediaRenderer.tsx b/src/components/chat/ChatMediaRenderer.tsx index 7671388..9e99372 100644 --- a/src/components/chat/ChatMediaRenderer.tsx +++ b/src/components/chat/ChatMediaRenderer.tsx @@ -3,14 +3,14 @@ * * Shows inline file info instead of embedded media: * [icon] filename [size] [blossom-link] + * + * Click on filename opens media in new tab. */ -import { useState } from "react"; import { Image, Video, Music, File, HardDrive } from "lucide-react"; import { getHashFromURL } from "blossom-client-sdk/helpers/url"; import { useGrimoire } from "@/core/state"; import { formatFileSize } from "@/lib/imeta"; -import { MediaDialog } from "@/components/nostr/MediaDialog"; import type { MediaRendererProps } from "@/components/nostr/RichText"; /** @@ -73,7 +73,7 @@ function parseBlossomUrl( * Get icon component based on media type */ function MediaIcon({ type }: { type: "image" | "video" | "audio" }) { - const iconClass = "size-3.5 shrink-0 text-muted-foreground"; + const iconClass = "size-3 shrink-0 text-muted-foreground"; switch (type) { case "image": return ; @@ -88,7 +88,6 @@ function MediaIcon({ type }: { type: "image" | "video" | "audio" }) { export function ChatMediaRenderer({ url, type, imeta }: MediaRendererProps) { const { addWindow } = useGrimoire(); - const [dialogOpen, setDialogOpen] = useState(false); const filename = imeta?.alt || getFilename(url); const size = imeta?.size ? formatFileSize(imeta.size) : null; @@ -114,46 +113,34 @@ export function ChatMediaRenderer({ url, type, imeta }: MediaRendererProps) { }; const handleMediaClick = (e: React.MouseEvent) => { - e.preventDefault(); e.stopPropagation(); - // Images and videos open in dialog, audio opens in new tab - if (type === "image" || type === "video") { - setDialogOpen(true); - } else { - window.open(url, "_blank", "noopener,noreferrer"); - } }; return ( - <> - - + + + + {filename} + + {size && ( + {size} + )} + {blossom && ( - {size && ( - {size} - )} - {blossom && ( - - )} - - - + )} + ); }