pixi-effects 0.1.0

package/dist/Controller.cjs

@@ -0,0 +1,940 @@
+'use strict';
+
+// src/Controller.ts
+var ICONS = {
+  play: '<svg viewBox="0 0 16 16" width="16" height="16" fill="currentColor"><path d="M3 2 L13 8 L3 14 Z"/></svg>',
+  pause: '<svg viewBox="0 0 16 16" width="16" height="16" fill="currentColor"><rect x="3" y="2" width="3.5" height="12"/><rect x="9.5" y="2" width="3.5" height="12"/></svg>',
+  volumeOn: '<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 Q13 8 11 11" fill="none" stroke="currentColor" stroke-width="1.2"/><path d="M12.5 3.5 Q15.5 8 12.5 12.5" fill="none" stroke="currentColor" stroke-width="1.2"/></svg>',
+  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>',
+  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";
+var STYLE_CSS = `
+.movie-controller-wrap { position: relative; display: inline-block; line-height: 0; }
+.movie-controller {
+  position: absolute;
+  pointer-events: none;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  opacity: 1;
+  transition: opacity 200ms ease;
+}
+.movie-controller[data-state="hidden"] { opacity: 0; }
+.movie-controller > * { pointer-events: auto; }
+
+.mc-progress {
+  position: relative;
+  width: 100%;
+  height: 16px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  outline: none;
+}
+.mc-progress:focus-visible {
+  outline: 2px solid #007AFF;
+  outline-offset: 2px;
+}
+.mc-progress::before {
+  content: ""; position: absolute; left: 12px; right: 12px;
+  height: 3px; background: rgba(255,255,255,0.25);
+  transition: height 120ms ease;
+}
+.mc-progress:hover::before, .mc-progress.mc-scrubbing::before { height: 5px; }
+.mc-progress-fill {
+  position: absolute; left: 12px; top: 50%;
+  height: 3px;
+  width: calc((100% - 24px) * var(--mc-fill, 0));
+  background: #007AFF;
+  transform: translateY(-50%);
+  transition: height 120ms ease;
+  pointer-events: none;
+}
+.mc-progress:hover .mc-progress-fill,
+.mc-progress.mc-scrubbing .mc-progress-fill { height: 5px; }
+.mc-progress-thumb {
+  position: absolute; top: 50%;
+  left: calc(12px + (100% - 24px) * var(--mc-fill, 0));
+  width: 12px; height: 12px; border-radius: 50%;
+  background: #007AFF;
+  transform: translate(-50%, -50%) scale(0);
+  transition: transform 120ms ease;
+  pointer-events: none;
+}
+.mc-progress:hover .mc-progress-thumb,
+.mc-progress.mc-scrubbing .mc-progress-thumb { transform: translate(-50%, -50%) scale(1); }
+
+.mc-bar {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 6px 12px 8px 12px;
+  background: linear-gradient(to top, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0) 100%);
+  color: #fff;
+  line-height: 1;
+}
+.mc-btn {
+  background: none; border: 0; padding: 0; margin: 0;
+  width: 28px; height: 28px;
+  display: inline-flex; align-items: center; justify-content: center;
+  color: #fff; opacity: 0.85; cursor: pointer;
+  transition: opacity 120ms ease;
+}
+.mc-btn:hover { opacity: 1; }
+.mc-btn:disabled { opacity: 0.4; cursor: not-allowed; }
+.mc-time {
+  font-size: 12px; font-family: Menlo, Monaco, monospace;
+  color: #fff; opacity: 0.85;
+  min-width: 90px;
+}
+.mc-spacer { flex: 1; }
+
+.mc-volume { display: flex; align-items: center; }
+.mc-vol-slider {
+  position: relative;
+  width: 0;
+  height: 28px;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  margin-left: 0;
+  outline: none;
+  transition: width 200ms ease, margin-left 200ms ease;
+  overflow: hidden;
+}
+.mc-volume:hover .mc-vol-slider,
+.mc-volume:focus-within .mc-vol-slider,
+.mc-vol-slider.mc-scrubbing {
+  width: 70px;
+  margin-left: 6px;
+}
+.mc-vol-slider:focus-visible { outline: 2px solid #007AFF; outline-offset: 2px; }
+.mc-vol-slider::before {
+  content: ""; position: absolute; left: 4px; right: 4px;
+  height: 3px; background: rgba(255,255,255,0.25); border-radius: 2px;
+}
+.mc-vol-fill {
+  position: absolute; left: 4px; top: 50%;
+  height: 3px;
+  width: calc((100% - 8px) * var(--mc-volume, 1));
+  background: #fff;
+  transform: translateY(-50%);
+  border-radius: 2px;
+  pointer-events: none;
+}
+.mc-vol-thumb {
+  position: absolute; top: 50%;
+  left: calc(4px + (100% - 8px) * var(--mc-volume, 1));
+  width: 10px; height: 10px; border-radius: 50%;
+  background: #fff;
+  transform: translate(-50%, -50%);
+  pointer-events: none;
+}
+
+[data-mc-wrap]:fullscreen {
+  width: 100vw; height: 100vh;
+  display: flex; align-items: center; justify-content: center;
+  background: #000;
+}
+[data-mc-wrap]:fullscreen > canvas {
+  width: 100% !important;
+  height: 100% !important;
+  max-width: none !important;
+  max-height: none !important;
+  object-fit: contain;
+  border-radius: 0;
+}
+
+.mc-settings-popover {
+  position: absolute;
+  bottom: calc(100% + 8px);
+  right: 12px;
+  background: rgba(20, 20, 20, 0.96);
+  border-radius: 8px;
+  padding: 10px 12px;
+  min-width: 180px;
+  color: #fff;
+  font-size: 12px;
+  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.mc-settings-popover[data-open="false"] { display: none; }
+.mc-settings-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+.mc-settings-row > span { color: rgba(255,255,255,0.85); }
+.mc-settings-row > select {
+  font: inherit;
+  background: rgba(255,255,255,0.1);
+  color: #fff;
+  border: 1px solid rgba(255,255,255,0.18);
+  border-radius: 4px;
+  padding: 2px 6px;
+  cursor: pointer;
+}
+.mc-export-confirm {
+  margin-top: 4px;
+  width: 100%;
+  background: #007AFF;
+  color: #fff;
+  border: 0;
+  border-radius: 4px;
+  padding: 6px 10px;
+  font: inherit;
+  font-weight: 600;
+  cursor: pointer;
+  transition: background 120ms ease;
+}
+.mc-export-confirm:hover { background: #0066d6; }
+.mc-export-confirm:disabled { background: rgba(255,255,255,0.18); cursor: not-allowed; }
+
+.mc-export-overlay {
+  position: absolute; inset: 0;
+  background: rgba(0,0,0,0.7);
+  display: flex; justify-content: center; align-items: center;
+  z-index: 2;
+}
+.mc-export-panel {
+  background: rgba(20,20,20,0.96); color: #fff;
+  border-radius: 8px; padding: 16px 20px;
+  text-align: center; min-width: 200px; max-width: 80%;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+}
+.mc-export-title { font-size: 13px; margin-bottom: 10px; opacity: 0.9; }
+.mc-export-track {
+  width: 100%; height: 6px;
+  background: rgba(255,255,255,0.15); border-radius: 3px;
+  margin-bottom: 8px; overflow: hidden;
+}
+.mc-export-fill {
+  height: 100%; width: 0%;
+  background: linear-gradient(90deg, #007AFF, #0056CC);
+  transition: width 0.3s ease; border-radius: 3px;
+}
+.mc-export-text {
+  color: rgba(255,255,255,0.7); font-size: 11px;
+  font-family: Menlo, Monaco, monospace;
+}
+`;
+var styleRefCount = 0;
+function installStyles() {
+  if (styleRefCount === 0) {
+    const el = document.createElement("style");
+    el.setAttribute(STYLE_ATTR, "");
+    el.textContent = STYLE_CSS;
+    document.head.appendChild(el);
+  }
+  styleRefCount++;
+}
+function uninstallStyles() {
+  styleRefCount = Math.max(0, styleRefCount - 1);
+  if (styleRefCount === 0) {
+    document.head.querySelectorAll(`style[${STYLE_ATTR}]`).forEach((n) => n.remove());
+  }
+}
+function formatTime(seconds) {
+  const s = Math.max(0, Math.floor(seconds));
+  const m = Math.floor(s / 60);
+  const r = s % 60;
+  return `${m}:${r.toString().padStart(2, "0")}`;
+}
+function frameToPercent(frame, totalFrames) {
+  if (totalFrames <= 0) return 0;
+  const f = Math.min(Math.max(frame, 0), totalFrames);
+  return f / totalFrames * 100;
+}
+function pxToFrame(clientX, rect, totalFrames) {
+  if (rect.width <= 0 || totalFrames <= 0) return 0;
+  const ratio = (clientX - rect.left) / rect.width;
+  const clamped = Math.min(Math.max(ratio, 0), 1);
+  return Math.round(clamped * totalFrames);
+}
+function pxToFraction(clientX, rect, inset = 0) {
+  const innerLeft = rect.left + inset;
+  const innerWidth = Math.max(0, rect.width - 2 * inset);
+  if (innerWidth <= 0) return 0;
+  const ratio = (clientX - innerLeft) / innerWidth;
+  return Math.min(Math.max(ratio, 0), 1);
+}
+function extensionForMimeType(mime) {
+  const t = (mime || "").toLowerCase();
+  if (t.includes("webm")) return "webm";
+  if (t.includes("quicktime") || t.includes("mov")) return "mov";
+  if (t.includes("matroska") || t.includes("mkv")) return "mkv";
+  return "mp4";
+}
+var Controller = class _Controller {
+  movie;
+  options;
+  root;
+  wrapper;
+  wrappedHere = false;
+  destroyed = false;
+  progressEl;
+  progressFillEl;
+  progressThumbEl;
+  playBtn;
+  muteBtn;
+  timeEl;
+  exportBtn = null;
+  settingsPopoverEl = null;
+  settingsFormatSelect = null;
+  settingsQualitySelect = null;
+  exportConfirmBtn = null;
+  exportFormat = "mp4";
+  exportQuality = "high";
+  settingsOpen = false;
+  hideTimer = null;
+  static HIDE_DELAY_MS = 2500;
+  static PROGRESS_INSET_PX = 12;
+  isScrubbing = false;
+  wasPlayingBeforeScrub = false;
+  activePointerId = null;
+  isExporting = false;
+  exportOverlay = null;
+  exportFillEl = null;
+  exportTextEl = null;
+  keyHandler = null;
+  settingsKeyHandler = null;
+  settingsOutsideHandler = null;
+  onReady = null;
+  onFrame = null;
+  onPause = null;
+  onProgress = null;
+  onWrapPointerMove = null;
+  onWrapMouseLeave = null;
+  resizeObserver = null;
+  volumeSliderEl = null;
+  volumeContainerEl = null;
+  fullscreenBtn = null;
+  isVolumeScrubbing = false;
+  fullscreenChangeHandler = null;
+  wheelHandler = null;
+  constructor(movie, options) {
+    if (!options || !options.canvas) {
+      throw new Error("Controller requires options.canvas (HTMLCanvasElement).");
+    }
+    this.movie = movie;
+    this.options = {
+      canvas: options.canvas,
+      showExportButton: options.showExportButton ?? true,
+      enableKeyboardShortcuts: options.enableKeyboardShortcuts ?? true,
+      className: options.className ?? "movie-controller"
+    };
+    installStyles();
+    this.wrapper = this.ensurePositioningContext(this.options.canvas);
+    this.root = document.createElement("div");
+    this.root.className = this.options.className;
+    this.wrapper.appendChild(this.root);
+    this.buildBar();
+    this.syncRootToCanvas();
+    if (typeof ResizeObserver !== "undefined") {
+      this.resizeObserver = new ResizeObserver(() => this.syncRootToCanvas());
+      this.resizeObserver.observe(this.options.canvas);
+      this.resizeObserver.observe(this.wrapper);
+    }
+    this.root.setAttribute("data-state", "visible");
+    this.bindMovieEvents();
+    this.bindPlayButton();
+    this.bindScrubbing();
+    this.bindMuteButton();
+    this.bindVolumeSlider();
+    this.bindExportPopover();
+    this.bindFullscreen();
+    this.bindVisibility();
+    if (this.options.enableKeyboardShortcuts) this.bindKeyboard();
+  }
+  buildBar() {
+    const popoverHtml = this.options.showExportButton ? `
+      <div class="mc-settings-popover" role="dialog" aria-label="Export settings" data-open="false">
+        <label class="mc-settings-row">
+          <span>Format</span>
+          <select class="mc-settings-format">
+            <option value="mp4">MP4</option>
+            <option value="webm">WebM</option>
+            <option value="mov">MOV</option>
+          </select>
+        </label>
+        <label class="mc-settings-row">
+          <span>Quality</span>
+          <select class="mc-settings-quality">
+            <option value="low">Low</option>
+            <option value="medium">Medium</option>
+            <option value="high" selected>High</option>
+            <option value="very-high">Very High</option>
+          </select>
+        </label>
+        <button type="button" class="mc-export-confirm">Download</button>
+      </div>
+    ` : "";
+    this.root.innerHTML = `
+      <div class="mc-progress" role="slider" tabindex="0" aria-label="Seek" aria-valuemin="0" aria-valuemax="${this.movie.totalFrames}" aria-valuenow="0">
+        <div class="mc-progress-fill"></div>
+        <div class="mc-progress-thumb"></div>
+      </div>
+      <div class="mc-bar">
+        ${popoverHtml}
+        <button class="mc-btn mc-play" aria-label="Play">${ICONS.play}</button>
+        <div class="mc-volume">
+          <button class="mc-btn mc-mute" aria-label="Mute">${ICONS.volumeOn}</button>
+          <div class="mc-vol-slider" role="slider" tabindex="0" aria-label="Volume" aria-valuemin="0" aria-valuemax="100" aria-valuenow="100">
+            <div class="mc-vol-fill"></div>
+            <div class="mc-vol-thumb"></div>
+          </div>
+        </div>
+        <span class="mc-time">0:00 / 0:00</span>
+        <div class="mc-spacer"></div>
+        ${this.options.showExportButton ? `<button class="mc-btn mc-export" aria-label="Export" aria-expanded="false">${ICONS.download}</button>` : ""}
+        <button class="mc-btn mc-fullscreen" aria-label="Enter fullscreen">${ICONS.fullscreenEnter}</button>
+      </div>
+    `;
+    this.progressEl = this.root.querySelector(".mc-progress");
+    this.progressFillEl = this.root.querySelector(".mc-progress-fill");
+    this.progressThumbEl = this.root.querySelector(".mc-progress-thumb");
+    this.playBtn = this.root.querySelector(".mc-play");
+    this.muteBtn = this.root.querySelector(".mc-mute");
+    this.timeEl = this.root.querySelector(".mc-time");
+    this.exportBtn = this.root.querySelector(".mc-export");
+    this.settingsPopoverEl = this.root.querySelector(".mc-settings-popover");
+    this.settingsFormatSelect = this.root.querySelector(".mc-settings-format");
+    this.settingsQualitySelect = this.root.querySelector(".mc-settings-quality");
+    this.exportConfirmBtn = this.root.querySelector(".mc-export-confirm");
+    this.volumeSliderEl = this.root.querySelector(".mc-vol-slider");
+    this.volumeContainerEl = this.root.querySelector(".mc-volume");
+    this.fullscreenBtn = this.root.querySelector(".mc-fullscreen");
+    if (this.settingsFormatSelect) this.settingsFormatSelect.value = this.exportFormat;
+    if (this.settingsQualitySelect) this.settingsQualitySelect.value = this.exportQuality;
+  }
+  ensurePositioningContext(canvas) {
+    const parent = canvas.parentElement;
+    if (!parent) {
+      throw new Error("Controller: canvas must be attached to the DOM before constructing.");
+    }
+    const pos = getComputedStyle(parent).position;
+    if (pos === "relative" || pos === "absolute" || pos === "fixed" || pos === "sticky") {
+      parent.setAttribute("data-mc-wrap", "");
+      return parent;
+    }
+    const wrap = document.createElement("div");
+    wrap.className = "movie-controller-wrap";
+    wrap.setAttribute("data-mc-wrap", "");
+    wrap.style.position = "relative";
+    wrap.style.display = "inline-block";
+    wrap.style.lineHeight = "0";
+    parent.insertBefore(wrap, canvas);
+    wrap.appendChild(canvas);
+    this.wrappedHere = true;
+    return wrap;
+  }
+  bindMovieEvents() {
+    this.onReady = () => {
+      this.progressEl.setAttribute("aria-valuemax", String(this.movie.totalFrames));
+      this.refreshTime(0);
+      this.refreshProgress(0);
+      this.refreshVolumeUI();
+    };
+    this.onFrame = ({ frame, totalFrames }) => {
+      if (!this.isScrubbing) {
+        this.refreshProgress(frame, totalFrames);
+      }
+      this.refreshTime(frame);
+    };
+    this.onPause = () => {
+      this.refreshPlayIcon();
+      this.kickIdleTimer();
+    };
+    this.onProgress = ({ progress, frame, totalFrames }) => {
+      if (!this.isExporting || !this.exportFillEl || !this.exportTextEl) return;
+      this.exportFillEl.style.width = `${progress}%`;
+      this.exportTextEl.textContent = `${progress}% (${frame} / ${totalFrames} frames)`;
+    };
+    this.movie.on("ready", this.onReady);
+    this.movie.on("frame", this.onFrame);
+    this.movie.on("pause", this.onPause);
+    this.movie.on("progress", this.onProgress);
+  }
+  bindPlayButton() {
+    this.playBtn.addEventListener("click", () => {
+      if (this.movie.isPlaying) {
+        this.movie.pause();
+      } else {
+        this.movie.play();
+        this.refreshPlayIcon();
+        this.kickIdleTimer();
+      }
+    });
+  }
+  refreshPlayIcon() {
+    this.playBtn.innerHTML = this.movie.isPlaying ? ICONS.pause : ICONS.play;
+    this.playBtn.setAttribute("aria-label", this.movie.isPlaying ? "Pause" : "Play");
+  }
+  bindMuteButton() {
+    this.muteBtn.addEventListener("click", () => {
+      this.movie.toggleMute();
+      this.refreshVolumeUI();
+    });
+  }
+  refreshMuteIcon() {
+    const silent = this.movie.muted || this.movie.volume <= 0;
+    this.muteBtn.innerHTML = silent ? ICONS.volumeOff : ICONS.volumeOn;
+    this.muteBtn.setAttribute("aria-label", silent ? "Unmute" : "Mute");
+  }
+  refreshVolumeUI() {
+    this.refreshMuteIcon();
+    if (!this.volumeSliderEl) return;
+    const effective = this.movie.muted ? 0 : this.movie.volume;
+    this.volumeSliderEl.style.setProperty("--mc-volume", String(effective));
+    this.volumeSliderEl.setAttribute("aria-valuenow", String(Math.round(effective * 100)));
+  }
+  bindVolumeSlider() {
+    if (!this.volumeSliderEl || !this.volumeContainerEl) return;
+    const slider = this.volumeSliderEl;
+    const container = this.volumeContainerEl;
+    const setFromPointer = (clientX) => {
+      const rect = slider.getBoundingClientRect();
+      const v = pxToFraction(clientX, { left: rect.left, width: rect.width }, 4);
+      this.movie.volume = v;
+      if (this.movie.muted && v > 0) this.movie.muted = false;
+      this.refreshVolumeUI();
+    };
+    const onDown = (e) => {
+      this.isVolumeScrubbing = true;
+      slider.classList.add("mc-scrubbing");
+      try {
+        slider.setPointerCapture(e.pointerId);
+      } catch {
+      }
+      setFromPointer(e.clientX);
+    };
+    const onMove = (e) => {
+      if (!this.isVolumeScrubbing) return;
+      setFromPointer(e.clientX);
+    };
+    const onUp = (e) => {
+      if (!this.isVolumeScrubbing) return;
+      this.isVolumeScrubbing = false;
+      slider.classList.remove("mc-scrubbing");
+      try {
+        slider.releasePointerCapture(e.pointerId);
+      } catch {
+      }
+    };
+    slider.addEventListener("pointerdown", onDown);
+    slider.addEventListener("pointermove", onMove);
+    slider.addEventListener("pointerup", onUp);
+    slider.addEventListener("pointercancel", onUp);
+    this.wheelHandler = (e) => {
+      e.preventDefault();
+      this.adjustVolume(e.deltaY < 0 ? 0.05 : -0.05);
+    };
+    container.addEventListener("wheel", this.wheelHandler, { passive: false });
+  }
+  bindFullscreen() {
+    if (!this.fullscreenBtn) return;
+    this.fullscreenBtn.addEventListener("click", () => {
+      void this.toggleFullscreen();
+    });
+    this.fullscreenChangeHandler = () => {
+      this.refreshFullscreenIcon();
+      this.syncRootToCanvas();
+    };
+    document.addEventListener("fullscreenchange", this.fullscreenChangeHandler);
+  }
+  async toggleFullscreen() {
+    try {
+      if (document.fullscreenElement === this.wrapper) {
+        await document.exitFullscreen();
+      } else {
+        await this.wrapper.requestFullscreen();
+      }
+    } catch (err) {
+      console.warn("pixi-effects: fullscreen denied:", err);
+    }
+  }
+  refreshFullscreenIcon() {
+    if (!this.fullscreenBtn) return;
+    const inFs = document.fullscreenElement === this.wrapper;
+    this.fullscreenBtn.innerHTML = inFs ? ICONS.fullscreenExit : ICONS.fullscreenEnter;
+    this.fullscreenBtn.setAttribute("aria-label", inFs ? "Exit fullscreen" : "Enter fullscreen");
+  }
+  refreshProgress(frame, totalFrames) {
+    const total = totalFrames ?? this.movie.totalFrames;
+    const pct = frameToPercent(frame, total);
+    this.progressEl.style.setProperty("--mc-fill", String(pct / 100));
+    this.progressEl.setAttribute("aria-valuenow", String(frame));
+  }
+  refreshTime(frame) {
+    const fr = this.movie.frameRate || 1;
+    const cur = frame / fr;
+    const total = this.movie.totalFrames / fr;
+    this.timeEl.textContent = `${formatTime(cur)} / ${formatTime(total)}`;
+  }
+  bindScrubbing() {
+    const onDown = (e) => {
+      this.isScrubbing = true;
+      this.activePointerId = e.pointerId;
+      this.wasPlayingBeforeScrub = this.movie.isPlaying;
+      if (this.movie.isPlaying) {
+        this.movie.pause();
+        this.refreshPlayIcon();
+      }
+      this.progressEl.classList.add("mc-scrubbing");
+      try {
+        this.progressEl.setPointerCapture(e.pointerId);
+      } catch {
+      }
+      this.seekFromPointer(e.clientX);
+    };
+    const onMove = (e) => {
+      if (!this.isScrubbing) return;
+      this.seekFromPointer(e.clientX);
+    };
+    const onUp = (e) => {
+      if (!this.isScrubbing) return;
+      this.seekFromPointer(e.clientX);
+      this.isScrubbing = false;
+      this.activePointerId = null;
+      this.progressEl.classList.remove("mc-scrubbing");
+      try {
+        this.progressEl.releasePointerCapture(e.pointerId);
+      } catch {
+      }
+      if (this.wasPlayingBeforeScrub) {
+        this.movie.play();
+        this.refreshPlayIcon();
+      }
+    };
+    this.progressEl.addEventListener("pointerdown", onDown);
+    this.progressEl.addEventListener("pointermove", onMove);
+    this.progressEl.addEventListener("pointerup", onUp);
+    this.progressEl.addEventListener("pointercancel", onUp);
+  }
+  seekFromPointer(clientX) {
+    const rect = this.progressEl.getBoundingClientRect();
+    const inset = _Controller.PROGRESS_INSET_PX;
+    const innerLeft = rect.left + inset;
+    const innerWidth = Math.max(0, rect.width - 2 * inset);
+    const frame = pxToFrame(clientX, { left: innerLeft, width: innerWidth }, this.movie.totalFrames);
+    this.refreshProgress(frame);
+    void this.movie.gotoFrame(frame);
+  }
+  bindExportPopover() {
+    if (!this.exportBtn || !this.settingsPopoverEl) return;
+    this.exportBtn.addEventListener("click", (e) => {
+      e.stopPropagation();
+      this.toggleSettings(!this.settingsOpen);
+    });
+    if (this.exportConfirmBtn) {
+      this.exportConfirmBtn.addEventListener("click", () => {
+        this.toggleSettings(false);
+        void this.handleExport();
+      });
+    }
+    if (this.settingsFormatSelect) {
+      this.settingsFormatSelect.addEventListener("change", (e) => {
+        const v = e.target.value;
+        if (v === "mp4" || v === "webm" || v === "mov") this.exportFormat = v;
+      });
+    }
+    if (this.settingsQualitySelect) {
+      this.settingsQualitySelect.addEventListener("change", (e) => {
+        const v = e.target.value;
+        if (v === "low" || v === "medium" || v === "high" || v === "very-high") this.exportQuality = v;
+      });
+    }
+    this.settingsKeyHandler = (e) => {
+      if (e.code === "Escape" && this.settingsOpen) {
+        e.preventDefault();
+        this.toggleSettings(false);
+      }
+    };
+    document.addEventListener("keydown", this.settingsKeyHandler);
+    this.settingsOutsideHandler = (e) => {
+      if (!this.settingsOpen) return;
+      const target = e.target;
+      if (!target) return;
+      if (this.settingsPopoverEl?.contains(target)) return;
+      if (this.exportBtn?.contains(target)) return;
+      this.toggleSettings(false);
+    };
+    document.addEventListener("pointerdown", this.settingsOutsideHandler);
+  }
+  toggleSettings(open) {
+    if (!this.exportBtn || !this.settingsPopoverEl) return;
+    this.settingsOpen = open;
+    this.settingsPopoverEl.setAttribute("data-open", open ? "true" : "false");
+    this.exportBtn.setAttribute("aria-expanded", open ? "true" : "false");
+    if (open) {
+      if (this.hideTimer) {
+        clearTimeout(this.hideTimer);
+        this.hideTimer = null;
+      }
+      this.setVisible(true);
+    } else {
+      this.kickIdleTimer();
+    }
+  }
+  async handleExport() {
+    if (this.isExporting) return;
+    this.isExporting = true;
+    const wasPlaying = this.movie.isPlaying;
+    if (wasPlaying) {
+      this.movie.pause();
+      this.refreshPlayIcon();
+    }
+    this.showExportOverlay();
+    try {
+      const blob = await this.movie.render({
+        format: this.exportFormat,
+        video: { bitrate: this.exportQuality },
+        audio: { bitrate: this.exportQuality }
+      });
+      if (this.exportFillEl) this.exportFillEl.style.width = "100%";
+      if (this.exportTextEl) this.exportTextEl.textContent = "Preparing download...";
+      this.triggerDownload(blob);
+      await new Promise((r) => setTimeout(r, 300));
+    } catch (err) {
+      console.error("Export failed:", err);
+      alert("Export failed.");
+    } finally {
+      this.hideExportOverlay();
+      this.isExporting = false;
+      if (wasPlaying) {
+        this.movie.play();
+        this.refreshPlayIcon();
+      }
+    }
+  }
+  triggerDownload(blob) {
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = this.makeFilename(blob);
+    a.style.display = "none";
+    document.body.appendChild(a);
+    a.click();
+    a.remove();
+    setTimeout(() => URL.revokeObjectURL(url), 100);
+  }
+  makeFilename(blob) {
+    const ext = extensionForMimeType(blob.type);
+    const d = /* @__PURE__ */ new Date();
+    const pad = (n) => n.toString().padStart(2, "0");
+    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() {
+    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-track"><div class="mc-export-fill"></div></div>
+        <div class="mc-export-text">0% (0 / 0 frames)</div>
+      </div>
+    `;
+    this.root.appendChild(overlay);
+    this.exportOverlay = overlay;
+    this.exportFillEl = overlay.querySelector(".mc-export-fill");
+    this.exportTextEl = overlay.querySelector(".mc-export-text");
+  }
+  hideExportOverlay() {
+    if (this.exportOverlay) {
+      this.exportOverlay.remove();
+      this.exportOverlay = null;
+      this.exportFillEl = null;
+      this.exportTextEl = null;
+    }
+  }
+  bindVisibility() {
+    const wrap = this.wrapper;
+    this.onWrapPointerMove = () => this.kickIdleTimer();
+    this.onWrapMouseLeave = () => {
+      if (!this.settingsOpen && !this.isScrubbing && !this.isVolumeScrubbing) this.setVisible(false);
+    };
+    wrap.addEventListener("pointermove", this.onWrapPointerMove);
+    wrap.addEventListener("mouseleave", this.onWrapMouseLeave);
+    this.root.addEventListener("pointerenter", () => {
+      if (this.hideTimer) {
+        clearTimeout(this.hideTimer);
+        this.hideTimer = null;
+      }
+      this.setVisible(true);
+    });
+  }
+  kickIdleTimer() {
+    this.setVisible(true);
+    if (this.hideTimer) {
+      clearTimeout(this.hideTimer);
+      this.hideTimer = null;
+    }
+    if (this.settingsOpen) return;
+    this.hideTimer = setTimeout(() => {
+      if (!this.isScrubbing && !this.isVolumeScrubbing && !this.settingsOpen) this.setVisible(false);
+    }, _Controller.HIDE_DELAY_MS);
+  }
+  setVisible(v) {
+    this.root.setAttribute("data-state", v ? "visible" : "hidden");
+  }
+  syncRootToCanvas() {
+    const c = this.options.canvas;
+    const cr = c.getBoundingClientRect();
+    const wr = this.wrapper.getBoundingClientRect();
+    this.root.style.left = `${cr.left - wr.left}px`;
+    this.root.style.top = `${cr.top - wr.top}px`;
+    this.root.style.width = `${cr.width}px`;
+    this.root.style.height = `${cr.height}px`;
+  }
+  bindKeyboard() {
+    this.keyHandler = (e) => {
+      const target = e.target;
+      if (target) {
+        const tag = target.tagName;
+        if (tag === "INPUT" || tag === "TEXTAREA" || tag === "SELECT") return;
+        if (target.isContentEditable || target.getAttribute?.("contenteditable") === "true") return;
+      }
+      if (this.isExporting) return;
+      switch (e.code) {
+        case "Space":
+          e.preventDefault();
+          this.playBtn.click();
+          break;
+        case "ArrowLeft":
+          e.preventDefault();
+          this.stepFrame(-1);
+          break;
+        case "ArrowRight":
+          e.preventDefault();
+          this.stepFrame(1);
+          break;
+        case "ArrowUp":
+          e.preventDefault();
+          this.adjustVolume(0.05);
+          break;
+        case "ArrowDown":
+          e.preventDefault();
+          this.adjustVolume(-0.05);
+          break;
+        case "KeyM":
+          e.preventDefault();
+          this.muteBtn.click();
+          break;
+        case "KeyE":
+          if (e.shiftKey && this.exportBtn) {
+            e.preventDefault();
+            void this.handleExport();
+          }
+          break;
+        case "KeyF":
+          if (this.fullscreenBtn) {
+            e.preventDefault();
+            void this.toggleFullscreen();
+          }
+          break;
+      }
+    };
+    document.addEventListener("keydown", this.keyHandler);
+  }
+  stepFrame(delta) {
+    const next = Math.max(0, Math.min(this.movie.totalFrames, this.movie.currentFrame + delta));
+    void this.movie.gotoFrame(next);
+  }
+  adjustVolume(delta) {
+    const next = Math.max(0, Math.min(1, this.movie.volume + delta));
+    this.movie.volume = next;
+    if (this.movie.muted && next > 0) this.movie.muted = false;
+    this.refreshVolumeUI();
+  }
+  destroy() {
+    if (this.destroyed) return;
+    this.destroyed = true;
+    if (this.onReady) {
+      this.movie.off("ready", this.onReady);
+      this.onReady = null;
+    }
+    if (this.onFrame) {
+      this.movie.off("frame", this.onFrame);
+      this.onFrame = null;
+    }
+    if (this.onPause) {
+      this.movie.off("pause", this.onPause);
+      this.onPause = null;
+    }
+    if (this.onProgress) {
+      this.movie.off("progress", this.onProgress);
+      this.onProgress = null;
+    }
+    if (this.onWrapPointerMove) {
+      this.wrapper.removeEventListener("pointermove", this.onWrapPointerMove);
+      this.onWrapPointerMove = null;
+    }
+    if (this.onWrapMouseLeave) {
+      this.wrapper.removeEventListener("mouseleave", this.onWrapMouseLeave);
+      this.onWrapMouseLeave = null;
+    }
+    if (this.resizeObserver) {
+      this.resizeObserver.disconnect();
+      this.resizeObserver = null;
+    }
+    this.root.remove();
+    if (this.wrappedHere) {
+      const parent = this.wrapper.parentElement;
+      const canvas = this.options.canvas;
+      if (parent) {
+        parent.insertBefore(canvas, this.wrapper);
+        this.wrapper.remove();
+      }
+    } else {
+      this.wrapper.removeAttribute("data-mc-wrap");
+    }
+    if (this.keyHandler) {
+      document.removeEventListener("keydown", this.keyHandler);
+      this.keyHandler = null;
+    }
+    if (this.settingsKeyHandler) {
+      document.removeEventListener("keydown", this.settingsKeyHandler);
+      this.settingsKeyHandler = null;
+    }
+    if (this.settingsOutsideHandler) {
+      document.removeEventListener("pointerdown", this.settingsOutsideHandler);
+      this.settingsOutsideHandler = null;
+    }
+    if (this.fullscreenChangeHandler) {
+      document.removeEventListener("fullscreenchange", this.fullscreenChangeHandler);
+      this.fullscreenChangeHandler = null;
+    }
+    if (this.wheelHandler && this.volumeContainerEl) {
+      this.volumeContainerEl.removeEventListener("wheel", this.wheelHandler);
+      this.wheelHandler = null;
+    }
+    if (document.fullscreenElement === this.wrapper) {
+      void document.exitFullscreen().catch(() => {
+      });
+    }
+    if (this.hideTimer) {
+      clearTimeout(this.hideTimer);
+      this.hideTimer = null;
+    }
+    this.hideExportOverlay();
+    uninstallStyles();
+  }
+};
+
+exports.Controller = Controller;
+exports.extensionForMimeType = extensionForMimeType;
+exports.formatTime = formatTime;
+exports.frameToPercent = frameToPercent;
+exports.pxToFraction = pxToFraction;
+exports.pxToFrame = pxToFrame;
+//# sourceMappingURL=Controller.cjs.map
+//# sourceMappingURL=Controller.cjs.map