@jant/core 0.6.16 → 0.7.1

package/src/client/__tests__/compose-bridge-image-upload.test.ts

@@ -0,0 +1,196 @@
+// @vitest-environment happy-dom
+
+/**
+ * Selecting a photo used to fetch the 3MB HEIC decoder and read the whole
+ * file into memory just to check four bytes of it, then decode the processed
+ * image a second time for its blurhash. The bridge now sniffs the header
+ * itself, imports `heic-to` only for a real HEIC, and takes the blurhash the
+ * processor already sampled.
+ */
+
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import type {
+  ComposeAttachment,
+  ComposeLabels,
+} from "../components/compose-types.js";
+import type { JantComposeEditor } from "../components/jant-compose-editor.js";
+
+const processToFile = vi.fn();
+const uploadViaSession = vi.fn();
+const heicTo = vi.fn();
+const heicToImports = { count: 0 };
+
+vi.mock("../image-processor.js", () => ({
+  ImageProcessor: {
+    processToFile: (...args: unknown[]) => processToFile(...args),
+  },
+}));
+
+vi.mock("../upload-session.js", () => ({
+  uploadViaSession: (...args: unknown[]) => uploadViaSession(...args),
+}));
+
+vi.mock("heic-to", () => {
+  heicToImports.count += 1;
+  return { heicTo: (...args: unknown[]) => heicTo(...args) };
+});
+
+await import("../compose-bridge.js");
+await import("../components/jant-compose-editor.js");
+
+const PROCESSED = new File(["webp"], "photo.webp", { type: "image/webp" });
+const BLURHASH = "LEHV6nWB2yk8pyo0adR*.7kCMdnj";
+
+function jpegFile() {
+  return new File(
+    [new Uint8Array([0xff, 0xd8, 0xff, 0xe0, 0, 0, 0, 0])],
+    "photo.jpg",
+    {
+      type: "image/jpeg",
+    },
+  );
+}
+
+function heicFile() {
+  const bytes = new Uint8Array(16);
+  bytes.set([...new TextEncoder().encode("ftyp")], 4);
+  bytes.set([...new TextEncoder().encode("heic")], 8);
+  return new File([bytes], "IMG_0001.HEIC", { type: "image/heic" });
+}
+
+function selectFile(file: File) {
+  document.dispatchEvent(
+    new CustomEvent("jant:files-selected", {
+      detail: { files: [{ file, clientId: "attachment-1" }] },
+    }),
+  );
+}
+
+async function settle() {
+  for (let i = 0; i < 10; i++) {
+    await new Promise((resolve) => setTimeout(resolve, 0));
+  }
+}
+
+describe("compose bridge image upload", () => {
+  beforeEach(() => {
+    processToFile.mockReset().mockResolvedValue({
+      file: PROCESSED,
+      width: 1200,
+      height: 900,
+      blurhash: BLURHASH,
+    });
+    uploadViaSession.mockReset().mockResolvedValue({
+      id: "med_1",
+      filename: "photo.webp",
+      url: "/media/photo.webp",
+      mimeType: "image/webp",
+      size: 4,
+    });
+    heicTo
+      .mockReset()
+      .mockResolvedValue(new Blob(["jpeg"], { type: "image/jpeg" }));
+  });
+
+  it("uploads a JPEG with the processor's blurhash and never loads heic-to", async () => {
+    const file = jpegFile();
+
+    selectFile(file);
+    await settle();
+
+    expect(heicToImports.count).toBe(0);
+    expect(heicTo).not.toHaveBeenCalled();
+    expect(processToFile).toHaveBeenCalledWith(file);
+    expect(uploadViaSession).toHaveBeenCalledTimes(1);
+    expect(uploadViaSession.mock.calls[0][0]).toBe(PROCESSED);
+    expect(uploadViaSession.mock.calls[0][1]).toMatchObject({
+      width: 1200,
+      height: 900,
+      blurhash: BLURHASH,
+    });
+  });
+
+  it("converts a file whose bytes say HEIC before processing it", async () => {
+    selectFile(heicFile());
+    await settle();
+
+    expect(heicToImports.count).toBe(1);
+    expect(heicTo).toHaveBeenCalledWith(
+      expect.objectContaining({ type: "image/jpeg" }),
+    );
+    const converted = processToFile.mock.calls[0][0] as File;
+    expect(converted.name).toBe("IMG_0001.jpg");
+    expect(converted.type).toBe("image/jpeg");
+    expect(uploadViaSession.mock.calls[0][1]).toMatchObject({
+      blurhash: BLURHASH,
+    });
+  });
+
+  it("reports to the editor that took the post over, not the one it started in", async () => {
+    // Entering or leaving thread mode renders the post in a new editor. An
+    // upload still running then used to keep reporting to the old one, so the
+    // new editor showed "uploading" forever and the file never reached the
+    // local draft.
+    let finishUpload: (value: unknown) => void = () => {};
+    uploadViaSession.mockReset().mockReturnValue(
+      new Promise((resolve) => {
+        finishUpload = resolve;
+      }),
+    );
+    const editor = async () => {
+      const el = document.createElement(
+        "jant-compose-editor",
+      ) as JantComposeEditor;
+      el.labels = {} as ComposeLabels;
+      document.body.appendChild(el);
+      await el.updateComplete;
+      return el;
+    };
+    const file = jpegFile();
+    const pending: ComposeAttachment = {
+      clientId: "attachment-1",
+      file,
+      previewUrl: "blob:preview",
+      posterUrl: null,
+      status: "pending",
+      progress: null,
+      mediaId: null,
+      remoteUrl: null,
+      alt: "",
+      error: null,
+      summary: null,
+      chars: null,
+    };
+
+    const started = await editor();
+    started._attachments = [pending];
+    started._attachmentOrder = [pending.clientId];
+    started.dispatchEvent(
+      new CustomEvent("jant:files-selected", {
+        bubbles: true,
+        detail: { files: [{ file, clientId: pending.clientId }] },
+      }),
+    );
+    await settle();
+    expect(uploadViaSession).toHaveBeenCalledTimes(1);
+
+    started.remove();
+    const next = await editor();
+    next.takeOver(started);
+
+    finishUpload({
+      id: "med_1",
+      filename: "photo.webp",
+      url: "/media/photo.webp",
+      mimeType: "image/webp",
+      size: 4,
+    });
+    await settle();
+
+    expect(next._attachments[0]).toMatchObject({
+      status: "done",
+      mediaId: "med_1",
+      remoteUrl: "/media/photo.webp",
+    });
+  });
+});

package/src/client/__tests__/compose-bridge-video-poster.test.ts

@@ -0,0 +1,159 @@
+// @vitest-environment happy-dom
+
+/**
+ * The compose card and the uploaded media used to draw their poster from two
+ * different places: the card from a quick `<video>` frame grab, the upload
+ * from the mediabunny probe. When the probe came back without one, the card
+ * showed a thumbnail the published post did not have. The quick frame is now
+ * the upload's fallback, so the two cannot disagree.
+ */
+
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+const processToFile = vi.fn();
+const uploadViaSession = vi.fn();
+
+vi.mock("../video-processor.js", () => ({
+  VideoProcessor: {
+    isSupported: () => true,
+    processToFile: (...args: unknown[]) => processToFile(...args),
+  },
+}));
+
+vi.mock("../upload-session.js", () => ({
+  uploadViaSession: (...args: unknown[]) => uploadViaSession(...args),
+}));
+
+await import("../compose-bridge.js");
+
+const QUICK_POSTER = new Blob(["quick"], { type: "image/webp" });
+const PROBE_POSTER = new Blob(["probe"], { type: "image/webp" });
+
+/** Stand in for the `<video>` element `captureQuickPoster` grabs a frame from. */
+function stubFrameCapture(options: { decodes: boolean }) {
+  vi.spyOn(document, "createElement").mockImplementation(((tag: string) => {
+    if (tag === "canvas") {
+      return {
+        width: 0,
+        height: 0,
+        getContext: () => ({ drawImage: () => {} }),
+        toBlob: (cb: (blob: Blob | null) => void) => cb(QUICK_POSTER),
+      } as unknown as HTMLElement;
+    }
+    const video = {
+      muted: false,
+      playsInline: false,
+      preload: "",
+      videoWidth: 1280,
+      videoHeight: 720,
+      onloadeddata: null as null | (() => void),
+      onerror: null as null | (() => void),
+      removeAttribute: () => {},
+      load: () => {},
+      set src(_value: string) {
+        queueMicrotask(() =>
+          options.decodes ? this.onloadeddata?.() : this.onerror?.(),
+        );
+      },
+    };
+    return video as unknown as HTMLElement;
+  }) as typeof document.createElement);
+}
+
+function selectVideoFile() {
+  document.dispatchEvent(
+    new CustomEvent("jant:files-selected", {
+      detail: {
+        files: [
+          {
+            file: new File(["source"], "clip.mov", {
+              type: "video/quicktime",
+            }),
+            clientId: "attachment-1",
+          },
+        ],
+      },
+    }),
+  );
+}
+
+async function settle() {
+  for (let i = 0; i < 6; i++) {
+    await new Promise((resolve) => setTimeout(resolve, 0));
+  }
+}
+
+function uploadedPoster(): Blob | undefined {
+  const metadata = uploadViaSession.mock.calls[0]?.[1] as
+    { poster?: Blob } | undefined;
+  return metadata?.poster;
+}
+
+describe("compose bridge video poster", () => {
+  beforeEach(() => {
+    document.body.innerHTML = "";
+    vi.restoreAllMocks();
+    processToFile.mockReset();
+    uploadViaSession.mockReset();
+    uploadViaSession.mockResolvedValue({
+      id: "med_1",
+      filename: "clip.mp4",
+      url: "/media/clip.mp4",
+      mimeType: "video/mp4",
+      size: 10,
+    });
+    vi.stubGlobal("URL", {
+      createObjectURL: () => "blob:test",
+      revokeObjectURL: () => {},
+    });
+  });
+
+  it("uploads the probe's poster when it has one", async () => {
+    stubFrameCapture({ decodes: true });
+    processToFile.mockResolvedValue({
+      file: new File(["out"], "clip.mp4", { type: "video/mp4" }),
+      width: 1280,
+      height: 720,
+      poster: PROBE_POSTER,
+      blurhash: "LGK",
+    });
+
+    selectVideoFile();
+    await settle();
+
+    expect(uploadedPoster()).toBe(PROBE_POSTER);
+  });
+
+  it("falls back to the quick frame when the probe found no poster", async () => {
+    stubFrameCapture({ decodes: true });
+    processToFile.mockResolvedValue({
+      file: new File(["out"], "clip.mp4", { type: "video/mp4" }),
+      width: 1280,
+      height: 720,
+      poster: undefined,
+      blurhash: undefined,
+    });
+
+    selectVideoFile();
+    await settle();
+
+    expect(uploadViaSession).toHaveBeenCalledTimes(1);
+    expect(uploadedPoster()).toBe(QUICK_POSTER);
+  });
+
+  it("uploads without a poster when neither path produced one", async () => {
+    stubFrameCapture({ decodes: false });
+    processToFile.mockResolvedValue({
+      file: new File(["out"], "clip.mp4", { type: "video/mp4" }),
+      width: 1280,
+      height: 720,
+      poster: undefined,
+    });
+
+    selectVideoFile();
+    await settle();
+
+    expect(uploadViaSession).toHaveBeenCalledTimes(1);
+    expect(uploadedPoster()).toBeUndefined();
+  });
+});

package/src/client/__tests__/compose-bridge.test.ts

@@ -43,6 +43,46 @@ async function flushBridgeWork(times = 4) {
   }
 }
 
+/** A minimal published-post detail, as the composer dispatches it. */
+function singlePostDetail(overrides: Record<string, unknown> = {}) {
+  return {
+    format: "quote",
+    title: "",
+    body: '{"type":"doc","content":[]}',
+    url: "",
+    quoteText: "A borrowed sentence.",
+    quoteAuthor: "",
+    slug: "",
+    status: "published",
+    visibility: "public",
+    rating: 0,
+    collectionIds: [],
+    attachments: [],
+    ...overrides,
+  };
+}
+
+/** The same, as a two-quote thread. */
+function threadSubmitDetail(overrides: Record<string, unknown> = {}) {
+  const first = singlePostDetail();
+  return {
+    ...first,
+    pendingAttachments: [],
+    threadPosts: [first, singlePostDetail({ quoteText: "And its answer." })],
+    ...overrides,
+  };
+}
+
+/** Text of the compose progress toast, which the result message takes over. */
+function progressToastText(): string {
+  return (
+    document
+      .getElementById("toast-compose-deferred")
+      ?.querySelector("span")
+      ?.textContent?.trim() ?? ""
+  );
+}
+
 function renderPostView(postId: string) {
   const postView = document.createElement("div");
   postView.dataset.postView = "";
@@ -968,4 +1008,236 @@ describe("compose bridge", () => {
 
     expect(assignSpy).toHaveBeenCalledWith("/blog/published-post");
   });
+
+  it("saves a thread as a draft when the connection drops, not just when the server refuses", async () => {
+    // A publish that never reaches the server and one the server rejects are
+    // the same event to the author: the post did not go up. Both earn the
+    // save-as-draft attempt.
+    const composeEl = document.createElement(
+      "jant-compose-dialog",
+    ) as ComposeHarness;
+    composeEl.refreshCollections = vi.fn(async () => true);
+    composeEl.pageMode = false;
+    composeEl.openNew = vi.fn(async () => {});
+    composeEl.clearLocalDraftFromStorage = vi.fn();
+    composeEl.labels = {
+      publishFailedDraft: "Couldn't publish. Saved as draft.",
+    };
+    document.body.appendChild(composeEl);
+
+    const bodies: string[] = [];
+    vi.spyOn(globalThis, "fetch").mockImplementation(async (input, init) => {
+      const raw =
+        typeof input === "string"
+          ? input
+          : input instanceof URL
+            ? input.toString()
+            : input.url;
+      if (new URL(raw, "http://localhost").pathname !== "/compose/thread") {
+        throw new Error(`Unexpected fetch: ${raw}`);
+      }
+      const body = String(init?.body ?? "");
+      bodies.push(body);
+      // The publish attempt never completes; the draft attempt gets through.
+      if (bodies.length === 1) throw new TypeError("Failed to fetch");
+      return new Response(JSON.stringify({ status: "draft" }), {
+        status: 200,
+        headers: { "Content-Type": "application/json" },
+      });
+    });
+
+    composeEl.dispatchEvent(
+      new CustomEvent("jant:compose-submit-deferred", {
+        bubbles: true,
+        detail: threadSubmitDetail(),
+      }),
+    );
+    await flushBridgeWork();
+
+    expect(bodies).toHaveLength(2);
+    expect(JSON.parse(bodies[1]).posts[0].status).toBe("draft");
+    // The work reached the server, so the local copy is no longer the only one.
+    expect(composeEl.clearLocalDraftFromStorage).toHaveBeenCalled();
+    expect(composeEl.openNew).not.toHaveBeenCalled();
+  });
+
+  it("reopens the composer with its local draft when the connection stays down", async () => {
+    const composeEl = document.createElement(
+      "jant-compose-dialog",
+    ) as ComposeHarness;
+    composeEl.refreshCollections = vi.fn(async () => true);
+    composeEl.pageMode = false;
+    composeEl.openNew = vi.fn(async () => {});
+    composeEl.clearLocalDraftFromStorage = vi.fn();
+    document.body.appendChild(composeEl);
+
+    let calls = 0;
+    vi.spyOn(globalThis, "fetch").mockImplementation(async () => {
+      calls += 1;
+      throw new TypeError("Failed to fetch");
+    });
+
+    composeEl.dispatchEvent(
+      new CustomEvent("jant:compose-submit-deferred", {
+        bubbles: true,
+        detail: threadSubmitDetail(),
+      }),
+    );
+    await flushBridgeWork();
+
+    // Publish, then the draft attempt — both dropped.
+    expect(calls).toBe(2);
+    expect(composeEl.openNew).toHaveBeenCalledWith({
+      restoreDraft: true,
+      restoreToast: false,
+      restoreMedia: [],
+    });
+    // Nothing reached the server, so the local copy must stay.
+    expect(composeEl.clearLocalDraftFromStorage).not.toHaveBeenCalled();
+  });
+
+  it("saves a single post as a draft when the connection drops", async () => {
+    const composeEl = document.createElement(
+      "jant-compose-dialog",
+    ) as ComposeHarness;
+    composeEl.refreshCollections = vi.fn(async () => true);
+    composeEl.pageMode = false;
+    composeEl.openNew = vi.fn(async () => {});
+    composeEl.clearLocalDraftFromStorage = vi.fn();
+    document.body.appendChild(composeEl);
+
+    const bodies: string[] = [];
+    vi.spyOn(globalThis, "fetch").mockImplementation(async (input, init) => {
+      const raw =
+        typeof input === "string"
+          ? input
+          : input instanceof URL
+            ? input.toString()
+            : input.url;
+      if (new URL(raw, "http://localhost").pathname !== "/compose") {
+        throw new Error(`Unexpected fetch: ${raw}`);
+      }
+      bodies.push(String(init?.body ?? ""));
+      if (bodies.length === 1) throw new TypeError("Failed to fetch");
+      return new Response(JSON.stringify({ status: "draft" }), {
+        status: 200,
+        headers: { "Content-Type": "application/json" },
+      });
+    });
+
+    composeEl.dispatchEvent(
+      new CustomEvent("jant:compose-submit-deferred", {
+        bubbles: true,
+        detail: { ...singlePostDetail(), pendingAttachments: [] },
+      }),
+    );
+    await flushBridgeWork();
+
+    expect(bodies).toHaveLength(2);
+    expect(JSON.parse(bodies[1]).status).toBe("draft");
+  });
+
+  it("names the publish in a toast while the request is still running", async () => {
+    const composeEl = document.createElement(
+      "jant-compose-dialog",
+    ) as ComposeHarness;
+    composeEl.refreshCollections = vi.fn(async () => true);
+    composeEl.pageMode = true;
+    composeEl.reset = vi.fn();
+    composeEl.updateComplete = Promise.resolve();
+    document.body.appendChild(composeEl);
+
+    let release: (() => void) | undefined;
+    const inFlight = new Promise<void>((resolve) => {
+      release = resolve;
+    });
+
+    vi.spyOn(globalThis, "fetch").mockImplementation(async (input) => {
+      const raw =
+        typeof input === "string"
+          ? input
+          : input instanceof URL
+            ? input.toString()
+            : input.url;
+      if (new URL(raw, "http://localhost").pathname !== "/compose") {
+        throw new Error(`Unexpected fetch: ${raw}`);
+      }
+      // A Link post waits on the server while its preview thumbnail is
+      // fetched and stored — the toast has to survive that whole wait.
+      await inFlight;
+      return new Response(
+        JSON.stringify({ status: "published", permalink: "/a-link" }),
+        { status: 200, headers: { "Content-Type": "application/json" } },
+      );
+    });
+
+    composeEl.dispatchEvent(
+      new CustomEvent("jant:compose-submit-deferred", {
+        bubbles: true,
+        detail: {
+          ...singlePostDetail({
+            format: "link",
+            url: "https://www.youtube.com/watch?v=dQw4w9WgXcQ",
+            quoteText: "",
+          }),
+          pendingAttachments: [],
+        },
+      }),
+    );
+
+    await flushBridgeWork();
+    expect(progressToastText()).toBe("Publishing...");
+
+    release?.();
+    await flushBridgeWork();
+    expect(progressToastText()).toBe("Published!");
+  });
+
+  it("names a draft save while the request is still running", async () => {
+    const composeEl = document.createElement(
+      "jant-compose-dialog",
+    ) as ComposeHarness;
+    composeEl.refreshCollections = vi.fn(async () => true);
+    composeEl.pageMode = false;
+    document.body.appendChild(composeEl);
+
+    let release: (() => void) | undefined;
+    const inFlight = new Promise<void>((resolve) => {
+      release = resolve;
+    });
+
+    vi.spyOn(globalThis, "fetch").mockImplementation(async (input) => {
+      const raw =
+        typeof input === "string"
+          ? input
+          : input instanceof URL
+            ? input.toString()
+            : input.url;
+      if (new URL(raw, "http://localhost").pathname !== "/compose") {
+        throw new Error(`Unexpected fetch: ${raw}`);
+      }
+      await inFlight;
+      return new Response(
+        JSON.stringify({ status: "draft", toast: "Draft saved." }),
+        { status: 200, headers: { "Content-Type": "application/json" } },
+      );
+    });
+
+    composeEl.dispatchEvent(
+      new CustomEvent("jant:compose-submit-deferred", {
+        bubbles: true,
+        detail: {
+          ...singlePostDetail({ status: "draft" }),
+          pendingAttachments: [],
+        },
+      }),
+    );
+
+    await flushBridgeWork();
+    expect(progressToastText()).toBe("Saving...");
+
+    release?.();
+    await flushBridgeWork();
+    expect(progressToastText()).toBe("Draft saved.");
+  });
 });