@jant/core 0.6.16 → 0.7.1

package/src/client/__tests__/smart-collection-page-actions.test.ts

@@ -0,0 +1,158 @@
+// @vitest-environment happy-dom
+
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+vi.mock("../toast.js", () => ({
+  showToast: vi.fn(),
+  showToastWithAction: vi.fn(),
+}));
+
+vi.mock("../confirm.js", () => ({
+  showConfirmDialog: vi.fn(),
+}));
+
+vi.mock("../smart-collection-dialog-host.js", () => ({
+  openSmartCollectionDialog: vi.fn(),
+}));
+
+function createMarkup() {
+  document.body.innerHTML = `
+    <div id="toast-container"></div>
+    <div
+      data-smart-collection-page-actions
+      data-smart-collection-id="smc_1"
+      data-collection-page-labels='{"addToNavigation":"Add to Navigation","addingToNavigation":"Adding…","addedToNavigation":"Collection added to navigation.","editNavigation":"Edit Navigation","addToNavigationFailed":"Couldn\\u0027t add this collection to navigation. Try again.","confirmDelete":"Delete this smart collection?","deleteCollection":"Delete","cancel":"Cancel","saveFailed":"Couldn\\u0027t save. Try again in a moment.","deleted":"Smart collection deleted."}'
+      data-collection-in-navigation="false"
+      data-collection-page-redirect-url="/collections"
+    >
+      <button
+        type="button"
+        data-collection-page-action="toggle-menu"
+        aria-expanded="false"
+      >
+        More actions
+      </button>
+      <div data-collection-page-menu hidden>
+        <button type="button" role="menuitem" data-collection-page-action="edit">
+          Edit
+        </button>
+        <button
+          type="button"
+          role="menuitem"
+          data-collection-page-action="add-to-navigation"
+        >
+          <span class="collections-page-menu-item-label">Add to Navigation</span>
+        </button>
+        <a
+          href="/settings/navigation"
+          role="menuitem"
+          data-collection-page-edit-navigation
+          hidden
+        >
+          Edit Navigation
+        </a>
+        <button
+          type="button"
+          role="menuitem"
+          data-collection-page-action="delete"
+        >
+          Delete
+        </button>
+      </div>
+    </div>
+  `;
+}
+
+async function flushAsyncWork() {
+  await new Promise((resolve) => setTimeout(resolve, 0));
+  await new Promise((resolve) => setTimeout(resolve, 0));
+}
+
+describe("smart collection page actions", () => {
+  beforeEach(() => {
+    vi.resetModules();
+    vi.clearAllMocks();
+    window.location.href = "http://localhost/reading";
+  });
+
+  // The same request a collection page sends, down to the placement and the
+  // header-refresh hint — the two kinds are one thing to the reader, so the
+  // action cannot quietly put them in different parts of the nav.
+  it("adds the smart collection to navigation and reveals the settings action", async () => {
+    createMarkup();
+    const fetchMock = vi.fn().mockResolvedValue(
+      new Response(JSON.stringify({ id: "nav-1" }), {
+        status: 201,
+        headers: { "Content-Type": "application/json" },
+      }),
+    );
+    vi.stubGlobal("fetch", fetchMock);
+
+    const { showToastWithAction } = await import("../toast.js");
+    await import("../smart-collection-page-actions.js");
+
+    const addButton = document.querySelector<HTMLButtonElement>(
+      "[data-collection-page-action='add-to-navigation']",
+    );
+    const editNavigationLink = document.querySelector<HTMLAnchorElement>(
+      "[data-collection-page-edit-navigation]",
+    );
+
+    addButton?.click();
+    await flushAsyncWork();
+
+    expect(fetchMock).toHaveBeenCalledWith("/api/nav-items", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        Accept: "application/json",
+        "X-Jant-Site-Header": "include",
+      },
+      body: JSON.stringify({
+        type: "smart_collection",
+        smartCollectionId: "smc_1",
+        placement: "header",
+      }),
+    });
+    expect(addButton?.hidden).toBe(true);
+    expect(editNavigationLink?.hidden).toBe(false);
+    expect(
+      document.querySelector<HTMLElement>(
+        "[data-smart-collection-page-actions]",
+      )?.dataset.collectionInNavigation,
+    ).toBe("true");
+    expect(showToastWithAction).toHaveBeenCalledWith(
+      "Collection added to navigation.",
+      {
+        label: "Edit Navigation",
+        href: "/settings/navigation",
+      },
+    );
+  });
+
+  it("keeps the action available when the request fails", async () => {
+    createMarkup();
+    const fetchMock = vi
+      .fn()
+      .mockResolvedValue(new Response(null, { status: 500 }));
+    vi.stubGlobal("fetch", fetchMock);
+
+    const { showToast } = await import("../toast.js");
+    await import("../smart-collection-page-actions.js");
+
+    const addButton = document.querySelector<HTMLButtonElement>(
+      "[data-collection-page-action='add-to-navigation']",
+    );
+
+    addButton?.click();
+    await flushAsyncWork();
+
+    expect(showToast).toHaveBeenCalledWith(
+      "Couldn't add this collection to navigation. Try again.",
+      "error",
+    );
+    expect(addButton?.hidden).toBe(false);
+    expect(addButton?.disabled).toBe(false);
+    expect(addButton?.textContent).toContain("Add to Navigation");
+  });
+});

package/src/client/__tests__/toast.test.ts

@@ -5,6 +5,8 @@ import {
   QUEUED_TOAST_STORAGE_KEY,
   consumeQueuedToast,
   queueToastForNextPage,
+  replaceWithAutoClose,
+  showPersistentToast,
   showToast,
   showToastWithAction,
 } from "../toast.js";
@@ -110,6 +112,27 @@ describe("toast", () => {
     expect(container?.parentElement).toBe(document.body);
   });
 
+  it("follows a dialog that opened after the progress toast did", async () => {
+    showPersistentToast("compose-deferred", "Publishing...");
+
+    // A failed publish reopens the composer, which makes everything outside
+    // it inert — the result toast has to move in with it.
+    const dialog = document.createElement("dialog");
+    document.body.appendChild(dialog);
+    dialog.showModal();
+
+    replaceWithAutoClose("compose-deferred", "Couldn't publish.", "error");
+
+    const container = document.getElementById("toast-container");
+    expect(container?.parentElement).toBe(dialog);
+    expect(container?.querySelector(".toast span")?.textContent).toBe(
+      "Couldn't publish.",
+    );
+
+    dialog.close();
+    await new Promise((resolve) => setTimeout(resolve, 0));
+  });
+
   it("keeps action toasts available longer than passive notifications", () => {
     vi.useFakeTimers();
     showToastWithAction("Collection created.", {

package/src/client/__tests__/video-processor-probe.test.ts

@@ -0,0 +1,175 @@
+// @vitest-environment happy-dom
+
+/**
+ * The source probe feeds four independent things: the codec that decides
+ * whether a re-encode is needed, the bitrate that sizes it, the duration, and
+ * the poster/blurhash pair. They used to share one try/catch, so a single
+ * failing step returned nothing at all — a mediabunny version without
+ * `getCodec()` cost every upload its thumbnail while the video itself went
+ * through fine. Each step is now degraded on its own.
+ */
+
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+const trackStub = {
+  displayWidth: 1280,
+  displayHeight: 720,
+  rotation: 0,
+  getCodec: vi.fn(async () => "avc"),
+  computePacketStats: vi.fn(async () => ({ averageBitrate: 2_000_000 })),
+};
+
+const conversionOptions: { video?: Record<string, unknown> }[] = [];
+
+const canvasSinkStub = {
+  getCanvas: vi.fn(async () => ({ canvas: makeCanvas(1280, 720) })),
+};
+
+vi.mock("mediabunny", () => {
+  class Input {
+    getPrimaryVideoTrack = async () => trackStub;
+    computeDuration = async () => 20;
+    dispose = () => {};
+  }
+  class CanvasSink {
+    getCanvas = () => canvasSinkStub.getCanvas();
+  }
+  class BufferTarget {
+    buffer = new ArrayBuffer(64);
+  }
+  return {
+    Input,
+    CanvasSink,
+    BufferTarget,
+    BlobSource: class {},
+    Output: class {},
+    Mp4OutputFormat: class {},
+    Quality: class {
+      constructor(readonly options: unknown) {}
+    },
+    ALL_FORMATS: [],
+    Conversion: {
+      init: async (options: { video?: Record<string, unknown> }) => {
+        conversionOptions.push(options);
+        return { onProgress: undefined, execute: async () => {} };
+      },
+    },
+  };
+});
+
+vi.mock("../../lib/mp4-track-flags.js", () => ({
+  zeroTrackAlternateGroups: () => {},
+}));
+
+/** A canvas whose 2D context and WebP encoding both succeed. */
+function makeCanvas(width: number, height: number): HTMLCanvasElement {
+  return {
+    width,
+    height,
+    getContext: () => ({
+      drawImage: () => {},
+      getImageData: (_x: number, _y: number, w: number, h: number) => ({
+        data: new Uint8ClampedArray(w * h * 4).fill(120),
+      }),
+    }),
+    toBlob: (cb: (blob: Blob | null) => void) =>
+      cb(new Blob(["poster"], { type: "image/webp" })),
+  } as unknown as HTMLCanvasElement;
+}
+
+const { VideoProcessor } = await import("../video-processor.js");
+
+beforeEach(() => {
+  conversionOptions.length = 0;
+  trackStub.getCodec.mockImplementation(async () => "avc");
+  trackStub.computePacketStats.mockImplementation(async () => ({
+    averageBitrate: 2_000_000,
+  }));
+  canvasSinkStub.getCanvas.mockImplementation(async () => ({
+    canvas: makeCanvas(1280, 720),
+  }));
+
+  vi.spyOn(document, "createElement").mockImplementation(((tag: string) => {
+    if (tag === "canvas") return makeCanvas(1280, 720);
+    // `probeVideoDimensions` loads the transcoded output in a <video> element.
+    const video = {
+      preload: "",
+      onloadedmetadata: null as null | (() => void),
+      onerror: null,
+      videoWidth: 1280,
+      videoHeight: 720,
+      set src(_value: string) {
+        queueMicrotask(() => this.onloadedmetadata?.());
+      },
+    };
+    return video as unknown as HTMLElement;
+  }) as typeof document.createElement);
+
+  vi.stubGlobal("URL", {
+    createObjectURL: () => "blob:test",
+    revokeObjectURL: () => {},
+  });
+  vi.stubGlobal("VideoEncoder", class {});
+});
+
+function sourceFile() {
+  return new File(["source"], "clip.mov", { type: "video/quicktime" });
+}
+
+describe("VideoProcessor.processToFile source probing", () => {
+  it("still captures a poster when the codec cannot be read", async () => {
+    // The exact shape of a stale install: the installed mediabunny has no
+    // `getCodec()`, so the call throws before the frame is ever captured.
+    trackStub.getCodec.mockImplementation(() => {
+      throw new TypeError("videoTrack.getCodec is not a function");
+    });
+    vi.spyOn(console, "warn").mockImplementation(() => {});
+
+    const result = await VideoProcessor.processToFile(sourceFile());
+
+    expect(result.poster).toBeInstanceOf(Blob);
+    expect(result.blurhash).toBeTruthy();
+    expect(result.durationSeconds).toBe(20);
+    // An unreadable codec cannot be vouched for, so the file is re-encoded.
+    expect(conversionOptions[0]?.video).toHaveProperty("quality");
+  });
+
+  it("still captures a poster when the bitrate cannot be computed", async () => {
+    trackStub.computePacketStats.mockRejectedValue(
+      new Error("no sample table"),
+    );
+    vi.spyOn(console, "warn").mockImplementation(() => {});
+
+    const result = await VideoProcessor.processToFile(sourceFile());
+
+    expect(result.poster).toBeInstanceOf(Blob);
+    expect(result.blurhash).toBeTruthy();
+  });
+
+  it("still reports the duration when the frame cannot be decoded", async () => {
+    canvasSinkStub.getCanvas.mockRejectedValue(
+      new Error("unsupported codec configuration"),
+    );
+    vi.spyOn(console, "warn").mockImplementation(() => {});
+
+    const result = await VideoProcessor.processToFile(sourceFile());
+
+    expect(result.poster).toBeUndefined();
+    expect(result.blurhash).toBeUndefined();
+    // The half that does not need a decoder survives.
+    expect(result.durationSeconds).toBe(20);
+    expect(conversionOptions[0]?.video).not.toHaveProperty("quality");
+  });
+
+  it("names the failing step on the console rather than failing silently", async () => {
+    const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
+    trackStub.getCodec.mockRejectedValue(new Error("boom"));
+
+    await VideoProcessor.processToFile(sourceFile());
+
+    expect(warn).toHaveBeenCalledWith(
+      expect.stringContaining("read codec"),
+      expect.any(Error),
+    );
+  });
+});

package/src/client/__tests__/video-processor.test.ts

@@ -0,0 +1,181 @@
+import { describe, expect, it } from "vitest";
+import { planVideoProcessing } from "../video-processor.js";
+
+const OPTS = { maxLongEdge: 1920, maxShortEdge: 1080 };
+
+const mbps = (n: number) => n * 1_000_000;
+
+describe("planVideoProcessing", () => {
+  describe("copying", () => {
+    it("copies an H.264 video that already fits", () => {
+      expect(
+        planVideoProcessing(
+          {
+            width: 1280,
+            height: 720,
+            videoCodec: "avc",
+            videoBitrate: mbps(5),
+          },
+          OPTS,
+        ),
+      ).toEqual({
+        needsResize: false,
+        width: 1280,
+        height: 720,
+        videoNeedsReencode: false,
+        videoBitrate: undefined,
+      });
+    });
+
+    it("copies a video sitting exactly on the caps", () => {
+      const plan = planVideoProcessing(
+        { width: 1920, height: 1080, videoCodec: "avc" },
+        OPTS,
+      );
+      expect(plan.needsResize).toBe(false);
+      expect(plan.videoNeedsReencode).toBe(false);
+    });
+
+    it("re-encodes an HEVC video even when it fits", () => {
+      const plan = planVideoProcessing(
+        { width: 1280, height: 720, videoCodec: "hevc", videoBitrate: mbps(5) },
+        OPTS,
+      );
+      expect(plan.needsResize).toBe(false);
+      expect(plan.videoNeedsReencode).toBe(true);
+    });
+
+    it("re-encodes an unknown video codec", () => {
+      const plan = planVideoProcessing(
+        { width: 1280, height: 720, videoCodec: null },
+        OPTS,
+      );
+      expect(plan.videoNeedsReencode).toBe(true);
+    });
+  });
+
+  describe("resizing", () => {
+    it("scales 4K down to the long-edge cap", () => {
+      const plan = planVideoProcessing(
+        { width: 3840, height: 2160, videoCodec: "avc" },
+        OPTS,
+      );
+      expect(plan.needsResize).toBe(true);
+      expect(plan.width).toBe(1920);
+      expect(plan.height).toBe(1080);
+      expect(plan.videoNeedsReencode).toBe(true);
+    });
+
+    it("caps portrait video by its short edge, not its long edge", () => {
+      const plan = planVideoProcessing(
+        { width: 2160, height: 3840, videoCodec: "avc" },
+        OPTS,
+      );
+      expect(plan.width).toBe(1080);
+      expect(plan.height).toBe(1920);
+    });
+
+    it("caps an ultra-wide video by its long edge", () => {
+      const plan = planVideoProcessing(
+        { width: 3840, height: 1080, videoCodec: "avc" },
+        OPTS,
+      );
+      expect(plan.width).toBe(1920);
+      expect(plan.height).toBe(540);
+    });
+
+    it("rounds scaled dimensions up to even numbers for H.264", () => {
+      const plan = planVideoProcessing(
+        { width: 3840, height: 2158, videoCodec: "avc" },
+        OPTS,
+      );
+      expect(plan.width % 2).toBe(0);
+      expect(plan.height % 2).toBe(0);
+    });
+
+    it("falls back to the caps when dimensions are unknown", () => {
+      const plan = planVideoProcessing({ videoCodec: "avc" }, OPTS);
+      expect(plan.needsResize).toBe(false);
+      expect(plan.width).toBe(1920);
+      expect(plan.height).toBe(1080);
+    });
+  });
+
+  describe("bitrate", () => {
+    it("targets roughly 8 Mbps for a 1080p re-encode", () => {
+      const plan = planVideoProcessing(
+        {
+          width: 1920,
+          height: 1080,
+          videoCodec: "hevc",
+          videoBitrate: mbps(50),
+        },
+        OPTS,
+      );
+      expect(plan.videoBitrate).toBeGreaterThan(mbps(7));
+      expect(plan.videoBitrate).toBeLessThan(mbps(9));
+    });
+
+    it("never exceeds what the source content carries", () => {
+      // A 960×448 HEVC clip at 0.72 Mbps: re-encoding at the size-appropriate
+      // 1.8 Mbps would spend most of those bits on the source's own artifacts.
+      const plan = planVideoProcessing(
+        {
+          width: 960,
+          height: 448,
+          videoCodec: "hevc",
+          videoBitrate: 717_000,
+        },
+        OPTS,
+      );
+      // 0.72 Mbps HEVC ≈ 1.2 Mbps of H.264, well under the ~1.8 Mbps target.
+      expect(plan.videoBitrate).toBeGreaterThan(mbps(1));
+      expect(plan.videoBitrate).toBeLessThan(mbps(1.4));
+    });
+
+    it("allows H.264 more bits than the HEVC source it replaces", () => {
+      const source = { width: 1280, height: 720, videoBitrate: mbps(1) };
+      const fromHevc = planVideoProcessing(
+        { ...source, videoCodec: "hevc" },
+        OPTS,
+      );
+      const fromAv1 = planVideoProcessing(
+        { ...source, videoCodec: "av1" },
+        OPTS,
+      );
+      expect(fromHevc.videoBitrate).toBeGreaterThan(mbps(1));
+      expect(fromAv1.videoBitrate).toBeGreaterThan(fromHevc.videoBitrate!);
+    });
+
+    it("scales the source cap down along with a downscale", () => {
+      // 4K at 40 Mbps → 1080p. The source cap must account for the quarter
+      // pixel count, not wave 40 Mbps of 4K bitrate through unchanged.
+      const plan = planVideoProcessing(
+        {
+          width: 3840,
+          height: 2160,
+          videoCodec: "hevc",
+          videoBitrate: mbps(40),
+        },
+        OPTS,
+      );
+      expect(plan.videoBitrate).toBeLessThan(mbps(9));
+    });
+
+    it("falls back to the size target when the source bitrate is unknown", () => {
+      const plan = planVideoProcessing(
+        { width: 1920, height: 1080, videoCodec: "hevc" },
+        OPTS,
+      );
+      expect(plan.videoBitrate).toBeGreaterThan(mbps(7));
+    });
+
+    it("leaves the bitrate unset when the track is copied", () => {
+      const plan = planVideoProcessing(
+        { width: 1280, height: 720, videoCodec: "avc", videoBitrate: mbps(3) },
+        OPTS,
+      );
+      expect(plan.videoBitrate).toBeUndefined();
+    });
+  });
+});

package/src/client/audio-processor.ts

@@ -1,23 +1,17 @@
 /**
  * Client-side Audio Processor
  *
- * Transcodes audio files to AAC in an M4A container (MP4 audio-only)
- * using mediabunny. Mirrors the video-processor pattern but discards
- * any video track and skips poster/blurhash extraction.
+ * Remuxes audio files into an M4A container (MP4 audio-only) using
+ * mediabunny, transcoding to AAC only when the source is not already AAC.
+ * A source that needs nothing has its encoded packets copied across, so it
+ * arrives without a generation of re-encoding loss. Mirrors the
+ * video-processor pattern but discards any video track and skips
+ * poster/blurhash extraction.
  *
  * Requires WebCodecs API support — check `isSupported()` before use.
  */
 
-import {
-  Input,
-  Output,
-  Mp4OutputFormat,
-  BufferTarget,
-  BlobSource,
-  Conversion,
-  QUALITY_HIGH,
-  ALL_FORMATS,
-} from "mediabunny";
+import { loadMediabunny } from "./mediabunny.js";
 
 export interface AudioProcessResult {
   file: File;
@@ -33,7 +27,8 @@ function isSupported(): boolean {
 }
 
 /**
- * Process an audio file: transcode to AAC in an M4A (MP4) container.
+ * Process an audio file: remux into an M4A (MP4) container, transcoding to
+ * AAC only when the source is not already AAC.
  *
  * @param file - Source audio file
  * @param onProgress - Optional callback receiving progress from 0 to 1
@@ -43,6 +38,15 @@ async function processToFile(
   file: File,
   onProgress?: (progress: number) => void,
 ): Promise<AudioProcessResult> {
+  const {
+    Input,
+    Output,
+    Mp4OutputFormat,
+    BufferTarget,
+    BlobSource,
+    Conversion,
+    ALL_FORMATS,
+  } = await loadMediabunny();
   const input = new Input({
     source: new BlobSource(file),
     formats: ALL_FORMATS,
@@ -54,11 +58,16 @@ async function processToFile(
   });
 
   try {
+    // Setting a quality on the track is what disables mediabunny's copy fast
+    // path, and a needless decode/encode round trip costs a generation of
+    // quality. Leaving it unset lets an AAC source be copied outright;
+    // anything else falls back to mediabunny's default, which for AAC lands
+    // on 192 kbps — the highest rate it will pick at any quality level.
     const conversion = await Conversion.init({
       input,
       output,
       video: { discard: true },
-      audio: { codec: "aac", bitrate: QUALITY_HIGH },
+      audio: { codec: "aac" },
     });
 
     if (onProgress) {

package/src/client/audio-waveform.ts

@@ -0,0 +1,49 @@
+/**
+ * Client-side Audio Waveform Extraction
+ *
+ * Decodes an audio file with the Web Audio API and samples the peaks the
+ * player draws. Image dimensions and blurhash come from `ImageProcessor`;
+ * video dimensions, poster, and blurhash come from `VideoProcessor`.
+ */
+
+/**
+ * Extract waveform peak amplitudes from an audio file.
+ * Decodes via Web Audio API and returns a JSON string of ~100 normalized peak values (0–1).
+ *
+ * @param file - Audio file to extract peaks from
+ * @returns JSON string of peak values, e.g. "[0.2,0.8,0.5,...]"
+ */
+export async function extractAudioWaveform(file: File): Promise<string> {
+  const buffer = await file.arrayBuffer();
+  const audioCtx = new AudioContext();
+
+  try {
+    const decoded = await audioCtx.decodeAudioData(buffer);
+    const raw = decoded.getChannelData(0);
+    const count = 100;
+    const step = Math.max(1, Math.floor(raw.length / count));
+    const peaks: number[] = new Array(count);
+
+    for (let i = 0; i < count; i++) {
+      let max = 0;
+      const start = i * step;
+      const end = Math.min(start + step, raw.length);
+      for (let j = start; j < end; j++) {
+        const v = Math.abs(raw[j]);
+        if (v > max) max = v;
+      }
+      peaks[i] = max;
+    }
+
+    let maxPeak = 0;
+    for (const p of peaks) if (p > maxPeak) maxPeak = p;
+    if (maxPeak > 0) {
+      for (let i = 0; i < count; i++)
+        peaks[i] = Math.round((peaks[i] / maxPeak) * 100) / 100;
+    }
+
+    return JSON.stringify(peaks);
+  } finally {
+    await audioCtx.close();
+  }
+}