diff --git a/e2e/USER_STORIES.md b/e2e/USER_STORIES.md
index 61b29d62..30063227 100644
--- a/e2e/USER_STORIES.md
+++ b/e2e/USER_STORIES.md
@@ -940,8 +940,7 @@ Acceptance:
- A standalone url whose preview resolves shows a card with title, description,
and image after a brief loading state.
-- A standalone url with nothing usable shows a card explaining the preview
- couldn't be loaded, naming the url.
+- A standalone url with nothing usable falls back to the compact inline link.
- The same url embedded in a sentence renders as a compact inline link with no
card.
diff --git a/e2e/specs/content-rendering.spec.ts b/e2e/specs/content-rendering.spec.ts
index 7c4c748f..249ed869 100644
--- a/e2e/specs/content-rendering.spec.ts
+++ b/e2e/specs/content-rendering.spec.ts
@@ -231,7 +231,7 @@ test("US-063 preview a shared link", async ({seed, as}) => {
const previewImage = 'img[src="https://images.test/preview.png"]'
await expect(card.locator(".spinner")).toBeVisible()
- await expect(failed.getByText(`Unable to load a preview for ${unreadable}`)).toBeVisible()
+ await expect(failed.getByRole("link", {name: "example.test/unreadable"})).toBeVisible()
servePreview()
diff --git a/src/app/components/ContentLinkBlock.svelte b/src/app/components/ContentLinkBlock.svelte
index 9bbf7e4a..85b31d66 100644
--- a/src/app/components/ContentLinkBlock.svelte
+++ b/src/app/components/ContentLinkBlock.svelte
@@ -52,6 +52,11 @@
Boolean(url.match(/\.(mp3|m4a|wav|ogg|oga|opus|flac)$/)) ||
AUDIO_CONTENT_TYPES.includes(fileType)
+ const isVideo = Boolean(url.match(/\.(mov|webm|mp4)$/)) || VIDEO_CONTENT_TYPES.includes(fileType)
+
+ const isImage =
+ Boolean(url.match(/\.(jpe?g|png|gif|webp)$/)) || IMAGE_CONTENT_TYPES.includes(fileType)
+
const getVideoPoster = (videoUrl: string): string | undefined => {
if (Capacitor.getPlatform() === "android" && THUMBNAIL_URL) {
return `${THUMBNAIL_URL}/thumbnail?url=${encodeURIComponent(videoUrl)}`
@@ -71,50 +76,48 @@
{ellipsize(preview.description, 140)}
-- Unable to load a preview for {url} -
- {/await} - {/if} + +{:else if isImage} + + + +{:else} + {#await loadPreview(url)} +{ellipsize(preview.description, 140)}
+