Capture direct image URLs as image cards (#214)

* Capture direct image URLs as images

* Harden direct image response handling

Author: silverbucket

packages/web/src/lib/capture.test.ts

@@ -24,9 +24,12 @@ const { enrichBookmark } = vi.hoisted(() => ({
 }));
 vi.mock('./enrich', () => ({ enrichBookmark }));
 
-import { captureDetected, captureFile } from './capture';
+import { captureDetected, captureFile, downloadDirectImage } from './capture';
 
-afterEach(() => vi.clearAllMocks());
+afterEach(() => {
+  vi.clearAllMocks();
+  vi.unstubAllGlobals();
+});
 
 describe('captureDetected', () => {
   it('stores a bookmark for a URL', async () => {
@@ -38,6 +41,92 @@ describe('captureDetected', () => {
     );
   });
 
+  it('downloads and stores a direct image URL as an image card', async () => {
+    const imageBytes = new Uint8Array([1, 2, 3]);
+    vi.stubGlobal(
+      'fetch',
+      vi.fn().mockResolvedValue(
+        new Response(imageBytes, {
+          status: 200,
+          headers: {
+            'content-type': 'IMAGE/JPEG; charset=binary',
+            'content-length': String(imageBytes.byteLength),
+          },
+        }),
+      ),
+    );
+
+    const url = 'https://cdn.example.com/photos/rolling%20stone.jpg?width=1200';
+    const res = await captureDetected(url);
+
+    expect(res?.item).toMatchObject({
+      type: 'image',
+      title: 'rolling stone.jpg',
+      mimeType: 'image/jpeg',
+      sourceUrl: url,
+    });
+    expect(storeItem.mock.calls[0][1]).toBeInstanceOf(ArrayBuffer);
+    expect(enrichBookmark).not.toHaveBeenCalled();
+  });
+
+  it('normalizes an uppercase image MIME type', async () => {
+    vi.stubGlobal(
+      'fetch',
+      vi.fn().mockResolvedValue(
+        new Response(new Uint8Array([1]), {
+          headers: { 'content-type': 'IMAGE/JPEG' },
+        }),
+      ),
+    );
+
+    const file = await downloadDirectImage('https://example.com/photo.jpg');
+
+    expect(file).toBeInstanceOf(File);
+    expect(file?.type).toBe('image/jpeg');
+  });
+
+  it('cancels an image stream when an unannounced body exceeds 25 MB', async () => {
+    const cancel = vi.fn();
+    const stream = new ReadableStream<Uint8Array>({
+      start(controller) {
+        controller.enqueue(new Uint8Array(20 * 1024 * 1024));
+        controller.enqueue(new Uint8Array(6 * 1024 * 1024));
+      },
+      cancel,
+    });
+    vi.stubGlobal(
+      'fetch',
+      vi.fn().mockResolvedValue(
+        new Response(stream, {
+          headers: { 'content-type': 'image/jpeg' },
+        }),
+      ),
+    );
+
+    const file = await downloadDirectImage('https://example.com/large.jpg');
+
+    expect(file).toBeNull();
+    expect(cancel).toHaveBeenCalledOnce();
+  });
+
+  it('falls back to a bookmark when an image-looking URL is not an image', async () => {
+    vi.stubGlobal(
+      'fetch',
+      vi.fn().mockResolvedValue(
+        new Response('<html>not found</html>', {
+          status: 200,
+          headers: { 'content-type': 'text/html' },
+        }),
+      ),
+    );
+
+    const url = 'https://example.com/not-really.jpg';
+    const res = await captureDetected(url);
+
+    expect(res?.item.type).toBe('bookmark');
+    expect(enrichBookmark).toHaveBeenCalledWith(res?.item);
+  });
+
   it('kicks off background metadata enrichment for bookmarks', async () => {
     const res = await captureDetected('https://example.com');
     expect(enrichBookmark).toHaveBeenCalledOnce();

packages/web/src/lib/capture.ts

@@ -10,6 +10,78 @@ import { detectCaptureKind } from './capture-detect';
 import { enrichBookmark } from './enrich';
 import { collections, moveItemToCollection, storeItem } from './stores';
 
+const MAX_DIRECT_IMAGE_BYTES = 25 * 1024 * 1024;
+const DIRECT_IMAGE_TIMEOUT_MS = 20_000;
+const IMAGE_PATH_PATTERN = /\.(?:avif|gif|jpe?g|png|svg|webp)$/i;
+
+/**
+ * Download an apparent direct-image URL for local-first storage. The file
+ * extension is only a cheap candidate filter; the response Content-Type is
+ * authoritative. Any CORS/network/type/size failure falls back to a bookmark.
+ */
+export async function downloadDirectImage(url: string): Promise<File | null> {
+  let parsed: URL;
+  try {
+    parsed = new URL(url);
+  } catch {
+    return null;
+  }
+  if (!IMAGE_PATH_PATTERN.test(parsed.pathname)) return null;
+
+  const controller = new AbortController();
+  const timeout = setTimeout(() => controller.abort(), DIRECT_IMAGE_TIMEOUT_MS);
+  try {
+    const response = await fetch(url, { signal: controller.signal });
+    if (!response.ok) return null;
+
+    const mimeType = response.headers
+      .get('content-type')
+      ?.split(';')[0]
+      .trim()
+      .toLowerCase();
+    if (!mimeType?.startsWith('image/')) return null;
+
+    const length = response.headers.get('content-length')?.trim();
+    if (
+      length &&
+      /^\d+$/.test(length) &&
+      Number(length) > MAX_DIRECT_IMAGE_BYTES
+    ) {
+      return null;
+    }
+
+    if (!response.body) return null;
+    const reader = response.body.getReader();
+    const chunks: ArrayBuffer[] = [];
+    let receivedBytes = 0;
+    while (true) {
+      const { done, value } = await reader.read();
+      if (done) break;
+      receivedBytes += value.byteLength;
+      if (receivedBytes > MAX_DIRECT_IMAGE_BYTES) {
+        await reader.cancel();
+        return null;
+      }
+      const chunk = new Uint8Array(value.byteLength);
+      chunk.set(value);
+      chunks.push(chunk.buffer);
+    }
+    const blob = new Blob(chunks, { type: mimeType });
+    const encodedName = parsed.pathname.split('/').pop() || 'image';
+    let filename = encodedName;
+    try {
+      filename = decodeURIComponent(encodedName);
+    } catch {
+      // Keep the encoded URL segment when it contains malformed escapes.
+    }
+    return new File([blob], filename, { type: mimeType });
+  } catch {
+    return null;
+  } finally {
+    clearTimeout(timeout);
+  }
+}
+
 /** Detect, build and store a quick capture. Returns the created item so the
  *  caller can offer Undo; null when there's nothing to capture. When a
  *  collectionId is given (capturing from a collection view), the item is filed
@@ -31,16 +103,31 @@ export async function captureDetected(
     throw new Error('Target collection no longer exists');
   }
 
-  const built =
+  const directImage =
     detected.kind === 'bookmark'
+      ? await downloadDirectImage(detected.url)
+      : null;
+  const built = directImage
+    ? await buildImageItem(ctx, {
+        title: directImage.name,
+        description: '',
+        file: directImage,
+      })
+    : detected.kind === 'bookmark'
       ? buildBookmarkItem(ctx, {
           url: detected.url,
           title: '',
           description: '',
         })
       : buildNoteItem(ctx, { title: '', body: detected.body, description: '' });
 
-  await storeItem(built.item);
+  if (!built) return null;
+  if (directImage && built.item.type === 'image') {
+    built.item.sourceUrl =
+      detected.kind === 'bookmark' ? detected.url : undefined;
+  }
+
+  await storeItem(built.item, built.fileData, built.thumbData);
   if (collectionId) {
     await moveItemToCollection(built.item.id, collectionId);
   }