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 @@ {:else if isAudio} -{:else} +{:else if isVideo} - {#if url.match(/\.(mov|webm|mp4)$/) || VIDEO_CONTENT_TYPES.includes(fileType)} - - {:else if url.match(/\.(jpe?g|png|gif|webp)$/) || IMAGE_CONTENT_TYPES.includes(fileType)} - - {:else} - {#await loadPreview(url)} -
- -
- {:then preview} -
- {#if preview.image && !hideImage} - - {/if} -
- {preview.title || displayUrl(url)} -

{ellipsize(preview.description, 140)}

-
-
- {:catch} -

- Unable to load a preview for {url} -

- {/await} - {/if} + +{:else if isImage} + + + +{:else} + {#await loadPreview(url)} +
+ +
+ {:then preview} + +
+ {#if preview.image && !hideImage} + + {/if} +
+ {preview.title || displayUrl(url)} +

{ellipsize(preview.description, 140)}

+
+
+ + {:catch} + + {/await} {/if}