pixi-effects 0.8.0 → 0.9.0

package/dist/index.d.cts

@@ -1,4 +1,4 @@
-export { A as AudioInspectOptions, a as AudioReport, b as AudioSourceReport, C as ContactSheetOptions, F as FrameEvent, I as InspectOptions, c as InspectReport, L as LayerInfo, M as Movie, d as MovieErrorEvent, e as MovieOptions, P as ProgressEvent, R as RenderOptions, S as SnapshotOptions, f as SoundMeasure, T as TimelineData, g as TimelineHtmlOptions, h as TimelineRow, i as TimelineSvgOptions, j as TimelineTransition, V as VolumeEvent } from './Movie-CQOhUmko.cjs';
+export { A as AudioInspectOptions, a as AudioReport, b as AudioSourceReport, C as ContactSheetOptions, F as FrameEvent, I as InspectOptions, c as InspectReport, L as LayerInfo, M as Movie, d as MovieErrorEvent, e as MovieOptions, P as ProgressEvent, R as RenderOptions, S as SnapshotOptions, f as SoundMeasure, T as TimelineData, g as TimelineHtmlOptions, h as TimelineRow, i as TimelineSvgOptions, j as TimelineTransition, V as VolumeEvent } from './Movie-qGHp15c_.cjs';
 import { S as Sequence } from './Base-CSIulyIq.cjs';
 import { S as SequenceSpec, C as CompositionShape, I as ImageSequenceSpec, a as CameraSequenceSpec, b as SequenceCommon } from './types-oJijbn-K.cjs';
 export { A as ArcShapeSpec, c as AssetSpec, d as AudioAssetSpec, e as AudioSequenceSpec, f as AudioSfxSpec, g as ChromaKeyFilterSpec, h as CircleShapeSpec, i as CompositionSequenceSpec, j as CompositionSpec, k as CrossfadeTransition, l as CustomFilterSpec, D as DipTransition, m as DissolveTransition, E as EllipseShapeSpec, n as Expr, F as FilterSpec, G as GradientSpec, o as IrisTransition, K as Keyframe, L as LineShapeSpec, P as PathShapeSpec, p as PolygonShapeSpec, q as PropValue, r as Props, R as RectShapeSpec, s as SfxKnobs, t as SfxOptions, u as SfxPreset, v as SfxVoice, w as ShapeSequenceSpec, x as SlideTransition, T as TextSequenceSpec, y as TransitionCommon, z as TransitionSpec, V as VideoSequenceSpec, W as WipeTransition, Z as ZoomTransition } from './types-oJijbn-K.cjs';

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-export { A as AudioInspectOptions, a as AudioReport, b as AudioSourceReport, C as ContactSheetOptions, F as FrameEvent, I as InspectOptions, c as InspectReport, L as LayerInfo, M as Movie, d as MovieErrorEvent, e as MovieOptions, P as ProgressEvent, R as RenderOptions, S as SnapshotOptions, f as SoundMeasure, T as TimelineData, g as TimelineHtmlOptions, h as TimelineRow, i as TimelineSvgOptions, j as TimelineTransition, V as VolumeEvent } from './Movie-HF3pSGjQ.js';
+export { A as AudioInspectOptions, a as AudioReport, b as AudioSourceReport, C as ContactSheetOptions, F as FrameEvent, I as InspectOptions, c as InspectReport, L as LayerInfo, M as Movie, d as MovieErrorEvent, e as MovieOptions, P as ProgressEvent, R as RenderOptions, S as SnapshotOptions, f as SoundMeasure, T as TimelineData, g as TimelineHtmlOptions, h as TimelineRow, i as TimelineSvgOptions, j as TimelineTransition, V as VolumeEvent } from './Movie-QMlFyHkf.js';
 import { S as Sequence } from './Base-DVgwyIUj.js';
 import { S as SequenceSpec, C as CompositionShape, I as ImageSequenceSpec, a as CameraSequenceSpec, b as SequenceCommon } from './types-oJijbn-K.js';
 export { A as ArcShapeSpec, c as AssetSpec, d as AudioAssetSpec, e as AudioSequenceSpec, f as AudioSfxSpec, g as ChromaKeyFilterSpec, h as CircleShapeSpec, i as CompositionSequenceSpec, j as CompositionSpec, k as CrossfadeTransition, l as CustomFilterSpec, D as DipTransition, m as DissolveTransition, E as EllipseShapeSpec, n as Expr, F as FilterSpec, G as GradientSpec, o as IrisTransition, K as Keyframe, L as LineShapeSpec, P as PathShapeSpec, p as PolygonShapeSpec, q as PropValue, r as Props, R as RectShapeSpec, s as SfxKnobs, t as SfxOptions, u as SfxPreset, v as SfxVoice, w as ShapeSequenceSpec, x as SlideTransition, T as TextSequenceSpec, y as TransitionCommon, z as TransitionSpec, V as VideoSequenceSpec, W as WipeTransition, Z as ZoomTransition } from './types-oJijbn-K.js';

package/dist/index.js

@@ -1429,6 +1429,21 @@ function startWhenRunning(ctx, start, gesture) {
 }
 var GESTURES = ["pointerdown", "mousedown", "touchend", "keydown"];
 
+// src/core/poster.ts
+function normalizePoster(poster, duration, frameRate) {
+  if (poster === void 0 || poster === null) return { seconds: null, frame: null };
+  if (typeof poster !== "number" || !Number.isFinite(poster)) {
+    console.warn(`pixi-effects: movie.init({ poster }): ${JSON.stringify(poster)} is not a time in seconds; ignored`);
+    return { seconds: null, frame: null };
+  }
+  let seconds = poster < 0 ? Math.max(0, duration + poster) : poster;
+  if (seconds > duration) {
+    console.warn(`pixi-effects: movie.init({ poster }): the poster time ${poster} s is past the end of the movie (${duration} s); using the last frame`);
+    seconds = duration;
+  }
+  return { seconds, frame: Math.round(seconds * frameRate) };
+}
+
 // src/core/Movie.ts
 extensions.add(CullerPlugin);
 gsap.registerPlugin(PixiPlugin);
@@ -1442,6 +1457,11 @@ var Movie = class {
   audioSource = null;
   gainNode = null;
   _cancelAudioStart = null;
+  /** The poster time in seconds (`movie.init({ poster })`), or null. */
+  poster = null;
+  _posterFrame = null;
+  /** The canvas shows the poster picture while the playhead is still at frame 0 (like `<video poster>`): the first seek or play replaces it. */
+  _atPoster = false;
   /** > 0 while the movie moves its own playhead (playback, render, snapshot, contactSheet): those are not the seeks `seeking` / `seeked` report. */
   _quiet = 0;
   _volume = 1;
@@ -1485,6 +1505,36 @@ var Movie = class {
   get isReady() {
     return this._initState === "ready";
   }
+  /** The poster time as a frame number, or null. */
+  get posterFrame() {
+    return this._posterFrame;
+  }
+  /** Draw the poster frame on the canvas and leave the playhead where it is (frame 0): the picture before the movie plays. */
+  async _showPoster() {
+    if (this._posterFrame === null || !this.timeline) return;
+    const back = this.currentFrame;
+    this.currentFrame = this._posterFrame;
+    try {
+      this.timeline.time(this._posterFrame / this.frameRate);
+      await this._awaitVideoFrames();
+      this._updateSpace();
+      this._renderNow();
+    } finally {
+      this.currentFrame = back;
+    }
+    this._atPoster = true;
+  }
+  async posterImage(opts = {}) {
+    this._requireReady("posterImage");
+    const back = this.currentFrame, wasAtPoster = this._atPoster;
+    try {
+      return await this.snapshot(this._posterFrame ?? 0, opts);
+    } finally {
+      this.currentFrame = back;
+      if (wasAtPoster) await this._showPoster();
+      else await this._quietly(() => this.gotoFrame(back, true));
+    }
+  }
   _ensureAudioContext() {
     if (!this._audioContext) {
       const Ctx = window.AudioContext ?? window.webkitAudioContext;
@@ -1493,7 +1543,7 @@ var Movie = class {
     return this._audioContext;
   }
   async init(options = {}) {
-    warnUnknownOptions("movie.init()", options, ["width", "height", "duration", "frameRate", "background", "canvas", "assets", "composition"]);
+    warnUnknownOptions("movie.init()", options, ["width", "height", "duration", "frameRate", "background", "canvas", "assets", "composition", "poster"]);
     this._initState = "pending";
     try {
       this.width = options.width ?? 1920;
@@ -1501,6 +1551,9 @@ var Movie = class {
       this.duration = options.duration ?? 10;
       this.frameRate = options.frameRate ?? 30;
       this.totalFrames = Math.round(this.duration * this.frameRate);
+      const poster = normalizePoster(options.poster, this.duration, this.frameRate);
+      this.poster = poster.seconds;
+      this._posterFrame = poster.frame;
       this.background = options.background ?? "#000000";
       this.timeline = gsap.timeline({ paused: true, defaults: { ease: "none" } });
       this.timeline.add(gsap.to({}, { duration: this.duration }));
@@ -1564,6 +1617,7 @@ var Movie = class {
       this._updateSpace();
       this._renderNow();
       this._initState = "ready";
+      if (this._posterFrame !== null) await this._showPoster();
       this.emit("ready");
     } catch (err) {
       try {
@@ -1577,7 +1631,7 @@ var Movie = class {
   }
   async gotoFrame(frame, force = false) {
     if (this._initState !== "ready") return;
-    if (!force && this.currentFrame === frame) return;
+    if (!force && !this._atPoster && this.currentFrame === frame) return;
     if (this._quiet > 0) return this._goto(frame);
     const target = Math.max(0, Math.min(frame, this.totalFrames));
     this.emit("seeking", { frame: target, totalFrames: this.totalFrames });
@@ -1597,6 +1651,7 @@ var Movie = class {
     this.emit("error", { where, message: error instanceof Error ? error.message : String(error), error });
   }
   async _goto(frame) {
+    this._atPoster = false;
     this.currentFrame = Math.max(0, Math.min(frame, this.totalFrames));
     this.timeline.time(this.currentFrame / this.frameRate);
     await this._awaitVideoFrames();
@@ -1638,7 +1693,7 @@ var Movie = class {
     const g = sheet.getContext("2d");
     g.fillStyle = "#10131c";
     g.fillRect(0, 0, L.width, L.height);
-    const back = this.currentFrame;
+    const back = this.currentFrame, wasAtPoster = this._atPoster;
     try {
       for (let i = 0; i < frames.length; i++) {
         const f = frames[i];
@@ -1651,7 +1706,8 @@ var Movie = class {
         g.fillText(`frame ${f}  \xB7  ${(f / this.frameRate).toFixed(2)}s`, x + 8, y + LABEL_H / 2);
       }
     } finally {
-      await this._quietly(() => this.gotoFrame(back, true));
+      if (wasAtPoster) await this._showPoster();
+      else await this._quietly(() => this.gotoFrame(back, true));
     }
     return encodeCanvas(sheet, "image/png", opts.as ?? "blob");
   }