@smoove/player 0.1.1

package/dist/player.js

@@ -0,0 +1,966 @@
+import { LitElement, html, svg } from "lit";
+import { createContext } from "@lit/context";
+//#region src/context.ts
+/**
+* Context token carrying the {@link PlayerApi}. `<smoove-player>` is the provider;
+* descendant controls may consume it with `@lit/context`'s `ContextConsumer`.
+* In light DOM the underlying `context-request` event bubbles through ordinary
+* DOM ancestors, so no shadow boundary is needed. Controls in this package use
+* the simpler {@link getPlayerApi} (`closest`) lookup, which also works when a
+* control is used without a context consumer.
+*/
+var playerContext = createContext(Symbol("smoove-player"));
+/** Resolve the nearest ancestor `<smoove-player>` as a {@link PlayerApi}. */
+function getPlayerApi(el) {
+	return el.closest("smoove-player");
+}
+//#endregion
+//#region src/base.ts
+/**
+* Base class for **leaf** controls (play button, time, volume, …). Renders its
+* own markup into light DOM (it has no user children, so rendering into `this`
+* is safe and lets users style with plain selectors). Resolves the ancestor
+* `<smoove-player>` on connect and offers {@link watch} to re-render when a player
+* signal changes.
+*/
+var SmooveControl = class extends LitElement {
+	/** The resolved player, or `null` if used outside a `<smoove-player>`. */
+	api = null;
+	_unsubs = [];
+	createRenderRoot() {
+		return this;
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		this.api = getPlayerApi(this);
+		if (this.api) this.bind(this.api);
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		for (const u of this._unsubs) u();
+		this._unsubs = [];
+		this.api = null;
+	}
+	/** Subscribe to a player signal and re-render this control on every change. */
+	watch(sig) {
+		this._unsubs.push(sig.subscribe(() => this.requestUpdate()));
+	}
+	/**
+	* Declare reactive subscriptions here using {@link watch}. Called once on
+	* connect with the resolved {@link PlayerApi}.
+	*/
+	bind(_api) {}
+};
+/**
+* Base class for **layout containers** (overlay, controls, rows, spacer). These
+* wrap user-authored children, so they must never let a framework re-render
+* wipe that content — they are bare custom elements that only exist for
+* semantics + CSS targeting. All styling lives in the opt-in stylesheet.
+*/
+var SmooveContainer = class extends HTMLElement {};
+//#endregion
+//#region src/containers.ts
+/**
+* Layout containers. Each is a bare custom element that preserves its
+* user-authored children and is styled entirely by the opt-in stylesheet.
+*
+* - `<smoove-player-overlay>`   — centered overlay layer above the video.
+* - `<smoove-player-controls>`  — the control bar (one or more rows).
+* - `<smoove-player-controls-row>` — a flex row of controls.
+* - `<smoove-player-space grow>` — a spacer; `grow` makes it consume free space.
+*/
+var SmoovePlayerOverlay = class extends SmooveContainer {};
+var SmoovePlayerControls = class extends SmooveContainer {};
+var SmoovePlayerControlsRow = class extends SmooveContainer {};
+var SmoovePlayerSpace = class extends SmooveContainer {};
+var REGISTRY = [
+	["smoove-player-overlay", SmoovePlayerOverlay],
+	["smoove-player-controls", SmoovePlayerControls],
+	["smoove-player-controls-row", SmoovePlayerControlsRow],
+	["smoove-player-space", SmoovePlayerSpace]
+];
+for (const [tag, ctor] of REGISTRY) if (!customElements.get(tag)) customElements.define(tag, ctor);
+//#endregion
+//#region src/progress.ts
+var clamp01 = (x) => Math.max(0, Math.min(1, x));
+/**
+* Draggable seek bar. Mirrors the demo studio's scrubber UX: grabbing pauses
+* playback and resumes on release, dragging seeks live.
+*/
+var SmoovePlayerProgress = class extends SmooveControl {
+	_dragging = false;
+	_wasPlaying = false;
+	bind(api) {
+		this.watch(api.state.frame);
+		this.watch(api.state.duration);
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this._teardownDrag();
+	}
+	_pct() {
+		const total = this.api?.state.duration.get() ?? 0;
+		const frame = this.api?.state.frame.get() ?? 0;
+		return total > 1 ? clamp01(frame / (total - 1)) : 0;
+	}
+	_posFromEvent(e) {
+		const r = (this.querySelector(".smoove-player__track") ?? this).getBoundingClientRect();
+		return r.width > 0 ? clamp01((e.clientX - r.left) / r.width) : 0;
+	}
+	_seek(p) {
+		const total = this.api?.state.duration.get() ?? 0;
+		if (total > 1) this.api?.seekTo(Math.round(p * (total - 1)));
+	}
+	_onMove = (e) => {
+		if (this._dragging) this._seek(this._posFromEvent(e));
+	};
+	_onUp = () => {
+		if (!this._dragging) return;
+		this._dragging = false;
+		this._teardownDrag();
+		if (this._wasPlaying) this.api?.play();
+	};
+	_teardownDrag() {
+		window.removeEventListener("pointermove", this._onMove);
+		window.removeEventListener("pointerup", this._onUp);
+	}
+	_onDown(e) {
+		if (!this.api) return;
+		e.preventDefault();
+		this._dragging = true;
+		this._wasPlaying = this.api.isPlaying();
+		this.api.pause();
+		this._seek(this._posFromEvent(e));
+		window.addEventListener("pointermove", this._onMove);
+		window.addEventListener("pointerup", this._onUp);
+	}
+	render() {
+		const pct = this._pct() * 100;
+		return html`<div
+      class="smoove-player__progress${this._dragging ? " is-dragging" : ""}"
+      @pointerdown=${(e) => this._onDown(e)}
+    >
+      <div class="smoove-player__track">
+        <div class="smoove-player__fill" style=${`width:${pct}%`}></div>
+        <div class="smoove-player__knob" style=${`left:${pct}%`}></div>
+      </div>
+    </div>`;
+	}
+};
+if (!customElements.get("smoove-player-progress")) customElements.define("smoove-player-progress", SmoovePlayerProgress);
+//#endregion
+//#region src/icons.ts
+/**
+* Inline-SVG icon set, ported from the demo studio's icon sheet. Each entry is
+* the inner markup of an 18×18 viewBox; {@link icon} wraps it in an `<svg>`.
+* No icon dependency — controls render `${icon("play")}` directly.
+*/
+var PATHS = {
+	play: svg`<path d="M6 4.5l9 5.5-9 5.5z" fill="currentColor" stroke="none" />`,
+	pause: svg`<g fill="currentColor" stroke="none">
+      <rect x="5" y="4" width="3.2" height="12" rx="1" />
+      <rect x="11.8" y="4" width="3.2" height="12" rx="1" />
+    </g>`,
+	prev: svg`<g fill="currentColor" stroke="none">
+      <path d="M14 5v10l-7-5z" />
+      <rect x="4.5" y="5" width="2.2" height="10" rx="1" />
+    </g>`,
+	next: svg`<g fill="currentColor" stroke="none">
+      <path d="M6 5v10l7-5z" />
+      <rect x="13.3" y="5" width="2.2" height="10" rx="1" />
+    </g>`,
+	volume: svg`<g fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round">
+      <path d="M4 8v4h2.5L11 15.5v-11L6.5 8z" fill="currentColor" stroke="none" />
+      <path d="M13.2 7.2a3.6 3.6 0 010 5.6M15 5.4a6 6 0 010 9.2" />
+    </g>`,
+	mute: svg`<g fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round">
+      <path d="M4 8v4h2.5L11 15.5v-11L6.5 8z" fill="currentColor" stroke="none" />
+      <path d="M13.5 8l3 4M16.5 8l-3 4" />
+    </g>`,
+	loop: svg`<g fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round">
+      <path d="M5 7h7a3 3 0 013 3M15 13H8a3 3 0 01-3-3" />
+      <path d="M13 5l2 2-2 2M7 15l-2-2 2-2" />
+    </g>`,
+	fullscreen: svg`<path d="M4 7V4h3M16 7V4h-3M4 13v3h3M16 13v3h-3" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" />`,
+	fullscreenExit: svg`<path d="M7 4v3H4M13 4v3h3M7 16v-3H4M13 16v-3h3" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" />`
+};
+/** Render a named icon as an `<svg>` of the given pixel size. */
+function icon(name, size = 18) {
+	return svg`<svg
+    width=${size}
+    height=${size}
+    viewBox="0 0 18 18"
+    aria-hidden="true"
+    style="display:block;flex:0 0 auto"
+  >${PATHS[name] ?? null}</svg>`;
+}
+//#endregion
+//#region src/play-toggle-button.ts
+/** A play/pause toggle button reflecting and driving playback state. */
+var SmoovePlayerPlayToggleButton = class extends SmooveControl {
+	bind(api) {
+		this.watch(api.state.playing);
+	}
+	render() {
+		const playing = this.api?.state.playing.get() ?? false;
+		const label = playing ? "Pause" : "Play";
+		return html`<button
+      type="button"
+      class="smoove-player__btn"
+      aria-label=${label}
+      title=${label}
+      @click=${() => this.api?.toggle()}
+    >${icon(playing ? "pause" : "play")}</button>`;
+	}
+};
+if (!customElements.get("smoove-player-play-toggle-button")) customElements.define("smoove-player-play-toggle-button", SmoovePlayerPlayToggleButton);
+//#endregion
+//#region src/sound-control.ts
+/**
+* Mute toggle + volume slider. With the `collapsed` attribute the slider is
+* hidden until the control is hovered/focused (styled by the stylesheet).
+*/
+var SmoovePlayerSoundControl = class extends SmooveControl {
+	static properties = { collapsed: {
+		type: Boolean,
+		reflect: true
+	} };
+	bind(api) {
+		this.watch(api.state.volume);
+		this.watch(api.state.muted);
+	}
+	_onInput(e) {
+		const v = Number(e.target.value);
+		this.api?.setVolume(v);
+		this.api?.setMuted(v === 0);
+	}
+	render() {
+		const muted = this.api?.state.muted.get() ?? false;
+		const volume = this.api?.state.volume.get() ?? 1;
+		const off = muted || volume === 0;
+		const label = off ? "Unmute" : "Mute";
+		return html`<div class="smoove-player__sound">
+      <button
+        type="button"
+        class="smoove-player__btn"
+        aria-label=${label}
+        title=${label}
+        @click=${() => this.api?.toggleMute()}
+      >${icon(off ? "mute" : "volume")}</button>
+      <input
+        class="smoove-player__volume"
+        type="range"
+        min="0"
+        max="1"
+        step="0.01"
+        aria-label="Volume"
+        .value=${String(off ? 0 : volume)}
+        @input=${(e) => this._onInput(e)}
+      />
+    </div>`;
+	}
+};
+if (!customElements.get("smoove-player-sound-control")) customElements.define("smoove-player-sound-control", SmoovePlayerSoundControl);
+//#endregion
+//#region src/time.ts
+var fmt = (seconds) => {
+	const t = Math.max(0, seconds);
+	return `${Math.floor(t / 60)}:${Math.floor(t % 60).toString().padStart(2, "0")}`;
+};
+/** Current time / total duration readout (`m:ss / m:ss`). */
+var SmoovePlayerTime = class extends SmooveControl {
+	bind(api) {
+		this.watch(api.state.frame);
+		this.watch(api.state.duration);
+	}
+	render() {
+		const fps = this.api?.fps ?? 0;
+		const frame = this.api?.state.frame.get() ?? 0;
+		const total = this.api?.state.duration.get() ?? 0;
+		const cur = fps > 0 ? frame / fps : 0;
+		const dur = fps > 0 ? total / fps : 0;
+		return html`<span class="smoove-player__time"
+      ><span class="smoove-player__time-cur">${fmt(cur)}</span
+      ><span class="smoove-player__time-sep">/</span
+      ><span class="smoove-player__time-dur">${fmt(dur)}</span></span
+    >`;
+	}
+};
+if (!customElements.get("smoove-player-time")) customElements.define("smoove-player-time", SmoovePlayerTime);
+//#endregion
+//#region src/loop-button.ts
+/** Toggles loop playback. Reflects an `on` attribute when looping. */
+var SmoovePlayerLoopButton = class extends SmooveControl {
+	static properties = { on: {
+		type: Boolean,
+		reflect: true
+	} };
+	bind(api) {
+		this.watch(api.state.loop);
+	}
+	willUpdate(_changed) {
+		this.on = this.api?.state.loop.get() ?? false;
+	}
+	render() {
+		return html`<button
+      type="button"
+      class="smoove-player__btn"
+      aria-label="Loop"
+      title="Loop"
+      aria-pressed=${this.api?.state.loop.get() ? "true" : "false"}
+      @click=${() => this.api?.toggleLoop()}
+    >${icon("loop")}</button>`;
+	}
+};
+if (!customElements.get("smoove-player-loop-button")) customElements.define("smoove-player-loop-button", SmoovePlayerLoopButton);
+//#endregion
+//#region src/fullscreen-button.ts
+/** Toggles the player in and out of fullscreen. */
+var SmoovePlayerFullscreenButton = class extends SmooveControl {
+	bind(api) {
+		this.watch(api.state.fullscreen);
+	}
+	render() {
+		const fs = this.api?.state.fullscreen.get() ?? false;
+		const label = fs ? "Exit fullscreen" : "Fullscreen";
+		return html`<button
+      type="button"
+      class="smoove-player__btn"
+      aria-label=${label}
+      title=${label}
+      @click=${() => this.api?.toggleFullscreen()}
+    >${icon(fs ? "fullscreenExit" : "fullscreen")}</button>`;
+	}
+};
+if (!customElements.get("smoove-player-fullscreen-button")) customElements.define("smoove-player-fullscreen-button", SmoovePlayerFullscreenButton);
+//#endregion
+//#region src/default-controls.ts
+/**
+* Build the default control bar used when `<smoove-player controls>` has no
+* user-supplied `<smoove-player-controls>`. It is composed from the same public
+* sub-components, so it inherits the player context and the opt-in styling.
+* Tagged `data-smoove-default` so the player can swap it out if the user later
+* provides their own controls.
+*/
+function createDefaultControls() {
+	const controls = document.createElement("smoove-player-controls");
+	controls.setAttribute("data-smoove-default", "");
+	const progressRow = document.createElement("smoove-player-controls-row");
+	progressRow.appendChild(document.createElement("smoove-player-progress"));
+	const row = document.createElement("smoove-player-controls-row");
+	row.appendChild(document.createElement("smoove-player-play-toggle-button"));
+	const sound = document.createElement("smoove-player-sound-control");
+	sound.setAttribute("collapsed", "");
+	row.appendChild(sound);
+	row.appendChild(document.createElement("smoove-player-time"));
+	const space = document.createElement("smoove-player-space");
+	space.setAttribute("grow", "");
+	row.appendChild(space);
+	row.appendChild(document.createElement("smoove-player-loop-button"));
+	row.appendChild(document.createElement("smoove-player-fullscreen-button"));
+	controls.appendChild(progressRow);
+	controls.appendChild(row);
+	return controls;
+}
+//#endregion
+//#region src/signal.ts
+/**
+* Minimal reactive value, shape-compatible with core's `ReadonlySignal`.
+* The player owns its own stable signals (frame, playing, fullscreen, scale,
+* …) so descendant components can subscribe once and keep working even as the
+* underlying `Composition` is swapped in or out.
+*/
+function createSignal(initial) {
+	let value = initial;
+	const listeners = /* @__PURE__ */ new Set();
+	return {
+		get: () => value,
+		set(next) {
+			if (Object.is(next, value)) return;
+			value = next;
+			for (const fn of listeners) fn(value);
+		},
+		subscribe(listener) {
+			listeners.add(listener);
+			return () => {
+				listeners.delete(listener);
+			};
+		}
+	};
+}
+//#endregion
+//#region src/smoove-player.ts
+var TIMEUPDATE_INTERVAL_MS = 250;
+var now = () => typeof performance?.now === "function" ? performance.now() : Date.now();
+/**
+* Duck-typed `Composition` check — avoids a runtime dependency on `core`
+* (it stays a type-only import). A Composition is a `Konva.Stage`
+* (`setContainer`) that also exposes the engine's `refresh()`.
+*/
+function isComposition(v) {
+	return typeof v === "object" && v !== null && typeof v.setContainer === "function" && typeof v.refresh === "function";
+}
+/**
+* Resolve a remote module's default export to a live {@link Composition},
+* unwrapping factories (sync/async) and `{ default }` nesting along the way.
+*/
+async function resolveComposition(input) {
+	let value = input;
+	for (let i = 0; i < 5; i++) {
+		value = await value;
+		if (isComposition(value)) return value;
+		if (typeof value === "function") {
+			value = value();
+			continue;
+		}
+		if (typeof value === "object" && value !== null && "default" in value) {
+			value = value.default;
+			continue;
+		}
+		break;
+	}
+	throw new Error("[smoove] remote src did not resolve to a Composition — expected a default export of a Composition or a factory returning one");
+}
+/**
+* `<smoove-player>` — the host element. Wraps a {@link Composition} and plays it
+* like an HTML5 `<video>`: letterbox-scales the stage to its box, supports
+* fullscreen and keyboard control, auto-renders a default control bar, and
+* exposes a Remotion-style imperative + event API.
+*
+* It is a plain custom element (not a `LitElement`) so it never re-renders over
+* its user-authored children (overlay / controls). Chrome is injected
+* imperatively; descendant controls read state through {@link PlayerApi}.
+*
+* `composition` is a property (an object), e.g. `el.composition = comp`.
+*/
+var SmoovePlayer = class extends HTMLElement {
+	static get observedAttributes() {
+		return [
+			"loop",
+			"controls",
+			"muted",
+			"volume",
+			"playbackrate",
+			"src"
+		];
+	}
+	_frame = createSignal(0);
+	_playing = createSignal(false);
+	_duration = createSignal(1);
+	_loop = createSignal(false);
+	_rate = createSignal(1);
+	_volume = createSignal(1);
+	_muted = createSignal(false);
+	_fullscreen = createSignal(false);
+	_scale = createSignal(1);
+	state = {
+		frame: this._frame,
+		playing: this._playing,
+		duration: this._duration,
+		loop: this._loop,
+		rate: this._rate,
+		volume: this._volume,
+		muted: this._muted,
+		fullscreen: this._fullscreen,
+		scale: this._scale
+	};
+	_comp = null;
+	_unsubs = [];
+	_loadSeq = 0;
+	_prevPlaying = false;
+	_lastTimeupdate = 0;
+	_stage = null;
+	_scaleEl = null;
+	_canvasEl = null;
+	_resizeObserver = null;
+	_mutationObserver = null;
+	_appliedPixelRatio = 0;
+	get composition() {
+		return this._comp;
+	}
+	set composition(c) {
+		this._loadSeq++;
+		if (c === this._comp) return;
+		this._comp?.stop();
+		this._unbind();
+		this._appliedPixelRatio = 0;
+		this._comp = c ?? null;
+		if (this.isConnected && this._comp) this._mount();
+	}
+	get fps() {
+		return this._comp?.fps ?? 0;
+	}
+	get loop() {
+		return this.hasAttribute("loop");
+	}
+	set loop(v) {
+		this.toggleAttribute("loop", v);
+	}
+	get controls() {
+		return this.hasAttribute("controls");
+	}
+	set controls(v) {
+		this.toggleAttribute("controls", v);
+	}
+	get autoPlay() {
+		return this.hasAttribute("autoplay");
+	}
+	set autoPlay(v) {
+		this.toggleAttribute("autoplay", v);
+	}
+	get clickToPlay() {
+		return !this.hasAttribute("no-click-to-play");
+	}
+	get spaceKey() {
+		return !this.hasAttribute("no-space-key");
+	}
+	get keyboard() {
+		return !this.hasAttribute("no-keyboard");
+	}
+	get doubleClickFullscreen() {
+		return this.hasAttribute("double-click-fullscreen");
+	}
+	get initialFrame() {
+		const a = this.getAttribute("initialframe");
+		return a == null ? 0 : Number(a);
+	}
+	get src() {
+		return this.getAttribute("src");
+	}
+	set src(v) {
+		if (v == null) this.removeAttribute("src");
+		else this.setAttribute("src", v);
+	}
+	connectedCallback() {
+		if (!this.hasAttribute("tabindex")) this.setAttribute("tabindex", "0");
+		this._ensureChrome();
+		this._resizeObserver ??= new ResizeObserver(() => this._layout());
+		this._resizeObserver.observe(this);
+		this._mutationObserver ??= new MutationObserver(() => this._reconcileControls());
+		this._mutationObserver.observe(this, { childList: true });
+		document.addEventListener("fullscreenchange", this._onFullscreenChange);
+		this.addEventListener("keydown", this._onKeyDown);
+		if (this._comp) this._mount();
+		else if (this.src) this._loadFromSrc(this.src);
+		this._reconcileControls();
+	}
+	disconnectedCallback() {
+		this._unbind();
+		this._resizeObserver?.disconnect();
+		this._mutationObserver?.disconnect();
+		document.removeEventListener("fullscreenchange", this._onFullscreenChange);
+		this.removeEventListener("keydown", this._onKeyDown);
+		this._stage?.removeEventListener("click", this._onStageClick);
+		this._stage?.removeEventListener("dblclick", this._onStageDblClick);
+		this._appliedPixelRatio = 0;
+		this._comp?.stop();
+		this._comp?.suspend();
+		this._stage?.remove();
+		this._stage = null;
+		this._scaleEl = null;
+		this._canvasEl = null;
+	}
+	attributeChangedCallback(name, _old, value) {
+		if (name === "src") {
+			if (this.isConnected && value) this._loadFromSrc(value);
+			return;
+		}
+		const comp = this._comp;
+		if (!comp) return;
+		switch (name) {
+			case "loop":
+				comp.setLoop(this.loop);
+				break;
+			case "muted":
+				comp.mixer.setMuted(this.hasAttribute("muted"));
+				break;
+			case "volume":
+				if (this.hasAttribute("volume")) comp.mixer.setVolume(Number(this.getAttribute("volume")));
+				break;
+			case "playbackrate":
+				if (this.hasAttribute("playbackrate")) comp.setPlaybackRate(Number(this.getAttribute("playbackrate")));
+				break;
+			case "controls":
+				this._reconcileControls();
+				break;
+		}
+	}
+	_ensureChrome() {
+		if (this._stage) return;
+		if (getComputedStyle(this).position === "static") this.style.position = "relative";
+		const stage = document.createElement("div");
+		stage.className = "smoove-player__stage";
+		stage.style.cssText = "position:absolute;inset:0;overflow:hidden";
+		const scale = document.createElement("div");
+		scale.className = "smoove-player__scale";
+		scale.style.cssText = "position:absolute;top:0;left:0;transform-origin:top left";
+		const canvas = document.createElement("div");
+		canvas.className = "smoove-player__canvas";
+		canvas.style.cssText = "width:100%;height:100%";
+		scale.appendChild(canvas);
+		stage.appendChild(scale);
+		this.insertBefore(stage, this.firstChild);
+		this._stage = stage;
+		this._scaleEl = scale;
+		this._canvasEl = canvas;
+		stage.addEventListener("click", this._onStageClick);
+		stage.addEventListener("dblclick", this._onStageDblClick);
+	}
+	_mount() {
+		const comp = this._comp;
+		if (!comp) return;
+		this._ensureChrome();
+		if (!this._canvasEl) return;
+		this._canvasEl.replaceChildren();
+		comp.setContainer(this._canvasEl);
+		comp.resume();
+		if (this.hasAttribute("loop")) comp.setLoop(true);
+		if (this.hasAttribute("muted")) comp.mixer.setMuted(true);
+		if (this.hasAttribute("volume")) comp.mixer.setVolume(Number(this.getAttribute("volume")));
+		if (this.hasAttribute("playbackrate")) comp.setPlaybackRate(Number(this.getAttribute("playbackrate")));
+		this._frame.set(comp.frame.get());
+		this._playing.set(comp.isPlaying.get());
+		this._duration.set(comp.durationInFrames.get());
+		this._loop.set(comp.loop.get());
+		this._rate.set(comp.playbackRate.get());
+		this._volume.set(comp.mixer.volume.get());
+		this._muted.set(comp.mixer.muted.get());
+		this._prevPlaying = comp.isPlaying.get();
+		this._bind(comp);
+		comp.setFrame(this.initialFrame);
+		comp.refresh();
+		this._layout();
+		if (this.autoPlay) try {
+			this.play();
+		} catch (error) {
+			this._emit("error", { error });
+		}
+	}
+	_bind(comp) {
+		this._unsubs.push(comp.frame.subscribe((frame) => {
+			this._frame.set(frame);
+			this._emit("frameupdate", { frame });
+			const t = now();
+			const last = comp.durationInFrames.get() - 1;
+			if (t - this._lastTimeupdate >= TIMEUPDATE_INTERVAL_MS || frame >= last || frame <= 0) {
+				this._lastTimeupdate = t;
+				const fps = comp.fps;
+				const total = comp.durationInFrames.get();
+				this._emit("timeupdate", {
+					frame,
+					time: fps > 0 ? frame / fps : 0,
+					durationInFrames: total,
+					durationInSeconds: fps > 0 ? total / fps : 0
+				});
+			}
+		}), comp.isPlaying.subscribe((playing) => {
+			this._playing.set(playing);
+			const frame = comp.frame.get();
+			if (playing && !this._prevPlaying) this._emit("play", { frame });
+			else if (!playing && this._prevPlaying) {
+				const last = comp.durationInFrames.get() - 1;
+				const rate = comp.playbackRate.get();
+				const ended = !comp.loop.get() && (rate > 0 && frame >= last || rate < 0 && frame <= 0);
+				this._emit(ended ? "ended" : "pause", { frame });
+			}
+			this._prevPlaying = playing;
+		}), comp.durationInFrames.subscribe((d) => this._duration.set(d)), comp.loop.subscribe((l) => this._loop.set(l)), comp.playbackRate.subscribe((rate) => {
+			this._rate.set(rate);
+			this._emit("ratechange", { playbackRate: rate });
+		}), comp.mixer.volume.subscribe((volume) => {
+			this._volume.set(volume);
+			this._emit("volumechange", { volume });
+		}), comp.mixer.muted.subscribe((muted) => {
+			this._muted.set(muted);
+			this._emit("mutechange", { muted });
+		}));
+	}
+	_unbind() {
+		for (const u of this._unsubs) u();
+		this._unsubs = [];
+	}
+	/**
+	* Dynamically import a remote ESM module and mount its default export. The
+	* default export may be a {@link Composition}, a factory returning one (sync
+	* or async), or a factory resolving to `{ default: Composition }`.
+	*
+	* Loads are race-guarded with {@link _loadSeq}: a stale import resolving after
+	* a newer `src` — or an imperative `composition =` — is discarded.
+	*/
+	async _loadFromSrc(rawSrc) {
+		const seq = ++this._loadSeq;
+		let url;
+		try {
+			url = new URL(rawSrc, document.baseURI).href;
+		} catch (error) {
+			this._emit("error", { error });
+			return;
+		}
+		this.toggleAttribute("loading", true);
+		this._emit("loadstart", { src: url });
+		try {
+			const mod = await import(
+				/* @vite-ignore */
+				url
+);
+			const comp = await resolveComposition("default" in mod ? mod.default : mod);
+			if (seq !== this._loadSeq) return;
+			this.toggleAttribute("loading", false);
+			this.composition = comp;
+			this._emit("loaded", {
+				src: url,
+				composition: comp
+			});
+		} catch (error) {
+			if (seq !== this._loadSeq) return;
+			this.toggleAttribute("loading", false);
+			this._emit("error", { error });
+		}
+	}
+	_layout() {
+		const comp = this._comp;
+		if (!comp || !this._scaleEl) return;
+		const boxW = this.clientWidth;
+		const boxH = this.clientHeight;
+		const compW = comp.width() || 1;
+		const compH = comp.height() || 1;
+		if (boxW <= 0 || boxH <= 0) return;
+		const scale = Math.min(boxW / compW, boxH / compH);
+		const offX = (boxW - compW * scale) / 2;
+		const offY = (boxH - compH * scale) / 2;
+		this._scaleEl.style.width = `${compW}px`;
+		this._scaleEl.style.height = `${compH}px`;
+		this._scaleEl.style.transform = `translate(${offX}px, ${offY}px) scale(${scale})`;
+		if (scale !== this._scale.get()) {
+			this._scale.set(scale);
+			this._emit("scalechange", { scale });
+		}
+		this._applyRenderScale(scale);
+	}
+	/** Author-facing cap on the render pixel ratio. Defaults to the device ratio. */
+	get _maxPixelRatio() {
+		const dpr = typeof globalThis !== "undefined" ? globalThis.devicePixelRatio || 1 : 1;
+		const attr = this.getAttribute("max-pixel-ratio");
+		const parsed = attr == null ? NaN : Number(attr);
+		return Number.isFinite(parsed) && parsed > 0 ? Math.min(parsed, dpr) : dpr;
+	}
+	/**
+	* Match the composition's backing canvas resolution to how large it's actually
+	* displayed, instead of always rendering at authored resolution × devicePixelRatio.
+	*
+	* A 1600×900 composition letterboxed into a 375px-wide phone was drawing a
+	* 3200×1800 (5.76 MP) canvas every frame and letting CSS scale it down — ~18×
+	* overdraw. Here the effective pixel ratio is `displayScale × dpr` (capped at
+	* the device ratio, floored so it never goes pathologically blurry), so the
+	* backing store tracks on-screen pixels. This is the single biggest win for
+	* mobile frame rate; it also keeps oversized compositions from over-rendering.
+	*/
+	_applyRenderScale(scale) {
+		const comp = this._comp;
+		if (!comp || !Number.isFinite(scale) || scale <= 0) return;
+		const dpr = typeof globalThis !== "undefined" ? globalThis.devicePixelRatio || 1 : 1;
+		const target = Math.max(.5, Math.min(scale * dpr, this._maxPixelRatio));
+		if (Math.abs(target - this._appliedPixelRatio) < .01) return;
+		this._appliedPixelRatio = target;
+		for (const layer of comp.getLayers()) layer.getCanvas().setPixelRatio(target);
+		comp.refresh();
+	}
+	_onFullscreenChange = () => {
+		const fs = document.fullscreenElement === this;
+		this._fullscreen.set(fs);
+		this.toggleAttribute("fullscreen", fs);
+		this._emit("fullscreenchange", { isFullscreen: fs });
+		this._layout();
+	};
+	_onStageClick = () => {
+		if (this.clickToPlay) this.toggle();
+	};
+	_onStageDblClick = () => {
+		if (this.doubleClickFullscreen) this.toggleFullscreen();
+	};
+	_onKeyDown = (e) => {
+		if (!this.keyboard) return;
+		const target = e.target;
+		if (target && /^(INPUT|TEXTAREA|SELECT)$/.test(target.tagName)) return;
+		switch (e.key) {
+			case " ":
+				if (this.spaceKey) {
+					e.preventDefault();
+					this.toggle();
+				}
+				break;
+			case "ArrowLeft":
+				e.preventDefault();
+				this.stepBy(-1);
+				break;
+			case "ArrowRight":
+				e.preventDefault();
+				this.stepBy(1);
+				break;
+			case "f":
+			case "F":
+				this.toggleFullscreen();
+				break;
+			case "l":
+			case "L":
+				this.toggleLoop();
+				break;
+		}
+	};
+	_reconcileControls() {
+		if (!this.isConnected) return;
+		const hasUserControls = Array.from(this.children).some((c) => c.tagName === "SMOOVE-PLAYER-CONTROLS" && !c.hasAttribute("data-smoove-default"));
+		const existingDefault = this.querySelector(":scope > smoove-player-controls[data-smoove-default]");
+		if (this.controls && !hasUserControls) {
+			if (!existingDefault) this.appendChild(createDefaultControls());
+		} else if (existingDefault) existingDefault.remove();
+	}
+	_emit(type, detail) {
+		this.dispatchEvent(new CustomEvent(type, {
+			detail,
+			bubbles: true,
+			composed: true
+		}));
+	}
+	play() {
+		const comp = this._comp;
+		if (!comp) return;
+		if (comp.playbackRate.get() < 0 && comp.frame.get() <= 0) comp.setFrame(comp.durationInFrames.get() - 1);
+		try {
+			comp.play();
+		} catch (error) {
+			this._emit("error", { error });
+		}
+	}
+	pause() {
+		this._comp?.pause();
+	}
+	toggle() {
+		if (this.isPlaying()) this.pause();
+		else this.play();
+	}
+	stop() {
+		this._comp?.stop();
+	}
+	seekTo(frame) {
+		const comp = this._comp;
+		if (!comp) return;
+		comp.setFrame(frame);
+		this._emit("seeked", { frame: comp.frame.get() });
+	}
+	stepBy(delta) {
+		const comp = this._comp;
+		if (!comp) return;
+		this.seekTo(comp.frame.get() + delta);
+	}
+	setProps(props) {
+		this._comp?.setProps(props);
+	}
+	getCurrentFrame() {
+		return this._comp?.frame.get() ?? 0;
+	}
+	isPlaying() {
+		return this._comp?.isPlaying.get() ?? false;
+	}
+	setVolume(volume) {
+		this._comp?.mixer.setVolume(volume);
+	}
+	getVolume() {
+		return this._comp?.mixer.volume.get() ?? this._volume.get();
+	}
+	mute() {
+		this._comp?.mixer.setMuted(true);
+	}
+	unmute() {
+		this._comp?.mixer.setMuted(false);
+	}
+	setMuted(muted) {
+		this._comp?.mixer.setMuted(muted);
+	}
+	toggleMute() {
+		this._comp?.mixer.setMuted(!this.isMuted());
+	}
+	isMuted() {
+		return this._comp?.mixer.muted.get() ?? this._muted.get();
+	}
+	setLoop(loop) {
+		this.loop = loop;
+		this._comp?.setLoop(loop);
+	}
+	toggleLoop() {
+		this.setLoop(!this.isLooping());
+	}
+	isLooping() {
+		return this._comp?.loop.get() ?? this._loop.get();
+	}
+	setPlaybackRate(rate) {
+		this._comp?.setPlaybackRate(rate);
+	}
+	getPlaybackRate() {
+		return this._comp?.playbackRate.get() ?? this._rate.get();
+	}
+	requestFullscreen(options) {
+		return HTMLElement.prototype.requestFullscreen.call(this, options);
+	}
+	exitFullscreen() {
+		return this.isFullscreen() ? document.exitFullscreen() : Promise.resolve();
+	}
+	toggleFullscreen() {
+		if (this.isFullscreen()) this.exitFullscreen();
+		else this.requestFullscreen();
+	}
+	isFullscreen() {
+		return document.fullscreenElement === this;
+	}
+	getScale() {
+		return this._scale.get();
+	}
+};
+if (!customElements.get("smoove-player")) customElements.define("smoove-player", SmoovePlayer);
+//#endregion
+//#region src/play-button.ts
+var SIZES = {
+	small: 28,
+	medium: 44,
+	large: 72
+};
+/**
+* A large, centered play affordance (for use inside `<smoove-player-overlay>`).
+* `size` is `small | medium | large`. Reflects a `playing` attribute so the
+* stylesheet can fade it out during playback.
+*/
+var SmoovePlayerPlayButton = class extends SmooveControl {
+	static properties = {
+		size: {
+			type: String,
+			reflect: true
+		},
+		playing: {
+			type: Boolean,
+			reflect: true
+		}
+	};
+	bind(api) {
+		this.watch(api.state.playing);
+	}
+	willUpdate(_changed) {
+		this.playing = this.api?.state.playing.get() ?? false;
+	}
+	render() {
+		const playing = this.api?.state.playing.get() ?? false;
+		const size = SIZES[this.size ?? "medium"] ?? SIZES.medium;
+		const label = playing ? "Pause" : "Play";
+		return html`<button
+      type="button"
+      class="smoove-player__overlay-play"
+      aria-label=${label}
+      title=${label}
+      @click=${() => this.api?.toggle()}
+    >${icon(playing ? "pause" : "play", size)}</button>`;
+	}
+};
+if (!customElements.get("smoove-player-play-button")) customElements.define("smoove-player-play-button", SmoovePlayerPlayButton);
+//#endregion
+export { SmoovePlayer, SmoovePlayerControls, SmoovePlayerControlsRow, SmoovePlayerFullscreenButton, SmoovePlayerLoopButton, SmoovePlayerOverlay, SmoovePlayerPlayButton, SmoovePlayerPlayToggleButton, SmoovePlayerProgress, SmoovePlayerSoundControl, SmoovePlayerSpace, SmoovePlayerTime, createDefaultControls, getPlayerApi, playerContext };
+
+//# sourceMappingURL=player.js.map