pixi-effects 0.5.0 → 0.7.0

package/dist/index.cjs

@@ -1,8 +1,8 @@
 'use strict';
 
+var chunk4VSIJLU3_cjs = require('./chunk-4VSIJLU3.cjs');
+var chunk6I55T4OH_cjs = require('./chunk-6I55T4OH.cjs');
 var chunkUQBGW5DO_cjs = require('./chunk-UQBGW5DO.cjs');
-var chunk23M5QTWW_cjs = require('./chunk-23M5QTWW.cjs');
-var chunk2RR43OIN_cjs = require('./chunk-2RR43OIN.cjs');
 var PIXI = require('pixi.js');
 var gsap = require('gsap');
 var PixiPlugin = require('gsap/PixiPlugin');
@@ -181,7 +181,7 @@ function fft(re, im) {
 }
 var FRAME = 2048;
 function spectralCentroid(samples, sampleRate, from = 0, to = samples.length) {
-  let num = 0;
+  let num2 = 0;
   let den = 0;
   const re = new Float64Array(FRAME);
   const im = new Float64Array(FRAME);
@@ -196,11 +196,11 @@ function spectralCentroid(samples, sampleRate, from = 0, to = samples.length) {
     fft(re, im);
     for (let b = 1; b < FRAME / 2; b++) {
       const power = re[b] * re[b] + im[b] * im[b];
-      num += power * (b * sampleRate / FRAME);
+      num2 += power * (b * sampleRate / FRAME);
       den += power;
     }
   }
-  return den > 1e-9 ? Math.round(num / den / 10) * 10 : 0;
+  return den > 1e-9 ? Math.round(num2 / den / 10) * 10 : 0;
 }
 
 // src/core/inspectAudio.ts
@@ -819,16 +819,16 @@ function expandTransitions(spec) {
     if (toUses > 1) {
       throw new Error(`pixi-effects: ${tag} sequence "${t.to}" is used as \`to\` in more than one transition`);
     }
-    const tStart = chunk2RR43OIN_cjs.resolveAt(t.at, parentDuration);
+    const tStart = chunk6I55T4OH_cjs.resolveAt(t.at, parentDuration);
     const tEnd = tStart + t.duration;
     const fromSeq = fromEntry.seq;
-    const fromStart = chunk2RR43OIN_cjs.resolveAt(fromSeq.at, parentDuration);
+    const fromStart = chunk6I55T4OH_cjs.resolveAt(fromSeq.at, parentDuration);
     const fromEnd = fromStart + (fromSeq.duration ?? parentDuration);
     if (tStart < fromStart || tEnd > fromEnd) {
       throw new Error(`pixi-effects: ${tag} window [${tStart}, ${tEnd}] is not covered by \`from\` "${t.from}" (lives [${fromStart}, ${fromEnd}], so it ends at ${fromEnd})`);
     }
     const toSeq = toEntry.seq;
-    const toStart = chunk2RR43OIN_cjs.resolveAt(toSeq.at, parentDuration);
+    const toStart = chunk6I55T4OH_cjs.resolveAt(toSeq.at, parentDuration);
     const toEnd = toStart + (toSeq.duration ?? parentDuration);
     if (tStart < toStart || tEnd > toEnd) {
       throw new Error(`pixi-effects: ${tag} window [${tStart}, ${tEnd}] is not covered by \`to\` "${t.to}" (lives [${toStart}, ${toEnd}], so it starts at ${toStart})`);
@@ -1140,7 +1140,7 @@ function inspectScene(root, frame, time, canvas, opts = {}) {
   const seen = /* @__PURE__ */ new Map();
   const scene = /* @__PURE__ */ new Map();
   const scaledToNothing = /* @__PURE__ */ new Set();
-  const walk = (comp, prefix, insideThreeD, parentVisible, parentScene, parentMoving = false, parentZero = false) => {
+  const walk2 = (comp, prefix, insideThreeD, parentVisible, parentScene, parentMoving = false, parentZero = false) => {
     const blending = /* @__PURE__ */ new Set();
     for (const w of transitionWindowsOf(comp.spec)) {
       const start = (comp.absoluteStart ?? 0) + w.start, end = (comp.absoluteStart ?? 0) + w.end;
@@ -1168,7 +1168,7 @@ function inspectScene(root, frame, time, canvas, opts = {}) {
         onCanvas = inter === 0 && area > 0 ? "none" : inter >= area - 1e-6 ? "full" : "partial";
         if (area === 0) onCanvas = "none";
       }
-      const keys = chunk2RR43OIN_cjs.collectPropKeys(seq.spec);
+      const keys = chunk6I55T4OH_cjs.collectPropKeys(seq.spec);
       const moving = parentMoving || (seq.spec.keyframes ?? []).length > 0 && (keys.has("x") || keys.has("y"));
       const scale = t?.scale;
       const zero = parentZero || !!scale && (scale.x === 0 || scale.y === 0);
@@ -1183,11 +1183,11 @@ function inspectScene(root, frame, time, canvas, opts = {}) {
       seen.set(info, shown);
       const group = parentScene ?? (name !== void 0 && blending.has(name) ? name : void 0);
       if (group) scene.set(info, group);
-      if (zero) scaledToNothing.add(info);
-      if (seq instanceof chunk23M5QTWW_cjs.CompositionSequence) walk(seq, prefix + label + "/", insideThreeD || threeD, visible, group, moving, zero);
+      if (zero || seq.showsNothingYet) scaledToNothing.add(info);
+      if (seq instanceof chunk4VSIJLU3_cjs.CompositionSequence) walk2(seq, prefix + label + "/", insideThreeD || threeD, visible, group, moving, zero);
     });
   };
-  walk(root, "", false, true);
+  walk2(root, "", false, true);
   const issues = [];
   const texts = layers.filter((l) => l.type === "text" && l.visible && l.alpha >= FAINT && l.bounds);
   for (const l of texts) {
@@ -1224,6 +1224,158 @@ function inspectScene(root, frame, time, canvas, opts = {}) {
   return { frame, time, canvas, summary: { layers: layers.length, visible: layers.filter((l) => l.visible).length }, issues, layers: listed };
 }
 
+// src/core/timelineChart.ts
+var GROUP_MIN = 4;
+var MAX_KEYS = 200;
+var round = (n) => Math.round(n * 1e6) / 1e6;
+var family = (name) => name.replace(/\d+/g, "#");
+function detailOf(seq) {
+  const s = seq.spec;
+  if (typeof s.text === "string") return s.text.length > 60 ? s.text.slice(0, 57) + "\u2026" : s.text;
+  if (typeof s.asset === "string") return `asset \u201C${s.asset}\u201D`;
+  if (typeof s.sfx === "string") return `sfx \u201C${s.sfx}\u201D`;
+  if (s.sfx && typeof s.sfx === "object") return "sfx (custom)";
+  return void 0;
+}
+function walk(comp, parentStart, parentEnd, depth, prefix, rows, transitions) {
+  const entries = [];
+  comp._children.forEach((seq, i) => {
+    const name = seq.spec.name ?? `${seq.spec.type}#${i}`;
+    const start = parentStart + (seq.at ?? 0);
+    const end = Math.min(parentEnd, seq.duration !== void 0 ? start + seq.duration : parentEnd);
+    const span = end - start;
+    const keys = (seq.spec.keyframes ?? []).map((kf) => round(start + chunk6I55T4OH_cjs.resolveAt(kf.at, span))).sort((a, b) => a - b).slice(0, MAX_KEYS);
+    const row = { path: prefix + name, name, type: seq.spec.type, depth, start: round(start), end: round(end), keys, detail: detailOf(seq) };
+    const inner = [];
+    const isComp = seq instanceof chunk4VSIJLU3_cjs.CompositionSequence;
+    if (isComp) walk(seq, start, end, depth + 1, prefix + name + "/", inner, transitions);
+    entries.push({ row, inner, groupable: !isComp });
+  });
+  rows.push(...groupFamilies(entries));
+  for (const w of transitionWindowsOf(comp.spec)) {
+    transitions.push({ from: prefix + w.from, to: prefix + w.to, start: round(parentStart + w.start), end: round(parentStart + w.end) });
+  }
+}
+function groupFamilies(entries) {
+  const buckets = /* @__PURE__ */ new Map();
+  for (const e of entries) {
+    if (!e.groupable) continue;
+    const key = e.row.type + "|" + family(e.row.name);
+    (buckets.get(key) ?? buckets.set(key, []).get(key)).push(e.row);
+  }
+  const out = [];
+  const done = /* @__PURE__ */ new Set();
+  for (const e of entries) {
+    const key = e.row.type + "|" + family(e.row.name);
+    const members = e.groupable ? buckets.get(key) : null;
+    if (members && members.length >= GROUP_MIN) {
+      if (done.has(key)) continue;
+      done.add(key);
+      const label = `${family(e.row.name)} \xD7${members.length}`;
+      out.push({
+        path: e.row.path.slice(0, e.row.path.length - e.row.name.length) + label,
+        name: label,
+        type: e.row.type,
+        depth: e.row.depth,
+        start: Math.min(...members.map((x) => x.start)),
+        end: Math.max(...members.map((x) => x.end)),
+        keys: members.flatMap((x) => x.keys).sort((a, b) => a - b).slice(0, MAX_KEYS),
+        parts: members.map((x) => ({ start: x.start, end: x.end }))
+      });
+    } else {
+      out.push(e.row, ...e.inner);
+      continue;
+    }
+    out.push(...e.inner);
+  }
+  return out;
+}
+function collectTimeline(root, duration) {
+  const rows = [];
+  const transitions = [];
+  walk(root, 0, duration, 0, "", rows, transitions);
+  return { duration, rows, transitions };
+}
+var COLORS = {
+  text: "#4cc9f0",
+  shape: "#ffd166",
+  image: "#7bd88f",
+  video: "#c77dff",
+  audio: "#ff7aa8",
+  composition: "#8ea4c8",
+  three: "#ff9f68",
+  camera: "#b0b0b0"
+};
+var esc = (s) => s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+var num = (n) => String(Math.round(n * 100) / 100);
+function tickStep(duration, chartWidth) {
+  for (const s of [0.04, 0.1, 0.2, 0.5, 1, 2, 5, 10, 15, 30, 60, 120, 300, 600, 1200, 3600]) if (s / duration * chartWidth >= 70) return s;
+  return 7200;
+}
+function timelineSvg(data, opts = {}) {
+  const CHART = Math.max(100, opts.chartWidth ?? 950), withLabels = opts.labels !== false;
+  const LABEL = withLabels ? 250 : 0, ROW = 22, TOP = 34, PAD = 16;
+  const W = LABEL + CHART + PAD * 2, H = TOP + data.rows.length * ROW + PAD;
+  const x = (t) => PAD + LABEL + Math.max(0, Math.min(data.duration, t)) / data.duration * CHART;
+  const step = tickStep(data.duration, CHART);
+  const out = [];
+  for (let t = 0; t <= data.duration + 1e-9; t += step) {
+    out.push(`<line class="grid" x1="${num(x(t))}" y1="${TOP - 6}" x2="${num(x(t))}" y2="${H - PAD}"/>`);
+    out.push(`<text class="tick" x="${num(x(t))}" y="${TOP - 12}" text-anchor="middle">${num(t)}${t === 0 || Math.abs(t - data.duration) < 1e-9 ? " s" : ""}</text>`);
+  }
+  if (Math.abs(data.duration % step) > 1e-9) out.push(`<text class="tick" x="${num(x(data.duration))}" y="${TOP - 12}" text-anchor="middle">${num(data.duration)} s</text>`);
+  for (const t of data.transitions) {
+    out.push(`<g><title>transition ${esc(t.from)} \u2192 ${esc(t.to)} (${num(t.start)}\u2013${num(t.end)} s)</title><rect class="transition" x="${num(x(t.start))}" y="${TOP - 4}" width="${num(Math.max(2, x(t.end) - x(t.start)))}" height="${H - TOP - PAD + 4}"/></g>`);
+  }
+  data.rows.forEach((r, i) => {
+    const y = TOP + i * ROW;
+    const color = COLORS[r.type] ?? "#9aa7b8";
+    const tip = `${r.path} \xB7 ${r.type} \xB7 ${num(r.start)}\u2013${num(r.end)} s (${num(r.end - r.start)} s)${r.keys.length ? ` \xB7 ${r.keys.length} keyframe${r.keys.length > 1 ? "s" : ""}` : ""}${r.detail ? ` \xB7 ${r.detail}` : ""}`;
+    out.push(`<g class="row" data-start="${num(r.start)}"><title>${esc(tip)}</title>`);
+    out.push(`<rect class="band" x="${PAD}" y="${y}" width="${LABEL + CHART}" height="${ROW}" ${i % 2 ? 'fill-opacity=".05"' : 'fill-opacity="0"'}/>`);
+    if (withLabels) out.push(`<text class="label" x="${PAD + 6 + r.depth * 14}" y="${y + 15}">${esc(r.name)}</text>`);
+    for (const p of r.parts ?? [{ start: r.start, end: r.end }]) {
+      out.push(`<rect class="bar" x="${num(x(p.start))}" y="${y + 4}" width="${num(Math.max(2, x(p.end) - x(p.start)))}" height="${ROW - 8}" rx="3" fill="${color}"/>`);
+    }
+    for (const k of r.keys) out.push(`<path class="key" d="M ${num(x(k))} ${y + 7} l 3 4 l -3 4 l -3 -4 z"/>`);
+    out.push("</g>");
+  });
+  const legend = Object.entries(COLORS).map(([type, c], i) => `<g transform="translate(${PAD + i * 108},${H + 10})"><rect width="12" height="12" rx="3" fill="${c}"/><text x="18" y="10" class="tick">${type}</text></g>`).join("");
+  return `<svg xmlns="http://www.w3.org/2000/svg" width="${W}" height="${H + 32}" viewBox="0 0 ${W} ${H + 32}" role="img" aria-label="Timeline of ${data.rows.length} rows" data-duration="${num(data.duration)}" data-x0="${num(x(0))}" data-x1="${num(x(data.duration))}" data-top="${TOP - 6}" data-bottom="${H - PAD}" data-row="${ROW}">
+${out.join("\n")}
+${legend}
+</svg>`;
+}
+function timelineHtml(data, opts = {}) {
+  const W = 250 + 950 + 32;
+  const title = esc(opts.title ?? "Timeline");
+  return `<!doctype html>
+<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>${title} \u2014 timeline</title>
+<style>
+  :root { --bg: #f7f5f1; --ink: #1d2433; --dim: #6b7587; --grid: #d9d5cc; --key: #1d2433; --trans: #4cc9f0; }
+  @media (prefers-color-scheme: dark) { :root { --bg: #0e1320; --ink: #e8eefc; --dim: #8fa0bf; --grid: #26304a; --key: #ffffff; --trans: #4cc9f0; } }
+  body { margin: 0; background: var(--bg); color: var(--ink); font: 14px system-ui, sans-serif; }
+  main { padding: 20px 16px 32px; max-width: ${W + 32}px; margin: 0 auto; overflow-x: auto; }
+  h1 { font-size: 18px; font-weight: 600; margin: 0 0 4px; }
+  p { margin: 0 0 14px; color: var(--dim); font-size: 13px; }
+  svg { display: block; }
+  .grid { stroke: var(--grid); stroke-width: 1; }
+  .tick { fill: var(--dim); font-size: 11px; }
+  .label { fill: var(--ink); font-size: 12px; font-family: ui-monospace, Menlo, monospace; }
+  .band { fill: var(--ink); }
+  .key { fill: var(--key); opacity: .85; }
+  .transition { fill: var(--trans); opacity: .16; }
+  .bar { opacity: .88; }
+  .row:hover .bar { opacity: 1; }
+</style></head>
+<body><main>
+<h1>${title}</h1>
+<p>${data.rows.length} row${data.rows.length === 1 ? "" : "s"} \xB7 ${num(data.duration)} s \xB7 \u25C6 keyframe start \xB7 shaded band: a transition \xB7 hover a bar for details</p>
+${timelineSvg(data)}
+</main></body></html>
+`;
+}
+
 // src/core/frames.ts
 function pickFrames(lastFrame, count) {
   const last = Math.max(0, Math.floor(lastFrame));
@@ -1244,6 +1396,35 @@ function sheetLayout(n, columns, cellW, srcW, srcH, labelH) {
   return { cols, rows, cellW, cellH, width: cols * cellW, height: rows * (cellH + labelH), positions };
 }
 
+// src/core/startWhenRunning.ts
+function startWhenRunning(ctx, start, gesture) {
+  if (ctx.state === "running") {
+    start();
+    return () => {
+    };
+  }
+  let done = false;
+  const resume = () => {
+    ctx.resume?.()?.catch(() => {
+    });
+  };
+  const stop = () => {
+    done = true;
+    ctx.removeEventListener("statechange", onState);
+    for (const e of GESTURES) gesture?.removeEventListener(e, resume, true);
+  };
+  const onState = () => {
+    if (done || ctx.state !== "running") return;
+    stop();
+    start();
+  };
+  ctx.addEventListener("statechange", onState);
+  for (const e of GESTURES) gesture?.addEventListener(e, resume, true);
+  resume();
+  return stop;
+}
+var GESTURES = ["pointerdown", "mousedown", "touchend", "keydown"];
+
 // src/core/Movie.ts
 PIXI.extensions.add(PIXI.CullerPlugin);
 gsap.gsap.registerPlugin(PixiPlugin.PixiPlugin);
@@ -1256,6 +1437,7 @@ var Movie = class {
   audioBuffer = null;
   audioSource = null;
   gainNode = null;
+  _cancelAudioStart = null;
   _volume = 1;
   _muted = false;
   isPlaying = false;
@@ -1349,6 +1531,7 @@ var Movie = class {
         height: options.composition.height ?? this.height,
         duration: options.composition.duration ?? this.duration
       } : void 0;
+      await chunk6I55T4OH_cjs.ensureFilterLibrary(seededComposition);
       const userComposition = seededComposition ? expandTransitions(seededComposition) : void 0;
       const rootSeqSpec = {
         type: "composition",
@@ -1358,7 +1541,7 @@ var Movie = class {
         ...userComposition
       };
       if (userComposition) carryTransitionWindows(userComposition, rootSeqSpec);
-      const composition = new chunk23M5QTWW_cjs.CompositionSequence(rootSeqSpec, null, rootShape);
+      const composition = new chunk4VSIJLU3_cjs.CompositionSequence(rootSeqSpec, null, rootShape);
       await composition.build();
       this._rootSequence = composition;
       if (composition.target) root.addChild(composition.target);
@@ -1457,6 +1640,24 @@ var Movie = class {
     await this.gotoFrame(f, true);
     return inspectScene(this._rootSequence, f, f / this.frameRate, { width: this.width, height: this.height }, opts);
   }
+  /**
+   * Every layer as a row with absolute start / end / keyframe times (seconds), plus the transition windows. Runs of
+   * similar layers (`pop-1` … `pop-12`) are one row with a `parts` span each. Read it, or draw it with `timelineChart()`.
+   */
+  timelineData() {
+    this._requireReady("timelineData");
+    return collectTimeline(this._rootSequence, this.duration);
+  }
+  /** The timeline as one self-contained HTML page (an inline SVG, no scripts): layers as bars on a time axis, ◆ keyframes, transition bands. Open it in a browser. */
+  timelineChart(opts = {}) {
+    chunkUQBGW5DO_cjs.warnUnknownOptions("movie.timelineChart()", opts, ["title"]);
+    return timelineHtml(this.timelineData(), opts);
+  }
+  /** Just the chart: one `<svg>` whose geometry is in `data-*` attributes (a viewer puts a playhead on it: `pixi-effects-view`). */
+  timelineSvg(opts = {}) {
+    chunkUQBGW5DO_cjs.warnUnknownOptions("movie.timelineSvg()", opts, ["chartWidth", "labels"]);
+    return timelineSvg(this.timelineData(), opts);
+  }
   /**
    * The soundtrack, measured: when every audio layer plays, how loud the mix is over time, and `issues`
    * (limiting, inaudible layers, sounds cut off by the end). Use it to CHECK sound you cannot hear.
@@ -1493,6 +1694,7 @@ var Movie = class {
   play() {
     if (this._initState !== "ready") return;
     if (this.currentFrame >= this.totalFrames) this.currentFrame = 0;
+    const wasPlaying = this.isPlaying;
     this.isPlaying = true;
     const startTime = performance.now() - this.currentFrame / this.frameRate * 1e3;
     let inFlight = false;
@@ -1522,17 +1724,25 @@ var Movie = class {
     this._raf = requestAnimationFrame(tick);
     if (this.audioBuffer) {
       const ctx = this._ensureAudioContext();
-      this.audioSource = ctx.createBufferSource();
-      this.audioSource.buffer = this.audioBuffer;
-      this.gainNode = ctx.createGain();
-      this.gainNode.gain.value = this._muted ? 0 : this._volume;
-      this.audioSource.connect(this.gainNode).connect(ctx.destination);
-      this.audioSource.start(0, this.currentFrame / this.frameRate);
+      const buffer = this.audioBuffer;
+      this._cancelAudioStart?.();
+      this._cancelAudioStart = startWhenRunning(ctx, () => {
+        if (!this.isPlaying) return;
+        this.audioSource = ctx.createBufferSource();
+        this.audioSource.buffer = buffer;
+        this.gainNode = ctx.createGain();
+        this.gainNode.gain.value = this._muted ? 0 : this._volume;
+        this.audioSource.connect(this.gainNode).connect(ctx.destination);
+        this.audioSource.start(0, Math.min(this.currentFrame / this.frameRate, buffer.duration));
+      }, typeof window !== "undefined" ? window : void 0);
     }
+    if (!wasPlaying) this.emit("play");
   }
   pause() {
     const wasPlaying = this.isPlaying;
     this.isPlaying = false;
+    this._cancelAudioStart?.();
+    this._cancelAudioStart = null;
     if (this._raf) {
       cancelAnimationFrame(this._raf);
       this._raf = null;
@@ -1794,17 +2004,17 @@ function orbit(opts) {
     throw new Error("pixi-effects: orbit() cannot combine `radius` with `dollyZoom` \u2014 the radius follows the animated fov");
   }
   const [cx, cy] = opts.center ?? [width / 2, height / 2];
-  const fixedR = opts.radius ?? chunk2RR43OIN_cjs.homeDistance(height, fov ?? chunk2RR43OIN_cjs.DEFAULT_FOV);
+  const fixedR = opts.radius ?? chunk6I55T4OH_cjs.homeDistance(height, fov ?? chunk6I55T4OH_cjs.DEFAULT_FOV);
   const start = opts.start ?? -degrees / 2;
   const steps = Math.max(1, Math.round(duration * stepsPerSecond));
   const easeFn = parseEase(ease);
   const dollyEase = dolly ? parseEase(dolly.ease ?? ease) : null;
   const pos = (i) => {
     const p = i / steps;
-    const a = (start + degrees * easeFn(p)) * chunk2RR43OIN_cjs.DEG;
+    const a = (start + degrees * easeFn(p)) * chunk6I55T4OH_cjs.DEG;
     if (!dolly) return { x: cx + fixedR * Math.sin(a), z: fixedR * Math.cos(a) };
     const f = dolly.from + (dolly.to - dolly.from) * dollyEase(p);
-    const R = chunk2RR43OIN_cjs.homeDistance(height, f);
+    const R = chunk6I55T4OH_cjs.homeDistance(height, f);
     return { x: cx + R * Math.sin(a), z: R * Math.cos(a), fov: f };
   };
   const keyframes = [];
@@ -1853,7 +2063,7 @@ function withFade(spec, opts) {
 
 Object.defineProperty(exports, "registerSequenceType", {
   enumerable: true,
-  get: function () { return chunk2RR43OIN_cjs.registerSequenceType; }
+  get: function () { return chunk6I55T4OH_cjs.registerSequenceType; }
 });
 exports.Movie = Movie;
 exports.kenBurns = kenBurns;