pixi-effects 0.6.0 → 0.8.0

package/dist/Controller.js

@@ -1,3 +1,5 @@
+import { warnUnknownOptions } from './chunk-DKGG7WD4.js';
+
 // 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>',
@@ -9,12 +11,12 @@ var ICONS = {
   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 = `
+var CONTROLLER_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;
+  font-family: var(--mc-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
@@ -34,31 +36,31 @@ var STYLE_CSS = `
   outline: none;
 }
 .mc-progress:focus-visible {
-  outline: 2px solid #007AFF;
+  outline: 2px solid var(--mc-accent, #007AFF);
   outline-offset: 2px;
 }
 .mc-progress::before {
   content: ""; position: absolute; left: 12px; right: 12px;
-  height: 3px; background: rgba(255,255,255,0.25);
+  height: var(--mc-track-height, 3px); background: var(--mc-track, rgba(255,255,255,0.25));
   transition: height 120ms ease;
 }
-.mc-progress:hover::before, .mc-progress.mc-scrubbing::before { height: 5px; }
+.mc-progress:hover::before, .mc-progress.mc-scrubbing::before { height: calc(var(--mc-track-height, 3px) + 2px); }
 .mc-progress-fill {
   position: absolute; left: 12px; top: 50%;
-  height: 3px;
+  height: var(--mc-track-height, 3px);
   width: calc((100% - 24px) * var(--mc-fill, 0));
-  background: #007AFF;
+  background: var(--mc-accent, #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.mc-scrubbing .mc-progress-fill { height: calc(var(--mc-track-height, 3px) + 2px); }
 .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;
+  background: var(--mc-accent, #007AFF);
   transform: translate(-50%, -50%) scale(0);
   transition: transform 120ms ease;
   pointer-events: none;
@@ -72,22 +74,22 @@ var STYLE_CSS = `
   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;
+  background: var(--mc-bar-bg, linear-gradient(to top, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0) 100%));
+  color: var(--mc-fg, #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;
+  color: var(--mc-fg, #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;
+  color: var(--mc-fg, #fff); opacity: 0.85;
   min-width: 90px;
 }
 .mc-spacer { flex: 1; }
@@ -111,16 +113,16 @@ var STYLE_CSS = `
   width: 70px;
   margin-left: 6px;
 }
-.mc-vol-slider:focus-visible { outline: 2px solid #007AFF; outline-offset: 2px; }
+.mc-vol-slider:focus-visible { outline: 2px solid var(--mc-accent, #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;
+  height: 3px; background: var(--mc-track, 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;
+  background: var(--mc-fg, #fff);
   transform: translateY(-50%);
   border-radius: 2px;
   pointer-events: none;
@@ -129,7 +131,7 @@ var STYLE_CSS = `
   position: absolute; top: 50%;
   left: calc(4px + (100% - 8px) * var(--mc-volume, 1));
   width: 10px; height: 10px; border-radius: 50%;
-  background: #fff;
+  background: var(--mc-fg, #fff);
   transform: translate(-50%, -50%);
   pointer-events: none;
 }
@@ -183,7 +185,7 @@ var STYLE_CSS = `
 .mc-export-confirm {
   margin-top: 4px;
   width: 100%;
-  background: #007AFF;
+  background: var(--mc-accent, #007AFF);
   color: #fff;
   border: 0;
   border-radius: 4px;
@@ -216,7 +218,7 @@ var STYLE_CSS = `
 }
 .mc-export-fill {
   height: 100%; width: 0%;
-  background: linear-gradient(90deg, #007AFF, #0056CC);
+  background: linear-gradient(90deg, var(--mc-accent, #007AFF), var(--mc-accent, #0056CC));
   transition: width 0.3s ease; border-radius: 3px;
 }
 .mc-export-text {
@@ -229,7 +231,7 @@ function installStyles() {
   if (styleRefCount === 0) {
     const el = document.createElement("style");
     el.setAttribute(STYLE_ATTR, "");
-    el.textContent = STYLE_CSS;
+    el.textContent = CONTROLLER_CSS;
     document.head.appendChild(el);
   }
   styleRefCount++;
@@ -271,12 +273,25 @@ function extensionForMimeType(mime) {
   if (t.includes("matroska") || t.includes("mkv")) return "mkv";
   return "mp4";
 }
+var THEME_PROPERTIES = {
+  accent: "--mc-accent",
+  foreground: "--mc-fg",
+  track: "--mc-track",
+  barBackground: "--mc-bar-bg",
+  trackHeight: "--mc-track-height",
+  font: "--mc-font"
+};
 var Controller = class _Controller {
   movie;
   options;
   root;
   wrapper;
   wrappedHere = false;
+  /** The canvas's own inline width / height, as the page wrote them (we override them while the wrapper is fitted). */
+  canvasInlineWidth = "";
+  canvasInlineHeight = "";
+  fitWrapHandler = null;
+  fitObserver = null;
   destroyed = false;
   progressEl;
   progressFillEl;
@@ -338,6 +353,8 @@ var Controller = class _Controller {
     this.root.className = this.options.className;
     this.wrapper.appendChild(this.root);
     this.buildBar();
+    this.setTheme(options.theme ?? {});
+    this.bindFitWrap();
     this.syncRootToCanvas();
     if (typeof ResizeObserver !== "undefined") {
       this.resizeObserver = new ResizeObserver(() => this.syncRootToCanvas());
@@ -416,6 +433,17 @@ var Controller = class _Controller {
     if (this.settingsFormatSelect) this.settingsFormatSelect.value = this.exportFormat;
     if (this.settingsQualitySelect) this.settingsQualitySelect.value = this.exportQuality;
   }
+  /** Change the look of the bar (see {@link ControllerTheme}): only the keys you give change, `null` restores the default. */
+  setTheme(theme) {
+    warnUnknownOptions("Controller theme", theme, Object.keys(THEME_PROPERTIES));
+    for (const key of Object.keys(THEME_PROPERTIES)) {
+      if (!(key in theme)) continue;
+      const value = theme[key];
+      const prop = THEME_PROPERTIES[key];
+      if (value === null || value === void 0 || value === "") this.root.style.removeProperty(prop);
+      else this.root.style.setProperty(prop, typeof value === "number" ? `${value}px` : String(value));
+    }
+  }
   ensurePositioningContext(canvas) {
     const parent = canvas.parentElement;
     if (!parent) {
@@ -435,8 +463,56 @@ var Controller = class _Controller {
     parent.insertBefore(wrap, canvas);
     wrap.appendChild(canvas);
     this.wrappedHere = true;
+    this.canvasInlineWidth = canvas.style.width;
+    this.canvasInlineHeight = canvas.style.height;
     return wrap;
   }
+  /**
+   * Make the wrapper exactly as wide as the canvas. A shrink-to-fit wrapper around a canvas that is sized in percent (the usual
+   * `canvas { width: min(960px, 100%) }`) is as wide as the canvas's width ATTRIBUTE (1280), so the picture sat at its left edge
+   * with an empty strip beside it. We measure the canvas as the page styled it (the wrapper made transparent to layout), give
+   * the wrapper that width, and let the canvas fill the wrapper. Re-measured when the window or the page's box changes.
+   */
+  fitWrap() {
+    if (!this.wrappedHere) return;
+    const wrap = this.wrapper, canvas = this.options.canvas;
+    if (document.fullscreenElement === wrap) {
+      wrap.style.width = "";
+      canvas.style.width = this.canvasInlineWidth;
+      canvas.style.height = this.canvasInlineHeight;
+      return;
+    }
+    canvas.style.width = this.canvasInlineWidth;
+    canvas.style.height = this.canvasInlineHeight;
+    const display = wrap.style.display;
+    wrap.style.display = "contents";
+    wrap.style.width = "";
+    const w = canvas.getBoundingClientRect().width;
+    wrap.style.display = display;
+    if (!(w > 0)) return;
+    wrap.style.width = `${w}px`;
+    canvas.style.width = "100%";
+    canvas.style.height = "auto";
+  }
+  bindFitWrap() {
+    if (!this.wrappedHere) return;
+    this.fitWrap();
+    let queued = false;
+    this.fitWrapHandler = () => {
+      if (queued) return;
+      queued = true;
+      requestAnimationFrame(() => {
+        queued = false;
+        this.fitWrap();
+      });
+    };
+    window.addEventListener("resize", this.fitWrapHandler);
+    const parent = this.wrapper.parentElement;
+    if (parent && typeof ResizeObserver !== "undefined") {
+      this.fitObserver = new ResizeObserver(this.fitWrapHandler);
+      this.fitObserver.observe(parent);
+    }
+  }
   bindMovieEvents() {
     this.onReady = () => {
       this.progressEl.setAttribute("aria-valuemax", String(this.movie.totalFrames));
@@ -549,12 +625,25 @@ var Controller = class _Controller {
     };
     container.addEventListener("wheel", this.wheelHandler, { passive: false });
   }
+  /**
+   * Does this browser have the Fullscreen API for an element? iPhone Safari does not (it can only put a <video> in fullscreen),
+   * and a button that does nothing is worse than none.
+   */
+  supportsFullscreen() {
+    return typeof this.wrapper.requestFullscreen === "function" && document.fullscreenEnabled !== false;
+  }
   bindFullscreen() {
     if (!this.fullscreenBtn) return;
+    if (!this.supportsFullscreen()) {
+      this.fullscreenBtn.remove();
+      this.fullscreenBtn = null;
+      return;
+    }
     this.fullscreenBtn.addEventListener("click", () => {
       void this.toggleFullscreen();
     });
     this.fullscreenChangeHandler = () => {
+      this.fitWrap();
       this.refreshFullscreenIcon();
       this.syncRootToCanvas();
     };
@@ -912,6 +1001,18 @@ var Controller = class _Controller {
       this.resizeObserver.disconnect();
       this.resizeObserver = null;
     }
+    if (this.fitObserver) {
+      this.fitObserver.disconnect();
+      this.fitObserver = null;
+    }
+    if (this.fitWrapHandler) {
+      window.removeEventListener("resize", this.fitWrapHandler);
+      this.fitWrapHandler = null;
+    }
+    if (this.wrappedHere) {
+      this.options.canvas.style.width = this.canvasInlineWidth;
+      this.options.canvas.style.height = this.canvasInlineHeight;
+    }
     this.root.remove();
     if (this.wrappedHere) {
       const parent = this.wrapper.parentElement;
@@ -960,6 +1061,6 @@ var Controller = class _Controller {
   }
 };
 
-export { Controller, extensionForMimeType, formatTime, frameToPercent, pxToFraction, pxToFrame };
+export { CONTROLLER_CSS, Controller, extensionForMimeType, formatTime, frameToPercent, pxToFraction, pxToFrame };
 //# sourceMappingURL=Controller.js.map
 //# sourceMappingURL=Controller.js.map