diff --git a/src/lib/components/content/EmbeddedEvent.svelte b/src/lib/components/content/EmbeddedEvent.svelte index 5740a22..fa2cb32 100644 --- a/src/lib/components/content/EmbeddedEvent.svelte +++ b/src/lib/components/content/EmbeddedEvent.svelte @@ -246,7 +246,7 @@
{ if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); handleClick(e as any); } }}> {#if getImageUrl()}
- {getTitle()} + {getTitle()}
{:else} {@const contentImages = getImageUrlsFromContent()} @@ -254,7 +254,7 @@
{#each contentImages.slice(0, 3) as imageUrl}
- {getTitle()} + {getTitle()}
{/each}
diff --git a/src/lib/components/content/MarkdownRenderer.svelte b/src/lib/components/content/MarkdownRenderer.svelte index 69d33d8..901b9b9 100644 --- a/src/lib/components/content/MarkdownRenderer.svelte +++ b/src/lib/components/content/MarkdownRenderer.svelte @@ -11,10 +11,8 @@ import { mountComponent } from './mount-component-action.js'; import type { NostrEvent } from '../../types/nostr.js'; - // Lazy load EmbeddedEvent component (heavy component) - will be loaded on demand - let EmbeddedEventComponent: any = null; - let embeddedEventLoading = $state(false); - let mountingEmbeddedEvents = $state(false); // Guard for mounting, separate from loading component + import EmbeddedEvent from './EmbeddedEvent.svelte'; + let mountingEmbeddedEvents = $state(false); // Guard for mounting interface Props { content: string; @@ -145,7 +143,7 @@ const escapedUrl = escapeHtml(url); if (type === 'image') { - result = result.substring(0, index) + `` + result.substring(endIndex); + result = result.substring(0, index) + `` + result.substring(endIndex); } else if (type === 'video') { result = result.substring(0, index) + `` + result.substring(endIndex); } else if (type === 'audio') { @@ -617,7 +615,7 @@ if (url.startsWith('http://') || url.startsWith('https://') || url.startsWith('data:')) { const escapedUrl = escapeHtml(url); const escapedAlt = escapeHtml(alt); - return `${escapedAlt}`; + return `${escapedAlt}`; } // If not a valid URL, remove the markdown syntax to prevent 404s return alt || ''; @@ -629,7 +627,7 @@ // If it's a valid image URL, convert to a proper img tag if (url.startsWith('http://') || url.startsWith('https://') || url.startsWith('data:')) { const escapedUrl = escapeHtml(url); - return ``; + return ``; } // Otherwise, remove to prevent 404s return ''; @@ -646,7 +644,7 @@ // If it's an image URL, convert to proper img tag if (/\.(png|jpg|jpeg|gif|webp|svg|bmp|ico)(\?[^\s<>"']*)?$/i.test(url)) { const escapedUrl = escapeHtml(url); - return `>${before}${after}<`; + return `>${before}${after}<`; } } // Otherwise, remove the problematic pattern to prevent 404s @@ -733,26 +731,8 @@ } } - // Lazy load EmbeddedEvent component when needed - async function loadEmbeddedEventComponent() { - if (EmbeddedEventComponent) return EmbeddedEventComponent; - if (embeddedEventLoading) return null; - - embeddedEventLoading = true; - try { - const module = await import('./EmbeddedEvent.svelte'); - EmbeddedEventComponent = module.default; - return EmbeddedEventComponent; - } catch (error) { - console.error('Error loading EmbeddedEvent component:', error); - return null; - } finally { - embeddedEventLoading = false; - } - } - - // Mount EmbeddedEvent components after rendering (lazy loaded) - async function mountEmbeddedEvents() { + // Mount EmbeddedEvent components after rendering + function mountEmbeddedEvents() { if (!containerRef || mountingEmbeddedEvents) return; // Find all event placeholders and mount EmbeddedEvent components @@ -779,13 +759,6 @@ if (validPlaceholders.length > 0) { console.debug(`Mounting ${validPlaceholders.length} EmbeddedEvent components`); - // Load component only when we have placeholders to mount - const Component = await loadEmbeddedEventComponent(); - if (!Component) { - console.warn('Failed to load EmbeddedEvent component'); - return; - } - validPlaceholders.forEach((placeholder) => { const eventId = placeholder.getAttribute('data-event-id'); if (eventId) { @@ -795,7 +768,7 @@ // Clear and mount component placeholder.innerHTML = ''; // Mount EmbeddedEvent component - it will decode and fetch the event - const instance = mountComponent(placeholder as HTMLElement, Component as any, { eventId }); + const instance = mountComponent(placeholder as HTMLElement, EmbeddedEvent as any, { eventId }); if (!instance) { console.warn('EmbeddedEvent mount returned null', { eventId }); diff --git a/src/lib/components/content/MediaAttachments.svelte b/src/lib/components/content/MediaAttachments.svelte index e3e4585..b6c094f 100644 --- a/src/lib/components/content/MediaAttachments.svelte +++ b/src/lib/components/content/MediaAttachments.svelte @@ -1,6 +1,5 @@
{#if coverImage}
- {#if shouldLoad(coverImage.url)} - {:else} -
- Loading image... -
- {/if}
{/if} @@ -293,72 +202,38 @@ {#each otherMedia as item} {#if item.type === 'image'}
- {#if shouldLoad(item.url)} - {:else} -
- Loading... -
- {/if}
{:else if item.type === 'video'}
- {#if shouldLoad(item.url)} - {:else} -
- ▶️ Video -
- {/if}
{:else if item.type === 'audio'}
- {#if shouldLoad(item.url)} -
{:else if item.type === 'file'}
@@ -448,11 +323,4 @@ text-decoration: underline; } - .media-placeholder { - border: 1px solid var(--fog-border, #e5e7eb); - } - - :global(.dark) .media-placeholder { - border-color: var(--fog-dark-border, #374151); - } diff --git a/src/lib/components/content/MediaViewer.svelte b/src/lib/components/content/MediaViewer.svelte new file mode 100644 index 0000000..801d1e9 --- /dev/null +++ b/src/lib/components/content/MediaViewer.svelte @@ -0,0 +1,151 @@ + + +{#if isOpen} + +{/if} + + diff --git a/src/lib/components/content/MetadataCard.svelte b/src/lib/components/content/MetadataCard.svelte index 51bff4a..f660a8b 100644 --- a/src/lib/components/content/MetadataCard.svelte +++ b/src/lib/components/content/MetadataCard.svelte @@ -83,7 +83,6 @@ {title
{/if} diff --git a/src/lib/components/layout/Header.svelte b/src/lib/components/layout/Header.svelte index 52bd7ee..fcde065 100644 --- a/src/lib/components/layout/Header.svelte +++ b/src/lib/components/layout/Header.svelte @@ -33,12 +33,12 @@
-
-
+
+
aitherboard banner @@ -47,38 +47,38 @@
-