pixi-effects 0.34.0 → 0.36.0

package/dist/Controller.d.ts

@@ -1,6 +1,6 @@
-import { l as Movie } from './Movie-f0tQG9y5.js';
+import { l as Movie } from './Movie-D5WFfZdZ.js';
 import 'pixi.js';
-import './types-CavnUvd5.js';
+import './types-B6zDTU2V.js';
 
 /**
  * The look of the bar. Each key sets a CSS custom property on the bar (so you can also set `--mc-accent` … in your own CSS, on the
@@ -36,6 +36,12 @@ interface ControllerOptions {
     pauseAtStops?: boolean;
     /** The loop button (and the L key) next to the volume: it flips `movie.loop`, so playing goes back to the start at the end. Default true; `false` leaves the loop to the page. */
     loopButton?: boolean;
+    /**
+     * A small picture of the frame under the pointer, above the seek bar, with its time (like a video site). Default false. It is made with `movie.thumbnail()` without
+     * moving the playhead or changing the picture, also while the movie plays. It switches itself off for a movie with video footage or variables (`movie.thumbnailsOff`
+     * says why), where a frame cannot be drawn on the side.
+     */
+    thumbnails?: boolean;
     className?: string;
 }
 interface ResolvedOptions {
@@ -46,6 +52,7 @@ interface ResolvedOptions {
     presentButton: boolean;
     pauseAtStops: boolean;
     loopButton: boolean;
+    thumbnails: boolean;
     className: string;
 }
 declare class Controller {
@@ -93,6 +100,17 @@ declare class Controller {
     private onReady;
     /** A rebuild (setVars, resize, rebuild) may have moved the stops: draw their marks again. */
     private onRebuilt;
+    private previewEl;
+    private previewCanvas;
+    private previewTimeEl;
+    /** Pictures already made, by frame bucket (a frame is a pure function of time; cleared on a rebuild). */
+    private previewCache;
+    private previewWanted;
+    private previewRunning;
+    private previewRetry;
+    private previewRetries;
+    private previewCleanup;
+    private static readonly PREVIEW_WIDTH_PX;
     private presenter;
     /** `pixi-effects/present`, loaded as soon as the movie has stops (a press of play must not wait for it). */
     private present;
@@ -165,6 +183,10 @@ declare class Controller {
     private refreshProgress;
     private refreshTime;
     private bindScrubbing;
+    /** The hover preview above the seek bar (`thumbnails: true`). */
+    private bindPreview;
+    /** Draws the picture of the wanted frame into the preview; one at a time, and the last wish wins. */
+    private runPreview;
     private seekFromPointer;
     private bindExportPopover;
     private toggleSettings;

package/dist/Controller.js

@@ -61,6 +61,19 @@ var CONTROLLER_CSS = `
 .mc-progress:hover .mc-progress-thumb,
 .mc-progress.mc-scrubbing .mc-progress-thumb { transform: translate(-50%, -50%) scale(1); }
 
+.movie-controller > .mc-preview {
+  position: absolute; bottom: 74px; left: 0;
+  transform: translateX(-50%);
+  display: flex; flex-direction: column; align-items: center; gap: 4px;
+  padding: 3px; border-radius: 4px;
+  background: rgba(0,0,0,0.75);
+  pointer-events: none;
+  opacity: 0; transition: opacity 100ms ease;
+}
+.mc-preview[data-show="1"] { opacity: 1; }
+.mc-preview canvas { display: block; width: 160px; height: auto; border-radius: 2px; }
+.mc-preview-time { font-size: 12px; line-height: 1; color: var(--mc-fg, #fff); font-variant-numeric: tabular-nums; }
+
 .mc-bar {
   position: relative;
   display: flex;
@@ -293,7 +306,7 @@ var THEME_PROPERTIES = {
   trackHeight: "--mc-track-height",
   font: "--mc-font"
 };
-var CONTROLLER_OPTION_KEYS = ["canvas", "theme", "exportButton", "keyboard", "clickToPlay", "presentButton", "pauseAtStops", "loopButton", "className"];
+var CONTROLLER_OPTION_KEYS = ["canvas", "theme", "exportButton", "keyboard", "clickToPlay", "presentButton", "pauseAtStops", "loopButton", "thumbnails", "className"];
 var Controller = class _Controller {
   movie;
   options;
@@ -339,6 +352,17 @@ var Controller = class _Controller {
   onReady = null;
   /** A rebuild (setVars, resize, rebuild) may have moved the stops: draw their marks again. */
   onRebuilt = null;
+  previewEl = null;
+  previewCanvas = null;
+  previewTimeEl = null;
+  /** Pictures already made, by frame bucket (a frame is a pure function of time; cleared on a rebuild). */
+  previewCache = /* @__PURE__ */ new Map();
+  previewWanted = null;
+  previewRunning = false;
+  previewRetry = null;
+  previewRetries = 0;
+  previewCleanup = null;
+  static PREVIEW_WIDTH_PX = 160;
   presenter = null;
   /** `pixi-effects/present`, loaded as soon as the movie has stops (a press of play must not wait for it). */
   present = null;
@@ -385,6 +409,7 @@ var Controller = class _Controller {
       presentButton: options.presentButton ?? true,
       pauseAtStops: options.pauseAtStops ?? true,
       loopButton: options.loopButton ?? true,
+      thumbnails: options.thumbnails ?? false,
       className: options.className ?? "movie-controller"
     };
     installStyles();
@@ -407,6 +432,7 @@ var Controller = class _Controller {
     this.bindPlayButton();
     if (this.options.clickToPlay) this.bindCanvasClick();
     this.bindScrubbing();
+    if (this.options.thumbnails) this.bindPreview();
     this.bindMuteButton();
     this.bindLoopButton();
     this.bindVolumeSlider();
@@ -586,6 +612,7 @@ var Controller = class _Controller {
     };
     this.onRebuilt = () => {
       this.refreshStops();
+      this.previewCache.clear();
     };
     this.movie.on("ready", this.onReady);
     this.movie.on("rebuilt", this.onRebuilt);
@@ -909,6 +936,104 @@ var Controller = class _Controller {
     };
     window.addEventListener("blur", this.windowBlurHandler);
   }
+  /** The hover preview above the seek bar (`thumbnails: true`). */
+  bindPreview() {
+    const el = document.createElement("div");
+    el.className = "mc-preview";
+    el.setAttribute("aria-hidden", "true");
+    const canvas = document.createElement("canvas");
+    const time = document.createElement("span");
+    time.className = "mc-preview-time";
+    el.append(canvas, time);
+    this.root.appendChild(el);
+    this.previewEl = el;
+    this.previewCanvas = canvas;
+    this.previewTimeEl = time;
+    const hide = () => {
+      this.previewWanted = null;
+      el.removeAttribute("data-show");
+    };
+    const onMove = (e) => {
+      if (this.isScrubbing || this.movie.thumbnailsOff || e.pointerType === "touch") {
+        hide();
+        return;
+      }
+      const rect = this.progressEl.getBoundingClientRect();
+      const inset = _Controller.PROGRESS_INSET_PX;
+      const frame = pxToFrame(e.clientX, { left: rect.left + inset, width: Math.max(0, rect.width - 2 * inset) }, this.movie.totalFrames);
+      const rootRect = this.root.getBoundingClientRect();
+      const half = el.getBoundingClientRect().width / 2 + 2;
+      const x = Math.min(Math.max(e.clientX - rootRect.left, half), Math.max(half, rootRect.width - half));
+      el.style.left = `${rootRect.width > 0 ? x / rootRect.width * 100 : 50}%`;
+      this.previewRetries = 0;
+      time.textContent = formatTime(frame / (this.movie.frameRate || 1));
+      this.previewWanted = frame;
+      void this.runPreview();
+    };
+    this.progressEl.addEventListener("pointermove", onMove);
+    this.progressEl.addEventListener("pointerleave", hide);
+    this.progressEl.addEventListener("pointerdown", hide);
+    this.previewCleanup = () => {
+      this.progressEl.removeEventListener("pointermove", onMove);
+      this.progressEl.removeEventListener("pointerleave", hide);
+      this.progressEl.removeEventListener("pointerdown", hide);
+      if (this.previewRetry) {
+        clearTimeout(this.previewRetry);
+        this.previewRetry = null;
+      }
+      el.remove();
+    };
+  }
+  /** Draws the picture of the wanted frame into the preview; one at a time, and the last wish wins. */
+  async runPreview() {
+    if (this.previewRunning) return;
+    this.previewRunning = true;
+    try {
+      while (this.previewWanted !== null && !this.destroyed) {
+        const wanted = this.previewWanted;
+        const fps = this.movie.frameRate || 30;
+        const step = Math.max(1, Math.round(fps / 10));
+        const key = Math.min(this.movie.totalFrames, Math.round(wanted / step) * step);
+        let pic = this.previewCache.get(key) ?? null;
+        if (!pic) {
+          try {
+            pic = await this.movie.thumbnail(key, { width: _Controller.PREVIEW_WIDTH_PX });
+          } catch {
+            this.previewWanted = null;
+            this.previewEl?.removeAttribute("data-show");
+            break;
+          }
+          if (pic) {
+            if (this.previewCache.size >= 120) this.previewCache.delete(this.previewCache.keys().next().value);
+            this.previewCache.set(key, pic);
+          }
+        }
+        if (this.previewWanted === null || this.destroyed) break;
+        if (pic) {
+          const c = this.previewCanvas;
+          if (c.width !== pic.width || c.height !== pic.height) {
+            c.width = pic.width;
+            c.height = pic.height;
+          }
+          c.getContext("2d").drawImage(pic, 0, 0);
+          this.previewEl.setAttribute("data-show", "1");
+          if (this.previewWanted === wanted) this.previewWanted = null;
+        } else if (this.previewWanted !== wanted) {
+        } else if (!this.movie.thumbnailsOff && this.previewRetries++ < 10) {
+          this.previewRetry = setTimeout(() => {
+            this.previewRetry = null;
+            void this.runPreview();
+          }, 120);
+          break;
+        } else {
+          this.previewWanted = null;
+          this.previewEl?.removeAttribute("data-show");
+        }
+      }
+    } finally {
+      this.previewRunning = false;
+    }
+  }
   seekFromPointer(clientX) {
     const rect = this.progressEl.getBoundingClientRect();
     const inset = _Controller.PROGRESS_INSET_PX;
@@ -1185,6 +1310,10 @@ var Controller = class _Controller {
     if (this.destroyed) return;
     this.destroyed = true;
     this.stopPresenting();
+    if (this.previewCleanup) {
+      this.previewCleanup();
+      this.previewCleanup = null;
+    }
     if (this.onReady) {
       this.movie.off("ready", this.onReady);
       this.onReady = null;