@editframe/elements 0.55.1 → 0.56.0

package/dist/gui/Controllable.js

@@ -44,6 +44,12 @@ function createDirectTemporalSubscription(target, callbacks) {
 			case "currentTimeMs":
 				callbacks.onCurrentTimeMsChange(event.value);
 				break;
+			case "volume":
+				callbacks.onVolumeChange?.(event.value);
+				break;
+			case "muted":
+				callbacks.onMutedChange?.(event.value);
+				break;
 		}
 	};
 	controller.addListener(listener);

package/dist/gui/Controllable.js.map

@@ -1 +1 @@
-{"version":3,"file":"Controllable.js","names":[],"sources":["../../src/gui/Controllable.ts"],"mappings":";;;AAiBA,SAAgB,eAAe,OAA4C;AACzE,KAAI,CAAC,SAAS,OAAO,UAAU,SAC7B,QAAO;AAGT,KAAI,eAAe,MAAM,CACvB,QAAO;AAGT,KAAI,aAAa,MAAM,CAErB,QADiB,MACD,uBAAuB,KAAA;AAGzC,QAAO;;;;;;;;;AA0BT,SAAgB,oBAAoB,QAAyC;AAC3E,KAAI,CAAC,OAAQ,QAAO;AAEpB,KAAI,eAAe,OAAO,CACxB,QAAO;AAGT,KAAI,aAAa,OAAO;MACL,OAGJ,mBACX,QAAO;;AAIX,QAAO;;;;;;AA2BT,SAAgB,iCACd,QACA,WAC0B;CAC1B,MAAM,aAAa,OAAO;AAG1B,WAAU,gBAAgB,WAAW,QAAQ;AAC7C,WAAU,aAAa,WAAW,KAAK;AACvC,WAAU,sBAAsB,WAAW,cAAc;AACzD,WAAU,mBAAmB,OAAO,WAAW;AAC/C,WAAU,uBAAuB,OAAO;CAGxC,MAAM,YAAY,UAAyC;AACzD,UAAQ,MAAM,UAAd;GACE,KAAK;AACH,cAAU,gBAAgB,MAAM,MAAiB;AACjD;GACF,KAAK;AACH,cAAU,aAAa,MAAM,MAAiB;AAC9C;GACF,KAAK;AACH,cAAU,sBAAsB,MAAM,MAAgB;AACtD;;;AAGN,YAAW,YAAY,SAAS;CAGhC,MAAM,mBAAmB,IAAI,uBAAuB;AAClD,YAAU,mBAAmB,OAAO,WAAW;GAC/C;AACF,kBAAiB,QAAQ,QAAQ;EAC/B,YAAY;EACZ,iBAAiB;GAAC;GAAY;GAAa;GAAW;GAAY;GAAY;EAC9E,SAAS;EACV,CAAC;CAIF,IAAI,oBAAoB,OAAO;CAC/B,IAAI,uBAA8D;AAIlE,KAAI,sBAAsB,EACxB,wBAAuB,kBAAkB;EACvC,MAAM,kBAAkB,OAAO;AAC/B,MAAI,oBAAoB,mBAAmB;AACzC,uBAAoB;AACpB,aAAU,mBAAmB,gBAAgB;AAE7C,OAAI,kBAAkB,KAAK,sBAAsB;AAC/C,kBAAc,qBAAqB;AACnC,2BAAuB;;;IAG1B,IAAI;AAGT,QAAO,EACL,mBAAmB;AACjB,aAAW,eAAe,SAAS;AACnC,mBAAiB,YAAY;AAC7B,MAAI,qBACF,eAAc,qBAAqB;IAGxC"}
+{"version":3,"file":"Controllable.js","names":[],"sources":["../../src/gui/Controllable.ts"],"mappings":";;;AAmBA,SAAgB,eAAe,OAA4C;AACzE,KAAI,CAAC,SAAS,OAAO,UAAU,SAC7B,QAAO;AAGT,KAAI,eAAe,MAAM,CACvB,QAAO;AAGT,KAAI,aAAa,MAAM,CAErB,QADiB,MACD,uBAAuB,KAAA;AAGzC,QAAO;;;;;;;;;AA0BT,SAAgB,oBAAoB,QAAyC;AAC3E,KAAI,CAAC,OAAQ,QAAO;AAEpB,KAAI,eAAe,OAAO,CACxB,QAAO;AAGT,KAAI,aAAa,OAAO;MACL,OAGJ,mBACX,QAAO;;AAIX,QAAO;;;;;;AA6BT,SAAgB,iCACd,QACA,WAC0B;CAC1B,MAAM,aAAa,OAAO;AAG1B,WAAU,gBAAgB,WAAW,QAAQ;AAC7C,WAAU,aAAa,WAAW,KAAK;AACvC,WAAU,sBAAsB,WAAW,cAAc;AACzD,WAAU,mBAAmB,OAAO,WAAW;AAC/C,WAAU,uBAAuB,OAAO;CAGxC,MAAM,YAAY,UAAyC;AACzD,UAAQ,MAAM,UAAd;GACE,KAAK;AACH,cAAU,gBAAgB,MAAM,MAAiB;AACjD;GACF,KAAK;AACH,cAAU,aAAa,MAAM,MAAiB;AAC9C;GACF,KAAK;AACH,cAAU,sBAAsB,MAAM,MAAgB;AACtD;GACF,KAAK;AACH,cAAU,iBAAiB,MAAM,MAAgB;AACjD;GACF,KAAK;AACH,cAAU,gBAAgB,MAAM,MAAiB;AACjD;;;AAGN,YAAW,YAAY,SAAS;CAGhC,MAAM,mBAAmB,IAAI,uBAAuB;AAClD,YAAU,mBAAmB,OAAO,WAAW;GAC/C;AACF,kBAAiB,QAAQ,QAAQ;EAC/B,YAAY;EACZ,iBAAiB;GAAC;GAAY;GAAa;GAAW;GAAY;GAAY;EAC9E,SAAS;EACV,CAAC;CAIF,IAAI,oBAAoB,OAAO;CAC/B,IAAI,uBAA8D;AAIlE,KAAI,sBAAsB,EACxB,wBAAuB,kBAAkB;EACvC,MAAM,kBAAkB,OAAO;AAC/B,MAAI,oBAAoB,mBAAmB;AACzC,uBAAoB;AACpB,aAAU,mBAAmB,gBAAgB;AAE7C,OAAI,kBAAkB,KAAK,sBAAsB;AAC/C,kBAAc,qBAAqB;AACnC,2BAAuB;;;IAG1B,IAAI;AAGT,QAAO,EACL,mBAAmB;AACjB,aAAW,eAAe,SAAS;AACnC,mBAAiB,YAAY;AAC7B,MAAI,qBACF,eAAc,qBAAqB;IAGxC"}

package/dist/gui/EFControls.d.ts

@@ -41,6 +41,8 @@ declare class EFControls extends LitElement {
   durationMs: number;
   targetTemporal: TemporalMixinInterface | null;
   focusedElement?: HTMLElement;
+  volume: number;
+  muted: boolean;
   focusContext: FocusContext;
   updated(changedProperties: PropertyValueMap<this>): void;
   disconnectedCallback(): void;

package/dist/gui/EFControls.js

@@ -4,6 +4,7 @@ import { __decorate } from "../_virtual/_@oxc-project_runtime@0.122.0/helpers/de
 import { currentTimeContext } from "./currentTimeContext.js";
 import { durationContext } from "./durationContext.js";
 import { loopContext, playingContext } from "./playingContext.js";
+import { mutedContext, volumeContext } from "./volumeContext.js";
 import { isEFTemporal } from "../elements/EFTemporal.js";
 import { focusContext } from "./focusContext.js";
 import { focusedElementContext } from "./focusedElementContext.js";
@@ -34,7 +35,9 @@ const proxiedContexts = [
 	[(proxy, value) => proxy.durationMs = value, durationContext],
 	[(proxy, value) => proxy.targetTemporal = value, targetTemporalContext],
 	[(proxy, value) => proxy.focusedElement = value, focusedElementContext],
-	[(proxy, value) => proxy.focusContext.focusedElement = value, focusContext]
+	[(proxy, value) => proxy.focusContext.focusedElement = value, focusContext],
+	[(proxy, value) => proxy.volume = value, volumeContext],
+	[(proxy, value) => proxy.muted = value, mutedContext]
 ];
 createContext("test");
 let EFControls = class EFControls extends LitElement {
@@ -47,6 +50,8 @@ let EFControls = class EFControls extends LitElement {
 		this.currentTimeMs = 0;
 		this.durationMs = 0;
 		this.targetTemporal = null;
+		this.volume = 1;
+		this.muted = false;
 		this.focusContext = this;
 	}
 	static {
@@ -161,6 +166,12 @@ let EFControls = class EFControls extends LitElement {
 			},
 			onFocusedElementChange: (value) => {
 				this.focusedElement = value;
+			},
+			onVolumeChange: (value) => {
+				this.volume = value;
+			},
+			onMutedChange: (value) => {
+				this.muted = value;
 			}
 		});
 	}
@@ -185,6 +196,8 @@ __decorate([provide({ context: currentTimeContext }), state()], EFControls.proto
 __decorate([provide({ context: durationContext }), state()], EFControls.prototype, "durationMs", void 0);
 __decorate([provide({ context: targetTemporalContext }), state()], EFControls.prototype, "targetTemporal", void 0);
 __decorate([provide({ context: focusedElementContext }), state()], EFControls.prototype, "focusedElement", void 0);
+__decorate([provide({ context: volumeContext }), state()], EFControls.prototype, "volume", void 0);
+__decorate([provide({ context: mutedContext }), state()], EFControls.prototype, "muted", void 0);
 __decorate([provide({ context: focusContext })], EFControls.prototype, "focusContext", void 0);
 EFControls = __decorate([customElement("ef-controls")], EFControls);
 //#endregion

package/dist/gui/EFControls.js.map

@@ -1 +1 @@
-{"version":3,"file":"EFControls.js","names":["#subscribeAbortController","#contextUnsubscribeMap","#directTemporalSubscription","#subscribeToContextProvider","#subscribeToDirectTemporal","#waitForTemporalToInitialize","#unsubscribe","#subscribe","#resubscribe"],"sources":["../../src/gui/EFControls.ts"],"mappings":"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"}
+{"version":3,"file":"EFControls.js","names":["#subscribeAbortController","#contextUnsubscribeMap","#directTemporalSubscription","#subscribeToContextProvider","#subscribeToDirectTemporal","#waitForTemporalToInitialize","#unsubscribe","#subscribe","#resubscribe"],"sources":["../../src/gui/EFControls.ts"],"mappings":"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"}

package/dist/gui/EFFullscreen.d.ts

@@ -0,0 +1,38 @@
+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/EFFullscreen.d.ts
+/**
+ * A fullscreen toggle that enters/exits the browser Fullscreen API on a target element.
+ * The `target` attribute accepts the `id` of the element to make fullscreen.
+ * If omitted, defaults to `document.documentElement`.
+ *
+ * Usage:
+ * ```html
+ * <ef-fullscreen target="my-container">
+ *   <button slot="enter">Enter Fullscreen</button>
+ *   <button slot="exit">Exit Fullscreen</button>
+ * </ef-fullscreen>
+ * ```
+ */
+declare class EFFullscreen extends LitElement {
+  static styles: _$lit.CSSResult[];
+  /** ID of the element to make fullscreen. Defaults to document.documentElement. */
+  target: string;
+  private isFullscreen;
+  private get targetElement();
+  private handleFullscreenChange;
+  connectedCallback(): void;
+  disconnectedCallback(): void;
+  private toggle;
+  render(): TemplateResult$1<1>;
+}
+declare global {
+  interface HTMLElementTagNameMap {
+    "ef-fullscreen": EFFullscreen;
+  }
+}
+//#endregion
+export { EFFullscreen };
+//# sourceMappingURL=EFFullscreen.d.ts.map

package/dist/gui/EFFullscreen.js

@@ -0,0 +1,50 @@
+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/EFFullscreen.ts
+let EFFullscreen = class EFFullscreen extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.target = "";
+		this.isFullscreen = false;
+		this.handleFullscreenChange = () => {
+			this.isFullscreen = !!document.fullscreenElement;
+		};
+		this.toggle = async () => {
+			if (document.fullscreenElement) await document.exitFullscreen();
+			else await this.targetElement.requestFullscreen();
+		};
+	}
+	static {
+		this.styles = [css`
+      :host {}
+    `];
+	}
+	get targetElement() {
+		if (this.target) return document.getElementById(this.target) ?? document.documentElement;
+		return document.documentElement;
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		document.addEventListener("fullscreenchange", this.handleFullscreenChange);
+		this.isFullscreen = !!document.fullscreenElement;
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		document.removeEventListener("fullscreenchange", this.handleFullscreenChange);
+	}
+	render() {
+		return html`
+      <div @click=${this.toggle}>
+        ${this.isFullscreen ? html`<slot name="exit"></slot>` : html`<slot name="enter"></slot>`}
+      </div>
+    `;
+	}
+};
+__decorate([property({ type: String })], EFFullscreen.prototype, "target", void 0);
+__decorate([state()], EFFullscreen.prototype, "isFullscreen", void 0);
+EFFullscreen = __decorate([customElement("ef-fullscreen")], EFFullscreen);
+//#endregion
+export { EFFullscreen };
+
+//# sourceMappingURL=EFFullscreen.js.map

package/dist/gui/EFFullscreen.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EFFullscreen.js","names":[],"sources":["../../src/gui/EFFullscreen.ts"],"mappings":";;;;AAiBO,IAAA,eAAA,MAAM,qBAAqB,WAAW;;;gBASlC;sBAGc;sCASgB;AACrC,QAAK,eAAe,CAAC,CAAC,SAAS;;gBAchB,YAAY;AAC3B,OAAI,SAAS,kBACX,OAAM,SAAS,gBAAgB;OAE/B,OAAM,KAAK,cAAc,mBAAmB;;;;gBAvChC,CACd,GAAG;;MAGJ;;CASD,IAAY,gBAAyB;AACnC,MAAI,KAAK,OACP,QAAO,SAAS,eAAe,KAAK,OAAO,IAAI,SAAS;AAE1D,SAAO,SAAS;;CAOlB,oBAAoB;AAClB,QAAM,mBAAmB;AACzB,WAAS,iBAAiB,oBAAoB,KAAK,uBAAuB;AAC1E,OAAK,eAAe,CAAC,CAAC,SAAS;;CAGjC,uBAAuB;AACrB,QAAM,sBAAsB;AAC5B,WAAS,oBAAoB,oBAAoB,KAAK,uBAAuB;;CAW/E,SAAS;AACP,SAAO,IAAI;oBACK,KAAK,OAAO;UACtB,KAAK,eAAe,IAAI,8BAA8B,IAAI,6BAA6B;;;;;YAvC9F,SAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,EAAA,aAAA,WAAA,UAAA,KAAA,EAAA;YAG1B,OAAO,CAAA,EAAA,aAAA,WAAA,gBAAA,KAAA,EAAA;2BAZT,cAAc,gBAAgB,CAAA,EAAA,aAAA"}

package/dist/gui/EFMute.d.ts

@@ -0,0 +1,40 @@
+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/EFMute.d.ts
+declare const EFMute_base: (new (...args: any[]) => {
+  target: string;
+  targetElement: ControllableInterface | null;
+  effectiveContext: ControllableInterface | null;
+}) & typeof LitElement;
+/**
+ * A mute/unmute toggle that swaps between named slots based on the muted state.
+ * Must be a descendant of `ef-controls` or `ef-preview`, or have a `target` attribute.
+ *
+ * Usage:
+ * ```html
+ * <ef-controls target="my-preview">
+ *   <ef-mute>
+ *     <button slot="unmuted">🔊</button>
+ *     <button slot="muted">🔇</button>
+ *   </ef-mute>
+ * </ef-controls>
+ * ```
+ */
+declare class EFMute extends EFMute_base {
+  #private;
+  static styles: _$lit.CSSResult[];
+  private contextMuted;
+  get context(): ControllableInterface | null;
+  render(): TemplateResult$1<1>;
+}
+declare global {
+  interface HTMLElementTagNameMap {
+    "ef-mute": EFMute;
+  }
+}
+//#endregion
+export { EFMute };
+//# sourceMappingURL=EFMute.d.ts.map

package/dist/gui/EFMute.js

@@ -0,0 +1,41 @@
+import { efContext } from "./efContext.js";
+import { __decorate } from "../_virtual/_@oxc-project_runtime@0.122.0/helpers/decorate.js";
+import { mutedContext } 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/EFMute.ts
+let EFMute = class EFMute extends TargetOrContextMixin(LitElement, efContext) {
+	constructor(..._args) {
+		super(..._args);
+		this.contextMuted = false;
+	}
+	static {
+		this.styles = [css`
+      :host {}
+    `];
+	}
+	get context() {
+		return this.effectiveContext;
+	}
+	render() {
+		return html`
+      <div @click=${this.#toggle}>
+        ${this.contextMuted ? html`<slot name="muted"></slot>` : html`<slot name="unmuted"></slot>`}
+      </div>
+    `;
+	}
+	#toggle = () => {
+		if (this.context) this.context.muted = !this.context.muted;
+	};
+};
+__decorate([consume({
+	context: mutedContext,
+	subscribe: true
+}), state()], EFMute.prototype, "contextMuted", void 0);
+EFMute = __decorate([customElement("ef-mute")], EFMute);
+//#endregion
+export { EFMute };
+
+//# sourceMappingURL=EFMute.js.map

package/dist/gui/EFMute.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EFMute.js","names":["#toggle"],"sources":["../../src/gui/EFMute.ts"],"mappings":";;;;;;;;AAwBO,IAAA,SAAA,MAAM,eAAe,qBAAqB,YAAY,UAAU,CAAC;;;sBAS/C;;;gBARP,CACd,GAAG;;MAGJ;;CAMD,IAAI,UAAwC;AAC1C,SAAO,KAAK;;CAGd,SAAS;AACP,SAAO,IAAI;oBACK,MAAA,OAAa;UACvB,KAAK,eAAe,IAAI,+BAA+B,IAAI,+BAA+B;;;;CAKlG,gBAAgB;AACd,MAAI,KAAK,QACP,MAAK,QAAQ,QAAQ,CAAC,KAAK,QAAQ;;;YAlBtC,QAAQ;CAAE,SAAS;CAAc,WAAW;CAAM,CAAC,EACnD,OAAO,CAAA,EAAA,OAAA,WAAA,gBAAA,KAAA,EAAA;qBATT,cAAc,UAAU,CAAA,EAAA,OAAA"}

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