pixi-effects 0.12.0 → 0.13.1

package/dist/Controller.d.ts

@@ -1,10 +1,10 @@
-import { f as Movie } from './Movie-EBF6_RfX.js';
+import { f as Movie } from './Movie-DnR4H1OO.js';
 import 'pixi.js';
 import 'gsap';
-import './types-mpqQO8MJ.js';
+import './types-CBSiUKau.js';
 
 /** The bar's default stylesheet. Its colours and sizes are CSS custom properties (`--mc-accent`, `--mc-fg`, `--mc-track`, `--mc-bar-bg`, `--mc-track-height`, `--mc-font`): set them in your page CSS, or with the `theme` option. */
-declare const CONTROLLER_CSS = "\n.movie-controller-wrap { position: relative; display: inline-block; line-height: 0; }\n.movie-controller {\n  position: absolute;\n  pointer-events: none;\n  font-family: var(--mc-font, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif);\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-end;\n  opacity: 1;\n  transition: opacity 200ms ease;\n}\n.movie-controller[data-state=\"hidden\"] { opacity: 0; }\n.movie-controller > * { pointer-events: auto; }\n\n.mc-progress {\n  position: relative;\n  width: 100%;\n  height: 16px;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  outline: none;\n}\n.mc-progress:focus-visible {\n  outline: 2px solid var(--mc-accent, #007AFF);\n  outline-offset: 2px;\n}\n.mc-progress::before {\n  content: \"\"; position: absolute; left: 12px; right: 12px;\n  height: var(--mc-track-height, 3px); background: var(--mc-track, rgba(255,255,255,0.25));\n  transition: height 120ms ease;\n}\n.mc-progress:hover::before, .mc-progress.mc-scrubbing::before { height: calc(var(--mc-track-height, 3px) + 2px); }\n.mc-stops { position: absolute; left: 12px; right: 12px; top: 0; bottom: 0; pointer-events: none; }\n.mc-stop-tick { position: absolute; top: 50%; width: 2px; height: calc(var(--mc-track-height, 3px) + 6px); transform: translate(-50%, -50%); background: var(--mc-fg, #fff); opacity: 0.6; border-radius: 1px; }\n.mc-progress-fill {\n  position: absolute; left: 12px; top: 50%;\n  height: var(--mc-track-height, 3px);\n  width: calc((100% - 24px) * var(--mc-fill, 0));\n  background: var(--mc-accent, #007AFF);\n  transform: translateY(-50%);\n  transition: height 120ms ease;\n  pointer-events: none;\n}\n.mc-progress:hover .mc-progress-fill,\n.mc-progress.mc-scrubbing .mc-progress-fill { height: calc(var(--mc-track-height, 3px) + 2px); }\n.mc-progress-thumb {\n  position: absolute; top: 50%;\n  left: calc(12px + (100% - 24px) * var(--mc-fill, 0));\n  width: 12px; height: 12px; border-radius: 50%;\n  background: var(--mc-accent, #007AFF);\n  transform: translate(-50%, -50%) scale(0);\n  transition: transform 120ms ease;\n  pointer-events: none;\n}\n.mc-progress:hover .mc-progress-thumb,\n.mc-progress.mc-scrubbing .mc-progress-thumb { transform: translate(-50%, -50%) scale(1); }\n\n.mc-bar {\n  position: relative;\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 6px 12px 8px 12px;\n  background: var(--mc-bar-bg, linear-gradient(to top, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0) 100%));\n  color: var(--mc-fg, #fff);\n  line-height: 1;\n}\n.mc-btn {\n  background: none; border: 0; padding: 0; margin: 0;\n  width: 28px; height: 28px;\n  display: inline-flex; align-items: center; justify-content: center;\n  color: var(--mc-fg, #fff); opacity: 0.85; cursor: pointer;\n  transition: opacity 120ms ease;\n}\n.mc-btn:hover { opacity: 1; }\n.mc-btn:disabled { opacity: 0.4; cursor: not-allowed; }\n.mc-time {\n  font-size: 12px; font-family: Menlo, Monaco, monospace;\n  color: var(--mc-fg, #fff); opacity: 0.85;\n  min-width: 90px;\n}\n.mc-spacer { flex: 1; }\n\n.mc-volume { display: flex; align-items: center; }\n.mc-vol-slider {\n  position: relative;\n  width: 0;\n  height: 28px;\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  margin-left: 0;\n  outline: none;\n  transition: width 200ms ease, margin-left 200ms ease;\n  overflow: hidden;\n}\n.mc-volume:hover .mc-vol-slider,\n.mc-volume:focus-within .mc-vol-slider,\n.mc-vol-slider.mc-scrubbing {\n  width: 70px;\n  margin-left: 6px;\n}\n.mc-vol-slider:focus-visible { outline: 2px solid var(--mc-accent, #007AFF); outline-offset: 2px; }\n.mc-vol-slider::before {\n  content: \"\"; position: absolute; left: 4px; right: 4px;\n  height: 3px; background: var(--mc-track, rgba(255,255,255,0.25)); border-radius: 2px;\n}\n.mc-vol-fill {\n  position: absolute; left: 4px; top: 50%;\n  height: 3px;\n  width: calc((100% - 8px) * var(--mc-volume, 1));\n  background: var(--mc-fg, #fff);\n  transform: translateY(-50%);\n  border-radius: 2px;\n  pointer-events: none;\n}\n.mc-vol-thumb {\n  position: absolute; top: 50%;\n  left: calc(4px + (100% - 8px) * var(--mc-volume, 1));\n  width: 10px; height: 10px; border-radius: 50%;\n  background: var(--mc-fg, #fff);\n  transform: translate(-50%, -50%);\n  pointer-events: none;\n}\n\n[data-mc-wrap]:fullscreen {\n  width: 100vw; height: 100vh;\n  display: flex; align-items: center; justify-content: center;\n  background: #000;\n}\n[data-mc-wrap]:fullscreen > canvas {\n  width: 100% !important;\n  height: 100% !important;\n  max-width: none !important;\n  max-height: none !important;\n  object-fit: contain;\n  border-radius: 0;\n}\n\n.mc-settings-popover {\n  position: absolute;\n  bottom: calc(100% + 8px);\n  right: 12px;\n  background: rgba(20, 20, 20, 0.96);\n  border-radius: 8px;\n  padding: 10px 12px;\n  min-width: 180px;\n  color: #fff;\n  font-size: 12px;\n  box-shadow: 0 4px 16px rgba(0,0,0,0.4);\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n.mc-settings-popover[data-open=\"false\"] { display: none; }\n.mc-settings-row {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 12px;\n}\n.mc-settings-row > span { color: rgba(255,255,255,0.85); }\n.mc-settings-row > select {\n  font: inherit;\n  background: rgba(255,255,255,0.1);\n  color: #fff;\n  border: 1px solid rgba(255,255,255,0.18);\n  border-radius: 4px;\n  padding: 2px 6px;\n  cursor: pointer;\n}\n.mc-export-confirm {\n  margin-top: 4px;\n  width: 100%;\n  background: var(--mc-accent, #007AFF);\n  color: #fff;\n  border: 0;\n  border-radius: 4px;\n  padding: 6px 10px;\n  font: inherit;\n  font-weight: 600;\n  cursor: pointer;\n  transition: background 120ms ease;\n}\n.mc-export-confirm:hover { background: #0066d6; }\n.mc-export-confirm:disabled { background: rgba(255,255,255,0.18); cursor: not-allowed; }\n\n.mc-export-overlay {\n  position: absolute; inset: 0;\n  background: rgba(0,0,0,0.7);\n  display: flex; justify-content: center; align-items: center;\n  z-index: 2;\n}\n.mc-export-panel {\n  background: rgba(20,20,20,0.96); color: #fff;\n  border-radius: 8px; padding: 16px 20px;\n  text-align: center; min-width: 200px; max-width: 80%;\n  font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif;\n}\n.mc-export-title { font-size: 13px; margin-bottom: 10px; opacity: 0.9; }\n.mc-export-track {\n  width: 100%; height: 6px;\n  background: rgba(255,255,255,0.15); border-radius: 3px;\n  margin-bottom: 8px; overflow: hidden;\n}\n.mc-export-fill {\n  height: 100%; width: 0%;\n  background: linear-gradient(90deg, var(--mc-accent, #007AFF), var(--mc-accent, #0056CC));\n  transition: width 0.3s ease; border-radius: 3px;\n}\n.mc-export-text {\n  color: rgba(255,255,255,0.7); font-size: 11px;\n  font-family: Menlo, Monaco, monospace;\n}\n";
+declare const CONTROLLER_CSS = "\n.movie-controller-wrap { position: relative; display: inline-block; line-height: 0; }\n.movie-controller {\n  position: absolute;\n  pointer-events: none;\n  font-family: var(--mc-font, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif);\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-end;\n  opacity: 1;\n  transition: opacity 200ms ease;\n}\n.movie-controller[data-state=\"hidden\"] { opacity: 0; }\n.movie-controller > * { pointer-events: auto; }\n\n.mc-progress {\n  position: relative;\n  width: 100%;\n  height: 16px;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  outline: none;\n}\n.mc-progress:focus-visible {\n  outline: 2px solid var(--mc-accent, #007AFF);\n  outline-offset: 2px;\n}\n.mc-progress::before {\n  content: \"\"; position: absolute; left: 12px; right: 12px;\n  height: var(--mc-track-height, 3px); background: var(--mc-track, rgba(255,255,255,0.25));\n  transition: height 120ms ease;\n}\n.mc-progress:hover::before, .mc-progress.mc-scrubbing::before { height: calc(var(--mc-track-height, 3px) + 2px); }\n.mc-stops { position: absolute; left: 12px; right: 12px; top: 0; bottom: 0; pointer-events: none; }\n.mc-stop-tick { position: absolute; top: 50%; width: 7px; height: 7px; transform: translate(-50%, -50%); border-radius: 50%; background: var(--mc-fg, #fff); box-shadow: 0 0 0 1.5px rgba(0,0,0,0.5); }\n.mc-stop-page { width: 11px; height: 11px; box-shadow: 0 0 0 2.5px var(--mc-accent, #007AFF), 0 0 0 4px rgba(0,0,0,0.35); }\n.mc-progress-fill {\n  position: absolute; left: 12px; top: 50%;\n  height: var(--mc-track-height, 3px);\n  width: calc((100% - 24px) * var(--mc-fill, 0));\n  background: var(--mc-accent, #007AFF);\n  transform: translateY(-50%);\n  transition: height 120ms ease;\n  pointer-events: none;\n}\n.mc-progress:hover .mc-progress-fill,\n.mc-progress.mc-scrubbing .mc-progress-fill { height: calc(var(--mc-track-height, 3px) + 2px); }\n.mc-progress-thumb {\n  position: absolute; top: 50%;\n  left: calc(12px + (100% - 24px) * var(--mc-fill, 0));\n  width: 12px; height: 12px; border-radius: 50%;\n  background: var(--mc-accent, #007AFF);\n  transform: translate(-50%, -50%) scale(0);\n  transition: transform 120ms ease;\n  pointer-events: none;\n}\n.mc-progress:hover .mc-progress-thumb,\n.mc-progress.mc-scrubbing .mc-progress-thumb { transform: translate(-50%, -50%) scale(1); }\n\n.mc-bar {\n  position: relative;\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 6px 12px 8px 12px;\n  background: var(--mc-bar-bg, linear-gradient(to top, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0) 100%));\n  color: var(--mc-fg, #fff);\n  line-height: 1;\n}\n.mc-btn {\n  background: none; border: 0; padding: 0; margin: 0;\n  width: 28px; height: 28px;\n  display: inline-flex; align-items: center; justify-content: center;\n  color: var(--mc-fg, #fff); opacity: 0.85; cursor: pointer;\n  transition: opacity 120ms ease;\n}\n.mc-btn:hover { opacity: 1; }\n.mc-btn:disabled { opacity: 0.4; cursor: not-allowed; }\n.mc-time {\n  font-size: 12px; font-family: Menlo, Monaco, monospace;\n  color: var(--mc-fg, #fff); opacity: 0.85;\n  min-width: 90px;\n}\n.mc-spacer { flex: 1; }\n\n.mc-volume { display: flex; align-items: center; }\n.mc-vol-slider {\n  position: relative;\n  width: 0;\n  height: 28px;\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  margin-left: 0;\n  outline: none;\n  transition: width 200ms ease, margin-left 200ms ease;\n  overflow: hidden;\n}\n.mc-volume:hover .mc-vol-slider,\n.mc-volume:focus-within .mc-vol-slider,\n.mc-vol-slider.mc-scrubbing {\n  width: 70px;\n  margin-left: 6px;\n}\n.mc-vol-slider:focus-visible { outline: 2px solid var(--mc-accent, #007AFF); outline-offset: 2px; }\n.mc-vol-slider::before {\n  content: \"\"; position: absolute; left: 4px; right: 4px;\n  height: 3px; background: var(--mc-track, rgba(255,255,255,0.25)); border-radius: 2px;\n}\n.mc-vol-fill {\n  position: absolute; left: 4px; top: 50%;\n  height: 3px;\n  width: calc((100% - 8px) * var(--mc-volume, 1));\n  background: var(--mc-fg, #fff);\n  transform: translateY(-50%);\n  border-radius: 2px;\n  pointer-events: none;\n}\n.mc-vol-thumb {\n  position: absolute; top: 50%;\n  left: calc(4px + (100% - 8px) * var(--mc-volume, 1));\n  width: 10px; height: 10px; border-radius: 50%;\n  background: var(--mc-fg, #fff);\n  transform: translate(-50%, -50%);\n  pointer-events: none;\n}\n\n[data-mc-wrap]:fullscreen {\n  width: 100vw; height: 100vh;\n  display: flex; align-items: center; justify-content: center;\n  background: #000;\n}\n[data-mc-wrap]:fullscreen > canvas {\n  width: 100% !important;\n  height: 100% !important;\n  max-width: none !important;\n  max-height: none !important;\n  object-fit: contain;\n  border-radius: 0;\n}\n\n.mc-settings-popover {\n  position: absolute;\n  bottom: calc(100% + 8px);\n  right: 12px;\n  background: rgba(20, 20, 20, 0.96);\n  border-radius: 8px;\n  padding: 10px 12px;\n  min-width: 180px;\n  color: #fff;\n  font-size: 12px;\n  box-shadow: 0 4px 16px rgba(0,0,0,0.4);\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n.mc-settings-popover[data-open=\"false\"] { display: none; }\n.mc-settings-row {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 12px;\n}\n.mc-settings-row > span { color: rgba(255,255,255,0.85); }\n.mc-settings-row > select {\n  font: inherit;\n  background: rgba(255,255,255,0.1);\n  color: #fff;\n  border: 1px solid rgba(255,255,255,0.18);\n  border-radius: 4px;\n  padding: 2px 6px;\n  cursor: pointer;\n}\n.mc-export-confirm {\n  margin-top: 4px;\n  width: 100%;\n  background: var(--mc-accent, #007AFF);\n  color: #fff;\n  border: 0;\n  border-radius: 4px;\n  padding: 6px 10px;\n  font: inherit;\n  font-weight: 600;\n  cursor: pointer;\n  transition: background 120ms ease;\n}\n.mc-export-confirm:hover { background: #0066d6; }\n.mc-export-confirm:disabled { background: rgba(255,255,255,0.18); cursor: not-allowed; }\n\n.mc-export-overlay {\n  position: absolute; inset: 0;\n  background: rgba(0,0,0,0.7);\n  display: flex; justify-content: center; align-items: center;\n  z-index: 2;\n}\n.mc-export-panel {\n  background: rgba(20,20,20,0.96); color: #fff;\n  border-radius: 8px; padding: 16px 20px;\n  text-align: center; min-width: 200px; max-width: 80%;\n  font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif;\n}\n.mc-export-title { font-size: 13px; margin-bottom: 10px; opacity: 0.9; }\n.mc-export-track {\n  width: 100%; height: 6px;\n  background: rgba(255,255,255,0.15); border-radius: 3px;\n  margin-bottom: 8px; overflow: hidden;\n}\n.mc-export-fill {\n  height: 100%; width: 0%;\n  background: linear-gradient(90deg, var(--mc-accent, #007AFF), var(--mc-accent, #0056CC));\n  transition: width 0.3s ease; border-radius: 3px;\n}\n.mc-export-text {\n  color: rgba(255,255,255,0.7); font-size: 11px;\n  font-family: Menlo, Monaco, monospace;\n}\n";
 declare function formatTime(seconds: number): string;
 declare function frameToPercent(frame: number, totalFrames: number): number;
 declare function pxToFrame(clientX: number, rect: {
@@ -44,6 +44,8 @@ interface ControllerOptions {
     clickToPlay?: boolean;
     /** A movie with `stops` gets a Present button that starts a {@link Presenter} (keys, click and swipe move through the stops). Default true; `false` keeps only the marks on the seek bar. */
     present?: boolean;
+    /** A movie with `stops`: the play button (and a click on the picture, and Space) plays to the next stop and pauses there, like a slide. Default true; `false` plays straight through to the end. */
+    pauseAtStops?: boolean;
     className?: string;
 }
 interface ResolvedOptions {
@@ -52,6 +54,7 @@ interface ResolvedOptions {
     enableKeyboardShortcuts: boolean;
     clickToPlay: boolean;
     present: boolean;
+    pauseAtStops: boolean;
     className: string;
 }
 declare class Controller {
@@ -87,6 +90,7 @@ declare class Controller {
     private wasPlayingBeforeScrub;
     private activePointerId;
     private isExporting;
+    private exportPages;
     private exportOverlay;
     private exportFillEl;
     private exportTextEl;
@@ -132,6 +136,12 @@ declare class Controller {
     private bindMovieEvents;
     /** The stops of a presentation as marks on the seek bar, and the Present button. */
     private refreshStops;
+    /** A deck can be downloaded as a PDF: the format list gets "PDF" choices while the movie has stops. */
+    private refreshPdfChoices;
+    /** Play, or pause: a movie with stops plays to the next stop (and from the end, again from the start). */
+    private togglePlay;
+    /** Start playing: to the next stop for a movie with stops, to the end for any other (or with `pauseAtStops: false`). */
+    private startPlaying;
     /** Hand the page over to a Presenter (fullscreen, keys, click and swipe move through the stops); Escape gives it back. */
     private startPresenting;
     private stopPresenting;
@@ -160,6 +170,8 @@ declare class Controller {
     private handleExport;
     private triggerDownload;
     private makeFilename;
+    /** One more PDF page is ready: move the bar. */
+    private pdfPageDone;
     private showExportOverlay;
     private hideExportOverlay;
     private bindVisibility;

package/dist/Controller.js

@@ -47,7 +47,8 @@ var CONTROLLER_CSS = `
 }
 .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) + 6px); transform: translate(-50%, -50%); background: var(--mc-fg, #fff); opacity: 0.6; border-radius: 1px; }
+.mc-stop-tick { position: absolute; top: 50%; width: 7px; height: 7px; transform: translate(-50%, -50%); border-radius: 50%; background: var(--mc-fg, #fff); box-shadow: 0 0 0 1.5px rgba(0,0,0,0.5); }
+.mc-stop-page { width: 11px; height: 11px; box-shadow: 0 0 0 2.5px var(--mc-accent, #007AFF), 0 0 0 4px rgba(0,0,0,0.35); }
 .mc-progress-fill {
   position: absolute; left: 12px; top: 50%;
   height: var(--mc-track-height, 3px);
@@ -269,8 +270,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";
@@ -317,6 +320,7 @@ var Controller = class _Controller {
   wasPlayingBeforeScrub = false;
   activePointerId = null;
   isExporting = false;
+  exportPages = null;
   exportOverlay = null;
   exportFillEl = null;
   exportTextEl = null;
@@ -357,6 +361,7 @@ var Controller = class _Controller {
       enableKeyboardShortcuts: options.enableKeyboardShortcuts ?? true,
       clickToPlay: options.clickToPlay ?? true,
       present: options.present ?? true,
+      pauseAtStops: options.pauseAtStops ?? true,
       className: options.className ?? "movie-controller"
     };
     installStyles();
@@ -564,6 +569,7 @@ var Controller = class _Controller {
   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;
@@ -574,7 +580,7 @@ var Controller = class _Controller {
     holder.className = "mc-stops";
     for (const s of stops) {
       const tick = document.createElement("div");
-      tick.className = "mc-stop-tick";
+      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);
@@ -593,6 +599,41 @@ var Controller = class _Controller {
       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;
@@ -609,11 +650,7 @@ var Controller = class _Controller {
   }
   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). */
@@ -630,8 +667,7 @@ var Controller = class _Controller {
         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);
@@ -787,7 +823,7 @@ var Controller = class _Controller {
       } catch {
       }
       if (this.wasPlayingBeforeScrub) {
-        this.movie.play();
+        void this.startPlaying();
         this.refreshPlayIcon();
       }
     };
@@ -836,7 +872,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) {
@@ -886,9 +922,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 }
@@ -904,7 +950,7 @@ var Controller = class _Controller {
       this.hideExportOverlay();
       this.isExporting = false;
       if (wasPlaying) {
-        this.movie.play();
+        void this.startPlaying();
         this.refreshPlayIcon();
       }
     }
@@ -927,16 +973,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");
@@ -949,6 +1006,7 @@ var Controller = class _Controller {
       this.exportFillEl = null;
       this.exportTextEl = null;
     }
+    this.exportPages = null;
   }
   bindVisibility() {
     const wrap = this.wrapper;