@glissade/element 0.10.1 → 0.11.0-pre.0

package/dist/index.d.ts

@@ -14,7 +14,7 @@ declare class GsPlayerElement extends HTMLElement {
   get player(): _glissade_player0.Player | null;
   connectedCallback(): void;
   disconnectedCallback(): void;
-  attributeChangedCallback(): void;
+  attributeChangedCallback(name: string): void;
 }
 /** Define <gs-player> (idempotent). Importing this module defines it. */
 declare function defineGsPlayer(tagName?: string): void;

package/dist/index.js

@@ -5,53 +5,33 @@ const TEMPLATE = `
 <style>
   :host { display: inline-block; }
   canvas { display: block; width: 100%; height: auto; }
-  .controls { display: none; gap: 8px; align-items: center; padding: 6px 4px; font: 12px system-ui, sans-serif; }
-  :host([controls]) .controls { display: flex; }
+  .controls { display: flex; gap: 8px; align-items: center; padding: 6px 4px; font: 12px system-ui, sans-serif; }
   button { font: inherit; cursor: pointer; }
   input[type='range'] { flex: 1; }
   .time { font-variant-numeric: tabular-nums; opacity: 0.75; min-width: 9ch; text-align: right; }
 </style>
 <canvas part="canvas"></canvas>
-<div class="controls" part="controls">
-  <button part="button" aria-label="Play or pause">Play</button>
-  <input part="scrubber" type="range" min="0" max="1" step="0.0001" value="0" aria-label="Seek" />
-  <span class="time" part="time"></span>
-</div>
 `;
 var GsPlayerElement = class extends HTMLElement {
-	static observedAttributes = ["loop", "autoplay"];
+	static observedAttributes = [
+		"loop",
+		"autoplay",
+		"controls"
+	];
 	#mounted = null;
 	#scene = null;
 	#unsubscribe = null;
 	#scrubbing = false;
+	#playhead = null;
+	#shadow;
 	#canvas;
-	#button;
-	#scrubber;
-	#time;
+	#controls = null;
 	constructor() {
 		super();
 		const root = this.attachShadow({ mode: "open" });
 		root.innerHTML = TEMPLATE;
+		this.#shadow = root;
 		this.#canvas = root.querySelector("canvas");
-		this.#button = root.querySelector("button");
-		this.#scrubber = root.querySelector("input");
-		this.#time = root.querySelector(".time");
-		this.#button.addEventListener("click", () => {
-			const player = this.#mounted?.player;
-			if (!player) return;
-			if (player.playing) player.pause();
-			else player.play();
-			this.#syncButton();
-		});
-		this.#scrubber.addEventListener("input", () => {
-			const player = this.#mounted?.player;
-			if (!player) return;
-			this.#scrubbing = true;
-			player.pause();
-			player.seek(parseFloat(this.#scrubber.value) * player.duration);
-			this.#scrubbing = false;
-			this.#syncButton();
-		});
 	}
 	/** The scene module to play; assigning (re)mounts. */
 	get scene() {
@@ -66,19 +46,90 @@ var GsPlayerElement = class extends HTMLElement {
 		return this.#mounted?.player ?? null;
 	}
 	connectedCallback() {
+		this.#syncControls();
 		this.#remount();
 	}
 	disconnectedCallback() {
 		this.#teardown();
 	}
-	attributeChangedCallback() {
+	attributeChangedCallback(name) {
+		if (name === "controls") {
+			this.#syncControls();
+			if (this.isConnected && this.#scene) this.#remount();
+			return;
+		}
 		if (this.isConnected && this.#scene) this.#remount();
 	}
+	/** Build the controls subtree + listeners on demand; tear them down when gone. */
+	#syncControls() {
+		const want = this.hasAttribute("controls");
+		if (want && !this.#controls) this.#buildControls();
+		else if (!want && this.#controls) this.#destroyControls();
+	}
+	#buildControls() {
+		const div = document.createElement("div");
+		div.className = "controls";
+		div.setAttribute("part", "controls");
+		const button = document.createElement("button");
+		button.setAttribute("part", "button");
+		button.setAttribute("aria-label", "Play or pause");
+		button.textContent = "Play";
+		const scrubber = document.createElement("input");
+		scrubber.setAttribute("part", "scrubber");
+		scrubber.type = "range";
+		scrubber.min = "0";
+		scrubber.max = "1";
+		scrubber.step = "0.0001";
+		scrubber.value = "0";
+		scrubber.setAttribute("aria-label", "Seek");
+		const time = document.createElement("span");
+		time.className = "time";
+		time.setAttribute("part", "time");
+		const onClick = () => {
+			const player = this.#mounted?.player;
+			if (!player) return;
+			if (player.playing) player.pause();
+			else player.play();
+			this.#syncButton();
+		};
+		const onInput = () => {
+			const player = this.#mounted?.player;
+			if (!player) return;
+			this.#scrubbing = true;
+			player.pause();
+			player.seek(parseFloat(scrubber.value) * player.duration);
+			this.#scrubbing = false;
+			this.#syncButton();
+		};
+		button.addEventListener("click", onClick);
+		scrubber.addEventListener("input", onInput);
+		div.append(button, scrubber, time);
+		this.#shadow.append(div);
+		this.#controls = {
+			root: div,
+			button,
+			scrubber,
+			time,
+			onClick,
+			onInput
+		};
+		this.#syncReadout();
+		this.#syncButton();
+	}
+	#destroyControls() {
+		const c = this.#controls;
+		if (!c) return;
+		c.button.removeEventListener("click", c.onClick);
+		c.scrubber.removeEventListener("input", c.onInput);
+		c.root.remove();
+		this.#controls = null;
+	}
 	#teardown() {
 		this.#unsubscribe?.();
 		this.#unsubscribe = null;
 		this.#mounted?.dispose();
 		this.#mounted = null;
+		this.#playhead = null;
 	}
 	#remount() {
 		this.#teardown();
@@ -90,21 +141,30 @@ var GsPlayerElement = class extends HTMLElement {
 			loop: this.hasAttribute("loop"),
 			autoplay: this.hasAttribute("autoplay")
 		});
-		const player = this.#mounted.player;
-		this.#unsubscribe = scene.playhead.subscribe(() => {
+		this.#playhead = scene.playhead;
+		if (this.#controls) this.#unsubscribe = scene.playhead.subscribe(() => {
 			requestAnimationFrame(() => {
-				const t = scene.playhead.peek();
-				this.#time.textContent = `${t.toFixed(2)} / ${player.duration.toFixed(2)}s`;
-				if (!this.#scrubbing && player.duration > 0) this.#scrubber.value = String(t / player.duration);
+				if (!this.#controls) return;
+				this.#syncReadout();
 				this.#syncButton();
 			});
 		});
-		this.#time.textContent = `0.00 / ${player.duration.toFixed(2)}s`;
+		this.#syncReadout();
 		this.#syncButton();
 	}
+	#syncReadout() {
+		const c = this.#controls;
+		const player = this.#mounted?.player;
+		if (!c || !player) return;
+		const t = this.#playhead?.peek() ?? 0;
+		c.time.textContent = `${t.toFixed(2)} / ${player.duration.toFixed(2)}s`;
+		if (!this.#scrubbing && player.duration > 0) c.scrubber.value = String(t / player.duration);
+	}
 	#syncButton() {
+		const c = this.#controls;
+		if (!c) return;
 		const playing = this.#mounted?.player.playing ?? false;
-		this.#button.textContent = playing ? "Pause" : "Play";
+		c.button.textContent = playing ? "Pause" : "Play";
 	}
 };
 /** Define <gs-player> (idempotent). Importing this module defines it. */

package/package.json

@@ -1,8 +1,11 @@
 {
   "name": "@glissade/element",
-  "version": "0.10.1",
+  "version": "0.11.0-pre.0",
   "description": "glissade <gs-player> custom element: zero-framework embedding with minimal, CSS-part themable controls.",
   "license": "Apache-2.0",
+  "engines": {
+    "node": ">=20.19"
+  },
   "type": "module",
   "sideEffects": true,
   "exports": {
@@ -15,10 +18,10 @@
     "dist"
   ],
   "dependencies": {
-    "@glissade/backend-canvas2d": "0.10.1",
-    "@glissade/core": "0.10.1",
-    "@glissade/player": "0.10.1",
-    "@glissade/scene": "0.10.1"
+    "@glissade/backend-canvas2d": "0.11.0-pre.0",
+    "@glissade/core": "0.11.0-pre.0",
+    "@glissade/player": "0.11.0-pre.0",
+    "@glissade/scene": "0.11.0-pre.0"
   },
   "repository": {
     "type": "git",