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

package/dist/elements/EFVideo.js

@@ -1,3 +1,5 @@
+import { __decorate } from "../_virtual/_@oxc-project_runtime@0.93.0/helpers/decorate.js";
+import { withSpan, withSpanSync } from "../otel/tracingHelpers.js";
 import { EFMedia } from "./EFMedia.js";
 import { TWMixin } from "../gui/TWMixin2.js";
 import { DelayedLoadingState } from "../DelayedLoadingState.js";
@@ -13,10 +15,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 +106,31 @@ 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;
+					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 +161,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 +175,151 @@ 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
-	*/
 	disconnectedCallback() {
 		super.disconnectedCallback();
 		this.delayedLoadingState.clearAllLoading();
 	}
 };
-_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,4 +1,5 @@
 import { EF_RENDERING } from "../EF_RENDERING.js";
+import { __decorate } from "../_virtual/_@oxc-project_runtime@0.93.0/helpers/decorate.js";
 import { EFTemporal } from "./EFTemporal.js";
 import { TargetController } from "./TargetController.js";
 import { TWMixin } from "../gui/TWMixin2.js";
@@ -6,10 +7,9 @@ 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);
@@ -281,8 +276,7 @@ let EFWaveform = class EFWaveform$1 extends EFTemporal(TWMixin(LitElement)) {
 			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 prevBarHeight = Math.min((frequencyData[i - 1] ?? 0) / 255 * 2, 1) * waveHeight;
 				const prevY = (waveHeight - prevBarHeight) / 2;
 				const xc = (prevX + x) / 2;
 				const yc = (prevY + y) / 2;
@@ -297,8 +291,7 @@ let EFWaveform = class EFWaveform$1 extends EFTemporal(TWMixin(LitElement)) {
 			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 nextBarHeight = Math.min((frequencyData[i + 1] ?? 0) / 255 * 2, 1) * waveHeight;
 				const nextY = (waveHeight + nextBarHeight) / 2;
 				const xc = (nextX + x) / 2;
 				const yc = (nextY + y) / 2;
@@ -331,8 +324,7 @@ let EFWaveform = class EFWaveform$1 extends EFTemporal(TWMixin(LitElement)) {
 			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 prevBarHeight = (frequencyData[i - 1] ?? 0) / 255 * (waveHeight / 2);
 				const prevY = (waveHeight - prevBarHeight * 2) / 2;
 				const xc = (prevX + x) / 2;
 				const yc = (prevY + y) / 2;
@@ -347,8 +339,7 @@ let EFWaveform = class EFWaveform$1 extends EFTemporal(TWMixin(LitElement)) {
 			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 nextBarHeight = (frequencyData[i + 1] ?? 0) / 255 * (waveHeight / 2);
 				const nextY = (waveHeight + nextBarHeight * 2) / 2;
 				const xc = (nextX + x) / 2;
 				const yc = (nextY + y) / 2;
@@ -370,23 +361,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];
@@ -36,14 +35,12 @@ var SampleBuffer = class {
 			const sampleEndMs = roundToMilliseconds(sampleStartMs + sampleDurationMs);
 			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();

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/updateAnimations.js

@@ -1,19 +1,15 @@
 import { deepGetTemporalElements } from "./EFTemporal.js";
-const ANIMATION_PRECISION_OFFSET = .1;
-const DEFAULT_ANIMATION_ITERATIONS = 1;
-const PROGRESS_PROPERTY = "--ef-progress";
-const DURATION_PROPERTY = "--ef-duration";
-const TRANSITION_DURATION_PROPERTY = "--ef-transition-duration";
-const TRANSITION_OUT_START_PROPERTY = "--ef-transition-out-start";
-const TIMEGROUP_TAGNAME = "ef-timegroup";
-/**
-* Evaluates what the element's state should be based on the timeline
-*/
+var ANIMATION_PRECISION_OFFSET = .1;
+var DEFAULT_ANIMATION_ITERATIONS = 1;
+var PROGRESS_PROPERTY = "--ef-progress";
+var DURATION_PROPERTY = "--ef-duration";
+var TRANSITION_DURATION_PROPERTY = "--ef-transition-duration";
+var TRANSITION_OUT_START_PROPERTY = "--ef-transition-out-start";
+var TIMEGROUP_TAGNAME = "ef-timegroup";
 const evaluateTemporalState = (element) => {
 	const timelineTimeMs = (element.rootTimegroup ?? element).currentTimeMs;
 	const progress = element.durationMs <= 0 ? 1 : Math.max(0, Math.min(1, element.currentTimeMs / element.durationMs));
-	const isRootTimegroup = element.tagName.toLowerCase() === TIMEGROUP_TAGNAME && !element.parentTimegroup;
-	const useInclusiveEnd = isRootTimegroup;
+	const useInclusiveEnd = element.tagName.toLowerCase() === TIMEGROUP_TAGNAME && !element.parentTimegroup;
 	const isVisible = element.startTimeMs <= timelineTimeMs && (useInclusiveEnd ? element.endTimeMs >= timelineTimeMs : element.endTimeMs > timelineTimeMs);
 	return {
 		progress,
@@ -21,10 +17,6 @@ const evaluateTemporalState = (element) => {
 		timelineTimeMs
 	};
 };
-/**
-* Evaluates element visibility specifically for animation coordination
-* Uses inclusive end boundaries to prevent animation jumps at exact boundaries
-*/
 const evaluateTemporalStateForAnimation = (element) => {
 	const timelineTimeMs = (element.rootTimegroup ?? element).currentTimeMs;
 	const progress = element.durationMs <= 0 ? 1 : Math.max(0, Math.min(1, element.currentTimeMs / element.durationMs));
@@ -35,10 +27,7 @@ const evaluateTemporalStateForAnimation = (element) => {
 		timelineTimeMs
 	};
 };
-/**
-* Updates the visual state (CSS + display) to match temporal state
-*/
-const updateVisualState = (element, state) => {
+var updateVisualState = (element, state) => {
 	element.style.setProperty(PROGRESS_PROPERTY, `${state.progress * 100}%`);
 	if (!state.isVisible) {
 		if (element.style.display !== "none") element.style.display = "none";
@@ -49,17 +38,13 @@ const updateVisualState = (element, state) => {
 	element.style.setProperty(TRANSITION_DURATION_PROPERTY, `${element.parentTimegroup?.overlapMs ?? 0}ms`);
 	element.style.setProperty(TRANSITION_OUT_START_PROPERTY, `${element.durationMs - (element.parentTimegroup?.overlapMs ?? 0)}ms`);
 };
-/**
-* Coordinates animations for a single element and its subtree, using the element as the time source
-*/
-const coordinateAnimationsForSingleElement = (element) => {
+var coordinateAnimationsForSingleElement = (element) => {
 	const animations = element.getAnimations({ subtree: true });
 	for (const animation of animations) {
 		if (animation.playState === "running") animation.pause();
 		const effect = animation.effect;
 		if (!(effect && effect instanceof KeyframeEffect)) continue;
-		const target = effect.target;
-		if (!target) continue;
+		if (!effect.target) continue;
 		const timing = effect.getTiming();
 		const duration = Number(timing.duration) || 0;
 		const delay = Number(timing.delay) || 0;
@@ -76,8 +61,7 @@ const coordinateAnimationsForSingleElement = (element) => {
 		const adjustedTime = currentTime - delay;
 		const currentIteration = Math.floor(adjustedTime / duration);
 		const currentIterationTime = adjustedTime % duration;
-		const totalAnimationLength = delay + duration * iterations;
-		const maxSafeCurrentTime = totalAnimationLength - ANIMATION_PRECISION_OFFSET;
+		const maxSafeCurrentTime = delay + duration * iterations - ANIMATION_PRECISION_OFFSET;
 		if (currentIteration >= iterations) animation.currentTime = maxSafeCurrentTime;
 		else {
 			const proposedCurrentTime = Math.min(currentIterationTime, duration - ANIMATION_PRECISION_OFFSET) + delay;
@@ -85,9 +69,6 @@ const coordinateAnimationsForSingleElement = (element) => {
 		}
 	}
 };
-/**
-* Main function: synchronizes DOM element with timeline
-*/
 const updateAnimations = (element) => {
 	const temporalState = evaluateTemporalState(element);
 	deepGetTemporalElements(element).forEach((temporalElement) => {
@@ -95,11 +76,9 @@ const updateAnimations = (element) => {
 		updateVisualState(temporalElement, temporalState$1);
 	});
 	updateVisualState(element, temporalState);
-	const animationState = evaluateTemporalStateForAnimation(element);
-	if (animationState.isVisible) coordinateAnimationsForSingleElement(element);
+	if (evaluateTemporalStateForAnimation(element).isVisible) coordinateAnimationsForSingleElement(element);
 	deepGetTemporalElements(element).forEach((temporalElement) => {
-		const childAnimationState = evaluateTemporalStateForAnimation(temporalElement);
-		if (childAnimationState.isVisible) coordinateAnimationsForSingleElement(temporalElement);
+		if (evaluateTemporalStateForAnimation(temporalElement).isVisible) coordinateAnimationsForSingleElement(temporalElement);
 	});
 };
 export { evaluateTemporalStateForAnimation, updateAnimations };