feat(preview): preview a direct image link as the image itself

Author: eleboucher

src/preview.ts

@@ -219,12 +219,23 @@ async function previewTweet(id: string): Promise<Preview | null> {
 	return { tags, images, cover: mosaic ?? undefined };
 }
 
+function imageType(page: Response): string | null {
+	const type = /^\s*(image\/[\w.+-]+)/i.exec(page.headers.get('Content-Type') ?? '')?.[1].toLowerCase();
+	return type && type !== 'image/svg+xml' ? type : null;
+}
+
 async function previewPage(url: URL): Promise<Preview | null> {
 	const endpoint = OEMBED_ENDPOINTS.find(([host]) => host.test(url.hostname))?.[1];
 	const known = endpoint ? fetchJson<OEmbed>(new URL(`${endpoint}?format=json&url=${encodeURIComponent(url.href)}`)) : null;
 
 	const page = await fetchPublic(url, 'text/html');
 	const base = page?.url || url;
+	const type = page && imageType(page);
+	if (page && type) {
+		await page.body?.cancel();
+		const image = toImage(base.toString());
+		return image ? { tags: { 'og:image:type': type }, images: [image] } : null;
+	}
 	const html = page?.headers.get('Content-Type')?.includes('text/html') ? await readPage(page, base) : null;
 	const knownOEmbed = await known;
 	if (!html && !knownOEmbed) return null;

test/preview.spec.ts

@@ -89,6 +89,18 @@ describe('preview_url', () => {
 		expect((await preview('https://api.example/')).status).toBe(404);
 	});
 
+	it('previews a direct image link as the image itself', async () => {
+		servePage('', 'image/gif');
+
+		const response = await preview('https://cdn.example/clip.gif');
+		const body = (await response.json()) as Record<string, unknown>;
+
+		expect(response.status).toBe(200);
+		expect(body['og:image']).toBe(`mxc://gifs.example/${toMatrixID('https://cdn.example/clip.gif', 'og_')}`);
+		expect(body['og:image:type']).toBe('image/gif');
+		expect(body['og:title']).toBeUndefined();
+	});
+
 	it('answers not found when the page cannot be fetched', async () => {
 		vi.spyOn(globalThis, 'fetch').mockRejectedValue(new Error('down'));