pixi-effects 0.26.0 → 0.26.1

package/dist/index.d.cts

@@ -1,7 +1,7 @@
-export { A as AudioInspectOptions, a as AudioReport, b as AudioSourceReport, C as ContactSheetOptions, F as FontReport, c as FrameEvent, I as InspectOptions, d as InspectReport, e as IssueGroup, L as LayerInfo, f as LoaderOption, M as MotionBlurOptions, g as MotionBlurSpec, h as Movie, i as MovieErrorEvent, j as MovieOptions, O as OnionSkinOptions, P as ProgressEvent, R as RenderOptions, k as ReviewOptions, l as ReviewReport, S as SnapshotOptions, m as SoundMeasure, n as StopEvent, o as StopImage, p as StopImagesOptions, T as TimelineData, q as TimelineHtmlOptions, r as TimelineRow, s as TimelineSvgOptions, t as TimelineTransition, V as VolumeEvent, u as dismissLoader, v as failLoader, w as resolveLoader } from './Movie-DXReF4-W.cjs';
-import { S as SequenceSpec, C as CompositionShape, I as ImageSequenceSpec, a as CameraSequenceSpec, K as Keyframe, T as TextSequenceSpec, M as MusicOptions, P as Props, b as TransitionSpec, c as CompositionSpec, d as SequenceCommon } from './types-CoT0ypcx.cjs';
-export { A as ArcShapeSpec, e as AssetSpec, f as AudioAssetSpec, g as AudioMusicSpec, h as AudioSequenceSpec, i as AudioSfxSpec, B as BlendModeName, j as ChromaKeyFilterSpec, k as CircleShapeSpec, l as CompositionSequenceSpec, m as CrossfadeTransition, n as CustomFilterSpec, D as DipTransition, o as DissolveTransition, E as EllipseShapeSpec, p as Expr, F as FilterSpec, G as GradientSpec, q as IrisTransition, L as LightSequenceSpec, r as LineShapeSpec, s as LumaTransition, t as MaskRefSpec, u as MatteRefSpec, v as MusicDrum, w as MusicDrums, x as MusicInstrument, y as MusicLevel, z as MusicTrack, N as NullSequenceSpec, H as PathShapeSpec, J as PolygonShapeSpec, O as PropValue, R as RectShapeSpec, Q as SfxKnobs, U as SfxOptions, V as SfxPreset, W as SfxVoice, X as ShaderSequenceSpec, Y as ShapeSequenceSpec, Z as SlideTransition, _ as Stop, $ as StopSpec, a0 as TransitionCommon, a1 as VideoSequenceSpec, a2 as WipeTransition, a3 as ZoomTransition, a4 as normalizeStops, a5 as pictureStops } from './types-CoT0ypcx.cjs';
-import { S as Sequence } from './Base-DHVKqA46.cjs';
+export { A as AudioInspectOptions, a as AudioReport, b as AudioSourceReport, C as ContactSheetOptions, F as FontReport, c as FrameEvent, I as InspectOptions, d as InspectReport, e as IssueGroup, L as LayerInfo, f as LoadProgressState, g as LoadStage, h as LoaderOption, M as MotionBlurOptions, i as MotionBlurSpec, j as Movie, k as MovieErrorEvent, l as MovieOptions, O as OnionSkinOptions, P as ProgressEvent, R as RenderOptions, m as ReviewOptions, n as ReviewReport, S as SnapshotOptions, o as SoundMeasure, p as StopEvent, q as StopImage, r as StopImagesOptions, T as TimelineData, s as TimelineHtmlOptions, t as TimelineRow, u as TimelineSvgOptions, v as TimelineTransition, V as VolumeEvent, w as dismissLoader, x as failLoader, y as resolveLoader } from './Movie-i05Oh9mJ.cjs';
+import { S as SequenceSpec, C as CompositionShape, I as ImageSequenceSpec, a as CameraSequenceSpec, K as Keyframe, T as TextSequenceSpec, M as MusicOptions, P as Props, b as TransitionSpec, c as CompositionSpec, d as SequenceCommon } from './types-DSGwN5w1.cjs';
+export { A as ArcShapeSpec, e as AssetSpec, f as AudioAssetSpec, g as AudioMusicSpec, h as AudioSequenceSpec, i as AudioSfxSpec, B as BlendModeName, j as ChromaKeyFilterSpec, k as CircleShapeSpec, l as CompositionSequenceSpec, m as CrossfadeTransition, n as CustomFilterSpec, D as DipTransition, o as DissolveTransition, E as EllipseShapeSpec, p as Expr, F as FilterSpec, G as GradientSpec, q as IrisTransition, L as LightSequenceSpec, r as LineShapeSpec, s as LumaTransition, t as MaskRefSpec, u as MatteRefSpec, v as MusicDrum, w as MusicDrums, x as MusicInstrument, y as MusicLevel, z as MusicTrack, N as NullSequenceSpec, H as PathShapeSpec, J as PolygonShapeSpec, O as PropValue, R as RectShapeSpec, Q as SfxKnobs, U as SfxOptions, V as SfxPreset, W as SfxVoice, X as ShaderSequenceSpec, Y as ShapeSequenceSpec, Z as SlideTransition, _ as Stop, $ as StopSpec, a0 as TransitionCommon, a1 as VideoSequenceSpec, a2 as WipeTransition, a3 as ZoomTransition, a4 as normalizeStops, a5 as pictureStops } from './types-DSGwN5w1.cjs';
+import { S as Sequence } from './Base-TbBhHPrG.cjs';
 import 'pixi.js';
 import 'gsap';
 

package/dist/index.d.ts

@@ -1,7 +1,7 @@
-export { A as AudioInspectOptions, a as AudioReport, b as AudioSourceReport, C as ContactSheetOptions, F as FontReport, c as FrameEvent, I as InspectOptions, d as InspectReport, e as IssueGroup, L as LayerInfo, f as LoaderOption, M as MotionBlurOptions, g as MotionBlurSpec, h as Movie, i as MovieErrorEvent, j as MovieOptions, O as OnionSkinOptions, P as ProgressEvent, R as RenderOptions, k as ReviewOptions, l as ReviewReport, S as SnapshotOptions, m as SoundMeasure, n as StopEvent, o as StopImage, p as StopImagesOptions, T as TimelineData, q as TimelineHtmlOptions, r as TimelineRow, s as TimelineSvgOptions, t as TimelineTransition, V as VolumeEvent, u as dismissLoader, v as failLoader, w as resolveLoader } from './Movie-DP5p1r4E.js';
-import { S as SequenceSpec, C as CompositionShape, I as ImageSequenceSpec, a as CameraSequenceSpec, K as Keyframe, T as TextSequenceSpec, M as MusicOptions, P as Props, b as TransitionSpec, c as CompositionSpec, d as SequenceCommon } from './types-CoT0ypcx.js';
-export { A as ArcShapeSpec, e as AssetSpec, f as AudioAssetSpec, g as AudioMusicSpec, h as AudioSequenceSpec, i as AudioSfxSpec, B as BlendModeName, j as ChromaKeyFilterSpec, k as CircleShapeSpec, l as CompositionSequenceSpec, m as CrossfadeTransition, n as CustomFilterSpec, D as DipTransition, o as DissolveTransition, E as EllipseShapeSpec, p as Expr, F as FilterSpec, G as GradientSpec, q as IrisTransition, L as LightSequenceSpec, r as LineShapeSpec, s as LumaTransition, t as MaskRefSpec, u as MatteRefSpec, v as MusicDrum, w as MusicDrums, x as MusicInstrument, y as MusicLevel, z as MusicTrack, N as NullSequenceSpec, H as PathShapeSpec, J as PolygonShapeSpec, O as PropValue, R as RectShapeSpec, Q as SfxKnobs, U as SfxOptions, V as SfxPreset, W as SfxVoice, X as ShaderSequenceSpec, Y as ShapeSequenceSpec, Z as SlideTransition, _ as Stop, $ as StopSpec, a0 as TransitionCommon, a1 as VideoSequenceSpec, a2 as WipeTransition, a3 as ZoomTransition, a4 as normalizeStops, a5 as pictureStops } from './types-CoT0ypcx.js';
-import { S as Sequence } from './Base-BgnRXbtJ.js';
+export { A as AudioInspectOptions, a as AudioReport, b as AudioSourceReport, C as ContactSheetOptions, F as FontReport, c as FrameEvent, I as InspectOptions, d as InspectReport, e as IssueGroup, L as LayerInfo, f as LoadProgressState, g as LoadStage, h as LoaderOption, M as MotionBlurOptions, i as MotionBlurSpec, j as Movie, k as MovieErrorEvent, l as MovieOptions, O as OnionSkinOptions, P as ProgressEvent, R as RenderOptions, m as ReviewOptions, n as ReviewReport, S as SnapshotOptions, o as SoundMeasure, p as StopEvent, q as StopImage, r as StopImagesOptions, T as TimelineData, s as TimelineHtmlOptions, t as TimelineRow, u as TimelineSvgOptions, v as TimelineTransition, V as VolumeEvent, w as dismissLoader, x as failLoader, y as resolveLoader } from './Movie-DVeDTdnc.js';
+import { S as SequenceSpec, C as CompositionShape, I as ImageSequenceSpec, a as CameraSequenceSpec, K as Keyframe, T as TextSequenceSpec, M as MusicOptions, P as Props, b as TransitionSpec, c as CompositionSpec, d as SequenceCommon } from './types-DSGwN5w1.js';
+export { A as ArcShapeSpec, e as AssetSpec, f as AudioAssetSpec, g as AudioMusicSpec, h as AudioSequenceSpec, i as AudioSfxSpec, B as BlendModeName, j as ChromaKeyFilterSpec, k as CircleShapeSpec, l as CompositionSequenceSpec, m as CrossfadeTransition, n as CustomFilterSpec, D as DipTransition, o as DissolveTransition, E as EllipseShapeSpec, p as Expr, F as FilterSpec, G as GradientSpec, q as IrisTransition, L as LightSequenceSpec, r as LineShapeSpec, s as LumaTransition, t as MaskRefSpec, u as MatteRefSpec, v as MusicDrum, w as MusicDrums, x as MusicInstrument, y as MusicLevel, z as MusicTrack, N as NullSequenceSpec, H as PathShapeSpec, J as PolygonShapeSpec, O as PropValue, R as RectShapeSpec, Q as SfxKnobs, U as SfxOptions, V as SfxPreset, W as SfxVoice, X as ShaderSequenceSpec, Y as ShapeSequenceSpec, Z as SlideTransition, _ as Stop, $ as StopSpec, a0 as TransitionCommon, a1 as VideoSequenceSpec, a2 as WipeTransition, a3 as ZoomTransition, a4 as normalizeStops, a5 as pictureStops } from './types-DSGwN5w1.js';
+import { S as Sequence } from './Base-CpdDs4HT.js';
 import 'pixi.js';
 import 'gsap';
 

package/dist/index.js

@@ -1,6 +1,6 @@
-import { CompositionSequence, maskSourceOf } from './chunk-XS6GSJCN.js';
-import { ensureFilterLibrary, homeDistance, DEFAULT_FOV, random, noise, flattenSvgPath, rand, DEG, timeRemapOf, contentLength, resolveAt, checkEase } from './chunk-PRZ4U6JN.js';
-export { noise, rand, random, registerSequenceType } from './chunk-PRZ4U6JN.js';
+import { CompositionSequence, maskSourceOf } from './chunk-YEVAUQ6Y.js';
+import { ensureFilterLibrary, homeDistance, DEFAULT_FOV, random, noise, flattenSvgPath, rand, DEG, timeRemapOf, contentLength, resolveAt, checkEase } from './chunk-JHJNEIDI.js';
+export { noise, rand, random, registerSequenceType } from './chunk-JHJNEIDI.js';
 import { usesAdvancedBlend, enableAdvancedBlend } from './chunk-AXZUKNXF.js';
 import { collectPropKeys } from './chunk-TLYTYBWX.js';
 import { warnUnknownOptions, suggestName } from './chunk-BXOCEZ4U.js';
@@ -60,11 +60,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 }));
   Assets.addBundle("pixi-effects", bundle);
-  return await Assets.loadBundle("pixi-effects");
+  return await Assets.loadBundle("pixi-effects", onProgress);
 }
 
 // src/core/audioRemap.ts
@@ -2282,6 +2282,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) {
@@ -2307,15 +2401,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
 extensions.add(CullerPlugin);
@@ -2395,6 +2505,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);
@@ -2479,8 +2594,32 @@ 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,
@@ -2498,6 +2637,7 @@ var Movie = class {
       };
       if (userComposition) carryTransitionWindows(userComposition, rootSeqSpec);
       const composition = new CompositionSequence(rootSeqSpec, null, rootShape);
+      lp.begin("build", countLayers(rootSeqSpec));
       await composition.build();
       this._rootSequence = composition;
       if (composition.target) root.addChild(composition.target);
@@ -2505,15 +2645,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");
@@ -3153,6 +3298,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) => CanvasTextMetrics.measureText(text, style).width;