@editframe/elements 0.55.2 → 0.56.0

package/dist/gui/EFPIP.d.ts

@@ -0,0 +1,43 @@
+import { TemplateResult as TemplateResult$1 } from "../node_modules/lit-html/development/lit-html.js";
+import * as _$lit from "lit";
+import { LitElement } from "lit";
+
+//#region src/gui/EFPIP.d.ts
+/**
+ * A Picture-in-Picture toggle.
+ *
+ * The `target` attribute accepts the `id` of either:
+ * - A native `<video>` element — PiP is requested directly.
+ * - A `<canvas>` element — a hidden `<video>` is created via `captureStream()` and used for PiP.
+ * - A container element — the first `<video>` or `<canvas>` descendant is used.
+ *
+ * Usage:
+ * ```html
+ * <ef-pip target="my-canvas">
+ *   <button slot="enter">PiP</button>
+ *   <button slot="exit">Exit PiP</button>
+ * </ef-pip>
+ * ```
+ */
+declare class EFPIP extends LitElement {
+  #private;
+  static styles: _$lit.CSSResult[];
+  /** ID of a <video>, <canvas>, or container element to use for PiP. */
+  target: string;
+  private isPiP;
+  private resolveTargetVideo;
+  private handleEnterPiP;
+  private handleLeavePiP;
+  private toggle;
+  connectedCallback(): void;
+  disconnectedCallback(): void;
+  render(): TemplateResult$1<1>;
+}
+declare global {
+  interface HTMLElementTagNameMap {
+    "ef-pip": EFPIP;
+  }
+}
+//#endregion
+export { EFPIP };
+//# sourceMappingURL=EFPIP.d.ts.map

package/dist/gui/EFPIP.js

@@ -0,0 +1,89 @@
+import { __decorate } from "../_virtual/_@oxc-project_runtime@0.122.0/helpers/decorate.js";
+import { LitElement, css, html } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+//#region src/gui/EFPIP.ts
+let EFPIP = class EFPIP extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.target = "";
+		this.isPiP = false;
+		this.handleEnterPiP = () => {
+			this.isPiP = true;
+		};
+		this.handleLeavePiP = () => {
+			this.isPiP = false;
+		};
+		this.toggle = async () => {
+			if (document.pictureInPictureElement) {
+				await document.exitPictureInPicture();
+				return;
+			}
+			const video = this.resolveTargetVideo();
+			if (!video) return;
+			video.addEventListener("enterpictureinpicture", this.handleEnterPiP, { once: false });
+			video.addEventListener("leavepictureinpicture", this.handleLeavePiP, { once: false });
+			if (video.paused) await video.play().catch(() => {});
+			await video.requestPictureInPicture();
+		};
+	}
+	static {
+		this.styles = [css`
+      :host {}
+    `];
+	}
+	/** Hidden video element created from a canvas capture stream. */
+	#captureVideo = null;
+	resolveTargetVideo() {
+		const root = this.target ? document.getElementById(this.target) : null;
+		if (!root) return null;
+		if (root instanceof HTMLVideoElement) return root;
+		if (root instanceof HTMLCanvasElement) return this.#getOrCreateCaptureVideo(root);
+		const video = root.querySelector("video");
+		if (video) return video;
+		const canvas = root.querySelector("canvas");
+		if (canvas) return this.#getOrCreateCaptureVideo(canvas);
+		return null;
+	}
+	#getOrCreateCaptureVideo(canvas) {
+		if (!this.#captureVideo) {
+			const video = document.createElement("video");
+			video.style.cssText = "position:absolute;width:1px;height:1px;opacity:0;pointer-events:none";
+			video.muted = true;
+			video.autoplay = true;
+			const stream = canvas.captureStream?.();
+			if (stream) video.srcObject = stream;
+			document.body.appendChild(video);
+			this.#captureVideo = video;
+		}
+		return this.#captureVideo;
+	}
+	#teardownCaptureVideo() {
+		if (this.#captureVideo) {
+			this.#captureVideo.srcObject = null;
+			this.#captureVideo.remove();
+			this.#captureVideo = null;
+		}
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		this.isPiP = !!document.pictureInPictureElement;
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.#teardownCaptureVideo();
+	}
+	render() {
+		return html`
+      <div @click=${this.toggle}>
+        ${this.isPiP ? html`<slot name="exit"></slot>` : html`<slot name="enter"></slot>`}
+      </div>
+    `;
+	}
+};
+__decorate([property({ type: String })], EFPIP.prototype, "target", void 0);
+__decorate([state()], EFPIP.prototype, "isPiP", void 0);
+EFPIP = __decorate([customElement("ef-pip")], EFPIP);
+//#endregion
+export { EFPIP };
+
+//# sourceMappingURL=EFPIP.js.map

package/dist/gui/EFPIP.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EFPIP.js","names":["#getOrCreateCaptureVideo","#captureVideo","#teardownCaptureVideo"],"sources":["../../src/gui/EFPIP.ts"],"mappings":";;;;AAoBO,IAAA,QAAA,MAAM,cAAc,WAAW;;;gBAS3B;eAGO;8BAmDe;AAC7B,QAAK,QAAQ;;8BAGgB;AAC7B,QAAK,QAAQ;;gBAGE,YAAY;AAC3B,OAAI,SAAS,yBAAyB;AACpC,UAAM,SAAS,sBAAsB;AACrC;;GAGF,MAAM,QAAQ,KAAK,oBAAoB;AACvC,OAAI,CAAC,MAAO;AAEZ,SAAM,iBAAiB,yBAAyB,KAAK,gBAAgB,EAAE,MAAM,OAAO,CAAC;AACrF,SAAM,iBAAiB,yBAAyB,KAAK,gBAAgB,EAAE,MAAM,OAAO,CAAC;AAGrF,OAAI,MAAM,OACR,OAAM,MAAM,MAAM,CAAC,YAAY,GAAG;AAGpC,SAAM,MAAM,yBAAyB;;;;gBAvFvB,CACd,GAAG;;MAGJ;;;CAUD,gBAAyC;CAEzC,qBAAsD;EACpD,MAAM,OAAO,KAAK,SAAS,SAAS,eAAe,KAAK,OAAO,GAAG;AAClE,MAAI,CAAC,KAAM,QAAO;AAElB,MAAI,gBAAgB,iBAClB,QAAO;AAGT,MAAI,gBAAgB,kBAClB,QAAO,MAAA,wBAA8B,KAAK;EAI5C,MAAM,QAAQ,KAAK,cAAc,QAAQ;AACzC,MAAI,MAAO,QAAO;EAClB,MAAM,SAAS,KAAK,cAAc,SAAS;AAC3C,MAAI,OAAQ,QAAO,MAAA,wBAA8B,OAAO;AAExD,SAAO;;CAGT,yBAAyB,QAA6C;AACpE,MAAI,CAAC,MAAA,cAAoB;GACvB,MAAM,QAAQ,SAAS,cAAc,QAAQ;AAC7C,SAAM,MAAM,UAAU;AACtB,SAAM,QAAQ;AACd,SAAM,WAAW;GAEjB,MAAM,SAAU,OAAe,iBAAiB;AAChD,OAAI,OACF,OAAM,YAAY;AAEpB,YAAS,KAAK,YAAY,MAAM;AAChC,SAAA,eAAqB;;AAEvB,SAAO,MAAA;;CAGT,wBAAwB;AACtB,MAAI,MAAA,cAAoB;AACtB,SAAA,aAAmB,YAAY;AAC/B,SAAA,aAAmB,QAAQ;AAC3B,SAAA,eAAqB;;;CAgCzB,oBAAoB;AAClB,QAAM,mBAAmB;AACzB,OAAK,QAAQ,CAAC,CAAC,SAAS;;CAG1B,uBAAuB;AACrB,QAAM,sBAAsB;AAC5B,QAAA,sBAA4B;;CAG9B,SAAS;AACP,SAAO,IAAI;oBACK,KAAK,OAAO;UACtB,KAAK,QAAQ,IAAI,8BAA8B,IAAI,6BAA6B;;;;;YAhGvF,SAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,EAAA,MAAA,WAAA,UAAA,KAAA,EAAA;YAG1B,OAAO,CAAA,EAAA,MAAA,WAAA,SAAA,KAAA,EAAA;oBAZT,cAAc,SAAS,CAAA,EAAA,MAAA"}

package/dist/gui/EFResolution.d.ts

@@ -0,0 +1,47 @@
+import { TemplateResult as TemplateResult$1 } from "../node_modules/lit-html/development/lit-html.js";
+import * as _$lit from "lit";
+import { LitElement } from "lit";
+
+//#region src/gui/EFResolution.d.ts
+interface ResolutionChangeDetail {
+  width: number;
+  height: number;
+}
+/**
+ * A resolution picker for an `ef-timegroup` (or any element whose dimensions
+ * are controlled by inline CSS `width` / `height`).
+ *
+ * The `target` attribute accepts the `id` of the element to resize.
+ * Dispatches a `resolution-change` custom event with `{ width, height }` detail.
+ *
+ * Usage:
+ * ```html
+ * <ef-resolution target="my-timegroup"></ef-resolution>
+ * ```
+ */
+declare class EFResolution extends LitElement {
+  #private;
+  static styles: _$lit.CSSResult[];
+  /** ID of the target element whose CSS width/height to change. */
+  target: string;
+  private selectedPreset;
+  private customWidth;
+  private customHeight;
+  private isCustom;
+  private get targetElement();
+  connectedCallback(): void;
+  private handlePresetChange;
+  private handleCustomWidth;
+  private handleCustomHeight;
+  private handleCustomApply;
+  private handleCustomKeydown;
+  render(): TemplateResult$1<1>;
+}
+declare global {
+  interface HTMLElementTagNameMap {
+    "ef-resolution": EFResolution;
+  }
+}
+//#endregion
+export { EFResolution, ResolutionChangeDetail };
+//# sourceMappingURL=EFResolution.d.ts.map

package/dist/gui/EFResolution.js

@@ -0,0 +1,203 @@
+import { __decorate } from "../_virtual/_@oxc-project_runtime@0.122.0/helpers/decorate.js";
+import { LitElement, css, html } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+//#region src/gui/EFResolution.ts
+const PRESETS = [
+	{
+		label: "HD (1920×1080)",
+		width: 1920,
+		height: 1080
+	},
+	{
+		label: "720p (1280×720)",
+		width: 1280,
+		height: 720
+	},
+	{
+		label: "4K (3840×2160)",
+		width: 3840,
+		height: 2160
+	},
+	{
+		label: "Vertical (1080×1920)",
+		width: 1080,
+		height: 1920
+	},
+	{
+		label: "Square (1080×1080)",
+		width: 1080,
+		height: 1080
+	}
+];
+const CUSTOM_VALUE = "__custom__";
+let EFResolution = class EFResolution extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.target = "";
+		this.selectedPreset = PRESETS[0].label;
+		this.customWidth = 1920;
+		this.customHeight = 1080;
+		this.isCustom = false;
+		this.handlePresetChange = (e) => {
+			const value = e.target.value;
+			if (value === CUSTOM_VALUE) {
+				this.selectedPreset = CUSTOM_VALUE;
+				this.isCustom = true;
+				return;
+			}
+			const preset = PRESETS.find((p) => p.label === value);
+			if (!preset) return;
+			this.selectedPreset = preset.label;
+			this.isCustom = false;
+			this.#applyDimensions(preset.width, preset.height);
+		};
+		this.handleCustomWidth = (e) => {
+			const input = e.target;
+			this.customWidth = Number.parseInt(input.value, 10) || this.customWidth;
+		};
+		this.handleCustomHeight = (e) => {
+			const input = e.target;
+			this.customHeight = Number.parseInt(input.value, 10) || this.customHeight;
+		};
+		this.handleCustomApply = () => {
+			if (this.customWidth > 0 && this.customHeight > 0) this.#applyDimensions(this.customWidth, this.customHeight);
+		};
+		this.handleCustomKeydown = (e) => {
+			if (e.key === "Enter") this.handleCustomApply();
+		};
+	}
+	static {
+		this.styles = [css`
+      :host {
+        --ef-resolution-font-size: 12px;
+        --ef-resolution-color: var(--ef-color-text, #fff);
+        --ef-resolution-border-color: var(--ef-color-border, rgba(255, 255, 255, 0.2));
+        --ef-resolution-bg: var(--ef-color-surface, rgba(0, 0, 0, 0.6));
+        display: inline-flex;
+        align-items: center;
+        gap: 6px;
+        font-size: var(--ef-resolution-font-size);
+        color: var(--ef-resolution-color);
+      }
+
+      select,
+      input[type="number"] {
+        background: var(--ef-resolution-bg);
+        border: 1px solid var(--ef-resolution-border-color);
+        border-radius: 3px;
+        color: inherit;
+        font-size: inherit;
+        padding: 2px 4px;
+        outline: none;
+        cursor: pointer;
+      }
+
+      select {
+        min-width: 130px;
+      }
+
+      input[type="number"] {
+        width: 60px;
+        cursor: text;
+        -moz-appearance: textfield;
+      }
+
+      input[type="number"]::-webkit-inner-spin-button,
+      input[type="number"]::-webkit-outer-spin-button {
+        -webkit-appearance: none;
+        margin: 0;
+      }
+
+      .custom-inputs {
+        display: contents;
+      }
+
+      .sep {
+        opacity: 0.5;
+      }
+    `];
+	}
+	get targetElement() {
+		return this.target ? document.getElementById(this.target) : null;
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		const el = this.targetElement;
+		if (el) {
+			const w = el.offsetWidth || 1920;
+			const h = el.offsetHeight || 1080;
+			this.#syncFromDimensions(w, h);
+		}
+	}
+	#syncFromDimensions(width, height) {
+		const match = PRESETS.find((p) => p.width === width && p.height === height);
+		if (match) {
+			this.selectedPreset = match.label;
+			this.isCustom = false;
+		} else {
+			this.customWidth = width;
+			this.customHeight = height;
+			this.selectedPreset = CUSTOM_VALUE;
+			this.isCustom = true;
+		}
+	}
+	#applyDimensions(width, height) {
+		const el = this.targetElement;
+		if (el) {
+			el.style.width = `${width}px`;
+			el.style.height = `${height}px`;
+		}
+		this.dispatchEvent(new CustomEvent("resolution-change", {
+			detail: {
+				width,
+				height
+			},
+			bubbles: true,
+			composed: true
+		}));
+	}
+	render() {
+		return html`
+      <select .value=${this.selectedPreset} @change=${this.handlePresetChange}>
+        ${PRESETS.map((p) => html`<option value=${p.label} ?selected=${this.selectedPreset === p.label}>
+              ${p.label}
+            </option>`)}
+        <option value=${CUSTOM_VALUE} ?selected=${this.isCustom}>Custom</option>
+      </select>
+
+      ${this.isCustom ? html`
+          <span class="custom-inputs">
+            <input
+              type="number"
+              min="1"
+              max="7680"
+              .value=${String(this.customWidth)}
+              @change=${this.handleCustomWidth}
+              @keydown=${this.handleCustomKeydown}
+              aria-label="Width"
+            />
+            <span class="sep">×</span>
+            <input
+              type="number"
+              min="1"
+              max="7680"
+              .value=${String(this.customHeight)}
+              @change=${this.handleCustomHeight}
+              @keydown=${this.handleCustomKeydown}
+              aria-label="Height"
+            />
+          </span>
+        ` : html``}
+    `;
+	}
+};
+__decorate([property({ type: String })], EFResolution.prototype, "target", void 0);
+__decorate([state()], EFResolution.prototype, "selectedPreset", void 0);
+__decorate([state()], EFResolution.prototype, "customWidth", void 0);
+__decorate([state()], EFResolution.prototype, "customHeight", void 0);
+__decorate([state()], EFResolution.prototype, "isCustom", void 0);
+EFResolution = __decorate([customElement("ef-resolution")], EFResolution);
+//#endregion
+export { EFResolution };
+
+//# sourceMappingURL=EFResolution.js.map

package/dist/gui/EFResolution.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EFResolution.js","names":["#applyDimensions","#syncFromDimensions"],"sources":["../../src/gui/EFResolution.ts"],"mappings":"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"}

package/dist/gui/EFVolume.d.ts

@@ -0,0 +1,44 @@
+import { TemplateResult as TemplateResult$1 } from "../node_modules/lit-html/development/lit-html.js";
+import { ControllableInterface } from "./Controllable.js";
+import * as _$lit from "lit";
+import { LitElement } from "lit";
+
+//#region src/gui/EFVolume.d.ts
+declare const EFVolume_base: (new (...args: any[]) => {
+  target: string;
+  targetElement: ControllableInterface | null;
+  effectiveContext: ControllableInterface | null;
+}) & typeof LitElement;
+/**
+ * A range slider for controlling master playback volume (0–1).
+ * Must be a descendant of `ef-controls` or `ef-preview`, or have a `target` attribute.
+ *
+ * Usage:
+ * ```html
+ * <ef-controls target="my-preview">
+ *   <ef-volume></ef-volume>
+ * </ef-controls>
+ * ```
+ *
+ * CSS custom properties:
+ * - `--ef-volume-height`: track height (default 4px)
+ * - `--ef-volume-track-color`: unfilled track background
+ * - `--ef-volume-fill-color`: filled track and thumb color
+ */
+declare class EFVolume extends EFVolume_base {
+  static styles: _$lit.CSSResult[];
+  private contextVolume;
+  private contextMuted;
+  get context(): ControllableInterface | null;
+  private get displayVolume();
+  private handleInput;
+  render(): TemplateResult$1<1>;
+}
+declare global {
+  interface HTMLElementTagNameMap {
+    "ef-volume": EFVolume;
+  }
+}
+//#endregion
+export { EFVolume };
+//# sourceMappingURL=EFVolume.d.ts.map

package/dist/gui/EFVolume.js

@@ -0,0 +1,125 @@
+import { efContext } from "./efContext.js";
+import { __decorate } from "../_virtual/_@oxc-project_runtime@0.122.0/helpers/decorate.js";
+import { mutedContext, volumeContext } from "./volumeContext.js";
+import { TargetOrContextMixin } from "./TargetOrContextMixin.js";
+import { consume } from "@lit/context";
+import { LitElement, css, html } from "lit";
+import { customElement, state } from "lit/decorators.js";
+//#region src/gui/EFVolume.ts
+let EFVolume = class EFVolume extends TargetOrContextMixin(LitElement, efContext) {
+	constructor(..._args) {
+		super(..._args);
+		this.contextVolume = 1;
+		this.contextMuted = false;
+		this.handleInput = (e) => {
+			const input = e.target;
+			const value = Number.parseFloat(input.value);
+			if (this.context) {
+				if (this.context.muted && value > 0) this.context.muted = false;
+				this.context.volume = value;
+			}
+		};
+	}
+	static {
+		this.styles = [css`
+      :host {
+        --ef-volume-height: 4px;
+        --ef-volume-track-color: var(--ef-color-border, rgba(255, 255, 255, 0.2));
+        --ef-volume-fill-color: var(--ef-color-primary, #fff);
+        display: flex;
+        align-items: center;
+        width: 80px;
+      }
+
+      input[type="range"] {
+        -webkit-appearance: none;
+        appearance: none;
+        width: 100%;
+        height: var(--ef-volume-height);
+        background: var(--ef-volume-track-color);
+        border-radius: 2px;
+        outline: none;
+        cursor: pointer;
+        padding: 0;
+        margin: 0;
+      }
+
+      input[type="range"]::-webkit-slider-thumb {
+        -webkit-appearance: none;
+        appearance: none;
+        width: 12px;
+        height: 12px;
+        border-radius: 50%;
+        background: var(--ef-volume-fill-color);
+        cursor: grab;
+      }
+
+      input[type="range"]::-moz-range-thumb {
+        width: 12px;
+        height: 12px;
+        border: none;
+        border-radius: 50%;
+        background: var(--ef-volume-fill-color);
+        cursor: grab;
+      }
+
+      input[type="range"]::-webkit-slider-runnable-track {
+        background: linear-gradient(
+          to right,
+          var(--ef-volume-fill-color) var(--_fill-pct, 100%),
+          var(--ef-volume-track-color) var(--_fill-pct, 100%)
+        );
+        height: var(--ef-volume-height);
+        border-radius: 2px;
+      }
+
+      input[type="range"]::-moz-range-track {
+        height: var(--ef-volume-height);
+        background: var(--ef-volume-track-color);
+        border-radius: 2px;
+      }
+
+      input[type="range"]::-moz-range-progress {
+        height: var(--ef-volume-height);
+        background: var(--ef-volume-fill-color);
+        border-radius: 2px;
+      }
+
+      ::part(slider) {}
+    `];
+	}
+	get context() {
+		return this.effectiveContext;
+	}
+	get displayVolume() {
+		return this.contextMuted ? 0 : this.contextVolume;
+	}
+	render() {
+		const pct = `${this.displayVolume * 100}%`;
+		return html`
+      <input
+        part="slider"
+        type="range"
+        min="0"
+        max="1"
+        step="0.01"
+        .value=${String(this.displayVolume)}
+        style="--_fill-pct: ${pct}"
+        @input=${this.handleInput}
+      />
+    `;
+	}
+};
+__decorate([consume({
+	context: volumeContext,
+	subscribe: true
+}), state()], EFVolume.prototype, "contextVolume", void 0);
+__decorate([consume({
+	context: mutedContext,
+	subscribe: true
+}), state()], EFVolume.prototype, "contextMuted", void 0);
+EFVolume = __decorate([customElement("ef-volume")], EFVolume);
+//#endregion
+export { EFVolume };
+
+//# sourceMappingURL=EFVolume.js.map

package/dist/gui/EFVolume.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EFVolume.js","names":[],"sources":["../../src/gui/EFVolume.ts"],"mappings":";;;;;;;;AA0BO,IAAA,WAAA,MAAM,iBAAiB,qBAAqB,YAAY,UAAU,CAAC;;;uBAwEhD;sBAID;sBAUA,MAAa;GAClC,MAAM,QAAQ,EAAE;GAChB,MAAM,QAAQ,OAAO,WAAW,MAAM,MAAM;AAC5C,OAAI,KAAK,SAAS;AAChB,QAAI,KAAK,QAAQ,SAAS,QAAQ,EAChC,MAAK,QAAQ,QAAQ;AAEvB,SAAK,QAAQ,SAAS;;;;;gBA5FV,CACd,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAkEJ;;CAUD,IAAI,UAAwC;AAC1C,SAAO,KAAK;;CAGd,IAAY,gBAAwB;AAClC,SAAO,KAAK,eAAe,IAAI,KAAK;;CActC,SAAS;EACP,MAAM,MAAM,GAAG,KAAK,gBAAgB,IAAI;AACxC,SAAO,IAAI;;;;;;;iBAOE,OAAO,KAAK,cAAc,CAAC;8BACd,IAAI;iBACjB,KAAK,YAAY;;;;;YAtC/B,QAAQ;CAAE,SAAS;CAAe,WAAW;CAAM,CAAC,EACpD,OAAO,CAAA,EAAA,SAAA,WAAA,iBAAA,KAAA,EAAA;YAGP,QAAQ;CAAE,SAAS;CAAc,WAAW;CAAM,CAAC,EACnD,OAAO,CAAA,EAAA,SAAA,WAAA,gBAAA,KAAA,EAAA;uBA5ET,cAAc,YAAY,CAAA,EAAA,SAAA"}

package/dist/gui/PlaybackController.d.ts

@@ -27,7 +27,7 @@ interface PlaybackHost extends HTMLElement, ReactiveControllerHost {
   rootTimegroup?: any;
 }
 type PlaybackControllerUpdateEvent = {
-  property: "playing" | "loop" | "currentTimeMs";
+  property: "playing" | "loop" | "currentTimeMs" | "volume" | "muted";
   value: boolean | number;
 };
 /**
@@ -52,6 +52,10 @@ declare class PlaybackController implements ReactiveController {
   setPlaying(value: boolean): void;
   get loop(): boolean;
   setLoop(value: boolean): void;
+  get volume(): number;
+  setVolume(value: number): void;
+  get muted(): boolean;
+  setMuted(value: boolean): void;
   get currentTimeMs(): number;
   setCurrentTimeMs(value: number): void;
   play(): void;

package/dist/gui/PlaybackController.js

@@ -1,6 +1,7 @@
 import { currentTimeContext } from "./currentTimeContext.js";
 import { durationContext } from "./durationContext.js";
 import { loopContext, playingContext } from "./playingContext.js";
+import { mutedContext, volumeContext } from "./volumeContext.js";
 import { updateAnimations } from "../elements/updateAnimations.js";
 import { ContextProvider } from "@lit/context";
 //#region src/gui/PlaybackController.ts
@@ -21,14 +22,19 @@ var PlaybackController = class {
 	#host;
 	#playing = false;
 	#loop = false;
+	#volume = 1;
+	#muted = false;
 	#listeners = /* @__PURE__ */ new Set();
 	#playingProvider;
 	#loopProvider;
 	#currentTimeMsProvider;
 	#durationMsProvider;
+	#volumeProvider;
+	#mutedProvider;
 	get #msPerFrame() {
 		return 1e3 / (this.#host.fps ?? 30);
 	}
+	#gainNode = null;
 	#playbackAudioContext = null;
 	#playbackAnimationFrameRequest = null;
 	#pendingAudioContext = null;
@@ -62,6 +68,14 @@ var PlaybackController = class {
 			context: durationContext,
 			initialValue: host.durationMs
 		});
+		this.#volumeProvider = new ContextProvider(host, {
+			context: volumeContext,
+			initialValue: this.#volume
+		});
+		this.#mutedProvider = new ContextProvider(host, {
+			context: mutedContext,
+			initialValue: this.#muted
+		});
 	}
 	get currentTime() {
 		const rawTime = this.#currentTime ?? 0;
@@ -155,6 +169,37 @@ var PlaybackController = class {
 			value
 		});
 	}
+	get volume() {
+		return this.#volume;
+	}
+	setVolume(value) {
+		const clamped = Math.max(0, Math.min(1, value));
+		if (this.#volume === clamped) return;
+		this.#volume = clamped;
+		this.#volumeProvider.setValue(clamped);
+		this.#notifyListeners({
+			property: "volume",
+			value: clamped
+		});
+		this.#applyGain();
+	}
+	get muted() {
+		return this.#muted;
+	}
+	setMuted(value) {
+		if (this.#muted === value) return;
+		this.#muted = value;
+		this.#mutedProvider.setValue(value);
+		this.#notifyListeners({
+			property: "muted",
+			value
+		});
+		this.#applyGain();
+	}
+	#applyGain() {
+		if (!this.#gainNode) return;
+		this.#gainNode.gain.value = this.#muted ? 0 : this.#volume;
+	}
 	get currentTimeMs() {
 		return this.currentTime * 1e3;
 	}
@@ -345,6 +390,7 @@ var PlaybackController = class {
 			this.#playbackAnimationFrameRequest = null;
 		}
 		this.#rafStartWallMs = null;
+		this.#gainNode = null;
 		if (this.#playbackAudioContext) {
 			if (this.#playbackAudioContext.state !== "closed") await this.#playbackAudioContext.close();
 		}
@@ -390,6 +436,9 @@ var PlaybackController = class {
 			this.#playbackAudioContext = this.#pendingAudioContext;
 			this.#pendingAudioContext = null;
 		} else this.#playbackAudioContext = new AudioContext({ latencyHint: "playback" });
+		this.#gainNode = this.#playbackAudioContext.createGain();
+		this.#gainNode.gain.value = this.#muted ? 0 : this.#volume;
+		this.#gainNode.connect(this.#playbackAudioContext.destination);
 		const playbackContext = this.#playbackAudioContext;
 		if (playbackContext.state === "suspended") {
 			playbackContext.close().catch(() => {});
@@ -419,7 +468,7 @@ var PlaybackController = class {
 			bufferCount++;
 			const source = playbackContext.createBufferSource();
 			source.buffer = audioBuffer;
-			source.connect(playbackContext.destination);
+			source.connect(this.#gainNode ?? playbackContext.destination);
 			source.start(audioContextTimeMs / 1e3);
 			const sliceDurationMs = endMs - startMs;
 			source.onended = () => {