pixi-effects 0.30.1 → 0.32.0

package/dist/{chunk-CRQFDY7E.js → chunk-FCMOREIS.js}

@@ -1,7 +1,7 @@
-import { CompositionSequence, maskSourceOf } from './chunk-A3Q3SDSH.js';
-import { createTimeline, lengthen, ensureFilterLibrary, checkEase, parseEase, homeDistance, DEFAULT_FOV, random, noise, flattenSvgPath, rand, DEG, timeRemapOf, contentLength, resolveAt } from './chunk-ZAXYPXKW.js';
-import { usesAdvancedBlend, enableAdvancedBlend } from './chunk-4KB3GUEK.js';
-import { collectPropKeys } from './chunk-RCVZX2JP.js';
+import { CompositionSequence, maskSourceOf } from './chunk-D5BFQVKL.js';
+import { EXPRESSION_NAMES, createTimeline, lengthen, ensureFilterLibrary, checkEase, parseEase, homeDistance, DEFAULT_FOV, random, noise, flattenSvgPath, rand, DEG, timeRemapOf, contentLength, resolveAt, spansMeta } from './chunk-AW5NPDE4.js';
+import { usesAdvancedBlend, enableAdvancedBlend } from './chunk-QFNS6BFL.js';
+import { collectPropKeys } from './chunk-C5BNHVKK.js';
 import { warnUnknownOptions, suggestName } from './chunk-BXOCEZ4U.js';
 import { extensions, CullerPlugin, Application, Container, Rectangle, Culler, CanvasTextMetrics, TextStyle, Assets, ExtensionType, Filter, Texture, UniformGroup, GpuProgram, GlProgram, defaultFilterVert } from 'pixi.js';
 import { Output, BufferTarget, CanvasSource, AudioBufferSource, Input, ALL_FORMATS, BlobSource, WavOutputFormat, Conversion, VideoSampleSink, OggOutputFormat, QUALITY_VERY_HIGH, QUALITY_HIGH, QUALITY_MEDIUM, QUALITY_LOW, QUALITY_VERY_LOW, MkvOutputFormat, WebMOutputFormat, MovOutputFormat, Mp4OutputFormat, canEncodeVideo, getFirstEncodableAudioCodec } from 'mediabunny';
@@ -1996,6 +1996,8 @@ var round = (n) => Math.round(n * 1e6) / 1e6;
 var family = (name) => name.replace(/\d+/g, "#");
 function detailOf(seq) {
   const s = seq.spec;
+  const spans = spansMeta.get(seq.spec)?.preview;
+  if (spans) return spans.length > 60 ? spans.slice(0, 57) + "\u2026" : spans;
   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`;
@@ -2171,6 +2173,124 @@ function sheetLayout(n, columns, cellW, srcW, srcH, labelH) {
   return { cols, rows, cellW, cellH, width: cols * cellW, height: rows * (cellH + labelH), positions };
 }
 
+// src/core/vars.ts
+var RESERVED_NAMES = ["w", "h", "W", "H", "GW", "GH", "t", "d", "T", "contain", "cover", "value", ...EXPRESSION_NAMES];
+var NAME = /^[A-Za-z_][A-Za-z0-9_]*$/;
+var isPlain = (v) => !!v && typeof v === "object" && (Object.getPrototypeOf(v) === Object.prototype || Object.getPrototypeOf(v) === null);
+function normalizeVars(raw, where, warn = (m) => console.warn(m)) {
+  if (raw === void 0) return {};
+  if (!isPlain(raw)) {
+    warn(`pixi-effects: ${where}: vars must be an object of names and values ({ title: 'NORD', shift: 40 }); ignored`);
+    return {};
+  }
+  const out = {};
+  for (const [name, value] of Object.entries(raw)) {
+    if (!NAME.test(name)) {
+      warn(`pixi-effects: ${where}: "${name}" is not a name for a variable (letters, digits and _, not starting with a digit); ignored`);
+      continue;
+    }
+    if (RESERVED_NAMES.includes(name)) {
+      warn(`pixi-effects: ${where}: "${name}" is reserved (an expression word, a function, PI or the {value} counter); choose another name; ignored`);
+      continue;
+    }
+    if (typeof value === "boolean") {
+      warn(`pixi-effects: ${where}: variable "${name}" is a boolean; write 0 or 1 (a variable is a number or a string); ignored`);
+      continue;
+    }
+    if (typeof value === "number" && Number.isFinite(value)) out[name] = value;
+    else if (typeof value === "string") out[name] = value;
+    else warn(`pixi-effects: ${where}: variable "${name}" must be a number or a string, got ${JSON.stringify(value)}; ignored`);
+  }
+  return out;
+}
+function numericVars(vars) {
+  const out = {};
+  for (const [k, v] of Object.entries(vars)) if (typeof v === "number") out[k] = v;
+  return out;
+}
+var TOKEN = /\{([A-Za-z_][A-Za-z0-9_]*)\}/g;
+function substitute(s, vars) {
+  return s.replace(TOKEN, (whole, name) => Object.prototype.hasOwnProperty.call(vars, name) ? String(vars[name]) : whole);
+}
+function applyVars(spec, vars) {
+  if (Object.keys(vars).length === 0) return spec;
+  const walk2 = (v) => {
+    if (typeof v === "string") return substitute(v, vars);
+    if (Array.isArray(v)) return v.map(walk2);
+    if (isPlain(v)) {
+      const o = {};
+      for (const [k, x] of Object.entries(v)) o[k] = walk2(x);
+      return o;
+    }
+    return v;
+  };
+  return walk2(spec);
+}
+var escapeRe = (s) => s.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+function lintVars(spec, vars) {
+  const declared = Object.keys(vars);
+  const strings = [];
+  const walk2 = (v) => {
+    if (typeof v === "string") strings.push(v);
+    else if (Array.isArray(v)) v.forEach(walk2);
+    else if (isPlain(v)) Object.values(v).forEach(walk2);
+  };
+  walk2(spec);
+  const out = [];
+  for (const name of declared) {
+    const word = new RegExp(`(?<![A-Za-z0-9_.])${escapeRe(name)}(?![A-Za-z0-9_])`);
+    if (!strings.some((s) => word.test(s))) out.push(`pixi-effects: vars: variable "${name}" is declared but nothing uses it (write {${name}} in a string, or "${name}" in an expression); a typo on one side?`);
+  }
+  const seen = /* @__PURE__ */ new Set();
+  for (const s of strings) {
+    for (const m of s.matchAll(TOKEN)) {
+      const name = m[1];
+      if (seen.has(name) || Object.prototype.hasOwnProperty.call(vars, name) || RESERVED_NAMES.includes(name) || declared.length === 0) continue;
+      seen.add(name);
+      const guess = suggestName(name, declared);
+      out.push(`pixi-effects: vars: {${name}} is not a declared variable${guess ? ` \u2014 did you mean "${guess}"?` : ` (declared: ${declared.join(", ")})`}`);
+    }
+  }
+  return out;
+}
+
+// src/core/mixCache.ts
+var ids = /* @__PURE__ */ new WeakMap();
+var nextId = 1;
+var idOf = (o) => {
+  let n = ids.get(o);
+  if (!n) {
+    n = nextId++;
+    ids.set(o, n);
+  }
+  return n;
+};
+function mixKey(audios, duration, sampleRate) {
+  const parts = [];
+  for (const a of audios) {
+    if (a.warp || a.sourceMap) return null;
+    const what = a.buffer ? `b${idOf(a.buffer)}` : a.synth ? `s${a.synth.key}` : null;
+    if (what === null) return null;
+    parts.push([what, a.loop, a.start, a.end, a.initialVolume, a.volumeKeyframes.map((k) => [k.time, k.value])]);
+  }
+  return JSON.stringify([duration, sampleRate, parts]);
+}
+var MixCache = class {
+  key = null;
+  buffer = null;
+  extra;
+  get(key) {
+    if (key === null || key !== this.key || !this.buffer) return null;
+    return { buffer: this.buffer, extra: this.extra };
+  }
+  /** Keep this mix for `key`; a null key (not comparable) keeps nothing. */
+  set(key, buffer, extra) {
+    this.key = key;
+    this.buffer = key === null ? null : buffer;
+    this.extra = extra;
+  }
+};
+
 // src/core/startWhenRunning.ts
 function startWhenRunning(ctx, start, gesture) {
   if (ctx.state === "running") {
@@ -2454,6 +2574,7 @@ var Movie = class {
   _quiet = 0;
   _volume = 1;
   _muted = false;
+  _loop = false;
   isPlaying = false;
   currentFrame = 0;
   totalFrames = 0;
@@ -2475,6 +2596,21 @@ var Movie = class {
   }
   _rootContainer = null;
   _raf = null;
+  /** The variables now, and the names that were declared (a `setVars` of any other name is refused). */
+  _vars = {};
+  _declared = /* @__PURE__ */ new Set();
+  /** The composition as the author wrote it (before `{name}` is replaced): a rebuild starts from it. */
+  _composition;
+  /** True once `resize()` was called: the size of the movie then replaces an explicit `width` / `height` of the composition. */
+  _resized = false;
+  _mixCache = new MixCache();
+  _rebuildRun = null;
+  _rebuildNext = null;
+  /** > 0 while a rebuild stops and restarts playback: `play` / `pause` are not announced then (a player's button must not flicker). */
+  _silent = 0;
+  /** render() / peek() in flight: a rebuild does not swap the composition under them. */
+  _busy = 0;
+  _idleWaiters = [];
   /** What went into the mix, and its peak before limiting — kept for inspectAudio(). */
   _audioSources = [];
   _mixStats = null;
@@ -2550,7 +2686,7 @@ var Movie = class {
     return this._audioContext;
   }
   async init(options = {}) {
-    warnUnknownOptions("movie.init()", options, ["width", "height", "duration", "frameRate", "background", "canvas", "assets", "composition", "poster", "motionBlur", "loader"]);
+    warnUnknownOptions("movie.init()", options, ["width", "height", "duration", "frameRate", "background", "canvas", "assets", "composition", "vars", "poster", "motionBlur", "loader", "loop"]);
     this._initState = "pending";
     try {
       this.width = options.width ?? 1920;
@@ -2561,7 +2697,14 @@ var Movie = class {
       const poster = normalizePoster(options.poster, this.duration, this.frameRate);
       this.poster = poster.seconds;
       this.motionBlur = resolveMotionBlur(options.motionBlur, "movie.init()");
-      this.stops = normalizeStops(options.composition?.stops, this.duration, this.frameRate);
+      this._loop = options.loop === true;
+      this._vars = normalizeVars(options.vars, "movie.init()");
+      this._declared = new Set(Object.keys(this._vars));
+      this._composition = options.composition;
+      this._resized = false;
+      for (const w of lintVars(options.composition, this._vars)) console.warn(w);
+      this._mixCache.set(null, null);
+      this.stops = normalizeStops(applyVars(options.composition, this._vars)?.stops, this.duration, this.frameRate);
       this._posterFrame = poster.frame;
       this.background = options.background ?? "#000000";
       this.timeline = createTimeline({ paused: true, defaults: { ease: "none" } });
@@ -2584,7 +2727,6 @@ var Movie = class {
         this.app = new Application();
         await this.app.init({ ...baseAppOptions, preference: "webgl" });
       }
-      if (usesAdvancedBlend(options.composition)) await enableAdvancedBlend(this.app.renderer);
       const root = new Container();
       root.cullable = true;
       root.cullableChildren = true;
@@ -2608,51 +2750,13 @@ var Movie = class {
           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 ensureFilterLibrary(seededComposition);
-      const userComposition = seededComposition ? expandTransitions(seededComposition) : void 0;
-      const rootSeqSpec = {
-        type: "composition",
-        width: this.width,
-        height: this.height,
-        duration: this.duration,
-        ...userComposition
-      };
-      if (userComposition) carryTransitionWindows(userComposition, rootSeqSpec);
-      const composition = new CompositionSequence(rootSeqSpec, null, rootShape);
-      lp.begin("build", countLayers(rootSeqSpec));
-      await composition.build();
+      const composition = await this._construct(this._composition, this._vars, this.width, this.height, lp);
       this._rootSequence = composition;
       if (composition.target) root.addChild(composition.target);
       composition.bindTimeline(this.timeline);
       this._timeFilters = collectTimeFilters(composition);
-      const audios = [];
-      composition.collectAudio(audios, 0);
       lp.begin("sound", 1);
-      if (audios.length > 0) {
-        this.audioBuffer = await mixdown(audios, this.duration, audioContext.sampleRate, async (done) => {
-          lp.part(done);
-          await lp.yieldIfDue();
-        });
-        lp.tick();
-        if (this.audioBuffer) this._mixStats = limitMix(this.audioBuffer, audios);
-      }
-      this._audioSources = audios;
+      await this._mixSound(composition, audioContext, lp);
       lp.begin("frames", 0);
       this.timeline.time(this._timeOf(0));
       await this._awaitVideoFrames();
@@ -2675,6 +2779,254 @@ var Movie = class {
       throw err;
     }
   }
+  /**
+   * Build the composition tree for these variables and this size, off stage: `{name}` replaced, the root shape (with the numeric variables for the
+   * expressions), transitions expanded, every layer built. Used by `init` and by `rebuild`.
+   */
+  async _construct(composition, vars, width, height, lp, sizeWins = this._resized) {
+    const spec = applyVars(composition, vars);
+    const rootShape = {
+      width,
+      height,
+      duration: this.duration,
+      frameRate: this.frameRate,
+      vars: numericVars(vars),
+      ...lp ? { onLayerBuilt: async () => {
+        lp.tick();
+        await lp.yieldIfDue();
+      } } : {}
+    };
+    const seededComposition = spec ? {
+      ...spec,
+      width: sizeWins ? width : spec.width ?? width,
+      height: sizeWins ? height : spec.height ?? height,
+      duration: spec.duration ?? this.duration
+    } : void 0;
+    await ensureFilterLibrary(seededComposition);
+    if (usesAdvancedBlend(seededComposition)) await enableAdvancedBlend(this.app.renderer);
+    const userComposition = seededComposition ? expandTransitions(seededComposition) : void 0;
+    const rootSeqSpec = {
+      type: "composition",
+      width,
+      height,
+      duration: this.duration,
+      ...userComposition
+    };
+    if (userComposition) carryTransitionWindows(userComposition, rootSeqSpec);
+    const sequence = new CompositionSequence(rootSeqSpec, null, rootShape);
+    lp?.begin("build", countLayers(rootSeqSpec));
+    try {
+      await sequence.build();
+    } catch (err) {
+      safeRun(() => sequence.destroy());
+      throw err;
+    }
+    return sequence;
+  }
+  /** Make the sound of a built composition: the same mix as last time when the sounds are the same (`'reused'`), else mix it. */
+  async _mixSound(sequence, audioContext, lp) {
+    const audios = [];
+    sequence.collectAudio(audios, 0);
+    let status = "none";
+    if (audios.length === 0) {
+      this.audioBuffer = null;
+      this._mixStats = null;
+      this._mixCache.set(null, null);
+    } else {
+      const key = mixKey(audios, this.duration, audioContext.sampleRate);
+      const hit = this._mixCache.get(key);
+      if (hit) {
+        this.audioBuffer = hit.buffer;
+        this._mixStats = hit.extra;
+        status = "reused";
+      } else {
+        this.audioBuffer = await mixdown(audios, this.duration, audioContext.sampleRate, lp ? async (done) => {
+          lp.part(done);
+          await lp.yieldIfDue();
+        } : void 0);
+        this._mixStats = this.audioBuffer ? limitMix(this.audioBuffer, audios) : null;
+        this._mixCache.set(key, this.audioBuffer, this._mixStats);
+        status = "mixed";
+      }
+      lp?.tick();
+    }
+    this._audioSources = audios;
+    return status;
+  }
+  /** The variables now (a copy; change them with `setVars()`). */
+  get vars() {
+    return { ...this._vars };
+  }
+  /**
+   * Change variables and rebuild at the same time. Only the declared names (`movie.init({ vars })`) are accepted; another name says which one it
+   * looks like and is ignored. Values it already has change nothing: no rebuild (`unchanged: true`).
+   */
+  async setVars(changes) {
+    this._requireReady("setVars");
+    return this.rebuild({ vars: changes }, "vars");
+  }
+  /** Make the movie `width` x `height` pixels (the canvas, and `W` / `H` / `GW` / `GH` in every expression) and rebuild at the same time. */
+  async resize(width, height) {
+    this._requireReady("resize");
+    return this.rebuild({ width, height }, "resize");
+  }
+  /**
+   * Build the composition again, with what `change` replaces (variables, the composition, the size), and put the movie back where it was: the
+   * same frame, playing or not, the poster if that was shown. The new composition is built first: when that fails the old one stays, `error` is
+   * emitted and the promise rejects. The sound is mixed again only when it changed (`audio: 'reused'` otherwise). Calls that arrive while a
+   * rebuild runs are joined into one more rebuild (the latest values win), so a slider can call it on every move.
+   */
+  async rebuild(change = {}, reason = "rebuild") {
+    this._requireReady("rebuild");
+    warnUnknownOptions("movie.rebuild()", change, ["composition", "vars", "width", "height"]);
+    if (this._rebuildRun) {
+      if (!this._rebuildNext) {
+        let resolve, reject;
+        const promise = new Promise((res, rej) => {
+          resolve = res;
+          reject = rej;
+        });
+        this._rebuildNext = { change: {}, reason, promise, resolve, reject };
+      }
+      const next = this._rebuildNext;
+      next.change = { ...next.change, ...change, vars: { ...next.change.vars ?? {}, ...change.vars ?? {} } };
+      if (reason !== "vars") next.reason = reason;
+      return next.promise;
+    }
+    return this._runRebuild(change, reason);
+  }
+  _runRebuild(change, reason) {
+    const run = this._doRebuild(change, reason);
+    this._rebuildRun = run;
+    const settled = () => {
+      if (this._rebuildRun === run) this._rebuildRun = null;
+      const next = this._rebuildNext;
+      if (next && this._initState === "ready") {
+        this._rebuildNext = null;
+        this._runRebuild(next.change, next.reason).then(next.resolve, next.reject);
+      } else if (next) {
+        this._rebuildNext = null;
+        next.reject(new Error("pixi-effects: the movie was destroyed before the rebuild could run"));
+      }
+    };
+    run.then(settled, settled);
+    return run;
+  }
+  async _doRebuild(change, reason) {
+    const started = performance.now();
+    const root = this._rootContainer, app = this.app;
+    if (!root || !app) throw new Error("pixi-effects: movie.rebuild() needs a ready movie \u2014 await movie.init(...) first");
+    const who = `movie.${reason === "vars" ? "setVars" : "rebuild"}()`;
+    let sequence = null;
+    const alive = () => {
+      if (this._initState !== "ready") throw new Error("pixi-effects: the movie was destroyed while it was being rebuilt");
+    };
+    try {
+      const vars = { ...this._vars };
+      let changed = false;
+      if (change.vars !== void 0) {
+        const given = normalizeVars(change.vars, who);
+        for (const [name, value] of Object.entries(given)) {
+          if (!this._declared.has(name)) {
+            const guess = suggestName(name, [...this._declared]);
+            console.warn(`pixi-effects: ${who}: "${name}" is not a declared variable${guess ? ` \u2014 did you mean "${guess}"?` : ""} (declared in movie.init({ vars }): ${[...this._declared].join(", ") || "none"}); ignored`);
+            continue;
+          }
+          if (vars[name] !== value) {
+            vars[name] = value;
+            changed = true;
+          }
+        }
+      }
+      for (const [k, v] of [["width", change.width], ["height", change.height]]) {
+        if (v !== void 0 && !(Number.isFinite(v) && v >= 1)) throw new Error(`pixi-effects: movie.rebuild(): ${k} must be a number of pixels (1 or more), got ${JSON.stringify(v)}`);
+      }
+      const width = change.width ?? this.width, height = change.height ?? this.height;
+      const sizeChanged = width !== this.width || height !== this.height;
+      const composition = change.composition ?? this._composition;
+      if (change.composition !== void 0) for (const w of lintVars(change.composition, vars)) console.warn(w);
+      changed = changed || sizeChanged || change.composition !== void 0 || reason === "rebuild";
+      if (!changed) return { reason, ms: 0, audio: "none", frame: this.currentFrame, playing: this.isPlaying, unchanged: true };
+      sequence = await this._construct(composition, vars, width, height, void 0, this._resized || sizeChanged);
+      alive();
+      const timeline = createTimeline({ paused: true, defaults: { ease: "none" } });
+      lengthen(timeline, this.duration);
+      sequence.bindTimeline(timeline);
+      const hadSound = this.audioBuffer !== null;
+      const audio = await this._mixSound(sequence, this._ensureAudioContext());
+      const soundChanged = audio === "mixed" || audio === "none" && hadSound;
+      while (this._busy > 0) {
+        await new Promise((r) => this._idleWaiters.push(r));
+      }
+      alive();
+      const wasPlaying = this.isPlaying, frame = this.currentFrame, wasAtPoster = this._atPoster;
+      const oldSize = { w: this.width, h: this.height }, oldResized = this._resized;
+      const goOn = wasPlaying && !soundChanged;
+      this._silent++;
+      try {
+        if (goOn) this._cancelUntil();
+        else this.pause();
+        if (sizeChanged) {
+          try {
+            this.width = width;
+            this.height = height;
+            this._resized = true;
+            app.renderer.resize(width, height);
+            root.cullArea = new Rectangle(0, 0, width, height);
+          } catch (e) {
+            this.width = oldSize.w;
+            this.height = oldSize.h;
+            this._resized = oldResized;
+            safeRun(() => app.renderer.resize(oldSize.w, oldSize.h));
+            root.cullArea = new Rectangle(0, 0, oldSize.w, oldSize.h);
+            if (wasPlaying && !goOn) this.play();
+            throw e;
+          }
+        }
+        const old = this._rootSequence, oldTimeline = this.timeline;
+        if (old?.target) root.removeChild(old.target);
+        if (sequence.target) root.addChild(sequence.target);
+        this._rootSequence = sequence;
+        this.timeline = timeline;
+        this._timeFilters = collectTimeFilters(sequence);
+        const unmute = muteBoundTextureWarning();
+        try {
+          safeRun(() => old?.destroy());
+        } finally {
+          unmute();
+        }
+        safeRun(() => oldTimeline?.kill());
+        this._vars = vars;
+        this._composition = composition;
+        this.stops = normalizeStops(applyVars(composition, vars)?.stops, this.duration, this.frameRate);
+        sequence = null;
+      } finally {
+        this._silent--;
+      }
+      try {
+        if (wasAtPoster) await this._showPoster();
+        else await this._quietly(() => this.gotoFrame(frame, true));
+      } catch (e) {
+        console.warn("pixi-effects: could not draw the frame after a rebuild:", e);
+        this._emitError("playback", e);
+      }
+      if (wasPlaying && !goOn && this._initState === "ready" && !this.isPlaying) {
+        this._silent++;
+        try {
+          this.play();
+        } finally {
+          this._silent--;
+        }
+      }
+      const report = { reason, ms: Math.round((performance.now() - started) * 10) / 10, audio, frame, playing: wasPlaying };
+      this.emit("rebuilt", report);
+      return report;
+    } catch (err) {
+      if (sequence) safeRun(() => sequence.destroy());
+      this._emitError("rebuild", err);
+      throw err;
+    }
+  }
   async gotoFrame(frame, force = false) {
     if (this._initState !== "ready") return;
     this._cancelUntil();
@@ -2987,13 +3339,30 @@ var Movie = class {
    */
   async peek(fn) {
     this._requireReady("peek");
-    this.pause();
-    const back = this.currentFrame, wasAtPoster = this._atPoster;
+    return this._exclusive(async () => {
+      this.pause();
+      const back = this.currentFrame, wasAtPoster = this._atPoster;
+      try {
+        return await this._quietly(fn);
+      } finally {
+        if (wasAtPoster) await this._showPoster();
+        else await this._quietly(() => this.gotoFrame(back, true));
+      }
+    });
+  }
+  /** Run `fn` as the only thing that moves the composition: waits for a rebuild in flight, and holds the next one's swap until `fn` is done. */
+  async _exclusive(fn) {
+    while (this._rebuildRun) await this._rebuildRun.catch(() => {
+    });
+    this._busy++;
     try {
-      return await this._quietly(fn);
+      return await fn();
     } finally {
-      if (wasAtPoster) await this._showPoster();
-      else await this._quietly(() => this.gotoFrame(back, true));
+      if (--this._busy === 0) {
+        const waiting = this._idleWaiters;
+        this._idleWaiters = [];
+        waiting.forEach((w) => w());
+      }
     }
   }
   _settleUntil(landed) {
@@ -3027,6 +3396,7 @@ var Movie = class {
     if (this.currentFrame >= this.totalFrames) this.currentFrame = 0;
     const wasPlaying = this.isPlaying;
     this.isPlaying = true;
+    const startFrame = this.currentFrame;
     const startTime = performance.now() - this.currentFrame / this.frameRate * 1e3;
     let inFlight = false;
     const tick = (time) => {
@@ -3036,7 +3406,7 @@ var Movie = class {
         return;
       }
       const elapsed = (time - startTime) / 1e3;
-      const frame = Math.floor(elapsed * this.frameRate);
+      const frame = Math.max(startFrame, Math.floor(elapsed * this.frameRate));
       if (this._until !== null && frame >= this._until) {
         void this._arriveUntil();
         return;
@@ -3050,6 +3420,18 @@ var Movie = class {
           inFlight = false;
         });
         this._raf = requestAnimationFrame(tick);
+      } else if (this._loop && this._untilWaiters.length === 0) {
+        this._silent++;
+        try {
+          this.pause();
+          this._goto(0).catch((err) => {
+            console.warn("pixi-effects: gotoFrame failed at the loop:", err);
+            this._emitError("playback", err);
+          });
+          this.play();
+        } finally {
+          this._silent--;
+        }
       } else {
         const toEnd = this._untilWaiters;
         this._untilWaiters = [];
@@ -3078,7 +3460,7 @@ var Movie = class {
         this.audioSource.start(0, Math.min(this.currentFrame / this.frameRate, buffer.duration));
       }, typeof window !== "undefined" ? window : void 0);
     }
-    if (!wasPlaying) this.emit("play");
+    if (!wasPlaying && !this._silent) this.emit("play");
   }
   pause() {
     const wasPlaying = this.isPlaying;
@@ -3101,7 +3483,7 @@ var Movie = class {
       this.gainNode.disconnect();
       this.gainNode = null;
     }
-    if (wasPlaying) this.emit("pause");
+    if (wasPlaying && !this._silent) this.emit("pause");
     this._cancelUntil();
   }
   set volume(v) {
@@ -3127,10 +3509,23 @@ var Movie = class {
     this.muted = !this.muted;
     return this.muted;
   }
+  /**
+   * At the end of an ordinary `play()` the movie goes back to the start and plays on (no `ended`, no `pause` / `play` events at the wrap; the sound
+   * starts again). Default false. `playUntil()` and `render()` ignore it. Can be changed at any time; `loopchange` says so.
+   */
+  set loop(v) {
+    const next = !!v;
+    if (next === this._loop) return;
+    this._loop = next;
+    this.emit("loopchange", { loop: next });
+  }
+  get loop() {
+    return this._loop;
+  }
   async render(options) {
     warnUnknownOptions("movie.render()", options, ["format", "video", "audio", "motionBlur", "range", "scale", "draft"]);
     try {
-      return await this._quietly(() => exportFrames(this, options));
+      return await this._exclusive(() => this._quietly(() => exportFrames(this, options)));
     } catch (err) {
       this._emitError("render", err);
       throw err;
@@ -3148,6 +3543,7 @@ var Movie = class {
     this.audioBuffer = null;
     this._audioSources = [];
     this._mixStats = null;
+    this._mixCache.set(null, null);
     safeRun(() => this._audioContext?.close().catch(() => {
     }));
     this._audioContext = null;
@@ -3155,6 +3551,17 @@ var Movie = class {
   }
 };
 var END_MARGIN = 1e-4;
+function muteBoundTextureWarning() {
+  const original = console.warn;
+  const ours = (...args) => {
+    if (args.some((a) => /destroyed while still bound/.test(String(a)))) return;
+    original.apply(console, args);
+  };
+  console.warn = ours;
+  return () => {
+    if (console.warn === ours) console.warn = original;
+  };
+}
 var clampFrame = (f, last) => Math.max(0, Math.min(Math.round(f), last));
 function encodeCanvas(canvas, type, as, quality) {
   if (as === "dataURL") return Promise.resolve(canvas.toDataURL(type, quality));
@@ -3183,6 +3590,8 @@ function countLayers(spec) {
   for (const s of spec?.sequences ?? []) {
     const mask = s.mask;
     n += 1 + countLayers(s);
+    const spans = s.spans;
+    if (Array.isArray(spans)) n += spans.length;
     const src = maskSourceOf(mask);
     if (src.kind === "inline") n += 1 + countLayers(src.spec);
   }
@@ -4178,5 +4587,5 @@ function withFade(spec, opts) {
 }
 
 export { Movie, animateText, audioEnvelope, bpmEnvelope, cameraPath, computeEnvelope, dismissLoader, failLoader, followPath, kenBurns, measureText, musicBuffer, musicEnvelope, musicEvents, orbit, parseEase2 as parseEase, particles, react, resolveLoader, splitText, stagger, wiggle, withFade };
-//# sourceMappingURL=chunk-CRQFDY7E.js.map
-//# sourceMappingURL=chunk-CRQFDY7E.js.map
+//# sourceMappingURL=chunk-FCMOREIS.js.map
+//# sourceMappingURL=chunk-FCMOREIS.js.map