@editframe/elements 0.33.0-beta → 0.34.5-beta

package/dist/elements/EFTimegroup.js

@@ -1,18 +1,18 @@
-import { EF_INTERACTIVE } from "../EF_INTERACTIVE.js";
 import { quantizeToFrameTimeS } from "../utils/frameTime.js";
 import { EF_RENDERING } from "../EF_RENDERING.js";
+import { evaluateAnimationVisibilityState, updateAnimations } from "./updateAnimations.js";
 import { parseTimeToMs } from "./parseTimeToMs.js";
-import { __decorate } from "../_virtual/_@oxc-project_runtime@0.94.0/helpers/decorate.js";
+import { __decorate } from "../_virtual/_@oxc-project_runtime@0.95.0/helpers/decorate.js";
 import { EFTemporal, deepGetElementsWithFrameTasks, flushStartTimeMsCache, registerIsTimegroupCalculatingDuration, resetTemporalCache, shallowGetTemporalElements, timegroupContext } from "./EFTemporal.js";
 import { efContext } from "../gui/efContext.js";
 import { isContextMixin } from "../gui/ContextMixin.js";
 import { TWMixin } from "../gui/TWMixin2.js";
 import { isTracingEnabled, withSpan } from "../otel/tracingHelpers.js";
+import { FrameController } from "../preview/FrameController.js";
 import { renderTemporalAudio } from "./renderTemporalAudio.js";
 import { EFTargetable } from "./TargetController.js";
 import { deepGetMediaElements } from "./EFMedia.js";
 import { TimegroupController } from "./TimegroupController.js";
-import { evaluateAnimationVisibilityState, updateAnimations } from "./updateAnimations.js";
 import { getContainerInfoFromElement } from "./ContainerInfo.js";
 import { getPositionInfoFromElement } from "./ElementPositionInfo.js";
 import { captureFromClone, captureTimegroupAtTime } from "../preview/renderTimegroupToCanvas.js";
@@ -24,7 +24,6 @@ import "../gui/EFFitScale.js";
 import "../gui/EFWorkbench.js";
 import "./EFPanZoom.js";
 import { provide } from "@lit/context";
-import { Task, TaskStatus } from "@lit/task";
 import debug from "debug";
 import { LitElement, css, html } from "lit";
 import { customElement, property } from "lit/decorators.js";
@@ -190,84 +189,37 @@ let EFTimegroup = class EFTimegroup$1 extends EFTargetable(EFTemporal(TWMixin(Li
 		this.autoInit = false;
 		this.workbench = false;
 		this.fit = "none";
-		this.frameTask = new Task(this, {
-			autoRun: EF_INTERACTIVE,
-			args: () => [this.ownCurrentTimeMs, this.currentTimeMs],
-			onError: (error) => {
-				this.frameTask.taskComplete.catch(() => {});
-				if (error instanceof DOMException && error.name === "AbortError" || error instanceof Error && (error.name === "AbortError" || error.message?.includes("signal is aborted") || error.message?.includes("The user aborted a request"))) return;
-				console.error("EFTimegroup frameTask error", error);
-			},
-			task: async ([ownCurrentTimeMs, currentTimeMs], { signal }) => {
-				const now = Date.now();
-				if (now - this.#timegroupFrameTaskLastReset > _EFTimegroup.TIMEGROUP_FRAME_TASK_RESET_MS) {
-					this.#timegroupFrameTaskCount = 0;
-					this.#timegroupFrameTaskLastReset = now;
-				}
-				this.#timegroupFrameTaskCount++;
-				if (this.#timegroupFrameTaskCount > _EFTimegroup.TIMEGROUP_FRAME_TASK_THRESHOLD) return;
-				signal?.throwIfAborted();
-				if (this.isRootTimegroup) return withSpan("timegroup.frameTask", {
-					timegroupId: this.id || "unknown",
-					ownCurrentTimeMs,
-					currentTimeMs
-				}, void 0, async () => {
-					await this.waitForFrameTasks(signal);
-					signal?.throwIfAborted();
-					await this.#executeCustomFrameTasks();
-					signal?.throwIfAborted();
-					updateAnimations(this);
-				});
-				else return this.#executeCustomFrameTasks();
-			}
-		});
-		this.seekTask = new Task(this, {
-			autoRun: false,
-			args: () => [this.#pendingSeekTime ?? this.#currentTime],
-			onComplete: () => {},
-			task: async ([targetTime], { signal }) => {
-				signal?.throwIfAborted();
-				if (this.playbackController) return this.playbackController.seekTask.taskComplete.then(() => {
-					signal?.throwIfAborted();
-					return this.currentTime;
-				});
-				if (!this.isRootTimegroup) return;
-				return withSpan("timegroup.seekTask", {
-					timegroupId: this.id || "unknown",
-					targetTime: targetTime ?? 0,
-					durationMs: this.durationMs
-				}, void 0, async (span) => {
-					try {
-						await Promise.race([this.waitForMediaDurations(signal), new Promise((_, reject) => {
-							if (signal?.aborted) {
-								reject(new DOMException("Aborted", "AbortError"));
-								return;
-							}
-							const timeoutId = setTimeout(() => reject(/* @__PURE__ */ new Error("waitForMediaDurations timeout")), 1e4);
-							signal?.addEventListener("abort", () => {
-								clearTimeout(timeoutId);
-								reject(new DOMException("Aborted", "AbortError"));
-							});
-						})]);
-					} catch (error) {
-						if (error instanceof DOMException && error.name === "AbortError") throw error;
-					}
-					signal?.throwIfAborted();
-					const newTime = evaluateSeekTarget(targetTime ?? 0, this.durationMs, this.effectiveFps);
-					if (isTracingEnabled()) span.setAttribute("newTime", newTime);
-					this.#currentTime = newTime;
-					this.requestUpdate("currentTime");
-					await this.updateComplete;
-					signal?.throwIfAborted();
-					await this.#runThrottledFrameTask();
-					signal?.throwIfAborted();
-					if (!this.#restoringFromLocalStorage) this.saveTimeToLocalStorage(this.#currentTime);
-					this.#seekInProgress = false;
-					if (this.#restoringFromLocalStorage) this.#restoringFromLocalStorage = false;
-					return newTime;
-				});
-			}
-		});
+		this.frameTask = (() => {
+			const self = this;
+			const taskObj = {
+				run: () => {
+					self.#frameTaskAbortController?.abort();
+					self.#frameTaskAbortController = new AbortController();
+					const signal = self.#frameTaskAbortController.signal;
+					self.#frameTaskPromise = self.#runFrameTask(signal);
+					taskObj.taskComplete = self.#frameTaskPromise;
+					return self.#frameTaskPromise;
+				},
+				taskComplete: Promise.resolve()
+			};
+			return taskObj;
+		})();
+		this.seekTask = (() => {
+			const self = this;
+			const taskObj = {
+				run: () => {
+					self.#seekTaskAbortController?.abort();
+					self.#seekTaskAbortController = new AbortController();
+					const signal = self.#seekTaskAbortController.signal;
+					const targetTime = self.#pendingSeekTime ?? self.#currentTime;
+					self.#seekTaskPromise = self.#runSeekTask(targetTime, signal);
+					taskObj.taskComplete = self.#seekTaskPromise;
+					return self.#seekTaskPromise;
+				},
+				taskComplete: Promise.resolve(void 0)
+			};
+			return taskObj;
+		})();
 	}
 	static get observedAttributes() {
 		return [
@@ -329,6 +281,18 @@ let EFTimegroup = class EFTimegroup$1 extends EFTargetable(EFTemporal(TWMixin(Li
 	#onFrameCleanup = null;
 	#playbackListener = null;
 	/**
+	* Centralized frame controller for coordinating element rendering.
+	* Replaces the distributed Lit Task hierarchy with a single control point.
+	*/
+	#frameController = new FrameController(this);
+	/**
+	* Get the frame controller for centralized rendering coordination.
+	* @public
+	*/
+	get frameController() {
+		return this.#frameController;
+	}
+	/**
 	* Get the effective FPS for this timegroup.
 	* During rendering, uses the render options FPS if available.
 	* Otherwise uses the configured fps property.
@@ -446,9 +410,9 @@ let EFTimegroup = class EFTimegroup$1 extends EFTargetable(EFTemporal(TWMixin(Li
 	* Unlike `seek()`, this:
 	* - Skips waitForMediaDurations (already loaded at render setup)
 	* - Skips localStorage persistence
-	* - Consolidates awaits to reduce event loop yields
+	* - Uses FrameController for centralized element coordination
 	* 
-	* Still waits for all content to be ready (Lit updates, frame tasks, video frames).
+	* Still waits for all content to be ready (Lit updates, element preparation, rendering).
 	* 
 	* @param timeMs - Time in milliseconds to seek to
 	* @internal
@@ -466,23 +430,48 @@ let EFTimegroup = class EFTimegroup$1 extends EFTargetable(EFTemporal(TWMixin(Li
 			if ("whenSegmentsReady" in el && typeof el.whenSegmentsReady === "function") return el.whenSegmentsReady();
 			return Promise.resolve();
 		}));
-		await new Promise((resolve) => requestAnimationFrame(resolve));
-		const visibleElements = this.#evaluateVisibleElementsForFrame();
-		await Promise.all([this.frameTask.run(), ...visibleElements.map((element) => {
-			if ("waitForFrameReady" in element && typeof element.waitForFrameReady === "function") return element.waitForFrameReady();
-			else return element.updateComplete;
-		})]);
-		this.offsetWidth;
+		await this.#frameController.renderFrame(timeMs, {
+			waitForLitUpdate: false,
+			onAnimationsUpdate: (root) => {
+				updateAnimations(root);
+				root.offsetWidth;
+			}
+		});
+		await this.#executeCustomFrameTasks();
 	}
 	/**
 	* Collects all LitElement descendants recursively.
 	* Used by seekForRender to ensure all reactive elements have updated.
+	* Optimized to filter by temporal visibility and skip hidden subtrees.
 	*/
 	#getAllLitElementDescendants() {
 		const result = [];
+		const currentTimeMs = this.currentTimeMs;
+		let hiddenSubtreesSkipped = 0;
+		let temporallyFilteredOut = 0;
+		let totalLitElements = 0;
 		const walk = (el) => {
+			if (el instanceof HTMLElement && el.style.display === "none") {
+				hiddenSubtreesSkipped++;
+				return;
+			}
+			if (el instanceof HTMLElement) {
+				const style = getComputedStyle(el);
+				if (style.display === "none" || style.visibility === "hidden") {
+					hiddenSubtreesSkipped++;
+					return;
+				}
+			}
 			for (const child of el.children) {
-				if (child instanceof LitElement) result.push(child);
+				if (child instanceof LitElement) {
+					totalLitElements++;
+					if ("startTimeMs" in child && "endTimeMs" in child) {
+						const startMs = child.startTimeMs ?? -Infinity;
+						const endMs = child.endTimeMs ?? Infinity;
+						if (currentTimeMs >= startMs && currentTimeMs <= endMs) result.push(child);
+						else temporallyFilteredOut++;
+					} else result.push(child);
+				}
 				walk(child);
 			}
 		};
@@ -777,11 +766,9 @@ let EFTimegroup = class EFTimegroup$1 extends EFTargetable(EFTemporal(TWMixin(Li
 		if (captionsElements.length === 0) return;
 		const waitPromises = [];
 		for (const el of captionsElements) {
-			const task = el.unifiedCaptionsDataTask;
-			if (!task) continue;
-			if (task.status === TaskStatus.COMPLETE || task.status === TaskStatus.ERROR) continue;
-			if (task.status === TaskStatus.INITIAL) task.run().catch(() => {});
-			if (task.taskComplete) waitPromises.push(task.taskComplete);
+			const captions = el;
+			if (typeof captions.loadCaptionsData === "function") waitPromises.push(captions.loadCaptionsData().catch(() => {}));
+			else if (captions.unifiedCaptionsDataTask?.taskComplete) waitPromises.push(captions.unifiedCaptionsDataTask.taskComplete.catch(() => {}));
 		}
 		if (waitPromises.length > 0) await Promise.all(waitPromises);
 	}
@@ -1032,23 +1019,39 @@ let EFTimegroup = class EFTimegroup$1 extends EFTargetable(EFTemporal(TWMixin(Li
 				signal?.throwIfAborted();
 				const elementStart = Date.now();
 				try {
-					const status = m.mediaEngineTask.status;
-					if (status === TaskStatus.COMPLETE || status === TaskStatus.ERROR) return;
-					if (status === TaskStatus.INITIAL) m.mediaEngineTask.run().catch(() => {});
-					const timeoutPromise = new Promise((_, reject) => {
-						if (signal?.aborted) {
-							reject(new DOMException("Aborted", "AbortError"));
-							return;
+					if (typeof m.getMediaEngine === "function") {
+						const timeoutPromise = new Promise((_, reject) => {
+							if (signal?.aborted) {
+								reject(new DOMException("Aborted", "AbortError"));
+								return;
+							}
+							const timeoutId = setTimeout(() => reject(/* @__PURE__ */ new Error(`Media element ${index} load timeout after ${MEDIA_LOAD_TIMEOUT_MS}ms`)), MEDIA_LOAD_TIMEOUT_MS);
+							signal?.addEventListener("abort", () => {
+								clearTimeout(timeoutId);
+								reject(new DOMException("Aborted", "AbortError"));
+							}, { once: true });
+						});
+						await Promise.race([m.getMediaEngine(signal), timeoutPromise]);
+					} else if (m.mediaEngineTask) {
+						const status = m.mediaEngineTask.status;
+						if (status === 2 || status === 3) return;
+						const taskPromise = m.mediaEngineTask.taskComplete;
+						taskPromise?.catch(() => {});
+						if (taskPromise) {
+							const timeoutPromise = new Promise((_, reject) => {
+								if (signal?.aborted) {
+									reject(new DOMException("Aborted", "AbortError"));
+									return;
+								}
+								const timeoutId = setTimeout(() => reject(/* @__PURE__ */ new Error(`Media element ${index} load timeout after ${MEDIA_LOAD_TIMEOUT_MS}ms`)), MEDIA_LOAD_TIMEOUT_MS);
+								signal?.addEventListener("abort", () => {
+									clearTimeout(timeoutId);
+									reject(new DOMException("Aborted", "AbortError"));
+								}, { once: true });
+							});
+							await Promise.race([taskPromise, timeoutPromise]);
 						}
-						const timeoutId = setTimeout(() => reject(/* @__PURE__ */ new Error(`Media element ${index} load timeout after ${MEDIA_LOAD_TIMEOUT_MS}ms`)), MEDIA_LOAD_TIMEOUT_MS);
-						signal?.addEventListener("abort", () => {
-							clearTimeout(timeoutId);
-							reject(new DOMException("Aborted", "AbortError"));
-						}, { once: true });
-					});
-					const taskPromise = m.mediaEngineTask.taskComplete;
-					taskPromise.catch(() => {});
-					await Promise.race([taskPromise, timeoutPromise]);
+					}
 				} catch (error) {
 					if (error instanceof DOMException && error.name === "AbortError") throw error;
 					if (isTracingEnabled()) {
@@ -1184,9 +1187,9 @@ let EFTimegroup = class EFTimegroup$1 extends EFTargetable(EFTemporal(TWMixin(Li
 		const loaderTasks = [];
 		for (const el of efElements) {
 			const md5SumLoader = el.md5SumLoader;
-			if (md5SumLoader instanceof Task) {
+			if (md5SumLoader && typeof md5SumLoader.run === "function") {
 				md5SumLoader.run().catch(() => {});
-				loaderTasks.push(md5SumLoader.taskComplete);
+				if (md5SumLoader.taskComplete) loaderTasks.push(md5SumLoader.taskComplete);
 			}
 		}
 		await Promise.all(loaderTasks);
@@ -1202,6 +1205,39 @@ let EFTimegroup = class EFTimegroup$1 extends EFTargetable(EFTemporal(TWMixin(Li
 	static {
 		this.TIMEGROUP_FRAME_TASK_RESET_MS = 1e3;
 	}
+	/** @internal */
+	#frameTaskPromise = Promise.resolve();
+	#frameTaskAbortController = null;
+	async #runFrameTask(signal) {
+		const now = Date.now();
+		if (now - this.#timegroupFrameTaskLastReset > _EFTimegroup.TIMEGROUP_FRAME_TASK_RESET_MS) {
+			this.#timegroupFrameTaskCount = 0;
+			this.#timegroupFrameTaskLastReset = now;
+		}
+		this.#timegroupFrameTaskCount++;
+		if (this.#timegroupFrameTaskCount > _EFTimegroup.TIMEGROUP_FRAME_TASK_THRESHOLD) return;
+		try {
+			signal.throwIfAborted();
+			if (this.isRootTimegroup) await withSpan("timegroup.frameTask", {
+				timegroupId: this.id || "unknown",
+				ownCurrentTimeMs: this.ownCurrentTimeMs,
+				currentTimeMs: this.currentTimeMs
+			}, void 0, async () => {
+				await this.#frameController.renderFrame(this.currentTimeMs, {
+					waitForLitUpdate: false,
+					onAnimationsUpdate: (root) => {
+						updateAnimations(root);
+					}
+				});
+				signal.throwIfAborted();
+				await this.#executeCustomFrameTasks();
+			});
+			else await this.#executeCustomFrameTasks();
+		} catch (error) {
+			if (error instanceof DOMException && error.name === "AbortError") return;
+			console.error("EFTimegroup frameTask error", error);
+		}
+	}
 	async #executeCustomFrameTasks() {
 		if (this.#customFrameTasks.size > 0) {
 			const percentComplete = this.durationMs > 0 ? this.ownCurrentTimeMs / this.durationMs : 0;
@@ -1215,6 +1251,58 @@ let EFTimegroup = class EFTimegroup$1 extends EFTargetable(EFTemporal(TWMixin(Li
 			await Promise.all(Array.from(this.#customFrameTasks).map((callback) => Promise.resolve(callback(frameInfo))));
 		}
 	}
+	/** @internal */
+	#seekTaskPromise = Promise.resolve(void 0);
+	#seekTaskAbortController = null;
+	async #runSeekTask(targetTime, signal) {
+		try {
+			signal.throwIfAborted();
+			if (this.playbackController) {
+				await this.playbackController.currentTime;
+				signal.throwIfAborted();
+				return this.currentTime;
+			}
+			if (!this.isRootTimegroup) return;
+			return await withSpan("timegroup.seekTask", {
+				timegroupId: this.id || "unknown",
+				targetTime: targetTime ?? 0,
+				durationMs: this.durationMs
+			}, void 0, async (span) => {
+				try {
+					await Promise.race([this.waitForMediaDurations(signal), new Promise((_, reject) => {
+						if (signal.aborted) {
+							reject(new DOMException("Aborted", "AbortError"));
+							return;
+						}
+						const timeoutId = setTimeout(() => reject(/* @__PURE__ */ new Error("waitForMediaDurations timeout")), 1e4);
+						signal.addEventListener("abort", () => {
+							clearTimeout(timeoutId);
+							reject(new DOMException("Aborted", "AbortError"));
+						}, { once: true });
+					})]);
+				} catch (error) {
+					if (error instanceof DOMException && error.name === "AbortError") throw error;
+				}
+				signal.throwIfAborted();
+				const newTime = evaluateSeekTarget(targetTime ?? 0, this.durationMs, this.effectiveFps);
+				if (isTracingEnabled()) span.setAttribute("newTime", newTime);
+				this.#currentTime = newTime;
+				this.requestUpdate("currentTime");
+				await this.updateComplete;
+				signal.throwIfAborted();
+				await this.#runThrottledFrameTask();
+				signal.throwIfAborted();
+				if (!this.#restoringFromLocalStorage) this.saveTimeToLocalStorage(this.#currentTime);
+				this.#seekInProgress = false;
+				if (this.#restoringFromLocalStorage) this.#restoringFromLocalStorage = false;
+				return newTime;
+			});
+		} catch (error) {
+			if (error instanceof DOMException && error.name === "AbortError") return;
+			console.error("EFTimegroup seekTask error", error);
+			return;
+		}
+	}
 	/**
 	* Get container information for this timegroup.
 	* Timegroups are always containers and can contain children.