pixi-effects 0.7.0 → 0.8.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changelog
 
+## 0.8.0
+
+**Added**
+
+- Movie events with the names an HTML5 `<video>` uses: `ended` (playback ran off the end, after `pause`), `seeking` / `seeked` (a `gotoFrame()` to another frame; not for playback ticks, `render()`, `snapshot()` or `contactSheet()`), `volumechange` (`{ volume, muted }`) and `error` (`{ where: 'init' | 'render' | 'playback', message, error }`; the call still rejects). A player of your own needs nothing else: `examples/15-custom-player.html` is a complete one, and `docs/api.md` has a section on it.
+- `Controller` theme: the bar's colours and thickness are CSS custom properties (`--mc-accent`, `--mc-fg`, `--mc-track`, `--mc-bar-bg`, `--mc-track-height`, `--mc-font`) with the old values as defaults, set by `new Controller(movie, { canvas, theme: { accent: '#ff4d6d' } })`, by `controller.setTheme(…)` (`null` = default) or by your page CSS. `CONTROLLER_CSS` is exported.
+- `{ type: 'colorGradient', gradientType: 'linear' | 'radial' | 'conic' }`: the filter's own `type` option clashes with the DSL's `type`. 40 of the named filters are now rendered and exported in a real browser (`examples/_checks/named-filters-2.html` is the second half); the table in `docs/dsl.md` lists each one's options, and which ones are driven by `time` or need a texture.
+- CI (`.github/workflows/ci.yml`): typecheck, build and unit tests on every push and pull request (Node 22), and the real-browser tool tests in headless Chrome as a non-blocking job.
+
+**Fixed**
+
+- The player showed a fullscreen button on browsers without the Fullscreen API for elements (iPhone Safari, which can only fullscreen a `<video>`): a button that did nothing. It is not shown there now, and the F key does nothing.
+- Exporting a movie WITH SOUND to mp4 / mov failed on browsers without an AAC encoder (Chrome on Linux, which is also what a Linux server or CI runs) with "This specific encoder configuration (mp4a.40.2 …) is not supported". The audio codec is now the first one the browser can encode (aac, then opus, mp3, flac for mp4; opus, vorbis for webm), with a warning that says so; a codec you name with `audio.codec` is never swapped, and its failure says which one would work. Found by the real-browser CI job; checked by making `AudioEncoder.isConfigSupported` refuse AAC: the file was h264 + opus.
+
 ## 0.7.0
 
 **Fixed**

package/README.md

@@ -1,6 +1,6 @@
 # pixi-effects
 
-> **Status**: experimental — current release `0.7.0`. The API may still change between minor versions (see [CHANGELOG](./CHANGELOG.md): `0.7.0` adds filters by name, the `pixi-effects-render` and `pixi-effects-view` commands and the timeline chart, `0.6.0` adds draw-on strokes (`trimEnd`) and text that changes over time, `0.5.0` adds synthesised sound effects (`sfx`, no files) and the `check` tool, `0.4.0` makes a mask share its layer's lifetime, `0.3.0` made keyframe `at` relative to the layer).
+> **Status**: experimental — current release `0.8.0`. The API may still change between minor versions (see [CHANGELOG](./CHANGELOG.md): `0.8.0` adds events and a theme for building your own player, `0.7.0` adds filters by name, the `pixi-effects-render` and `pixi-effects-view` commands and the timeline chart, `0.6.0` adds draw-on strokes (`trimEnd`) and text that changes over time, `0.5.0` adds synthesised sound effects (`sfx`, no files) and the `check` tool, `0.4.0` makes a mask share its layer's lifetime, `0.3.0` made keyframe `at` relative to the layer).
 
 **[Gallery →](https://yjmtmtk.github.io/pixi-effects/examples/gallery/)** · 33 portfolio pieces written as plain data by AI models · **[Live demos →](https://yjmtmtk.github.io/pixi-effects/)** · 12 numbered examples + an in-browser playground.
 
@@ -15,7 +15,7 @@ Declarative composition and video rendering for the web. After Effects-style tim
 - **Presets** — `kenBurns` for stills, `withFade` for fade-in/out.
 - **2.5D layers & camera** — add `threeD: true`, `z`, `rotationX/Y` and a `{ type: 'camera' }` layer for parallax, flips and dolly zooms; no three.js needed.
 - **three.js layer** *(optional)* — drop a real three.js scene in as a layer via `pixi-effects/three`; keyframes drive its objects (`three.cube.rotation.y`).
-- **Built-in player UI** — drop-in HTML5-`<video>`-style overlay controller (play, scrub, mute, volume, fullscreen, export-to-file).
+- **Built-in player UI — or your own** — a drop-in HTML5-`<video>`-style overlay controller (play, scrub, mute, volume, fullscreen, export-to-file) whose colours are one option (`theme: { accent: '#ff4d6d' }`); or build a player yourself on the movie's `<video>`-named events (`play pause ended seeking seeked volumechange error`).
 - **MP4 / WebM / MOV export** — pick container and quality from the controller, call `movie.render()` from code, or render headless from the command line (`pixi-effects-render`).
 - **A timeline you can read and scrub** — `movie.timelineChart()` draws every layer as a bar on a time axis; `pixi-effects-view` opens the page with that timeline under it, zoomable, with a playhead you can drag.
 - **Tiny dependency surface** — only `mediabunny` (runtime) plus PixiJS and GSAP (peer deps). three.js is an *optional* peer, needed only if you import `pixi-effects/three`.
@@ -40,8 +40,8 @@ Drop the imports into an [importmap](https://developer.mozilla.org/docs/Web/HTML
     "gsap":                    "https://esm.sh/gsap@3.12.5",
     "gsap/PixiPlugin":         "https://esm.sh/gsap@3.12.5/PixiPlugin",
     "mediabunny":              "https://esm.sh/mediabunny",
-    "pixi-effects":            "https://cdn.jsdelivr.net/npm/pixi-effects@0.7.0/dist/index.js",
-    "pixi-effects/controller": "https://cdn.jsdelivr.net/npm/pixi-effects@0.7.0/dist/Controller.js"
+    "pixi-effects":            "https://cdn.jsdelivr.net/npm/pixi-effects@0.8.0/dist/index.js",
+    "pixi-effects/controller": "https://cdn.jsdelivr.net/npm/pixi-effects@0.8.0/dist/Controller.js"
   }
 }
 </script>
@@ -52,7 +52,7 @@ Drop the imports into an [importmap](https://developer.mozilla.org/docs/Web/HTML
 </script>
 ```
 
-Load the `dist/` files **as they are** (jsDelivr's `/npm/…/dist/…`, or unpkg's `https://unpkg.com/pixi-effects@0.7.0/dist/index.js`) rather than a CDN-rebundled build such as `esm.sh/pixi-effects` or jsDelivr's `+esm`: the entries (`pixi-effects`, `…/controller`, `…/three`) share internal chunks, which only works when each file is served untouched.
+Load the `dist/` files **as they are** (jsDelivr's `/npm/…/dist/…`, or unpkg's `https://unpkg.com/pixi-effects@0.8.0/dist/index.js`) rather than a CDN-rebundled build such as `esm.sh/pixi-effects` or jsDelivr's `+esm`: the entries (`pixi-effects`, `…/controller`, `…/three`) share internal chunks, which only works when each file is served untouched.
 
 > **Using three.js?** Add two more entries (`three` and `pixi-effects/three`) to this importmap — see [Adding three.js](#adding-threejs-optional) below.
 >
@@ -68,7 +68,7 @@ Add two more entries to the importmap above: three.js itself, and the `pixi-effe
   "imports": {
     "...":                     "(everything from the importmap above)",
     "three":                   "https://esm.sh/three@0.178.0",
-    "pixi-effects/three":      "https://cdn.jsdelivr.net/npm/pixi-effects@0.7.0/dist/three.js"
+    "pixi-effects/three":      "https://cdn.jsdelivr.net/npm/pixi-effects@0.8.0/dist/three.js"
   }
 }
 </script>
@@ -189,6 +189,7 @@ They ship in the npm package (`node_modules/pixi-effects/ai/`).
   - `11-depth.html` — 2.5D layers and camera: parallax, spin, dolly zoom
   - `12-title-motion.html` — a staggered 2.5D title: letters fly in from depth, particles, orbiting camera
   - `13-sfx.html` — synthesised sound effects (no audio files), a riser into a hit, a custom voice
+  - `15-custom-player.html` — a complete player of your own in about 40 lines (play, seek, volume, replay) using the movie's events
   - `14-draw-on.html` — draw-on strokes (`trimStart` / `trimEnd`) and text that changes over time (`visibleChars`, `set: { text }`)
   - `playground.html` — in-browser editor with preset dropdown
 

package/ai/reference/cheatsheet.md

@@ -83,9 +83,13 @@ Style (`initial` / keyframes): `fillColor fillAlpha strokeColor strokeAlpha stro
 
 Add `threeD: true` to any visual layer, then use `z`, `rotationX`, `rotationY` (centre rotation with `anchorX/Y: 0.5` or `pivotX/Y`). Add a `{ type: 'camera' }` layer for a view. A `threeD` layer at `z: 0` with the default camera looks identical to a 2D one. Consecutive `threeD` layers are drawn farthest-first (equal `z` keeps array order); non-`threeD` layers ignore the camera and keep array order. Layers at/behind the camera plane are hidden. Not supported on `threeD` layers: masks, transitions, `filterArea`.
 
+## Player
+
+`new Controller(movie, { canvas, theme: { accent: '#ff4d6d' } })` (import from `pixi-effects/controller`; theme keys `accent foreground track barBackground trackHeight font`, or CSS `--mc-accent` …; `controller.setTheme(…)`). Your own player: `movie.play() pause() gotoFrame(f) volume muted toggleMute()`, state `currentFrame totalFrames frameRate duration isPlaying`, events `ready frame play pause ended seeking seeked volumechange error progress` (`<video>` names). `examples/15-custom-player.html` is a complete one.
+
 ## Filters by name (no import)
 
-`filters: [{ type: 'glow', name: 'halo', outerStrength: 3, color: '#ffd166' }]` — `type` = the pixi / pixi-filters class name without `Filter`, camelCase (`glow dropShadow outline blur noise alpha adjustment hslAdjustment grayscale pixelate crt rgbSplit oldFilm glitch bulgePinch twist zoomBlur kawaseBlur radialBlur motionBlur emboss ascii colorOverlay advancedBloom bevel dot crossHatch tiltShift …`), the other keys are its options. `colorMatrix` takes `preset: 'sepia'|'grayscale'|'negative'|'polaroid'|'technicolor'|'vintage'|'kodachrome'|'browni'`. Name it to animate: `'filters.halo.outerStrength'` (scalars only; `pixelate` via `sizeX`/`sizeY`). Options: `glow` distance outerStrength innerStrength color alpha · `dropShadow` offset{x,y} blur alpha color · `outline` thickness color · `blur` strength · `adjustment` gamma contrast saturation brightness · `hslAdjustment` hue lightness saturation · `pixelate` size · `crt` curvature lineWidth noise vignetting · `rgbSplit` red/green/blue {x,y} · `oldFilm` sepia noise scratch vignetting · `glitch` slices offset · `twist` radius angle offset · `bulgePinch` center radius strength · `zoomBlur` strength center innerRadius · `colorOverlay` color alpha. **Centres/offsets are CANVAS pixels** (default top-left corner): put them on the layer. Glow / shadow / blur draw outside the layer: widen `filterArea` (not for `grayscale` / `oldFilm`, which fill the margin black). Full table: `docs/dsl.md` → Named filters.
+`filters: [{ type: 'glow', name: 'halo', outerStrength: 3, color: '#ffd166' }]` — `type` = the pixi / pixi-filters class name without `Filter`, camelCase (`glow dropShadow outline blur noise alpha adjustment hslAdjustment grayscale pixelate crt rgbSplit oldFilm glitch bulgePinch twist zoomBlur kawaseBlur radialBlur motionBlur emboss ascii colorOverlay advancedBloom bevel dot crossHatch tiltShift …`), the other keys are its options. `colorMatrix` takes `preset: 'sepia'|'grayscale'|'negative'|'polaroid'|'technicolor'|'vintage'|'kodachrome'|'browni'`. Name it to animate: `'filters.halo.outerStrength'` (scalars only; `pixelate` via `sizeX`/`sizeY`). Options: `glow` distance outerStrength innerStrength color alpha · `dropShadow` offset{x,y} blur alpha color · `outline` thickness color · `blur` strength · `adjustment` gamma contrast saturation brightness · `hslAdjustment` hue lightness saturation · `pixelate` size · `crt` curvature lineWidth noise vignetting · `rgbSplit` red/green/blue {x,y} · `oldFilm` sepia noise scratch vignetting · `glitch` slices offset · `twist` radius angle offset · `bulgePinch` center radius strength · `zoomBlur` strength center innerRadius · `colorOverlay` color alpha · `colorGradient` gradientType('linear'|'radial'|'conic') stops[{offset,color,alpha}] angle · `colorReplace` originalColor targetColor tolerance · `convolution` matrix(9) · `shockwave` / `godray` are driven by `time` (animate it) · `colorMap` / `simpleLightmap` need a texture (use `custom`). **Centres/offsets are CANVAS pixels** (default top-left corner): put them on the layer. Glow / shadow / blur draw outside the layer: widen `filterArea` (not for `grayscale` / `oldFilm`, which fill the margin black). Full table: `docs/dsl.md` → Named filters.
 
 ## Transitions (on the parent composition)
 

package/ai/template.html

@@ -36,9 +36,9 @@
       "gsap":                    "https://esm.sh/gsap@3.12.5",
       "gsap/PixiPlugin":         "https://esm.sh/gsap@3.12.5/PixiPlugin",
       "mediabunny":              "https://esm.sh/mediabunny",
-      "pixi-effects":            "https://cdn.jsdelivr.net/npm/pixi-effects@0.7.0/dist/index.js",
-      "pixi-effects/controller": "https://cdn.jsdelivr.net/npm/pixi-effects@0.7.0/dist/Controller.js",
-      "pixi-effects/three":      "https://cdn.jsdelivr.net/npm/pixi-effects@0.7.0/dist/three.js",
+      "pixi-effects":            "https://cdn.jsdelivr.net/npm/pixi-effects@0.8.0/dist/index.js",
+      "pixi-effects/controller": "https://cdn.jsdelivr.net/npm/pixi-effects@0.8.0/dist/Controller.js",
+      "pixi-effects/three":      "https://cdn.jsdelivr.net/npm/pixi-effects@0.8.0/dist/three.js",
       "pixi-filters":            "https://esm.sh/pixi-filters@6.1.5?external=pixi.js",
       "three":                   "https://esm.sh/three@0.178.0"
     }

package/dist/Composition-CM62XJKT.cjs

@@ -0,0 +1,14 @@
+'use strict';
+
+var chunkPDBDDGG5_cjs = require('./chunk-PDBDDGG5.cjs');
+require('./chunk-AGMNSJJH.cjs');
+require('./chunk-UQBGW5DO.cjs');
+
+
+
+Object.defineProperty(exports, "CompositionSequence", {
+  enumerable: true,
+  get: function () { return chunkPDBDDGG5_cjs.CompositionSequence; }
+});
+//# sourceMappingURL=Composition-CM62XJKT.cjs.map
+//# sourceMappingURL=Composition-CM62XJKT.cjs.map

package/dist/{Composition-3KHQPRBA.cjs.map → Composition-CM62XJKT.cjs.map}

@@ -1 +1 @@
-{"version":3,"sources":[],"names":[],"mappings":"","file":"Composition-3KHQPRBA.cjs"}
+{"version":3,"sources":[],"names":[],"mappings":"","file":"Composition-CM62XJKT.cjs"}

package/dist/Composition-RJDSQYTV.js

@@ -0,0 +1,5 @@
+export { CompositionSequence } from './chunk-O4AJYUPK.js';
+import './chunk-FNKSXBKB.js';
+import './chunk-DKGG7WD4.js';
+//# sourceMappingURL=Composition-RJDSQYTV.js.map
+//# sourceMappingURL=Composition-RJDSQYTV.js.map

package/dist/{Composition-DT657FO5.js.map → Composition-RJDSQYTV.js.map}

@@ -1 +1 @@
-{"version":3,"sources":[],"names":[],"mappings":"","file":"Composition-DT657FO5.js"}
+{"version":3,"sources":[],"names":[],"mappings":"","file":"Composition-RJDSQYTV.js"}

package/dist/Controller.cjs

@@ -1,5 +1,7 @@
 'use strict';
 
+var chunkUQBGW5DO_cjs = require('./chunk-UQBGW5DO.cjs');
+
 // 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>',
@@ -11,12 +13,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;
@@ -36,31 +38,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;
@@ -74,22 +76,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; }
@@ -113,16 +115,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;
@@ -131,7 +133,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;
 }
@@ -185,7 +187,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;
@@ -218,7 +220,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 {
@@ -231,7 +233,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++;
@@ -273,6 +275,14 @@ 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;
@@ -345,6 +355,7 @@ 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") {
@@ -424,6 +435,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) {
+    chunkUQBGW5DO_cjs.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) {
@@ -605,8 +627,20 @@ 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();
     });
@@ -1029,6 +1063,7 @@ var Controller = class _Controller {
   }
 };
 
+exports.CONTROLLER_CSS = CONTROLLER_CSS;
 exports.Controller = Controller;
 exports.extensionForMimeType = extensionForMimeType;
 exports.formatTime = formatTime;