@editframe/elements 0.20.4-beta.0 → 0.23.6-beta.0

package/dist/elements/EFVideo.js

@@ -1,5 +1,8 @@
-import { EFMedia } from "./EFMedia.js";
+import { __decorate } from "../_virtual/_@oxc-project_runtime@0.94.0/helpers/decorate.js";
 import { TWMixin } from "../gui/TWMixin2.js";
+import { withSpan, withSpanSync } from "../otel/tracingHelpers.js";
+import { EFMedia } from "./EFMedia.js";
+import { updateAnimations } from "./updateAnimations.js";
 import { DelayedLoadingState } from "../DelayedLoadingState.js";
 import { makeScrubVideoBufferTask } from "./EFMedia/videoTasks/makeScrubVideoBufferTask.js";
 import { makeScrubVideoInitSegmentFetchTask } from "./EFMedia/videoTasks/makeScrubVideoInitSegmentFetchTask.js";
@@ -13,10 +16,10 @@ import { Task } from "@lit/task";
 import debug from "debug";
 import { css, html } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
-import _decorate from "@oxc-project/runtime/helpers/decorate";
+import { context, trace } from "@opentelemetry/api";
 import { createRef, ref } from "lit/directives/ref.js";
-const log = debug("ef:elements:EFVideo");
-let EFVideo = class EFVideo$1 extends TWMixin(EFMedia) {
+var log = debug("ef:elements:EFVideo");
+var EFVideo = class EFVideo$1 extends TWMixin(EFMedia) {
 	static {
 		this.styles = [css`
       :host {
@@ -104,43 +107,33 @@ let EFVideo = class EFVideo$1 extends TWMixin(EFMedia) {
 				console.error("frameTask error", error);
 			},
 			onComplete: () => {},
-			task: async ([_desiredSeekTimeMs]) => {
-				this.unifiedVideoSeekTask.run();
-				await this.unifiedVideoSeekTask.taskComplete;
-				this.paintTask.run();
-				await this.paintTask.taskComplete;
-			}
-		});
-		this.paintTask = new Task(this, {
-			autoRun: false,
-			args: () => [this.desiredSeekTimeMs],
-			onError: (error) => {
-				console.error("paintTask error", error);
-			},
-			onComplete: () => {},
-			task: async ([_seekToMs], { signal }) => {
-				const isProductionRendering = this.isInProductionRenderingMode();
-				try {
+			task: async ([_desiredSeekTimeMs], { signal }) => {
+				const t0 = performance.now();
+				await withSpan("video.frameTask", {
+					elementId: this.id || "unknown",
+					desiredSeekTimeMs: _desiredSeekTimeMs,
+					src: this.src || "none"
+				}, void 0, async (span) => {
+					const t1 = performance.now();
+					span.setAttribute("preworkMs", t1 - t0);
+					this.unifiedVideoSeekTask.run();
+					const t2 = performance.now();
+					span.setAttribute("seekRunMs", t2 - t1);
 					await this.unifiedVideoSeekTask.taskComplete;
-					const videoSample = this.unifiedVideoSeekTask.value;
-					if (videoSample) {
-						const videoFrame = videoSample.toVideoFrame();
-						try {
-							this.displayFrame(videoFrame, _seekToMs);
-						} finally {
-							videoFrame.close();
-						}
+					const t3 = performance.now();
+					span.setAttribute("seekAwaitMs", t3 - t2);
+					if (signal.aborted) {
+						span.setAttribute("aborted", true);
+						return;
 					}
-				} catch (error) {
-					console.warn("Unified video pipeline error:", error);
-				}
-				if (!isProductionRendering) {
-					if (!this.rootTimegroup || this.rootTimegroup.currentTimeMs === 0 && this.desiredSeekTimeMs === 0) return;
-				} else {
-					if (!this.rootTimegroup) return;
-					if (!this.isFrameRenderingActive()) return;
-				}
-				if (signal.aborted) return;
+					this.paint(this.desiredSeekTimeMs, span);
+					if (!this.parentTimegroup) updateAnimations(this);
+					const t4 = performance.now();
+					this.paint(_desiredSeekTimeMs, span);
+					const t5 = performance.now();
+					span.setAttribute("paintMs", t5 - t4);
+					span.setAttribute("totalFrameMs", t5 - t0);
+				});
 			}
 		});
 		this.delayedLoadingState = new DelayedLoadingState(250, (isLoading, message) => {
@@ -171,23 +164,13 @@ let EFVideo = class EFVideo$1 extends TWMixin(EFMedia) {
 		if (referencedCanvas) return referencedCanvas;
 		const shadowCanvas = this.shadowRoot?.querySelector("canvas");
 		if (shadowCanvas) return shadowCanvas;
-		return void 0;
 	}
-	/**
-	* Start a delayed loading operation for testing
-	*/
 	startDelayedLoading(operationId, message, options = {}) {
 		this.delayedLoadingState.startLoading(operationId, message, options);
 	}
-	/**
-	* Clear a delayed loading operation for testing
-	*/
 	clearDelayedLoading(operationId) {
 		this.delayedLoadingState.clearLoading(operationId);
 	}
-	/**
-	* Set loading state for user feedback
-	*/
 	setLoadingState(isLoading, operation = null, message = "") {
 		this.loadingState = {
 			isLoading,
@@ -195,96 +178,161 @@ let EFVideo = class EFVideo$1 extends TWMixin(EFMedia) {
 			message
 		};
 	}
-	/**
-	* Clear the canvas when element becomes inactive
-	*/
+	paint(seekToMs, parentSpan) {
+		const parentContext = parentSpan ? trace.setSpan(context.active(), parentSpan) : void 0;
+		withSpanSync("video.paint", {
+			elementId: this.id || "unknown",
+			seekToMs,
+			src: this.src || "none"
+		}, parentContext, (span) => {
+			const t0 = performance.now();
+			const isProductionRendering = this.isInProductionRenderingMode();
+			const t1 = performance.now();
+			span.setAttribute("isProductionRendering", isProductionRendering);
+			span.setAttribute("modeCheckMs", t1 - t0);
+			try {
+				const t2 = performance.now();
+				const videoSample = this.unifiedVideoSeekTask.value;
+				span.setAttribute("hasVideoSample", !!videoSample);
+				span.setAttribute("valueAccessMs", t2 - t1);
+				if (videoSample) {
+					const t3 = performance.now();
+					const videoFrame = videoSample.toVideoFrame();
+					const t4 = performance.now();
+					span.setAttribute("toVideoFrameMs", t4 - t3);
+					try {
+						const t5 = performance.now();
+						this.displayFrame(videoFrame, seekToMs, span);
+						const t6 = performance.now();
+						span.setAttribute("displayFrameMs", t6 - t5);
+					} finally {
+						videoFrame.close();
+					}
+				}
+			} catch (error) {
+				console.warn("Unified video pipeline error:", error);
+			}
+			if (!isProductionRendering) {
+				if (!this.rootTimegroup || this.rootTimegroup.currentTimeMs === 0 && this.desiredSeekTimeMs === 0) {
+					span.setAttribute("skipped", "preview-initialization");
+					return;
+				}
+			} else {
+				if (!this.rootTimegroup) {
+					span.setAttribute("skipped", "no-root-timegroup");
+					return;
+				}
+				if (!this.isFrameRenderingActive()) {
+					span.setAttribute("skipped", "frame-rendering-not-active");
+					return;
+				}
+			}
+			const tEnd = performance.now();
+			span.setAttribute("totalPaintMs", tEnd - t0);
+		});
+	}
 	clearCanvas() {
 		if (!this.canvasElement) return;
 		const ctx = this.canvasElement.getContext("2d");
 		if (ctx) ctx.clearRect(0, 0, this.canvasElement.width, this.canvasElement.height);
 	}
-	/**
-	* Display a video frame on the canvas
-	*/
-	displayFrame(frame, seekToMs) {
-		log("trace: displayFrame start", {
+	displayFrame(frame, seekToMs, parentSpan) {
+		const parentContext = parentSpan ? trace.setSpan(context.active(), parentSpan) : void 0;
+		withSpanSync("video.displayFrame", {
+			elementId: this.id || "unknown",
 			seekToMs,
-			frameFormat: frame.format
-		});
-		if (!this.canvasElement) {
-			log("trace: displayFrame aborted - no canvas element");
-			throw new Error(`Frame display failed: Canvas element is not available at time ${seekToMs}ms. The video component may not be properly initialized.`);
-		}
-		const ctx = this.canvasElement.getContext("2d");
-		if (!ctx) {
-			log("trace: displayFrame aborted - no canvas context");
-			throw new Error(`Frame display failed: Unable to get 2D canvas context at time ${seekToMs}ms. This may indicate a browser compatibility issue or canvas corruption.`);
-		}
-		if (frame?.codedWidth && frame?.codedHeight) {
-			if (this.canvasElement.width !== frame.codedWidth || this.canvasElement.height !== frame.codedHeight) {
-				log("trace: updating canvas dimensions", {
-					width: frame.codedWidth,
-					height: frame.codedHeight
-				});
-				this.canvasElement.width = frame.codedWidth;
-				this.canvasElement.height = frame.codedHeight;
+			format: frame.format || "unknown",
+			width: frame.codedWidth,
+			height: frame.codedHeight
+		}, parentContext, (span) => {
+			const t0 = performance.now();
+			log("trace: displayFrame start", {
+				seekToMs,
+				frameFormat: frame.format
+			});
+			if (!this.canvasElement) {
+				log("trace: displayFrame aborted - no canvas element");
+				throw new Error(`Frame display failed: Canvas element is not available at time ${seekToMs}ms. The video component may not be properly initialized.`);
 			}
-		}
-		if (frame.format === null) {
-			log("trace: displayFrame aborted - null frame format");
-			throw new Error(`Frame display failed: Video frame has null format at time ${seekToMs}ms. This indicates corrupted or incompatible video data.`);
-		}
-		ctx.drawImage(frame, 0, 0, this.canvasElement.width, this.canvasElement.height);
-		log("trace: frame drawn to canvas", { seekToMs });
-		return seekToMs;
+			const t1 = performance.now();
+			span.setAttribute("getCanvasMs", Math.round((t1 - t0) * 100) / 100);
+			const ctx = this.canvasElement.getContext("2d");
+			const t2 = performance.now();
+			span.setAttribute("getCtxMs", Math.round((t2 - t1) * 100) / 100);
+			if (!ctx) {
+				log("trace: displayFrame aborted - no canvas context");
+				throw new Error(`Frame display failed: Unable to get 2D canvas context at time ${seekToMs}ms. This may indicate a browser compatibility issue or canvas corruption.`);
+			}
+			let resized = false;
+			if (frame?.codedWidth && frame?.codedHeight) {
+				if (this.canvasElement.width !== frame.codedWidth || this.canvasElement.height !== frame.codedHeight) {
+					log("trace: updating canvas dimensions", {
+						width: frame.codedWidth,
+						height: frame.codedHeight
+					});
+					this.canvasElement.width = frame.codedWidth;
+					this.canvasElement.height = frame.codedHeight;
+					resized = true;
+					const t3 = performance.now();
+					span.setAttribute("resizeMs", Math.round((t3 - t2) * 100) / 100);
+				}
+			}
+			span.setAttribute("canvasResized", resized);
+			if (frame.format === null) {
+				log("trace: displayFrame aborted - null frame format");
+				throw new Error(`Frame display failed: Video frame has null format at time ${seekToMs}ms. This indicates corrupted or incompatible video data.`);
+			}
+			const tDrawStart = performance.now();
+			ctx.drawImage(frame, 0, 0, this.canvasElement.width, this.canvasElement.height);
+			const tDrawEnd = performance.now();
+			span.setAttribute("drawImageMs", Math.round((tDrawEnd - tDrawStart) * 100) / 100);
+			span.setAttribute("totalDisplayMs", Math.round((tDrawEnd - t0) * 100) / 100);
+			span.setAttribute("canvasWidth", this.canvasElement.width);
+			span.setAttribute("canvasHeight", this.canvasElement.height);
+			log("trace: frame drawn to canvas", { seekToMs });
+		});
 	}
-	/**
-	* Check if we're in production rendering mode (EF_FRAMEGEN active) vs preview mode
-	*/
 	isInProductionRenderingMode() {
 		if (typeof window.EF_RENDERING === "function") return window.EF_RENDERING();
-		const workbench = document.querySelector("ef-workbench");
-		if (workbench?.rendering) return true;
+		if (document.querySelector("ef-workbench")?.rendering) return true;
 		if (window.EF_FRAMEGEN?.renderOptions) return true;
 		return false;
 	}
-	/**
-	* Check if EF_FRAMEGEN has explicitly started frame rendering (not just initialization)
-	*/
 	isFrameRenderingActive() {
 		if (!window.EF_FRAMEGEN?.renderOptions) return false;
-		const renderOptions = window.EF_FRAMEGEN.renderOptions;
-		const renderStartTime = renderOptions.encoderOptions.fromMs;
-		const currentTime = this.rootTimegroup?.currentTimeMs || 0;
-		return currentTime >= renderStartTime;
+		const renderStartTime = window.EF_FRAMEGEN.renderOptions.encoderOptions.fromMs;
+		return (this.rootTimegroup?.currentTimeMs || 0) >= renderStartTime;
 	}
-	/**
-	* Legacy getter for fragment index task
-	* Still used by EFCaptions - maps to unified video seek task
-	*/
 	get fragmentIndexTask() {
 		return this.unifiedVideoSeekTask;
 	}
-	/**
-	* Clean up resources when component is disconnected
-	*/
+	async waitForFrameReady() {
+		await this.updateComplete;
+		await this.frameTask.run();
+	}
 	disconnectedCallback() {
 		super.disconnectedCallback();
 		this.delayedLoadingState.clearAllLoading();
 	}
+	didBecomeRoot() {
+		super.didBecomeRoot();
+	}
+	didBecomeChild() {
+		super.didBecomeChild();
+	}
 };
-_decorate([property({
+__decorate([property({
 	type: Number,
 	attribute: "video-buffer-duration"
 })], EFVideo.prototype, "videoBufferDurationMs", void 0);
-_decorate([property({
+__decorate([property({
 	type: Number,
 	attribute: "max-video-buffer-fetches"
 })], EFVideo.prototype, "maxVideoBufferFetches", void 0);
-_decorate([property({
+__decorate([property({
 	type: Boolean,
 	attribute: "enable-video-buffering"
 })], EFVideo.prototype, "enableVideoBuffering", void 0);
-_decorate([state()], EFVideo.prototype, "loadingState", void 0);
-EFVideo = _decorate([customElement("ef-video")], EFVideo);
+__decorate([state()], EFVideo.prototype, "loadingState", void 0);
+EFVideo = __decorate([customElement("ef-video")], EFVideo);
 export { EFVideo };

package/dist/elements/EFWaveform.js

@@ -1,15 +1,15 @@
 import { EF_RENDERING } from "../EF_RENDERING.js";
+import { __decorate } from "../_virtual/_@oxc-project_runtime@0.94.0/helpers/decorate.js";
 import { EFTemporal } from "./EFTemporal.js";
-import { TargetController } from "./TargetController.js";
 import { TWMixin } from "../gui/TWMixin2.js";
+import { TargetController } from "./TargetController.js";
 import { CrossUpdateController } from "./CrossUpdateController.js";
 import { Task } from "@lit/task";
 import { LitElement, css, html } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
-import _decorate from "@oxc-project/runtime/helpers/decorate";
 import { createRef, ref } from "lit/directives/ref.js";
 import { CSSStyleObserver } from "@bramus/style-observer";
-let EFWaveform = class EFWaveform$1 extends EFTemporal(TWMixin(LitElement)) {
+var EFWaveform = class EFWaveform$1 extends EFTemporal(TWMixin(LitElement)) {
 	constructor(..._args) {
 		super(..._args);
 		this.canvasRef = createRef();
@@ -38,8 +38,7 @@ let EFWaveform = class EFWaveform$1 extends EFTemporal(TWMixin(LitElement)) {
 				if (!frequencyData || !byteTimeData) return;
 				ctx.save();
 				if (this.color === "currentColor") {
-					const computedStyle = getComputedStyle(this);
-					const currentColor = computedStyle.color;
+					const currentColor = getComputedStyle(this).color;
 					ctx.strokeStyle = currentColor;
 					ctx.fillStyle = currentColor;
 				} else {
@@ -150,13 +149,11 @@ let EFWaveform = class EFWaveform$1 extends EFTemporal(TWMixin(LitElement)) {
 		const totalBars = frequencyData.length;
 		const paddingInner = this.barSpacing;
 		const paddingOuter = .01;
-		const availableWidth = waveWidth;
-		const barWidth = availableWidth / (totalBars + (totalBars - 1) * paddingInner);
+		const barWidth = waveWidth / (totalBars + (totalBars - 1) * paddingInner);
 		ctx.clearRect(0, 0, waveWidth, waveHeight);
 		const path = new Path2D();
 		frequencyData.forEach((value, i) => {
-			const normalizedValue = value / 255;
-			const barHeight = normalizedValue * waveHeight;
+			const barHeight = value / 255 * waveHeight;
 			const y = (waveHeight - barHeight) / 2;
 			const x = waveWidth * paddingOuter + i * (barWidth * (1 + paddingInner));
 			path.rect(x, y, barWidth, barHeight);
@@ -191,13 +188,11 @@ let EFWaveform = class EFWaveform$1 extends EFTemporal(TWMixin(LitElement)) {
 		const totalBars = frequencyData.length;
 		const paddingInner = this.barSpacing;
 		const paddingOuter = .01;
-		const availableWidth = waveWidth;
-		const barWidth = availableWidth / (totalBars + (totalBars - 1) * paddingInner);
+		const barWidth = waveWidth / (totalBars + (totalBars - 1) * paddingInner);
 		ctx.clearRect(0, 0, waveWidth, waveHeight);
 		const path = new Path2D();
 		frequencyData.forEach((value, i) => {
-			const normalizedValue = value / 255;
-			const height = normalizedValue * waveHeight;
+			const height = value / 255 * waveHeight;
 			const x = waveWidth * paddingOuter + i * (barWidth * (1 + paddingInner));
 			const y = (waveHeight - height) / 2;
 			path.roundRect(x, y, barWidth, height, barWidth / 2);
@@ -276,14 +271,11 @@ let EFWaveform = class EFWaveform$1 extends EFTemporal(TWMixin(LitElement)) {
 		frequencyData.forEach((value, i) => {
 			const normalizedValue = Math.min(value / 255 * 2, 1);
 			const x = startX + i / (frequencyData.length - 1) * availableWidth;
-			const barHeight = normalizedValue * waveHeight;
-			const y = (waveHeight - barHeight) / 2;
+			const y = (waveHeight - normalizedValue * waveHeight) / 2;
 			if (i === 0) path.moveTo(x, y);
 			else {
 				const prevX = startX + (i - 1) / (frequencyData.length - 1) * availableWidth;
-				const prevValue = Math.min((frequencyData[i - 1] ?? 0) / 255 * 2, 1);
-				const prevBarHeight = prevValue * waveHeight;
-				const prevY = (waveHeight - prevBarHeight) / 2;
+				const prevY = (waveHeight - Math.min((frequencyData[i - 1] ?? 0) / 255 * 2, 1) * waveHeight) / 2;
 				const xc = (prevX + x) / 2;
 				const yc = (prevY + y) / 2;
 				path.quadraticCurveTo(prevX, prevY, xc, yc);
@@ -292,14 +284,11 @@ let EFWaveform = class EFWaveform$1 extends EFTemporal(TWMixin(LitElement)) {
 		for (let i = frequencyData.length - 1; i >= 0; i--) {
 			const normalizedValue = Math.min((frequencyData[i] ?? 0) / 255 * 2, 1);
 			const x = startX + i / (frequencyData.length - 1) * availableWidth;
-			const barHeight = normalizedValue * waveHeight;
-			const y = (waveHeight + barHeight) / 2;
+			const y = (waveHeight + normalizedValue * waveHeight) / 2;
 			if (i === frequencyData.length - 1) path.lineTo(x, y);
 			else {
 				const nextX = startX + (i + 1) / (frequencyData.length - 1) * availableWidth;
-				const nextValue = Math.min((frequencyData[i + 1] ?? 0) / 255 * 2, 1);
-				const nextBarHeight = nextValue * waveHeight;
-				const nextY = (waveHeight + nextBarHeight) / 2;
+				const nextY = (waveHeight + Math.min((frequencyData[i + 1] ?? 0) / 255 * 2, 1) * waveHeight) / 2;
 				const xc = (nextX + x) / 2;
 				const yc = (nextY + y) / 2;
 				path.quadraticCurveTo(nextX, nextY, xc, yc);
@@ -326,14 +315,11 @@ let EFWaveform = class EFWaveform$1 extends EFTemporal(TWMixin(LitElement)) {
 		frequencyData.forEach((value, i) => {
 			const normalizedValue = Math.min(value / 255 * 2, 1);
 			const x = startX + i / (frequencyData.length - 1) * availableWidth;
-			const barHeight = normalizedValue * (waveHeight / 2);
-			const y = (waveHeight - barHeight * 2) / 2;
+			const y = (waveHeight - normalizedValue * (waveHeight / 2) * 2) / 2;
 			if (i === 0) path.moveTo(x, y);
 			else {
 				const prevX = startX + (i - 1) / (frequencyData.length - 1) * availableWidth;
-				const prevValue = (frequencyData[i - 1] ?? 0) / 255;
-				const prevBarHeight = prevValue * (waveHeight / 2);
-				const prevY = (waveHeight - prevBarHeight * 2) / 2;
+				const prevY = (waveHeight - (frequencyData[i - 1] ?? 0) / 255 * (waveHeight / 2) * 2) / 2;
 				const xc = (prevX + x) / 2;
 				const yc = (prevY + y) / 2;
 				path.quadraticCurveTo(prevX, prevY, xc, yc);
@@ -342,14 +328,11 @@ let EFWaveform = class EFWaveform$1 extends EFTemporal(TWMixin(LitElement)) {
 		for (let i = frequencyData.length - 1; i >= 0; i--) {
 			const normalizedValue = Math.min((frequencyData[i] ?? 0) / 255 * 2, 1);
 			const x = startX + i / (frequencyData.length - 1) * availableWidth;
-			const barHeight = normalizedValue * (waveHeight / 2);
-			const y = (waveHeight + barHeight * 2) / 2;
+			const y = (waveHeight + normalizedValue * (waveHeight / 2) * 2) / 2;
 			if (i === frequencyData.length - 1) path.lineTo(x, y);
 			else {
 				const nextX = startX + (i + 1) / (frequencyData.length - 1) * availableWidth;
-				const nextValue = (frequencyData[i + 1] ?? 0) / 255;
-				const nextBarHeight = nextValue * (waveHeight / 2);
-				const nextY = (waveHeight + nextBarHeight * 2) / 2;
+				const nextY = (waveHeight + (frequencyData[i + 1] ?? 0) / 255 * (waveHeight / 2) * 2) / 2;
 				const xc = (nextX + x) / 2;
 				const yc = (nextY + y) / 2;
 				path.quadraticCurveTo(nextX, nextY, xc, yc);
@@ -370,23 +353,23 @@ let EFWaveform = class EFWaveform$1 extends EFTemporal(TWMixin(LitElement)) {
 		if (changedProperties.size > 0) this.frameTask.run();
 	}
 };
-_decorate([property({
+__decorate([property({
 	type: String,
 	attribute: "mode"
 })], EFWaveform.prototype, "mode", void 0);
-_decorate([property({ type: String })], EFWaveform.prototype, "color", void 0);
-_decorate([property({
+__decorate([property({ type: String })], EFWaveform.prototype, "color", void 0);
+__decorate([property({
 	type: String,
 	reflect: true
 })], EFWaveform.prototype, "target", void 0);
-_decorate([property({
+__decorate([property({
 	type: Number,
 	attribute: "bar-spacing"
 })], EFWaveform.prototype, "barSpacing", void 0);
-_decorate([state()], EFWaveform.prototype, "targetElement", void 0);
-_decorate([property({
+__decorate([state()], EFWaveform.prototype, "targetElement", void 0);
+__decorate([property({
 	type: Number,
 	attribute: "line-width"
 })], EFWaveform.prototype, "lineWidth", void 0);
-EFWaveform = _decorate([customElement("ef-waveform")], EFWaveform);
+EFWaveform = __decorate([customElement("ef-waveform")], EFWaveform);
 export { EFWaveform };

package/dist/elements/SampleBuffer.js

@@ -23,8 +23,7 @@ var SampleBuffer = class {
 		} catch (_error) {}
 	}
 	peek() {
-		const currentBuffer = this.buffer;
-		return currentBuffer[0];
+		return this.buffer[0];
 	}
 	find(desiredSeekTimeMs) {
 		const currentBuffer = [...this.buffer];
@@ -32,18 +31,15 @@ var SampleBuffer = class {
 		const targetTimeMs = roundToMilliseconds(desiredSeekTimeMs);
 		for (const sample of currentBuffer) {
 			const sampleStartMs = roundToMilliseconds((sample.timestamp || 0) * 1e3);
-			const sampleDurationMs = roundToMilliseconds((sample.duration || 0) * 1e3);
-			const sampleEndMs = roundToMilliseconds(sampleStartMs + sampleDurationMs);
+			const sampleEndMs = roundToMilliseconds(sampleStartMs + roundToMilliseconds((sample.duration || 0) * 1e3));
 			if (targetTimeMs >= sampleStartMs && targetTimeMs < sampleEndMs) return sample;
 		}
-		return void 0;
 	}
 	get length() {
 		return this.buffer.length;
 	}
 	get firstTimestamp() {
-		const currentBuffer = this.buffer;
-		return currentBuffer[0]?.timestamp || 0;
+		return this.buffer[0]?.timestamp || 0;
 	}
 	getContents() {
 		return [...this.buffer];

package/dist/elements/TargetController.js

@@ -1,5 +1,5 @@
 import { LitElement } from "lit";
-const EF_TARGETABLE = Symbol("EF_TARGETABLE");
+var EF_TARGETABLE = Symbol("EF_TARGETABLE");
 var TargetRegistry = class {
 	constructor() {
 		this.idMap = /* @__PURE__ */ new Map();
@@ -28,8 +28,8 @@ var TargetRegistry = class {
 		this.callbacks.delete(id);
 	}
 };
-const documentRegistries = /* @__PURE__ */ new WeakMap();
-const getRegistry = (root) => {
+var documentRegistries = /* @__PURE__ */ new WeakMap();
+var getRegistry = (root) => {
 	let registry = documentRegistries.get(root);
 	if (!registry) {
 		registry = new TargetRegistry();
@@ -103,6 +103,7 @@ var TargetController = class {
 			this.disconnectFromTarget();
 			this.host.targetElement = newTarget ?? null;
 			this.connectToTarget();
+			this.host.requestUpdate("targetElement");
 		}
 	}
 	connectToTarget() {
@@ -118,8 +119,7 @@ var TargetController = class {
 		}
 	}
 	get registry() {
-		const root = this.host.getRootNode();
-		return getRegistry(root);
+		return getRegistry(this.host.getRootNode());
 	}
 	hostDisconnected() {
 		this.disconnectFromTarget();

package/dist/elements/durationConverter.js

@@ -3,7 +3,7 @@ const durationConverter = {
 	fromAttribute: (value) => value === null ? null : parseTimeToMs(value),
 	toAttribute: (value) => value === null ? null : `${value}s`
 };
-const positiveDurationConverter = (error) => {
+var positiveDurationConverter = (error) => {
 	return {
 		fromAttribute: (value) => {
 			if (value === null) return null;
@@ -13,7 +13,7 @@ const positiveDurationConverter = (error) => {
 		toAttribute: (value) => value === null ? null : `${value}s`
 	};
 };
-const trimDurationConverter = positiveDurationConverter("Trimstart & trimend must be a positive value in milliseconds or seconds (1s, 1000ms)");
-const imageDurationConverter = positiveDurationConverter("Image duration must be a positive value in milliseconds or seconds (1s, 1000ms)");
-const sourceDurationConverter = positiveDurationConverter("Sourcein & sourceout must be a positive value in milliseconds or seconds (1s, 1000ms)");
+positiveDurationConverter("Trimstart & trimend must be a positive value in milliseconds or seconds (1s, 1000ms)");
+positiveDurationConverter("Image duration must be a positive value in milliseconds or seconds (1s, 1000ms)");
+positiveDurationConverter("Sourcein & sourceout must be a positive value in milliseconds or seconds (1s, 1000ms)");
 export { durationConverter };

package/dist/elements/renderTemporalAudio.d.ts

@@ -0,0 +1,10 @@
+import { EFMedia } from './EFMedia.js';
+interface TemporalAudioHost {
+    startTimeMs: number;
+    endTimeMs: number;
+    durationMs: number;
+    getMediaElements(): EFMedia[];
+    waitForMediaDurations?(): Promise<void>;
+}
+export declare function renderTemporalAudio(host: TemporalAudioHost, fromMs: number, toMs: number): Promise<AudioBuffer>;
+export {};

package/dist/elements/renderTemporalAudio.js

@@ -0,0 +1,35 @@
+async function renderTemporalAudio(host, fromMs, toMs) {
+	const aacFrames = 48e3 * ((toMs - fromMs) / 1e3) / 1024;
+	const contextSize = Math.round(aacFrames) * 1024;
+	if (contextSize <= 0) throw new Error(`Duration must be greater than 0 when rendering audio. ${contextSize}ms`);
+	const audioContext = new OfflineAudioContext(2, contextSize, 48e3);
+	if (host.waitForMediaDurations) await host.waitForMediaDurations();
+	const abortController = new AbortController();
+	await Promise.all(host.getMediaElements().map(async (mediaElement) => {
+		if (mediaElement.mute) return;
+		const mediaStartsBeforeEnd = mediaElement.startTimeMs <= toMs;
+		const mediaEndsAfterStart = mediaElement.endTimeMs >= fromMs;
+		if (!(mediaStartsBeforeEnd && mediaEndsAfterStart)) return;
+		const mediaLocalFromMs = Math.max(0, fromMs - mediaElement.startTimeMs);
+		const mediaLocalToMs = Math.min(mediaElement.endTimeMs - mediaElement.startTimeMs, toMs - mediaElement.startTimeMs);
+		if (mediaLocalFromMs >= mediaLocalToMs) return;
+		const sourceInMs = mediaElement.sourceInMs || mediaElement.trimStartMs || 0;
+		const mediaSourceFromMs = mediaLocalFromMs + sourceInMs;
+		const mediaSourceToMs = mediaLocalToMs + sourceInMs;
+		const audio = await mediaElement.fetchAudioSpanningTime(mediaSourceFromMs, mediaSourceToMs, abortController.signal);
+		if (!audio) return;
+		const bufferSource = audioContext.createBufferSource();
+		bufferSource.buffer = await audioContext.decodeAudioData(await audio.blob.arrayBuffer());
+		bufferSource.connect(audioContext.destination);
+		const ctxStartMs = Math.max(0, mediaElement.startTimeMs - fromMs);
+		const offsetInBufferMs = mediaSourceFromMs - audio.startMs;
+		const safeOffsetMs = Math.max(0, offsetInBufferMs);
+		const requestedDurationMs = mediaSourceToMs - mediaSourceFromMs;
+		const availableAudioMs = audio.endMs - audio.startMs;
+		const actualDurationMs = Math.min(requestedDurationMs, availableAudioMs - safeOffsetMs);
+		if (actualDurationMs <= 0) return;
+		bufferSource.start(ctxStartMs / 1e3, safeOffsetMs / 1e3, actualDurationMs / 1e3);
+	}));
+	return audioContext.startRendering();
+}
+export { renderTemporalAudio };