pixi-effects 0.11.0 → 0.13.0

package/dist/Controller.cjs

@@ -10,6 +10,7 @@ var ICONS = {
   volumeOff: '<svg viewBox="0 0 16 16" width="16" height="16" fill="currentColor"><path d="M2 6 H5 L9 2 V14 L5 10 H2 Z"/><path d="M11 5 L15 11 M15 5 L11 11" fill="none" stroke="currentColor" stroke-width="1.4"/></svg>',
   download: '<svg viewBox="0 0 16 16" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"><path d="M8 2 V11 M4 7 L8 11 L12 7 M3 13 H13"/></svg>',
   fullscreenEnter: '<svg viewBox="0 0 16 16" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"><path d="M2 6 V2 H6 M14 6 V2 H10 M2 10 V14 H6 M14 10 V14 H10"/></svg>',
+  present: '<svg viewBox="0 0 16 16" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"><path d="M2 2.5 H14 V10.5 H2 Z M8 10.5 V13.5 M5 13.5 H11"/></svg>',
   fullscreenExit: '<svg viewBox="0 0 16 16" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"><path d="M6 2 V6 H2 M10 2 V6 H14 M6 14 V10 H2 M10 14 V10 H14"/></svg>'
 };
 var STYLE_ATTR = "data-movie-controller";
@@ -47,6 +48,10 @@ var CONTROLLER_CSS = `
   transition: height 120ms ease;
 }
 .mc-progress:hover::before, .mc-progress.mc-scrubbing::before { height: calc(var(--mc-track-height, 3px) + 2px); }
+.mc-stops { position: absolute; left: 12px; right: 12px; top: 0; bottom: 0; pointer-events: none; }
+.mc-stop-tick { position: absolute; top: 50%; width: 2px; height: calc(var(--mc-track-height, 3px) + 10px); transform: translate(-50%, -50%); background: var(--mc-fg, #fff); opacity: 0.9; border-radius: 1px; box-shadow: 0 0 0 1px rgba(0,0,0,0.55); }
+.mc-stop-page { width: 4px; height: calc(var(--mc-track-height, 3px) + 20px); opacity: 1; }
+.mc-stop-page::before { content: ''; position: absolute; left: 50%; top: -3px; width: 8px; height: 8px; transform: translateX(-50%); border-radius: 50%; background: var(--mc-fg, #fff); box-shadow: 0 0 0 1px rgba(0,0,0,0.55); }
 .mc-progress-fill {
   position: absolute; left: 12px; top: 50%;
   height: var(--mc-track-height, 3px);
@@ -268,8 +273,10 @@ function pxToFraction(clientX, rect, inset = 0) {
   const ratio = (clientX - innerLeft) / innerWidth;
   return Math.min(Math.max(ratio, 0), 1);
 }
+var PDF_QUALITY = { "low": 0.6, "medium": 0.75, "high": 0.88, "very-high": 0.95 };
 function extensionForMimeType(mime) {
   const t = (mime || "").toLowerCase();
+  if (t.includes("pdf")) return "pdf";
   if (t.includes("webm")) return "webm";
   if (t.includes("quicktime") || t.includes("mov")) return "mov";
   if (t.includes("matroska") || t.includes("mkv")) return "mkv";
@@ -316,6 +323,7 @@ var Controller = class _Controller {
   wasPlayingBeforeScrub = false;
   activePointerId = null;
   isExporting = false;
+  exportPages = null;
   exportOverlay = null;
   exportFillEl = null;
   exportTextEl = null;
@@ -323,6 +331,8 @@ var Controller = class _Controller {
   settingsKeyHandler = null;
   settingsOutsideHandler = null;
   onReady = null;
+  presenter = null;
+  presentBtn = null;
   onFrame = null;
   onPlay = null;
   onPause = null;
@@ -353,6 +363,8 @@ var Controller = class _Controller {
       showExportButton: options.showExportButton ?? true,
       enableKeyboardShortcuts: options.enableKeyboardShortcuts ?? true,
       clickToPlay: options.clickToPlay ?? true,
+      present: options.present ?? true,
+      pauseAtStops: options.pauseAtStops ?? true,
       className: options.className ?? "movie-controller"
     };
     installStyles();
@@ -371,6 +383,7 @@ var Controller = class _Controller {
     }
     this.root.setAttribute("data-state", "visible");
     this.bindMovieEvents();
+    this.refreshStops();
     this.bindPlayButton();
     if (this.options.clickToPlay) this.bindCanvasClick();
     this.bindScrubbing();
@@ -528,6 +541,7 @@ var Controller = class _Controller {
       this.refreshTime(0);
       this.refreshProgress(0);
       this.refreshVolumeUI();
+      this.refreshStops();
     };
     this.onFrame = ({ frame, totalFrames }) => {
       if (!this.isScrubbing) {
@@ -554,13 +568,92 @@ var Controller = class _Controller {
     this.movie.on("pause", this.onPause);
     this.movie.on("progress", this.onProgress);
   }
+  /** The stops of a presentation as marks on the seek bar, and the Present button. */
+  refreshStops() {
+    this.progressEl.querySelector(".mc-stops")?.remove();
+    const stops = this.movie.stops ?? [];
+    this.refreshPdfChoices(stops.length > 0);
+    if (stops.length === 0) {
+      this.presentBtn?.remove();
+      this.presentBtn = null;
+      return;
+    }
+    const total = this.movie.totalFrames || 1;
+    const holder = document.createElement("div");
+    holder.className = "mc-stops";
+    for (const s of stops) {
+      const tick = document.createElement("div");
+      tick.className = s.pageStart ? "mc-stop-tick mc-stop-page" : "mc-stop-tick";
+      tick.style.left = `${s.frame / total * 100}%`;
+      if (s.page) tick.title = s.page;
+      holder.appendChild(tick);
+    }
+    this.progressEl.appendChild(holder);
+    if (this.options.present && !this.presentBtn && this.fullscreenBtn) {
+      const btn = document.createElement("button");
+      btn.className = "mc-btn mc-present";
+      btn.setAttribute("aria-label", "Present");
+      btn.title = "Present";
+      btn.innerHTML = ICONS.present;
+      btn.addEventListener("click", () => {
+        void this.startPresenting();
+      });
+      this.fullscreenBtn.parentElement?.insertBefore(btn, this.fullscreenBtn);
+      this.presentBtn = btn;
+    }
+  }
+  /** A deck can be downloaded as a PDF: the format list gets "PDF" choices while the movie has stops. */
+  refreshPdfChoices(has) {
+    const select = this.settingsFormatSelect;
+    if (!select) return;
+    const present = !!select.querySelector('option[value="pdf"]');
+    if (has && !present) {
+      for (const [value, label] of [["pdf", "PDF (pages)"], ["pdf-steps", "PDF (every step)"]]) {
+        const o = document.createElement("option");
+        o.value = value;
+        o.textContent = label;
+        select.appendChild(o);
+      }
+    } else if (!has && present) {
+      select.querySelectorAll('option[value="pdf"], option[value="pdf-steps"]').forEach((o) => o.remove());
+      if (this.exportFormat === "pdf" || this.exportFormat === "pdf-steps") {
+        this.exportFormat = "mp4";
+        select.value = "mp4";
+      }
+    }
+  }
+  /** Play, or pause: a movie with stops plays to the next stop (and from the end, again from the start). */
+  async togglePlay() {
+    if (this.movie.isPlaying) {
+      this.movie.pause();
+      return;
+    }
+    await this.startPlaying();
+  }
+  /** Start playing: to the next stop for a movie with stops, to the end for any other (or with `pauseAtStops: false`). */
+  async startPlaying() {
+    if (this.options.pauseAtStops && (this.movie.stops?.length ?? 0) > 0) {
+      if (this.movie.currentFrame >= this.movie.totalFrames) await this.movie.gotoFrame(0, true);
+      await this.movie.next();
+    } else this.movie.play();
+  }
+  /** Hand the page over to a Presenter (fullscreen, keys, click and swipe move through the stops); Escape gives it back. */
+  async startPresenting() {
+    if (this.presenter || this.destroyed) return;
+    const { Presenter } = await import('./Presenter.cjs');
+    if (this.presenter || this.destroyed) return;
+    const p = new Presenter(this.movie, { canvas: this.options.canvas, onExit: () => this.stopPresenting() });
+    this.presenter = p;
+    await p.start();
+  }
+  stopPresenting() {
+    const p = this.presenter;
+    this.presenter = null;
+    p?.destroy();
+  }
   bindPlayButton() {
     this.playBtn.addEventListener("click", () => {
-      if (this.movie.isPlaying) {
-        this.movie.pause();
-      } else {
-        this.movie.play();
-      }
+      void this.togglePlay();
     });
   }
   /** Clicking the picture plays / pauses (a tap on a phone too). */
@@ -572,12 +665,12 @@ var Controller = class _Controller {
       this.swallowCanvasClick = false;
     };
     this.canvasClickHandler = () => {
+      if (this.presenter) return;
       if (this.swallowCanvasClick) {
         this.swallowCanvasClick = false;
         return;
       }
-      if (this.movie.isPlaying) this.movie.pause();
-      else this.movie.play();
+      void this.togglePlay();
     };
     canvas.addEventListener("pointerdown", this.canvasPointerDownHandler);
     canvas.addEventListener("click", this.canvasClickHandler);
@@ -733,7 +826,7 @@ var Controller = class _Controller {
       } catch {
       }
       if (this.wasPlayingBeforeScrub) {
-        this.movie.play();
+        void this.startPlaying();
         this.refreshPlayIcon();
       }
     };
@@ -782,7 +875,7 @@ var Controller = class _Controller {
     if (this.settingsFormatSelect) {
       this.settingsFormatSelect.addEventListener("change", (e) => {
         const v = e.target.value;
-        if (v === "mp4" || v === "webm" || v === "mov") this.exportFormat = v;
+        if (v === "mp4" || v === "webm" || v === "mov" || v === "pdf" || v === "pdf-steps") this.exportFormat = v;
       });
     }
     if (this.settingsQualitySelect) {
@@ -832,9 +925,19 @@ var Controller = class _Controller {
       this.movie.pause();
       this.refreshPlayIcon();
     }
-    this.showExportOverlay();
+    const pdf = this.exportFormat === "pdf" || this.exportFormat === "pdf-steps";
+    if (pdf) {
+      const stops = this.movie.stops ?? [];
+      const total = this.exportFormat === "pdf-steps" ? stops.filter((s) => s.pdf !== false).length : new Set(stops.map((s) => s.pageIndex)).size;
+      this.showExportOverlay("Exporting PDF...", `0% (0 / ${total} pages)`);
+      this.exportPages = { done: 0, total };
+    } else this.showExportOverlay();
     try {
-      const blob = await this.movie.render({
+      const blob = pdf ? await this.movie.exportPDF({
+        which: this.exportFormat === "pdf-steps" ? "stops" : "pages",
+        quality: PDF_QUALITY[this.exportQuality],
+        onImage: () => this.pdfPageDone()
+      }) : await this.movie.render({
         format: this.exportFormat,
         video: { bitrate: this.exportQuality },
         audio: { bitrate: this.exportQuality }
@@ -850,7 +953,7 @@ var Controller = class _Controller {
       this.hideExportOverlay();
       this.isExporting = false;
       if (wasPlaying) {
-        this.movie.play();
+        void this.startPlaying();
         this.refreshPlayIcon();
       }
     }
@@ -873,16 +976,27 @@ var Controller = class _Controller {
     const ts = `${d.getFullYear()}${pad(d.getMonth() + 1)}${pad(d.getDate())}-${pad(d.getHours())}${pad(d.getMinutes())}${pad(d.getSeconds())}`;
     return `movie-${ts}.${ext}`;
   }
-  showExportOverlay() {
+  /** One more PDF page is ready: move the bar. */
+  pdfPageDone() {
+    const p = this.exportPages;
+    if (!p || !this.exportFillEl || !this.exportTextEl) return;
+    p.done++;
+    const percent = p.total ? Math.min(100, Math.round(p.done / p.total * 100)) : 100;
+    this.exportFillEl.style.width = `${percent}%`;
+    this.exportTextEl.textContent = `${percent}% (${p.done} / ${p.total} pages)`;
+  }
+  showExportOverlay(title = "Exporting video...", text = "0% (0 / 0 frames)") {
     const overlay = document.createElement("div");
     overlay.className = "mc-export-overlay";
     overlay.innerHTML = `
       <div class="mc-export-panel">
-        <div class="mc-export-title">Exporting video...</div>
+        <div class="mc-export-title"></div>
         <div class="mc-export-track"><div class="mc-export-fill"></div></div>
-        <div class="mc-export-text">0% (0 / 0 frames)</div>
+        <div class="mc-export-text"></div>
       </div>
     `;
+    overlay.querySelector(".mc-export-title").textContent = title;
+    overlay.querySelector(".mc-export-text").textContent = text;
     this.root.appendChild(overlay);
     this.exportOverlay = overlay;
     this.exportFillEl = overlay.querySelector(".mc-export-fill");
@@ -895,6 +1009,7 @@ var Controller = class _Controller {
       this.exportFillEl = null;
       this.exportTextEl = null;
     }
+    this.exportPages = null;
   }
   bindVisibility() {
     const wrap = this.wrapper;
@@ -937,6 +1052,7 @@ var Controller = class _Controller {
   }
   bindKeyboard() {
     this.keyHandler = (e) => {
+      if (this.presenter) return;
       const target = e.target;
       if (target) {
         const tag = target.tagName;
@@ -998,6 +1114,7 @@ var Controller = class _Controller {
   destroy() {
     if (this.destroyed) return;
     this.destroyed = true;
+    this.stopPresenting();
     if (this.onReady) {
       this.movie.off("ready", this.onReady);
       this.onReady = null;