@jant/core 0.3.35 → 0.3.37

package/src/client/video-processor.ts

@@ -0,0 +1,207 @@
+/**
+ * Client-side Video Processor
+ *
+ * Processes videos before upload using mediabunny:
+ * - Transcodes to H.264/AAC MP4 (universal playback)
+ * - Resizes to max 1920×1080
+ * - Extracts poster frame + blurhash during processing
+ *
+ * Requires WebCodecs API support — check `isSupported()` before use.
+ */
+
+import {
+  Input,
+  Output,
+  Mp4OutputFormat,
+  BufferTarget,
+  BlobSource,
+  CanvasSink,
+  Conversion,
+  QUALITY_HIGH,
+  ALL_FORMATS,
+} from "mediabunny";
+import { encode } from "blurhash";
+
+const MAX_WIDTH = 1920;
+const MAX_HEIGHT = 1080;
+const POSTER_WIDTH = 640;
+const BLURHASH_SIZE = 32;
+
+export interface VideoProcessResult {
+  file: File;
+  width: number;
+  height: number;
+  poster?: Blob;
+  blurhash?: string;
+}
+
+/**
+ * Check if the browser supports WebCodecs-based video processing.
+ *
+ * @returns `true` if `VideoEncoder` is available in the current environment
+ */
+function isSupported(): boolean {
+  return typeof VideoEncoder !== "undefined";
+}
+
+/**
+ * Extract a poster frame, blurhash, and source dimensions from a video file.
+ * Seeks to `min(duration × 0.1, 3s)` and captures the frame.
+ * Also returns the original video dimensions so the caller can compute
+ * the correct output size without opening a second Input instance.
+ *
+ * @param file - Source video file
+ * @returns Poster blob (640px-wide WebP), blurhash string, and source dimensions
+ */
+async function extractPoster(file: File): Promise<{
+  poster?: Blob;
+  blurhash?: string;
+  sourceWidth?: number;
+  sourceHeight?: number;
+}> {
+  const input = new Input({
+    source: new BlobSource(file),
+    formats: ALL_FORMATS,
+  });
+  try {
+    const videoTrack = await input.getPrimaryVideoTrack();
+    if (!videoTrack) return {};
+
+    const sourceWidth = videoTrack.displayWidth;
+    const sourceHeight = videoTrack.displayHeight;
+
+    const duration = await input.computeDuration();
+    const seekTime = Math.min(duration * 0.1, 3);
+
+    const sink = new CanvasSink(videoTrack);
+    const wrapped = await sink.getCanvas(seekTime);
+    if (!wrapped) return { sourceWidth, sourceHeight };
+
+    const canvas = wrapped.canvas as HTMLCanvasElement;
+
+    // Poster: 640px wide WebP
+    const srcW = canvas.width;
+    const srcH = canvas.height;
+    const posterScale = Math.min(POSTER_WIDTH / srcW, 1);
+    const pw = Math.round(srcW * posterScale);
+    const ph = Math.round(srcH * posterScale);
+
+    const posterCanvas = document.createElement("canvas");
+    posterCanvas.width = pw;
+    posterCanvas.height = ph;
+    const pCtx = posterCanvas.getContext("2d");
+    if (!pCtx) return { sourceWidth, sourceHeight };
+    pCtx.drawImage(canvas, 0, 0, pw, ph);
+
+    const poster = await new Promise<Blob | undefined>((resolve) => {
+      posterCanvas.toBlob(
+        (blob) => resolve(blob ?? undefined),
+        "image/webp",
+        0.8,
+      );
+    });
+
+    // Blurhash: 32px canvas, 4×3 components
+    const bhScale = Math.min(BLURHASH_SIZE / srcW, BLURHASH_SIZE / srcH, 1);
+    const bw = Math.max(Math.round(srcW * bhScale), 1);
+    const bh = Math.max(Math.round(srcH * bhScale), 1);
+
+    const bhCanvas = document.createElement("canvas");
+    bhCanvas.width = bw;
+    bhCanvas.height = bh;
+    const bhCtx = bhCanvas.getContext("2d");
+    if (!bhCtx) return { poster, sourceWidth, sourceHeight };
+    bhCtx.drawImage(canvas, 0, 0, bw, bh);
+
+    const imageData = bhCtx.getImageData(0, 0, bw, bh);
+    const blurhash = encode(imageData.data, bw, bh, 4, 3);
+
+    return { poster, blurhash, sourceWidth, sourceHeight };
+  } catch {
+    return {};
+  } finally {
+    input.dispose();
+  }
+}
+
+/**
+ * Process a video file: transcode to H.264/AAC MP4, resize to fit within
+ * 1920×1080, and extract poster frame + blurhash.
+ *
+ * @param file - Source video file
+ * @param onProgress - Optional callback receiving progress from 0 to 1
+ * @returns Processed MP4 file with dimensions, poster, and blurhash
+ */
+async function processToFile(
+  file: File,
+  onProgress?: (progress: number) => void,
+): Promise<VideoProcessResult> {
+  // Extract poster + blurhash + source dimensions (separate Input instance,
+  // so the transcoding Input below starts with clean demuxer state).
+  const { poster, blurhash, sourceWidth, sourceHeight } =
+    await extractPoster(file);
+
+  // Compute output size preserving the original aspect ratio
+  let width = MAX_WIDTH;
+  let height = MAX_HEIGHT;
+  if (sourceWidth && sourceHeight) {
+    const scale = Math.min(
+      MAX_WIDTH / sourceWidth,
+      MAX_HEIGHT / sourceHeight,
+      1,
+    );
+    width = Math.round(sourceWidth * scale);
+    height = Math.round(sourceHeight * scale);
+  }
+  // H.264 requires even dimensions
+  width += width % 2;
+  height += height % 2;
+
+  // Transcode to MP4 H.264/AAC (fresh Input — not shared with extractPoster)
+  const input = new Input({
+    source: new BlobSource(file),
+    formats: ALL_FORMATS,
+  });
+  const target = new BufferTarget();
+  const output = new Output({
+    format: new Mp4OutputFormat({ fastStart: "in-memory" }),
+    target,
+  });
+
+  try {
+    const conversion = await Conversion.init({
+      input,
+      output,
+      video: {
+        codec: "avc",
+        width,
+        height,
+        fit: "contain",
+        bitrate: QUALITY_HIGH,
+      },
+      audio: {
+        codec: "aac",
+      },
+    });
+
+    if (onProgress) {
+      conversion.onProgress = onProgress;
+    }
+
+    await conversion.execute();
+
+    const buffer = target.buffer;
+    if (!buffer) throw new Error("Video processing produced no output");
+
+    const originalName = file.name.replace(/\.[^.]+$/, "");
+    const mp4File = new File([buffer], `${originalName}.mp4`, {
+      type: "video/mp4",
+    });
+
+    return { file: mp4File, width, height, poster, blurhash };
+  } finally {
+    input.dispose();
+  }
+}
+
+export const VideoProcessor = { isSupported, processToFile };

package/src/client.ts

@@ -9,21 +9,31 @@
 
 import "./vendor/datastar.js";
 import "basecoat-css/all";
-import "./lib/image-processor.js";
-import "./lib/media-upload.js";
-import "./lib/avatar-upload.js";
-import "./lib/collections-reorder.js";
+import "./client/image-processor.js";
+import "./client/avatar-upload.js";
 
-// Lit Web Components
-import "./ui/components/jant-compose-dialog.js";
-import "./ui/components/jant-compose-editor.js";
-import "./lib/compose-bridge.js";
-import "./ui/components/jant-settings-general.js";
-import "./ui/components/jant-settings-avatar.js";
-import "./lib/settings-bridge.js";
-import "./ui/components/jant-collection-form.js";
-import "./lib/collection-form-bridge.js";
-import "./ui/components/jant-post-form.js";
-import "./lib/post-form-bridge.js";
-import "./ui/components/jant-nav-manager.js";
-import "./lib/nav-manager-bridge.js";
+// Lit Web Components (and their bridge modules)
+import "./client/components/jant-compose-dialog.js";
+import "./client/components/jant-compose-editor.js";
+import "./client/components/jant-compose-fullscreen.js";
+
+// Mount fullscreen overlay at body level to escape the dialog's containing block
+// (dialog animation creates a containing block that traps position:fixed descendants)
+document.body.appendChild(document.createElement("jant-compose-fullscreen"));
+import "./client/compose-bridge.js";
+import "./client/components/jant-settings-general.js";
+import "./client/components/jant-settings-avatar.js";
+import "./client/settings-bridge.js";
+import "./client/components/jant-collection-form.js";
+import "./client/components/jant-collection-sidebar.js";
+import "./client/collection-form-bridge.js";
+import "./client/components/jant-post-form.js";
+import "./client/post-form-bridge.js";
+import "./client/components/jant-nav-manager.js";
+import "./client/nav-manager-bridge.js";
+import "./client/audio-player.js";
+import "./client/components/jant-media-lightbox.js";
+import "./client/components/jant-text-preview.js";
+import "./client/components/jant-post-menu.js";
+import "./client/thread-context.js";
+import "./client/archive-nav.js";

package/src/db/__tests__/migrations.test.ts

@@ -0,0 +1,118 @@
+/**
+ * Migration Integrity Tests
+ *
+ * Ensures every migration SQL file is tracked in the Drizzle journal.
+ * Hand-written migrations bypass drizzle-kit and won't have journal entries,
+ * which breaks `drizzle-kit generate` for future schema changes.
+ *
+ * Fix: always run `mise run db-generate` instead of writing SQL by hand.
+ */
+
+import { describe, it, expect } from "vitest";
+import { readdirSync, readFileSync } from "fs";
+import { resolve } from "path";
+
+const MIGRATIONS_DIR = resolve(import.meta.dirname, "../migrations");
+const JOURNAL_PATH = resolve(MIGRATIONS_DIR, "meta/_journal.json");
+
+interface JournalEntry {
+  idx: number;
+  version: string;
+  when: number;
+  tag: string;
+  breakpoints: boolean;
+}
+
+interface Journal {
+  version: string;
+  dialect: string;
+  entries: JournalEntry[];
+}
+
+function readJournal(): Journal {
+  return JSON.parse(readFileSync(JOURNAL_PATH, "utf-8"));
+}
+
+function listMigrationFiles(): string[] {
+  return readdirSync(MIGRATIONS_DIR)
+    .filter((f) => f.endsWith(".sql"))
+    .sort();
+}
+
+describe("migration integrity", () => {
+  it("every SQL file has a corresponding journal entry", () => {
+    const journal = readJournal();
+    const tags = new Set(journal.entries.map((e) => e.tag));
+    const sqlFiles = listMigrationFiles();
+
+    const untracked = sqlFiles
+      .map((f) => f.replace(".sql", ""))
+      .filter((tag) => !tags.has(tag));
+
+    expect(
+      untracked,
+      [
+        "These migration files are not tracked in meta/_journal.json.",
+        "This usually means they were hand-written instead of generated with `mise run db-generate`.",
+        "Fix: update src/db/schema.ts first, then run `mise run db-generate`.",
+        `Untracked files: ${untracked.map((t) => `${t}.sql`).join(", ")}`,
+      ].join("\n"),
+    ).toEqual([]);
+  });
+
+  it("every journal entry has a corresponding SQL file", () => {
+    const journal = readJournal();
+    const sqlFiles = new Set(
+      listMigrationFiles().map((f) => f.replace(".sql", "")),
+    );
+
+    const missing = journal.entries
+      .map((e) => e.tag)
+      .filter((tag) => !sqlFiles.has(tag));
+
+    expect(
+      missing,
+      [
+        "These journal entries have no matching SQL file.",
+        `Missing files: ${missing.map((t) => `${t}.sql`).join(", ")}`,
+      ].join("\n"),
+    ).toEqual([]);
+  });
+
+  it("journal entries have sequential idx values", () => {
+    const journal = readJournal();
+    for (let i = 0; i < journal.entries.length; i++) {
+      const entry = journal.entries[i];
+      if (entry) expect(entry.idx).toBe(i);
+    }
+  });
+
+  it("latest migration has a snapshot file", () => {
+    const journal = readJournal();
+    const lastEntry = journal.entries[journal.entries.length - 1];
+    if (!lastEntry) return;
+
+    const prefix = lastEntry.tag.split("_")[0];
+    const snapshotPath = resolve(
+      MIGRATIONS_DIR,
+      `meta/${prefix}_snapshot.json`,
+    );
+
+    let exists = false;
+    try {
+      readFileSync(snapshotPath);
+      exists = true;
+    } catch {
+      // file doesn't exist
+    }
+
+    expect(
+      exists,
+      [
+        `Missing snapshot for latest migration: meta/${prefix}_snapshot.json`,
+        "This means the migration was not generated by drizzle-kit.",
+        "Fix: run `mise run db-generate` to regenerate it properly.",
+      ].join("\n"),
+    ).toBe(true);
+  });
+});

package/src/db/index.ts

@@ -12,3 +12,55 @@ export function createDatabase(d1: D1Database) {
 }
 
 export { schema };
+
+/**
+ * D1 enforces a lower SQL variable limit than standard SQLite (~999).
+ * Keep batch size well under the limit to leave room for other
+ * query parameters besides the IN-list.
+ */
+const BATCH_SIZE = 50;
+
+/**
+ * Run a query function in batches to avoid SQLite's variable limit.
+ * Splits `items` into chunks, calls `fn` for each chunk, and merges
+ * the resulting Maps.
+ *
+ * @param items - Array of IDs to batch
+ * @param fn - Async function that takes a chunk and returns a Map
+ * @returns Merged Map from all batches
+ */
+export async function batchQuery<K, V>(
+  items: K[],
+  fn: (chunk: K[]) => Promise<Map<K, V>>,
+): Promise<Map<K, V>> {
+  if (items.length <= BATCH_SIZE) return fn(items);
+
+  const result = new Map<K, V>();
+  for (let i = 0; i < items.length; i += BATCH_SIZE) {
+    const chunk = items.slice(i, i + BATCH_SIZE);
+    const partial = await fn(chunk);
+    for (const [k, v] of partial) {
+      result.set(k, v);
+    }
+  }
+  return result;
+}
+
+/**
+ * Like `batchQuery` but for functions that return an array of rows
+ * rather than a Map.
+ */
+export async function batchQueryRows<K, R>(
+  items: K[],
+  fn: (chunk: K[]) => Promise<R[]>,
+): Promise<R[]> {
+  if (items.length <= BATCH_SIZE) return fn(items);
+
+  const result: R[] = [];
+  for (let i = 0; i < items.length; i += BATCH_SIZE) {
+    const chunk = items.slice(i, i + BATCH_SIZE);
+    const partial = await fn(chunk);
+    result.push(...partial);
+  }
+  return result;
+}