pixi-effects 0.26.0 → 0.26.1

package/dist/index.cjs

@@ -1,7 +1,7 @@
 'use strict';
 
-var chunkSY27HZC5_cjs = require('./chunk-SY27HZC5.cjs');
-var chunkDP37TTMO_cjs = require('./chunk-DP37TTMO.cjs');
+var chunkH3RHEH5W_cjs = require('./chunk-H3RHEH5W.cjs');
+var chunkEABL3UKJ_cjs = require('./chunk-EABL3UKJ.cjs');
 var chunk3DLYAPK7_cjs = require('./chunk-3DLYAPK7.cjs');
 var chunkECA2WNRX_cjs = require('./chunk-ECA2WNRX.cjs');
 var chunkTWZNOUM7_cjs = require('./chunk-TWZNOUM7.cjs');
@@ -80,11 +80,11 @@ function ensureLoadersRegistered(audioContext) {
     }
   });
 }
-async function loadAssetBundle(assets, audioContext) {
+async function loadAssetBundle(assets, audioContext, onProgress) {
   ensureLoadersRegistered(audioContext);
   const bundle = assets.map((a) => ({ alias: a.name, src: a.src }));
   PIXI.Assets.addBundle("pixi-effects", bundle);
-  return await PIXI.Assets.loadBundle("pixi-effects");
+  return await PIXI.Assets.loadBundle("pixi-effects", onProgress);
 }
 
 // src/core/audioRemap.ts
@@ -1407,8 +1407,8 @@ function expandTransitions(spec) {
   }
   const transitions = out.transitions;
   const sequences = out.sequences ?? [];
-  const remap = out.duration !== void 0 ? chunkDP37TTMO_cjs.timeRemapOf(out) : null;
-  const parentDuration = remap ? chunkDP37TTMO_cjs.contentLength(remap, out.duration) : out.duration ?? Infinity;
+  const remap = out.duration !== void 0 ? chunkEABL3UKJ_cjs.timeRemapOf(out) : null;
+  const parentDuration = remap ? chunkEABL3UKJ_cjs.contentLength(remap, out.duration) : out.duration ?? Infinity;
   const compW = out.width;
   const compH = out.height;
   const threeDByName = new Set(sequences.filter((s) => s.name && s.threeD).map((s) => s.name));
@@ -1476,16 +1476,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 = chunkDP37TTMO_cjs.resolveAt(t.at, parentDuration);
+    const tStart = chunkEABL3UKJ_cjs.resolveAt(t.at, parentDuration);
     const tEnd = tStart + t.duration;
     const fromSeq = fromEntry.seq;
-    const fromStart = chunkDP37TTMO_cjs.resolveAt(fromSeq.at, parentDuration);
+    const fromStart = chunkEABL3UKJ_cjs.resolveAt(fromSeq.at, parentDuration);
     const fromEnd = fromStart + (fromSeq.duration ?? parentDuration);
     if (tStart < fromStart - EPS || tEnd > fromEnd + EPS) {
       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 = chunkDP37TTMO_cjs.resolveAt(toSeq.at, parentDuration);
+    const toStart = chunkEABL3UKJ_cjs.resolveAt(toSeq.at, parentDuration);
     const toEnd = toStart + (toSeq.duration ?? parentDuration);
     if (tStart < toStart - EPS || tEnd > toEnd + EPS) {
       throw new Error(`pixi-effects: ${tag} window [${tStart}, ${tEnd}] is not covered by \`to\` "${t.to}" (lives [${toStart}, ${toEnd}], so it starts at ${toStart})`);
@@ -1545,7 +1545,7 @@ function wrapAsFullComposition(seq, compW, compH) {
   delete inner.at;
   delete inner.duration;
   const m = inner.mask;
-  const carriesMatte = m !== void 0 && chunkSY27HZC5_cjs.maskSourceOf(m).kind === "refs";
+  const carriesMatte = m !== void 0 && chunkH3RHEH5W_cjs.maskSourceOf(m).kind === "refs";
   if (carriesMatte) delete inner.mask;
   return {
     ...carriesMatte ? { mask: m } : {},
@@ -1872,7 +1872,7 @@ function inspectScene(root, frame, time, canvas, opts = {}) {
       const group = parentScene ?? (name !== void 0 && blending.has(name) ? name : void 0);
       if (group) scene.set(info, group);
       if (zero || seq.showsNothingYet) scaledToNothing.add(info);
-      if (seq instanceof chunkSY27HZC5_cjs.CompositionSequence) walk2(seq, prefix + label + "/", insideThreeD || threeD, visible, group, moving, zero);
+      if (seq instanceof chunkH3RHEH5W_cjs.CompositionSequence) walk2(seq, prefix + label + "/", insideThreeD || threeD, visible, group, moving, zero);
     });
   };
   walk2(root, "", false, true);
@@ -1933,10 +1933,10 @@ function walk(comp, parentStart, parentEnd, depth, prefix, rows, transitions, lo
     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 + chunkDP37TTMO_cjs.resolveAt(kf.at, span))).sort((a, b) => a - b).slice(0, MAX_KEYS);
+    const keys = (seq.spec.keyframes ?? []).map((kf) => round(start + chunkEABL3UKJ_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), ...local ? { local } : {} };
     const inner = [];
-    const isComp = seq instanceof chunkSY27HZC5_cjs.CompositionSequence;
+    const isComp = seq instanceof chunkH3RHEH5W_cjs.CompositionSequence;
     if (isComp) {
       const label = seq.remapLabel();
       walk(seq, label ? 0 : start, label ? seq.contentSpan : end, depth + 1, prefix + name + "/", inner, transitions, label ? `${name} ${label}` : local);
@@ -2302,6 +2302,100 @@ function changedFraction(a, b, threshold = 12) {
   return changed / n;
 }
 
+// src/core/loadProgress.ts
+var STAGE_LABEL = {
+  assets: "LOADING ASSETS",
+  build: "BUILDING LAYERS",
+  sound: "MIXING SOUND",
+  frames: "PREPARING"
+};
+var ORDER = ["assets", "build", "sound", "frames"];
+var WEIGHT = { assets: 0.15, build: 0.6, sound: 0.2, frames: 0.05 };
+var YIELD_EVERY_MS = 50;
+function defaultYielder() {
+  if (typeof MessageChannel === "undefined") return new Promise((resolve) => setTimeout(resolve, 0));
+  return new Promise((resolve) => {
+    const ch = new MessageChannel();
+    ch.port1.onmessage = () => {
+      ch.port1.close();
+      resolve();
+    };
+    ch.port2.postMessage(0);
+  });
+}
+var LoadProgress = class {
+  constructor(_onChange, opts = {}) {
+    this._onChange = _onChange;
+    this._now = opts.now ?? (() => typeof performance !== "undefined" ? performance.now() : Date.now());
+    this._yielder = opts.yielder ?? defaultYielder;
+    this._hidden = opts.hidden ?? (() => typeof document !== "undefined" && document.hidden === true);
+    this._every = opts.yieldEveryMs ?? YIELD_EVERY_MS;
+    this._lastYield = this._now();
+  }
+  _onChange;
+  _stage = null;
+  _loaded = 0;
+  _total = 0;
+  _high = 0;
+  _started = 0;
+  _ms = { assets: 0, build: 0, sound: 0, frames: 0 };
+  _lastYield;
+  _now;
+  _yielder;
+  _every;
+  _hidden;
+  get progress() {
+    return this._high;
+  }
+  /** Start a stage with `total` items (0 = nothing to wait for). Every earlier stage is done. */
+  begin(stage, total) {
+    this._closeTiming();
+    this._stage = stage;
+    this._loaded = 0;
+    this._total = Math.max(0, total);
+    this._started = this._now();
+    this._emit();
+  }
+  tick(n = 1) {
+    if (!this._stage) return;
+    this._loaded = Math.min(this._total, this._loaded + n);
+    this._emit();
+  }
+  /** Everything is done: 1, whatever stage it was in. */
+  finish() {
+    this._closeTiming();
+    this._stage = this._stage ?? "frames";
+    this._loaded = this._total;
+    this._high = 1;
+    this._onChange({ stage: this._stage, loaded: this._loaded, total: this._total, progress: 1 });
+  }
+  /** Milliseconds each stage took (a stage never begun is 0). */
+  timings() {
+    return { ...this._ms };
+  }
+  /** Await one macrotask when 50 ms of work have gone by since the last time, so the page can paint the bar. Cheap when it is not due. */
+  async yieldIfDue() {
+    const t = this._now();
+    if (t - this._lastYield < this._every || this._hidden()) return;
+    await this._yielder();
+    this._lastYield = this._now();
+  }
+  _closeTiming() {
+    if (this._stage) this._ms[this._stage] += Math.max(0, this._now() - this._started);
+  }
+  _emit() {
+    const stage = this._stage;
+    let done = 0;
+    for (const s of ORDER) {
+      if (s === stage) break;
+      done += WEIGHT[s];
+    }
+    const within = this._total > 0 ? this._loaded / this._total : 1;
+    this._high = Math.min(1, Math.max(this._high, done + WEIGHT[stage] * within));
+    this._onChange({ stage, loaded: this._loaded, total: this._total, progress: this._high });
+  }
+};
+
 // src/core/loader.ts
 var FADE_FALLBACK_MS = 900;
 function resolveLoader(option, canvas) {
@@ -2327,15 +2421,31 @@ function dismissLoader(loader) {
       loader.remove();
     }
   };
-  loader.addEventListener("transitionend", remove, { once: true });
+  loader.addEventListener("transitionend", (e) => {
+    if (e.target === loader && e.propertyName === "opacity") remove();
+  });
   setTimeout(remove, FADE_FALLBACK_MS);
 }
 function failLoader(loader, message) {
   if (!loader) return;
   loader.setAttribute("data-state", "error");
+  for (const a of ["data-stage", "data-percent"]) loader.removeAttribute(a);
+  loader.querySelector(".pe-loader__bar")?.remove();
   if (loader.hasAttribute("data-label")) loader.setAttribute("data-label", message);
   loader.setAttribute("aria-busy", "false");
 }
+function setLoaderProgress(loader, state) {
+  if (!loader || loader.getAttribute("data-state") === "error" || loader.classList.contains("pe-loader--done")) return;
+  if (!loader.querySelector(".pe-loader__bar")) {
+    const bar = loader.ownerDocument.createElement("i");
+    bar.className = "pe-loader__bar";
+    bar.setAttribute("aria-hidden", "true");
+    loader.appendChild(bar);
+  }
+  loader.style.setProperty("--pe-progress", String(Math.round(state.progress * 1e3) / 1e3));
+  loader.setAttribute("data-stage", STAGE_LABEL[state.stage]);
+  loader.setAttribute("data-percent", String(Math.round(state.progress * 100)));
+}
 
 // src/core/Movie.ts
 PIXI.extensions.add(PIXI.CullerPlugin);
@@ -2415,6 +2525,11 @@ var Movie = class {
   get isReady() {
     return this._initState === "ready";
   }
+  /** Milliseconds `init()` spent in each stage (assets, build, sound, frames), or null before it has finished: `check` says which stage is the slow one. */
+  get loadStages() {
+    return this._loadStages;
+  }
+  _loadStages = null;
   /** True while the movie has sound but the browser keeps it silent until the viewer taps (iOS Safari, a page nobody has touched): a player can show "tap for sound"; the sound starts at a tap or key press that arrives while play() is pending, or at the next play() made from a tap. */
   get audioBlocked() {
     return audioIsBlocked(this._audioContext, !!this.audioBuffer);
@@ -2499,15 +2614,39 @@ var Movie = class {
       this.app.stage.addChild(root);
       this._rootContainer = root;
       const audioContext = this._ensureAudioContext();
-      await loadAssetBundle(options.assets ?? [], audioContext);
-      const rootShape = { width: this.width, height: this.height, duration: this.duration, frameRate: this.frameRate };
+      let loaderEl;
+      const lp = new LoadProgress((state) => {
+        if (loaderEl === void 0) loaderEl = resolveLoader(options.loader, options.canvas ?? this.app?.canvas ?? null);
+        setLoaderProgress(loaderEl, state);
+        this.emit("loadprogress", state);
+      }, { yieldEveryMs: globalThis.__peLoadYieldMs });
+      const assetCount = (options.assets ?? []).length;
+      lp.begin("assets", assetCount);
+      let assetsSeen = 0;
+      await loadAssetBundle(options.assets ?? [], audioContext, (p) => {
+        const n = Math.round(p * assetCount);
+        if (n > assetsSeen) {
+          lp.tick(n - assetsSeen);
+          assetsSeen = n;
+        }
+      });
+      const rootShape = {
+        width: this.width,
+        height: this.height,
+        duration: this.duration,
+        frameRate: this.frameRate,
+        onLayerBuilt: async () => {
+          lp.tick();
+          await lp.yieldIfDue();
+        }
+      };
       const seededComposition = options.composition ? {
         ...options.composition,
         width: options.composition.width ?? this.width,
         height: options.composition.height ?? this.height,
         duration: options.composition.duration ?? this.duration
       } : void 0;
-      await chunkDP37TTMO_cjs.ensureFilterLibrary(seededComposition);
+      await chunkEABL3UKJ_cjs.ensureFilterLibrary(seededComposition);
       const userComposition = seededComposition ? expandTransitions(seededComposition) : void 0;
       const rootSeqSpec = {
         type: "composition",
@@ -2517,7 +2656,8 @@ var Movie = class {
         ...userComposition
       };
       if (userComposition) carryTransitionWindows(userComposition, rootSeqSpec);
-      const composition = new chunkSY27HZC5_cjs.CompositionSequence(rootSeqSpec, null, rootShape);
+      const composition = new chunkH3RHEH5W_cjs.CompositionSequence(rootSeqSpec, null, rootShape);
+      lp.begin("build", countLayers(rootSeqSpec));
       await composition.build();
       this._rootSequence = composition;
       if (composition.target) root.addChild(composition.target);
@@ -2525,15 +2665,20 @@ var Movie = class {
       this._timeFilters = collectTimeFilters(composition);
       const audios = [];
       composition.collectAudio(audios, 0);
+      lp.begin("sound", audios.length);
       if (audios.length > 0) {
         this.audioBuffer = await mixdown(audios, this.duration, audioContext.sampleRate);
+        lp.tick(audios.length);
         if (this.audioBuffer) this._mixStats = limitMix(this.audioBuffer, audios);
       }
       this._audioSources = audios;
       this.timeline.progress(1).progress(0);
+      lp.begin("frames", 0);
       await this._awaitVideoFrames();
       this._updateSpace();
       this._renderNow();
+      lp.finish();
+      this._loadStages = lp.timings();
       this._initState = "ready";
       if (this._posterFrame !== null) await this._showPoster();
       this.emit("ready");
@@ -3173,6 +3318,15 @@ function collectVideoSequences(seq, out, clocks, clock = null) {
     collectVideoSequences(child, out, clocks, own);
   }
 }
+function countLayers(spec) {
+  let n = 0;
+  for (const s of spec?.sequences ?? []) {
+    const mask = s.mask;
+    n += 1 + countLayers(s);
+    for (const m of Array.isArray(mask) ? mask : [mask]) if (m && typeof m === "object" && "type" in m) n += 1 + countLayers(m);
+  }
+  return n;
+}
 var BY = ["chars", "words", "lines"];
 var ALIGN = ["left", "center", "right"];
 var widthOf = (text, style) => PIXI.CanvasTextMetrics.measureText(text, style).width;
@@ -3337,7 +3491,7 @@ function clamp(v, lo, hi) {
   return Math.max(lo, Math.min(hi, v));
 }
 function parseEase(name) {
-  chunkDP37TTMO_cjs.checkEase(name, "a preset");
+  chunkEABL3UKJ_cjs.checkEase(name, "a preset");
   return gsap.gsap.parseEase(name);
 }
 
@@ -3360,17 +3514,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 ?? chunkDP37TTMO_cjs.homeDistance(height, fov ?? chunkDP37TTMO_cjs.DEFAULT_FOV);
+  const fixedR = opts.radius ?? chunkEABL3UKJ_cjs.homeDistance(height, fov ?? chunkEABL3UKJ_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)) * chunkDP37TTMO_cjs.DEG;
+    const a = (start + degrees * easeFn(p)) * chunkEABL3UKJ_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 = chunkDP37TTMO_cjs.homeDistance(height, f);
+    const R = chunkEABL3UKJ_cjs.homeDistance(height, f);
     return { x: cx + R * Math.sin(a), z: R * Math.cos(a), fov: f };
   };
   const keyframes = [];
@@ -3425,7 +3579,7 @@ function particles(opts) {
   const round3 = (v) => Math.round(v * 1e6) / 1e6;
   const out = [];
   for (let i = 0; i < count; i++) {
-    const r = chunkDP37TTMO_cjs.random(seed * 1000003 + i * 7919 + 17);
+    const r = chunkEABL3UKJ_cjs.random(seed * 1000003 + i * 7919 + 17);
     const pick = ([a2, b]) => a2 + r() * (b - a2);
     const born = at + r() * emit;
     const lifetime = pick(life);
@@ -3438,7 +3592,7 @@ function particles(opts) {
     const turn = spin ? pick(spin) : 0;
     const startAngle = spin ? r() * 360 : 0;
     const swayAmp = sway?.amp ?? 0, swayFreq = sway?.freq ?? 1;
-    const n0 = sway ? chunkDP37TTMO_cjs.noise(0, seed * 1000003 + i) : 0;
+    const n0 = sway ? chunkEABL3UKJ_cjs.noise(0, seed * 1000003 + i) : 0;
     const at_ = (t) => {
       const axis = (p0, v0, acc) => {
         if (drag > 0) {
@@ -3447,7 +3601,7 @@ function particles(opts) {
         }
         return p0 + v0 * t + 0.5 * acc * t * t;
       };
-      const sw = sway ? swayAmp * (chunkDP37TTMO_cjs.noise(t * swayFreq, seed * 1000003 + i) - n0) : 0;
+      const sw = sway ? swayAmp * (chunkEABL3UKJ_cjs.noise(t * swayFreq, seed * 1000003 + i) - n0) : 0;
       return { x: axis(x0, vx, wind) + sw, y: axis(y0, vy, gravity) };
     };
     const kfs = [];
@@ -3509,7 +3663,7 @@ function followPath(opts) {
   if (steps > MAX_STEPS) throw new Error(`followPath(): ${steps} samples is too many (max ${MAX_STEPS}); lower frameRate or duration`);
   const segments = [];
   let total = 0;
-  for (const line of chunkDP37TTMO_cjs.flattenSvgPath(d)) {
+  for (const line of chunkEABL3UKJ_cjs.flattenSvgPath(d)) {
     const p = line.closed ? [...line.pts, line.pts[0], line.pts[1]] : line.pts;
     for (let i = 2; i < p.length; i += 2) {
       const len = Math.hypot(p[i] - p[i - 2], p[i + 1] - p[i - 1]);
@@ -3663,7 +3817,7 @@ function distances(n, from, grid, seed) {
   if (n === 0) return [];
   if (from === "random") {
     const order = Array.from({ length: n }, (_, i) => i);
-    const r = chunkDP37TTMO_cjs.random(seed);
+    const r = chunkEABL3UKJ_cjs.random(seed);
     for (let i = n - 1; i > 0; i--) {
       const j = Math.floor(r() * (i + 1));
       [order[i], order[j]] = [order[j], order[i]];
@@ -3725,7 +3879,7 @@ function wiggle(opts) {
         to[n] = p.around;
         return;
       }
-      const off = (chunkDP37TTMO_cjs.rand(seed * 7919 + pi * 104729 + s * 31 + 1) * 2 - 1) * p.amp;
+      const off = (chunkEABL3UKJ_cjs.rand(seed * 7919 + pi * 104729 + s * 31 + 1) * 2 - 1) * p.amp;
       to[n] = typeof p.around === "number" ? p.around + off : `(${p.around}) ${off < 0 ? "-" : "+"} ${Math.abs(off)}`;
     });
     out.push({ at: at + s * stepLen, to, duration: stepLen, ease });
@@ -4200,19 +4354,19 @@ function withFade(spec, opts) {
 
 Object.defineProperty(exports, "noise", {
   enumerable: true,
-  get: function () { return chunkDP37TTMO_cjs.noise; }
+  get: function () { return chunkEABL3UKJ_cjs.noise; }
 });
 Object.defineProperty(exports, "rand", {
   enumerable: true,
-  get: function () { return chunkDP37TTMO_cjs.rand; }
+  get: function () { return chunkEABL3UKJ_cjs.rand; }
 });
 Object.defineProperty(exports, "random", {
   enumerable: true,
-  get: function () { return chunkDP37TTMO_cjs.random; }
+  get: function () { return chunkEABL3UKJ_cjs.random; }
 });
 Object.defineProperty(exports, "registerSequenceType", {
   enumerable: true,
-  get: function () { return chunkDP37TTMO_cjs.registerSequenceType; }
+  get: function () { return chunkEABL3UKJ_cjs.registerSequenceType; }
 });
 exports.Movie = Movie;
 exports.animateText = animateText;