From eca21d31911b91f33b0a0c4c50c56d6e33fcf43a Mon Sep 17 00:00:00 2001 From: Alejandro Date: Fri, 30 Jan 2026 17:34:33 +0100 Subject: [PATCH] feat: load media setting (#230) * feat: add custom media renderer support to RichText Add renderMedia prop to RichText component that allows overriding how images, videos, and audio are rendered across the entire RichText subtree (including Link and Gallery components). The custom renderer receives: - url: the media URL - type: "image" | "video" | "audio" - imeta: optional NIP-92 metadata (dimensions, blurhash, alt, etc.) This enables chat-specific media rendering with compact thumbnails, lightboxes, or any custom presentation. https://claude.ai/code/session_01AeeN5d5EcVLGjZbGueZxaD * feat: add ChatMediaRenderer for compact inline media display Custom media renderer for chat that shows: - Media type icon (image/video/audio) - Filename (extracted from URL or imeta alt) - File size (from imeta if available) - Blossom link button (opens blob viewer for blossom URLs) Usage: https://claude.ai/code/session_01AeeN5d5EcVLGjZbGueZxaD * feat: use ChatMediaRenderer in chat messages - Updated ChatMediaRenderer to use getHashFromURL from blossom-client-sdk - Integrated ChatMediaRenderer into ChatViewer for message content https://claude.ai/code/session_01AeeN5d5EcVLGjZbGueZxaD * style: make ChatMediaRenderer inline with subtle dotted border Use a subtle dotted bottom border instead of background/padding to better integrate with surrounding text flow. https://claude.ai/code/session_01AeeN5d5EcVLGjZbGueZxaD * feat: improve ChatMediaRenderer UX - Full dotted border with rounded corners (was bottom-only) - Increased gap between elements - Images/videos open in MediaDialog zoom viewer on click - Audio still opens in new tab - Better extension extraction for display https://claude.ai/code/session_01AeeN5d5EcVLGjZbGueZxaD * feat: improve blossom integration in ChatMediaRenderer - Use HardDrive icon instead of Flower2 (consistent with rest of app) - Add commandString for Edit functionality in window toolbar - Pass blobUrl with extension to BlossomViewer for correct media preview - Extended BlossomViewer.BlobDetailView to accept blobUrl prop https://claude.ai/code/session_01AeeN5d5EcVLGjZbGueZxaD * refactor: simplify ChatMediaRenderer styling - All icons now size-3 - Use dotted underline only (cleaner inline appearance) - All media types open in new tab on click - Removed MediaDialog dependency https://claude.ai/code/session_01AeeN5d5EcVLGjZbGueZxaD * fix: inherit custom media renderer in nested RichText components Previously, nested RichText components (like those in QuotedEvent/KindRenderer) would always reset the media renderer context to null because the provider used `renderMedia ?? null`. This caused embedded events in chat to use the default media renderer instead of ChatMediaRenderer. Now RichText inherits the parent media renderer when no explicit renderMedia prop is passed, allowing custom renderers to work throughout the entire rich text subtree including quoted events. https://claude.ai/code/session_01AeeN5d5EcVLGjZbGueZxaD * feat: improve ChatMediaRenderer with expandable inline media - More compact representation: "icon truncated-hash blossom" - Click filename to expand and show actual media inline (image/video/audio) - Tooltip shows full filename and file size on hover - Audio support with inline audio player when expanded - Fixed BlossomViewer to detect media type from URL extension when mimeType is not available from blob descriptor https://claude.ai/code/session_01AeeN5d5EcVLGjZbGueZxaD * feat: improve ChatMediaRenderer with better UX - Click to expand shows MediaEmbed (not collapsible once expanded) - Tooltip only shows when imeta is present, displays: alt, mime type, dimensions, size, duration - More compact representation: [icon] truncated-hash [blossom] - Pass mediaType to BlossomViewer for correct preview rendering - BlossomViewer now accepts mediaType hint for preview type detection https://claude.ai/code/session_01AeeN5d5EcVLGjZbGueZxaD * fix: blossom blob command now parses --type flag - Added mediaType and blobUrl fields to BlossomCommandResult - Blob subcommand now parses --type image|video|audio flag - Fixed server URL overflow in blob detail view with truncation https://claude.ai/code/session_01AeeN5d5EcVLGjZbGueZxaD * refactor: add global loadMedia setting with CompactMediaRenderer - Add `loadMedia` setting to Appearance section (enabled by default) - Create CompactMediaRenderer in src/components/nostr/ (renamed from ChatMediaRenderer) - Link.tsx and Gallery.tsx now check the setting and use CompactMediaRenderer when disabled - Tooltip format improved: "Field " with field name and value side by side - Shows: Hash, Size, Dimensions, Type, Duration, Alt - Remove renderMedia prop from ChatViewer (now automatic based on setting) - Delete old ChatMediaRenderer.tsx This makes media rendering a site-wide setting rather than chat-specific. https://claude.ai/code/session_01AeeN5d5EcVLGjZbGueZxaD --------- Co-authored-by: Claude --- src/components/BlossomViewer.tsx | 71 +++++- src/components/SettingsViewer.tsx | 21 ++ src/components/nostr/CompactMediaRenderer.tsx | 237 ++++++++++++++++++ src/components/nostr/RichText.tsx | 34 ++- src/components/nostr/RichText/Gallery.tsx | 22 +- src/components/nostr/RichText/Link.tsx | 22 +- src/lib/blossom-parser.ts | 30 ++- src/lib/imeta.ts | 11 + src/services/settings.ts | 3 + 9 files changed, 432 insertions(+), 19 deletions(-) create mode 100644 src/components/nostr/CompactMediaRenderer.tsx diff --git a/src/components/BlossomViewer.tsx b/src/components/BlossomViewer.tsx index 05d17a1..c39683b 100644 --- a/src/components/BlossomViewer.tsx +++ b/src/components/BlossomViewer.tsx @@ -51,6 +51,10 @@ interface BlossomViewerProps { sourceUrl?: string; targetServer?: string; sha256?: string; + /** Full blob URL with extension (for blob subcommand) */ + blobUrl?: string; + /** Media type hint for preview (image/video/audio) */ + mediaType?: "image" | "video" | "audio"; } /** @@ -63,6 +67,8 @@ export function BlossomViewer({ sourceUrl, targetServer, sha256, + blobUrl, + mediaType, }: BlossomViewerProps) { switch (subcommand) { case "servers": @@ -74,7 +80,14 @@ export function BlossomViewer({ case "list": return ; case "blob": - return ; + return ( + + ); case "mirror": return ; case "delete": @@ -996,26 +1009,66 @@ function BlobRow({ function BlobDetailView({ sha256, serverUrl, + blobUrl: providedBlobUrl, blob: initialBlob, + mediaType: providedMediaType, onBack, }: { sha256?: string; serverUrl?: string; + /** Full blob URL with extension */ + blobUrl?: string; blob?: BlobDescriptor; + /** Media type hint (image/video/audio) */ + mediaType?: "image" | "video" | "audio"; onBack?: () => void; }) { const { copy, copied } = useCopy(); const blob = initialBlob; - // If we have a blob descriptor, use that data + // Use provided URL, or blob descriptor URL, or construct from server + sha256 const blobUrl = - blob?.url || (serverUrl && sha256 ? `${serverUrl}/${sha256}` : null); + providedBlobUrl || + blob?.url || + (serverUrl && sha256 ? `${serverUrl}/${sha256}` : null); const blobSha256 = blob?.sha256 || sha256; const mimeType = blob?.type; - const isImage = mimeType?.startsWith("image/"); - const isVideo = mimeType?.startsWith("video/"); - const isAudio = mimeType?.startsWith("audio/"); + // Detect media type from URL extension if mimeType not available + const getMediaTypeFromUrl = ( + url: string | null, + ): "image" | "video" | "audio" | null => { + if (!url) return null; + try { + const pathname = new URL(url).pathname.toLowerCase(); + const ext = pathname.split(".").pop(); + if (!ext) return null; + const imageExts = ["jpg", "jpeg", "png", "gif", "webp", "svg", "avif"]; + const videoExts = ["mp4", "webm", "mov", "avi", "mkv", "m4v"]; + const audioExts = ["mp3", "wav", "ogg", "flac", "m4a", "aac"]; + if (imageExts.includes(ext)) return "image"; + if (videoExts.includes(ext)) return "video"; + if (audioExts.includes(ext)) return "audio"; + return null; + } catch { + return null; + } + }; + + const urlMediaType = getMediaTypeFromUrl(blobUrl); + // Priority: mimeType from blob > provided mediaType hint > detected from URL + const isImage = + mimeType?.startsWith("image/") || + providedMediaType === "image" || + urlMediaType === "image"; + const isVideo = + mimeType?.startsWith("video/") || + providedMediaType === "video" || + urlMediaType === "video"; + const isAudio = + mimeType?.startsWith("audio/") || + providedMediaType === "audio" || + urlMediaType === "audio"; if (!blobSha256) { return ( @@ -1133,8 +1186,10 @@ function BlobDetailView({ Server
- - {serverUrl} + + + {serverUrl} +
)} diff --git a/src/components/SettingsViewer.tsx b/src/components/SettingsViewer.tsx index cc4eb85..ef596e4 100644 --- a/src/components/SettingsViewer.tsx +++ b/src/components/SettingsViewer.tsx @@ -87,6 +87,27 @@ export function SettingsViewer() { } /> + +
+
+ +

+ Render links to media as inline images, videos, and audio +

+
+ + updateSetting("appearance", "loadMedia", checked) + } + /> +
diff --git a/src/components/nostr/CompactMediaRenderer.tsx b/src/components/nostr/CompactMediaRenderer.tsx new file mode 100644 index 0000000..8fc04ae --- /dev/null +++ b/src/components/nostr/CompactMediaRenderer.tsx @@ -0,0 +1,237 @@ +/** + * Compact media renderer for RichText + * + * Shows compact inline file info with expandable media: + * [icon] truncated-hash [blossom] + * + * Click on filename expands to show the actual media inline (not collapsible). + * Tooltip shows imeta info when available. + */ + +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 { + Tooltip, + TooltipContent, + TooltipTrigger, +} from "@/components/ui/tooltip"; +import { MediaEmbed } from "@/components/nostr/MediaEmbed"; +import type { MediaRendererProps } from "@/components/nostr/RichText"; + +/** + * Extract file extension from URL + */ +function getExtension(url: string): string | null { + try { + const urlObj = new URL(url); + const pathname = urlObj.pathname; + const lastSegment = pathname.split("/").pop() || ""; + if (lastSegment.includes(".")) { + return lastSegment.split(".").pop() || null; + } + return null; + } catch { + return null; + } +} + +/** + * Get truncated hash display for compact view + */ +function getTruncatedHash(url: string): string { + const hash = getHashFromURL(url); + if (hash) { + const ext = getExtension(url); + // Show first 6 chars of hash + return ext ? `${hash.slice(0, 6)}…${ext}` : `${hash.slice(0, 6)}…`; + } + // Fallback: truncate filename + try { + const urlObj = new URL(url); + const pathname = urlObj.pathname; + const lastSegment = decodeURIComponent(pathname.split("/").pop() || "file"); + if (lastSegment.length > 12) { + const ext = getExtension(url); + if (ext) { + const nameWithoutExt = lastSegment.slice(0, -(ext.length + 1)); + return `${nameWithoutExt.slice(0, 6)}…${ext}`; + } + return `${lastSegment.slice(0, 8)}…`; + } + return lastSegment; + } catch { + return "file"; + } +} + +/** + * Parse blossom URL - returns sha256 and server URL if valid + */ +function parseBlossomUrl( + url: string, +): { sha256: string; serverUrl: string } | null { + const sha256 = getHashFromURL(url); + if (!sha256) return null; + + try { + const urlObj = new URL(url); + const serverUrl = `${urlObj.protocol}//${urlObj.host}`; + return { sha256, serverUrl }; + } catch { + return null; + } +} + +/** + * Format duration in seconds to human readable format + */ +function formatDuration(seconds: number): string { + const mins = Math.floor(seconds / 60); + const secs = Math.floor(seconds % 60); + return mins > 0 ? `${mins}m ${secs}s` : `${secs}s`; +} + +/** + * Get icon component based on media type + */ +function MediaIcon({ type }: { type: "image" | "video" | "audio" }) { + const iconClass = "size-3 shrink-0 text-muted-foreground"; + switch (type) { + case "image": + return ; + case "video": + return