@leviosa-ai/detail-page-editor 0.1.0

package/lib/detail-page-canvas/export/gif-export.ts

@@ -0,0 +1,310 @@
+/**
+ * Animation-aware raster export: builds a ZIP where contiguous still sections
+ * are stacked into PNGs and every animated section is encoded as its own
+ * animated WebP (default) or GIF.
+ *
+ * An animated section is rendered by driving each source animation element
+ * frame-by-frame (swap ``src`` → ``store.toDataURL`` composites background +
+ * text + that frame) across a shared timeline. **That composition step is the
+ * same for both formats** — only the final encode differs:
+ *
+ * - **WebP** posts the composed frames to the server. Browsers cannot encode
+ *   animated WebP at all (``canvas.toBlob`` gives one still, WebCodecs
+ *   ``VideoEncoder`` gives video, not WebP), so this is the one step we cannot
+ *   keep client-side. See ``docs/detail_page_animated_webp_plan.md`` in the
+ *   server repo.
+ * - **GIF** quantizes to one global palette and encodes here via ``gifenc``, so
+ *   picking GIF keeps the export fully offline.
+ * - **MP4** encodes here too, via WebCodecs ``VideoEncoder`` + an MP4 muxer.
+ *   ``mp4-encode.ts`` is dynamic-imported so browsers that never pick MP4 do not
+ *   pay for the muxer.
+ *
+ * Heavy deps (gifenc, jszip, gifuct) live here and this module is
+ * dynamic-imported from the download dialog only when an animation is present.
+ */
+
+import { applyPalette, GIFEncoder, quantize } from "gifenc";
+
+import type { DetailPageHost } from "../../../components/detail-page/detail-page-host-context";
+
+import {
+  decodeAnimation,
+  frameAtTime,
+  type DecodedAnimation,
+  type DecodedFrame,
+} from "../../detail-page/gif-frames";
+import { buildGifTimeline } from "../../detail-page/gif-timeline";
+import { isGifSrc, planGifExport } from "./gif-plan";
+
+/** Cap GIF output width — a full-res 4× animated section would be many MB. */
+export const MAX_GIF_WIDTH = 512;
+/**
+ * MP4 gets a wider cap than GIF/WebP. That 512 is a *transfer* limit: GIF pays
+ * for every pixel in a palette-coded frame, and WebP frames travel to the server
+ * as PNG under an upload cap. MP4 is encoded right here by a hardware H.264
+ * encoder that eats resolution cheaply, so holding it at 512 would only make the
+ * video soft on a ~860px-wide detail page for no gain.
+ */
+export const MAX_MP4_WIDTH = 1080;
+/** Palette sampling stride across frames to keep quantize input bounded. */
+const PALETTE_SAMPLE_PIXELS = 60_000;
+
+type ElementLike = {
+  id?: string;
+  type?: string;
+  src?: string;
+  custom?: Record<string, unknown> | null;
+  children?: ElementLike[];
+  set: (patch: Record<string, unknown>) => void;
+};
+type PageLike = {
+  id: string;
+  computedWidth: number;
+  computedHeight: number;
+  children: ElementLike[];
+};
+type StoreLike = {
+  pages: PageLike[];
+  toDataURL: (opts: { pageId?: string; pixelRatio?: number; mimeType?: string }) => Promise<string>;
+  waitLoading?: () => Promise<void>;
+};
+
+function loadImage(src: string): Promise<HTMLImageElement> {
+  return new Promise((resolve, reject) => {
+    const img = new Image();
+    img.onload = () => resolve(img);
+    img.onerror = () => reject(new Error("image decode failed"));
+    img.src = src;
+  });
+}
+
+function collectGifElements(children: ElementLike[], out: ElementLike[]): void {
+  for (const el of children ?? []) {
+    const tagged = el.custom && (el.custom as { detailPageGif?: unknown }).detailPageGif;
+    if (tagged || ((el.type === "image" || el.type === "svg") && isGifSrc(el.src))) {
+      out.push(el);
+    }
+    if (el.children) collectGifElements(el.children, out);
+  }
+}
+
+function drawToCanvas(img: HTMLImageElement): HTMLCanvasElement {
+  const canvas = document.createElement("canvas");
+  canvas.width = img.naturalWidth;
+  canvas.height = img.naturalHeight;
+  canvas.getContext("2d")?.drawImage(img, 0, 0);
+  return canvas;
+}
+
+function imageDataOf(canvas: HTMLCanvasElement): ImageData {
+  const ctx = canvas.getContext("2d");
+  if (!ctx) throw new Error("2d context unavailable");
+  return ctx.getImageData(0, 0, canvas.width, canvas.height);
+}
+
+/**
+ * Build one global 256-color palette from a strided sample across all composed
+ * frames, so a section that barely changes reuses colors instead of paying a
+ * per-frame local color table.
+ */
+function buildGlobalPalette(frames: HTMLCanvasElement[]): number[][] {
+  const perFrame = Math.max(1, Math.floor(PALETTE_SAMPLE_PIXELS / frames.length));
+  const sample = new Uint8Array(frames.length * perFrame * 4);
+  let o = 0;
+  for (const frame of frames) {
+    const data = imageDataOf(frame).data;
+    const stride = Math.max(4, Math.floor(data.length / 4 / perFrame) * 4);
+    for (let i = 0; i < data.length && o < sample.length - 4; i += stride) {
+      sample[o++] = data[i];
+      sample[o++] = data[i + 1];
+      sample[o++] = data[i + 2];
+      sample[o++] = data[i + 3];
+    }
+  }
+  return quantize(sample.subarray(0, o), 256, { format: "rgb444" });
+}
+
+/** Output format for an animated section. WebP is the default. */
+export type AnimationFormat = "webp" | "gif" | "mp4";
+
+/** Turn a canvas into a PNG Blob — the wire format for server-side encoding. */
+function canvasToPngBlob(canvas: HTMLCanvasElement): Promise<Blob> {
+  return new Promise((resolve, reject) => {
+    canvas.toBlob(
+      (blob) => (blob ? resolve(blob) : reject(new Error("canvas toBlob failed"))),
+      "image/png",
+    );
+  });
+}
+
+/** Encode composed frames as an animated GIF, entirely in the browser. */
+function encodeFramesAsGif(frames: HTMLCanvasElement[], delayMs: number): Blob {
+  const palette = buildGlobalPalette(frames);
+  const encoder = GIFEncoder();
+  const delay = Math.round(delayMs);
+  for (const frame of frames) {
+    const { data, width, height } = imageDataOf(frame);
+    const index = applyPalette(data, palette, "rgb444");
+    encoder.writeFrame(index, width, height, { palette, delay });
+  }
+  encoder.finish();
+  return new Blob([encoder.bytes() as unknown as Uint8Array<ArrayBuffer>], {
+    type: "image/gif",
+  });
+}
+
+/**
+ * Encode composed frames as an animated WebP.
+ *
+ * The round trip is not an optimisation choice — no browser can encode animated
+ * WebP, so the frames have to leave the page. They go as lossless PNG so the
+ * server compresses the original pixels once rather than compounding losses.
+ */
+async function encodeFramesAsWebp(
+  host: DetailPageHost,
+  frames: HTMLCanvasElement[],
+  delayMs: number,
+  signal?: AbortSignal,
+): Promise<Blob> {
+  const payload = await Promise.all(frames.map(canvasToPngBlob));
+  const fps = Math.max(1, Math.round(1000 / Math.max(1, delayMs)));
+  return host.api.encodeDetailPageAnimation(payload, { fps, format: "webp" }, signal);
+}
+
+/** Render a single animated section to an animated WebP (default) or GIF Blob. */
+export async function encodeSectionGif(
+  store: unknown,
+  pageId: string,
+  /** WebP 인코딩은 서버가 한다 — 브라우저에 애니메이션 WebP 인코더가 없다. */
+  host: DetailPageHost,
+  format: AnimationFormat = "webp",
+  signal?: AbortSignal,
+): Promise<Blob> {
+  const s = store as StoreLike;
+  const page = s.pages.find((p) => p.id === pageId);
+  if (!page) throw new Error(`page not found: ${pageId}`);
+
+  const gifEls: ElementLike[] = [];
+  collectGifElements(page.children, gifEls);
+  if (gifEls.length === 0) throw new Error("no GIF element on page");
+
+  // Decode each source GIF and remember its original src to restore later.
+  const decoded = new Map<ElementLike, DecodedAnimation>();
+  const original = new Map<ElementLike, string | undefined>();
+  for (const el of gifEls) {
+    original.set(el, el.src);
+    if (el.src) decoded.set(el, await decodeAnimation(el.src));
+  }
+
+  const timeline = buildGifTimeline([...decoded.values()].map((g) => g.durationMs));
+  const maxWidth = format === "mp4" ? MAX_MP4_WIDTH : MAX_GIF_WIDTH;
+  const ratio = Math.min(1, maxWidth / Math.max(1, page.computedWidth));
+  const frameSrcCache = new WeakMap<DecodedFrame, string>();
+  const frameSrc = (frame: DecodedFrame): string => {
+    let url = frameSrcCache.get(frame);
+    if (!url) {
+      url = frame.canvas.toDataURL("image/png");
+      frameSrcCache.set(frame, url);
+    }
+    return url;
+  };
+
+  const composed: HTMLCanvasElement[] = [];
+  try {
+    for (const t of timeline.times) {
+      for (const el of gifEls) {
+        const gif = decoded.get(el);
+        if (gif) el.set({ src: frameSrc(frameAtTime(gif, t)) });
+      }
+      await s.waitLoading?.();
+      const url = await s.toDataURL({ pageId, pixelRatio: ratio, mimeType: "image/png" });
+      composed.push(drawToCanvas(await loadImage(url)));
+    }
+  } finally {
+    for (const el of gifEls) el.set({ src: original.get(el) ?? "" });
+    await s.waitLoading?.();
+  }
+
+  if (format === "gif") return encodeFramesAsGif(composed, timeline.frameDelayMs);
+  if (format === "mp4") {
+    const { encodeFramesAsMp4 } = await import("./mp4-encode");
+    return encodeFramesAsMp4(composed, timeline.frameDelayMs, signal);
+  }
+  return encodeFramesAsWebp(host, composed, timeline.frameDelayMs, signal);
+}
+
+/** Stack the given selected-page indices into one vertical PNG/JPG Blob. */
+async function stackPngRun(
+  store: StoreLike,
+  pageIds: string[],
+  indices: number[],
+  pixelRatio: number,
+  mimeType: string,
+): Promise<Blob> {
+  const urls: string[] = [];
+  for (const i of indices) {
+    urls.push(await store.toDataURL({ pageId: pageIds[i], pixelRatio, mimeType }));
+  }
+  const images = await Promise.all(urls.map(loadImage));
+  const width = Math.max(...images.map((img) => img.width));
+  const height = images.reduce((acc, img) => acc + img.height, 0);
+  const canvas = document.createElement("canvas");
+  canvas.width = width;
+  canvas.height = height;
+  const ctx = canvas.getContext("2d");
+  if (!ctx) throw new Error("2d context unavailable");
+  if (mimeType === "image/jpeg") {
+    ctx.fillStyle = "#ffffff";
+    ctx.fillRect(0, 0, width, height);
+  }
+  let y = 0;
+  for (const img of images) {
+    ctx.drawImage(img, 0, y);
+    y += img.height;
+  }
+  const blob = await new Promise<Blob | null>((resolve) => canvas.toBlob(resolve, mimeType, 0.95));
+  if (!blob) throw new Error("canvas toBlob failed");
+  return blob;
+}
+
+export type GifZipOptions = {
+  pageIds: string[];
+  gifFlags: boolean[];
+  pixelRatio: number;
+  mimeType: string;
+  ext: string;
+  /** Animated section format. Defaults to WebP. */
+  animationFormat?: AnimationFormat;
+  /** Optional progress callback: (done, total) units. */
+  onProgress?: (done: number, total: number) => void;
+  signal?: AbortSignal;
+  /** 소싱 서버 접근(애니메이션 WebP 인코딩). */
+  host: DetailPageHost;
+};
+
+/**
+ * Build the full ZIP for a document that contains at least one animated
+ * section. Contiguous still sections stack into one ``label.ext`` PNG/JPG; each
+ * animated section is a standalone ``label.webp`` (or ``.gif``).
+ */
+export async function exportGifZip(store: unknown, opts: GifZipOptions): Promise<Blob> {
+  const s = store as StoreLike;
+  const units = planGifExport(opts.gifFlags);
+  const animationFormat = opts.animationFormat ?? "webp";
+  const JSZip = (await import("jszip")).default;
+  const zip = new JSZip();
+  let done = 0;
+  for (const unit of units) {
+    if (unit.kind === "gif") {
+      zip.file(
+        `${unit.label}.${animationFormat}`,
+        await encodeSectionGif(s, opts.pageIds[unit.page], opts.host, animationFormat, opts.signal),
+      );
+    } else {
+      const blob = await stackPngRun(s, opts.pageIds, unit.pages, opts.pixelRatio, opts.mimeType);
+      zip.file(`${unit.label}.${opts.ext}`, blob);
+    }
+    opts.onProgress?.(++done, units.length);
+  }
+  return zip.generateAsync({ type: "blob" });
+}

package/lib/detail-page-canvas/export/gif-plan.ts

@@ -0,0 +1,95 @@
+/**
+ * Pure planning for GIF-aware raster export. When any selected section
+ * (Canvas page) contains an animated GIF, the download splits into multiple
+ * files inside a ZIP: contiguous still sections are stacked into one PNG, and
+ * each GIF section becomes its own ``.gif`` — e.g. sections 1..16 with GIFs at
+ * 4, 8, 10 produce ``1-3.png, 4.gif, 5-7.png, 8.gif, 9.png, 10.gif, 11-16.png``.
+ *
+ * Everything here is DOM-free so the slicing/naming is unit-testable; the canvas
+ * encoding glue lives in ``gif-export.ts`` (dynamic-imported, heavy deps).
+ */
+
+import type { ExportDocument, ExportElement } from "./document-model";
+
+/**
+ * Whether a source URL alone proves the element is animated.
+ *
+ * **Only GIF can be judged this way.** The default output format is animated
+ * WebP now, but ``.webp`` is shared by stills (references, covers, generated
+ * photos) — matching on it would tag most of the library as animated. So the
+ * authority is ``custom.detailPageGif``, set wherever an animation is inserted
+ * (``insert-image.ts``, ``replace-with-gif.ts``); this suffix check only exists
+ * to keep pre-existing GIFs and outside URLs working.
+ */
+export function isGifSrc(src: unknown): boolean {
+  if (typeof src !== "string" || !src) return false;
+  if (src.startsWith("data:image/gif")) return true;
+  // Strip query/hash so presigned S3 URLs (``...x.gif?X-Amz-...``) still match.
+  return /\.gif(?:[?#]|$)/i.test(src);
+}
+
+function elementIsGif(el: ExportElement): boolean {
+  if (el.custom && (el.custom as { detailPageGif?: unknown }).detailPageGif) {
+    return true;
+  }
+  return (el.type === "image" || el.type === "svg") && isGifSrc(el.src);
+}
+
+function anyGifChild(children: ExportElement[] | undefined): boolean {
+  for (const el of children ?? []) {
+    if (elementIsGif(el)) return true;
+    if (anyGifChild(el.children)) return true;
+  }
+  return false;
+}
+
+/**
+ * For the selected pages (in ``pageIds`` order, or document order when omitted),
+ * report whether each contains at least one GIF element. The result is aligned
+ * to ``pageIds`` so callers can index the two lists together.
+ */
+export function detectGifPages(doc: ExportDocument, pageIds?: string[]): boolean[] {
+  const pages = doc.pages ?? [];
+  if (!pageIds?.length) return pages.map((p) => anyGifChild(p.children));
+  const byId = new Map(pages.filter((p) => p.id).map((p) => [p.id, p] as const));
+  return pageIds.map((id) => anyGifChild(byId.get(id)?.children));
+}
+
+export type ExportUnit =
+  | { kind: "png"; pages: number[]; label: string }
+  | { kind: "gif"; page: number; label: string };
+
+/** Zero-pad a 1-based section number to the width of the largest number. */
+function label(n: number, total: number): string {
+  return String(n).padStart(String(total).length, "0");
+}
+
+/**
+ * Slice an ordered GIF-flag list into export units: runs of contiguous stills
+ * become one stacked PNG (``start-end`` or a bare ``n`` for a single page), and
+ * each GIF page stands alone. Indices are 0-based into the selected-page list;
+ * labels are 1-based and zero-padded for stable filesystem ordering.
+ */
+export function planGifExport(isGif: boolean[]): ExportUnit[] {
+  const total = isGif.length;
+  const units: ExportUnit[] = [];
+  let run: number[] = [];
+  const flush = () => {
+    if (run.length === 0) return;
+    const start = run[0] + 1;
+    const end = run[run.length - 1] + 1;
+    const name = start === end ? label(start, total) : `${label(start, total)}-${label(end, total)}`;
+    units.push({ kind: "png", pages: [...run], label: name });
+    run = [];
+  };
+  for (let i = 0; i < isGif.length; i++) {
+    if (isGif[i]) {
+      flush();
+      units.push({ kind: "gif", page: i, label: label(i + 1, total) });
+    } else {
+      run.push(i);
+    }
+  }
+  flush();
+  return units;
+}

package/lib/detail-page-canvas/export/mp4-encode.ts

@@ -0,0 +1,158 @@
+/**
+ * 합성 프레임 → H.264 MP4, 브라우저 안에서.
+ *
+ * WebP 와 정반대다. 움직이는 WebP 는 브라우저가 굽지 못해 서버로 보내지만, MP4 는
+ * 브라우저가 `VideoEncoder` 로 진짜 H.264 를 뽑을 수 있어서 프레임이 페이지를 떠날
+ * 이유가 없다. 서버로 옮기면 이미지에 ffmpeg 를 넣어야 하는데(우리가 쓰는 opencv
+ * 휠은 리눅스에서 H.264 인코더가 빠져 있어 `avc1` 이 아예 안 열린다), 그렇게 얻는
+ * 게 없다.
+ *
+ * `VideoEncoder` 는 청크만 뱉고 컨테이너는 만들지 않아서 mp4-muxer 로 감싼다.
+ */
+
+import { ArrayBufferTarget, Muxer } from "mp4-muxer";
+
+import { isMp4EncodeSupported } from "./mp4-support";
+
+/**
+ * 시도해 볼 코덱 문자열. 뒤로 갈수록 낮은 레벨이다.
+ *
+ * 레벨은 해상도 상한을 뜻해서, 세로로 긴 섹션은 낮은 레벨에서 거절당한다. 그래서
+ * 하나를 고정하지 않고 `isConfigSupported` 로 물어보며 내려간다. 전부 Baseline/High
+ * 프로파일이라 어디서든 재생된다.
+ */
+const CODEC_CANDIDATES = [
+  "avc1.640034", // High 5.2
+  "avc1.42003c", // Baseline 6.0
+  "avc1.420034", // Baseline 5.2
+  "avc1.42002a", // Baseline 4.2
+  "avc1.42001f", // Baseline 3.1
+];
+
+/** 화면에 담기는 화질 대비 파일이 커지지 않는 선. */
+const BITS_PER_PIXEL_PER_SECOND = 0.12;
+/** 앞으로 감기가 되도록 키프레임을 이 간격으로 박는다. */
+const KEYFRAME_INTERVAL_SEC = 2;
+
+/**
+ * yuv420p 는 가로·세로가 짝수여야 한다. 홀수면 인코더가 거절하거나 한 줄이 뭉개져서,
+ * 짝수로 내린 크기에 맞춰 다시 그린다(잘리는 건 최대 1픽셀).
+ */
+function toEvenSized(frame: HTMLCanvasElement): HTMLCanvasElement {
+  const width = frame.width - (frame.width % 2);
+  const height = frame.height - (frame.height % 2);
+  if (width === frame.width && height === frame.height) return frame;
+  const canvas = document.createElement("canvas");
+  canvas.width = width;
+  canvas.height = height;
+  canvas.getContext("2d")?.drawImage(frame, 0, 0);
+  return canvas;
+}
+
+/**
+ * 영상에는 알파가 없다. 투명한 채로 넘기면 인코더가 검게 깔아서, 흰 바탕에 얹는다 —
+ * 상세페이지가 실제로 놓이는 바탕색이다.
+ */
+function flattenOnWhite(frame: HTMLCanvasElement): HTMLCanvasElement {
+  const canvas = document.createElement("canvas");
+  canvas.width = frame.width;
+  canvas.height = frame.height;
+  const ctx = canvas.getContext("2d");
+  if (!ctx) throw new Error("2d context unavailable");
+  ctx.fillStyle = "#ffffff";
+  ctx.fillRect(0, 0, canvas.width, canvas.height);
+  ctx.drawImage(frame, 0, 0);
+  return canvas;
+}
+
+/** 이 크기를 받아 주는 첫 코덱. 전부 거절하면 null. */
+async function pickCodec(
+  width: number,
+  height: number,
+  framerate: number,
+  bitrate: number,
+): Promise<string | null> {
+  for (const codec of CODEC_CANDIDATES) {
+    try {
+      const support = await VideoEncoder.isConfigSupported({
+        codec,
+        width,
+        height,
+        framerate,
+        bitrate,
+      });
+      if (support.supported) return codec;
+    } catch {
+      // 이 코덱 문자열 자체를 모르는 브라우저 — 다음 후보로 넘어간다.
+    }
+  }
+  return null;
+}
+
+/**
+ * 합성 프레임을 H.264 MP4 로 굽는다.
+ *
+ * `fastStart: "in-memory"` 로 moov 를 앞에 둔다 — 뒤에 있으면 올린 곳에서 파일을 다
+ * 받기 전엔 재생을 시작하지 못한다.
+ */
+export async function encodeFramesAsMp4(
+  frames: HTMLCanvasElement[],
+  delayMs: number,
+  signal?: AbortSignal,
+): Promise<Blob> {
+  if (!isMp4EncodeSupported()) {
+    throw new Error("MP4_ENCODE_UNSUPPORTED");
+  }
+  if (frames.length === 0) throw new Error("no frames to encode");
+
+  const prepared = frames.map((frame) => flattenOnWhite(toEvenSized(frame)));
+  const { width, height } = prepared[0];
+  if (width === 0 || height === 0) throw new Error("frame too small to encode");
+
+  const fps = Math.max(1, Math.round(1000 / Math.max(1, delayMs)));
+  const bitrate = Math.round(width * height * fps * BITS_PER_PIXEL_PER_SECOND);
+  const codec = await pickCodec(width, height, fps, bitrate);
+  if (!codec) throw new Error("MP4_ENCODE_UNSUPPORTED");
+
+  const muxer = new Muxer({
+    target: new ArrayBufferTarget(),
+    video: { codec: "avc", width, height, frameRate: fps },
+    fastStart: "in-memory",
+  });
+
+  let failure: Error | null = null;
+  const encoder = new VideoEncoder({
+    output: (chunk, meta) => muxer.addVideoChunk(chunk, meta),
+    error: (error) => {
+      failure = error instanceof Error ? error : new Error(String(error));
+    },
+  });
+  encoder.configure({ codec, width, height, framerate: fps, bitrate });
+
+  const frameDurationUs = Math.round(delayMs * 1000);
+  const keyEvery = Math.max(1, Math.round(fps * KEYFRAME_INTERVAL_SEC));
+  try {
+    for (let i = 0; i < prepared.length; i++) {
+      if (signal?.aborted) throw signal.reason ?? new Error("aborted");
+      if (failure) throw failure;
+      // 타임스탬프는 마이크로초다. 밀리초를 그대로 넣으면 1000배 느린 영상이 나온다.
+      const videoFrame = new VideoFrame(prepared[i], {
+        timestamp: i * frameDurationUs,
+        duration: frameDurationUs,
+      });
+      try {
+        encoder.encode(videoFrame, { keyFrame: i % keyEvery === 0 });
+      } finally {
+        // VideoFrame 은 GC 를 기다리지 않는다 — 안 닫으면 프레임 수만큼 메모리를 문다.
+        videoFrame.close();
+      }
+    }
+    await encoder.flush();
+    if (failure) throw failure;
+  } finally {
+    if (encoder.state !== "closed") encoder.close();
+  }
+
+  muxer.finalize();
+  return new Blob([muxer.target.buffer as ArrayBuffer], { type: "video/mp4" });
+}

package/lib/detail-page-canvas/export/mp4-support.ts

@@ -0,0 +1,22 @@
+/**
+ * MP4 를 구울 수 있는 브라우저인지만 본다.
+ *
+ * 인코더(`mp4-encode.ts`)와 갈라 둔 이유는 하나다 — 거기엔 muxer 가 딸려 있어서,
+ * 형식 목록을 그리려고 그 파일을 import 하면 MP4 를 고르지도 않은 사람이 muxer 를
+ * 내려받는다. 여기는 의존성이 없어야 한다.
+ */
+
+/**
+ * 이 브라우저가 MP4 를 구울 수 있는가.
+ *
+ * 거짓이 되는 경우가 둘이다. 하나는 정말 WebCodecs 가 없는 브라우저, 다른 하나는
+ * **보안 컨텍스트가 아닐 때**다 — `VideoEncoder` 는 https 와 localhost 에만 있어서,
+ * 평문 http 로 편집기를 열면 이름조차 없다. 그래서 "코덱 문제" 처럼 보이지 않고
+ * 그냥 MP4 항목이 사라진다.
+ */
+export function isMp4EncodeSupported(): boolean {
+  return (
+    typeof globalThis.VideoEncoder === "function" &&
+    typeof globalThis.VideoFrame === "function"
+  );
+}