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

package/dist/elements/EFTimegroup.js

@@ -1,7 +1,14 @@
 import { EF_INTERACTIVE } from "../EF_INTERACTIVE.js";
-import { isContextMixin } from "../gui/ContextMixin.js";
-import { durationConverter } from "./durationConverter.js";
+import { EF_RENDERING } from "../EF_RENDERING.js";
+import { parseTimeToMs } from "./parseTimeToMs.js";
+import { __decorate } from "../_virtual/_@oxc-project_runtime@0.94.0/helpers/decorate.js";
 import { EFTemporal, deepGetElementsWithFrameTasks, flushStartTimeMsCache, 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 { renderTemporalAudio } from "./renderTemporalAudio.js";
+import { EFTargetable } from "./TargetController.js";
 import { deepGetMediaElements } from "./EFMedia.js";
 import { TimegroupController } from "./TimegroupController.js";
 import { evaluateTemporalStateForAnimation, updateAnimations } from "./updateAnimations.js";
@@ -10,10 +17,9 @@ import { Task, TaskStatus } from "@lit/task";
 import debug from "debug";
 import { LitElement, css, html } from "lit";
 import { customElement, property } from "lit/decorators.js";
-import _decorate from "@oxc-project/runtime/helpers/decorate";
 var _EFTimegroup;
-const log = debug("ef:elements:EFTimegroup");
-let sequenceDurationCache = /* @__PURE__ */ new WeakMap();
+var log = debug("ef:elements:EFTimegroup");
+var sequenceDurationCache = /* @__PURE__ */ new WeakMap();
 const flushSequenceDurationCache = () => {
 	sequenceDurationCache = /* @__PURE__ */ new WeakMap();
 };
@@ -22,25 +28,30 @@ const shallowGetTimegroups = (element, groups = []) => {
 	else shallowGetTimegroups(child, groups);
 	return groups;
 };
-let EFTimegroup = class EFTimegroup$1 extends EFTemporal(LitElement) {
+var EFTimegroup = class EFTimegroup$1 extends EFTargetable(EFTemporal(TWMixin(LitElement))) {
 	static {
 		_EFTimegroup = this;
 	}
 	constructor(..._args) {
 		super(..._args);
 		this._timeGroupContext = this;
-		this._mode = "contain";
-		this._overlapMs = 0;
+		this.efContext = this;
+		this.mode = "contain";
+		this.overlapMs = 0;
 		this.fit = "none";
 		this.mediaDurationsPromise = void 0;
 		this.frameTask = new Task(this, {
 			autoRun: false,
 			args: () => [this.ownCurrentTimeMs, this.currentTimeMs],
-			task: async ([]) => {
-				if (this.isRootTimegroup) {
+			task: async ([ownCurrentTimeMs, currentTimeMs]) => {
+				if (this.isRootTimegroup) await withSpan("timegroup.frameTask", {
+					timegroupId: this.id || "unknown",
+					ownCurrentTimeMs,
+					currentTimeMs
+				}, void 0, async () => {
 					await this.waitForFrameTasks();
 					updateAnimations(this);
-				}
+				});
 			}
 		});
 		this.seekTask = new Task(this, {
@@ -48,79 +59,75 @@ let EFTimegroup = class EFTimegroup$1 extends EFTemporal(LitElement) {
 			args: () => [this.#pendingSeekTime ?? this.#currentTime],
 			onComplete: () => {},
 			task: async ([targetTime]) => {
+				if (this.playbackController) {
+					await this.playbackController.seekTask.taskComplete;
+					return this.currentTime;
+				}
 				if (!this.isRootTimegroup) return;
-				await this.waitForMediaDurations();
-				const newTime = Math.max(0, Math.min(targetTime ?? 0, this.durationMs / 1e3));
-				this.#currentTime = newTime;
-				this.requestUpdate("currentTime");
-				await this.runThrottledFrameTask();
-				this.#saveTimeToLocalStorage(this.#currentTime);
-				this.#seekInProgress = false;
-				return newTime;
+				return withSpan("timegroup.seekTask", {
+					timegroupId: this.id || "unknown",
+					targetTime: targetTime ?? 0,
+					durationMs: this.durationMs
+				}, void 0, async (span) => {
+					await this.waitForMediaDurations();
+					const newTime = Math.max(0, Math.min(targetTime ?? 0, this.durationMs / 1e3));
+					if (isTracingEnabled()) span.setAttribute("newTime", newTime);
+					this.#currentTime = newTime;
+					this.requestUpdate("currentTime");
+					await this.runThrottledFrameTask();
+					this.saveTimeToLocalStorage(this.#currentTime);
+					this.#seekInProgress = false;
+					return newTime;
+				});
 			}
 		});
 	}
+	static get observedAttributes() {
+		return [
+			...super.observedAttributes || [],
+			"mode",
+			"overlap",
+			"currenttime",
+			"fit"
+		];
+	}
 	static {
 		this.styles = css`
     :host {
       display: block;
+      position: relative;
+      overflow: hidden;
+    }
+
+    ::slotted(ef-timegroup) {
+      position: absolute;
       width: 100%;
       height: 100%;
-      position: absolute;
       top: 0;
       left: 0;
     }
   `;
 	}
-	#currentTime = void 0;
-	set mode(value) {
-		sequenceDurationCache.delete(this);
-		this._mode = value;
-	}
-	get mode() {
-		return this._mode;
-	}
-	set overlapMs(value) {
-		sequenceDurationCache.delete(this);
-		this._overlapMs = value;
-	}
-	get overlapMs() {
-		return this._overlapMs;
+	attributeChangedCallback(name, old, value) {
+		if (name === "mode" && value) this.mode = value;
+		if (name === "overlap" && value) this.overlapMs = parseTimeToMs(value);
+		super.attributeChangedCallback(name, old, value);
 	}
 	#resizeObserver;
+	#currentTime = void 0;
 	#seekInProgress = false;
 	#pendingSeekTime;
 	#processingPendingSeek = false;
-	#frameTaskInProgress = false;
-	#pendingFrameTaskRun = false;
-	#processingPendingFrameTask = false;
-	/**
-	* Throttles frameTask execution to ensure only one runs at a time while preserving the last request
-	*/
 	async runThrottledFrameTask() {
-		if (this.#frameTaskInProgress) {
-			this.#pendingFrameTaskRun = true;
-			while (this.#frameTaskInProgress) await this.frameTask.taskComplete;
-			return;
-		}
-		this.#frameTaskInProgress = true;
-		try {
-			await this.frameTask.run();
-		} finally {
-			this.#frameTaskInProgress = false;
-			if (this.#pendingFrameTaskRun && !this.#processingPendingFrameTask) {
-				this.#pendingFrameTaskRun = false;
-				this.#processingPendingFrameTask = true;
-				try {
-					await this.runThrottledFrameTask();
-				} finally {
-					this.#processingPendingFrameTask = false;
-				}
-			} else this.#pendingFrameTaskRun = false;
-		}
+		if (this.playbackController) return this.playbackController.runThrottledFrameTask();
+		await this.frameTask.run();
 	}
 	set currentTime(time) {
-		time = Math.max(0, time);
+		if (this.playbackController) {
+			this.playbackController.currentTime = time;
+			return;
+		}
+		time = Math.max(0, Math.min(this.durationMs / 1e3, time));
 		if (!this.isRootTimegroup) return;
 		if (Number.isNaN(time)) return;
 		if (time === this.#currentTime && !this.#processingPendingSeek) return;
@@ -146,6 +153,7 @@ let EFTimegroup = class EFTimegroup$1 extends EFTemporal(LitElement) {
 		});
 	}
 	get currentTime() {
+		if (this.playbackController) return this.playbackController.currentTime;
 		return this.#currentTime ?? 0;
 	}
 	set currentTimeMs(ms) {
@@ -154,16 +162,23 @@ let EFTimegroup = class EFTimegroup$1 extends EFTemporal(LitElement) {
 	get currentTimeMs() {
 		return this.currentTime * 1e3;
 	}
-	/**
-	* Determines if this is a root timegroup (no parent timegroups)
-	*/
+	async seek(timeMs) {
+		this.currentTimeMs = timeMs;
+		await this.seekTask.taskComplete;
+		if (this.playbackController) this.saveTimeToLocalStorage(this.currentTime);
+		await this.frameTask.taskComplete;
+		const visibleElements = deepGetElementsWithFrameTasks(this).filter((element) => {
+			return evaluateTemporalStateForAnimation(element).isVisible;
+		});
+		await Promise.all(visibleElements.map(async (element) => {
+			if ("waitForFrameReady" in element && typeof element.waitForFrameReady === "function") await element.waitForFrameReady();
+			else await element.updateComplete;
+		}));
+	}
 	get isRootTimegroup() {
 		return !this.parentTimegroup;
 	}
-	/**
-	* Saves time to localStorage (extracted for reuse)
-	*/
-	#saveTimeToLocalStorage(time) {
+	saveTimeToLocalStorage(time) {
 		try {
 			if (this.id && this.isConnected && !Number.isNaN(time)) localStorage.setItem(this.storageKey, time.toString());
 		} catch (error) {
@@ -179,10 +194,10 @@ let EFTimegroup = class EFTimegroup$1 extends EFTemporal(LitElement) {
 		flushStartTimeMsCache();
 		this.requestUpdate();
 	};
-	maybeLoadTimeFromLocalStorage() {
+	loadTimeFromLocalStorage() {
 		if (this.id) try {
 			const storedValue = localStorage.getItem(this.storageKey);
-			if (storedValue === null) return void 0;
+			if (storedValue === null) return;
 			return Number.parseFloat(storedValue);
 		} catch (error) {
 			log("Failed to load time from localStorage", error);
@@ -190,9 +205,9 @@ let EFTimegroup = class EFTimegroup$1 extends EFTemporal(LitElement) {
 	}
 	connectedCallback() {
 		super.connectedCallback();
-		this.waitForMediaDurations().then(() => {
+		if (!this.playbackController) this.waitForMediaDurations().then(() => {
 			if (this.id) {
-				const maybeLoadedTime = this.maybeLoadTimeFromLocalStorage();
+				const maybeLoadedTime = this.loadTimeFromLocalStorage();
 				if (maybeLoadedTime !== void 0) this.currentTime = maybeLoadedTime;
 			}
 			if (EF_INTERACTIVE && this.seekTask.status === TaskStatus.INITIAL) this.seekTask.run();
@@ -201,7 +216,9 @@ let EFTimegroup = class EFTimegroup$1 extends EFTemporal(LitElement) {
 		if (this.shouldWrapWithWorkbench()) this.wrapWithWorkbench();
 	}
 	#previousDurationMs = 0;
-	updated(_changedProperties) {
+	updated(changedProperties) {
+		super.updated(changedProperties);
+		if (changedProperties.has("mode") || changedProperties.has("overlapMs")) sequenceDurationCache.delete(this);
 		if (this.#previousDurationMs !== this.durationMs) {
 			this.#previousDurationMs = this.durationMs;
 			this.runThrottledFrameTask();
@@ -217,17 +234,15 @@ let EFTimegroup = class EFTimegroup$1 extends EFTemporal(LitElement) {
 	}
 	get intrinsicDurationMs() {
 		if (this.hasExplicitDuration) return this.explicitDurationMs;
-		return void 0;
 	}
 	get hasOwnDuration() {
 		return this.mode === "contain" || this.mode === "sequence" || this.mode === "fixed" && this.hasExplicitDuration;
 	}
 	get durationMs() {
 		switch (this.mode) {
-			case "fit": {
+			case "fit":
 				if (!this.parentTimegroup) return 0;
 				return this.parentTimegroup.durationMs;
-			}
 			case "fixed": return super.durationMs;
 			case "sequence": {
 				const cachedDuration = sequenceDurationCache.get(this);
@@ -258,18 +273,15 @@ let EFTimegroup = class EFTimegroup$1 extends EFTemporal(LitElement) {
 		signal?.throwIfAborted();
 		const temporals = deepGetElementsWithFrameTasks(this);
 		const timelineTimeMs = (this.#pendingSeekTime ?? this.#currentTime ?? 0) * 1e3;
-		const activeTemporals = temporals.filter((temporal) => {
+		const frameTasks = temporals.filter((temporal) => {
 			if (!("startTimeMs" in temporal) || !("endTimeMs" in temporal)) return true;
 			const epsilon = .001;
 			const startTimeMs = temporal.startTimeMs;
 			const endTimeMs = temporal.endTimeMs;
 			const elementStartsBeforeEnd = startTimeMs <= timelineTimeMs + epsilon;
-			const isRootTimegroup = temporal.tagName.toLowerCase() === "ef-timegroup" && !temporal.parentTimegroup;
-			const useInclusiveEnd = isRootTimegroup;
-			const elementEndsAfterStart = useInclusiveEnd ? endTimeMs >= timelineTimeMs : endTimeMs > timelineTimeMs;
+			const elementEndsAfterStart = temporal.tagName.toLowerCase() === "ef-timegroup" && !temporal.parentTimegroup ? endTimeMs >= timelineTimeMs : endTimeMs > timelineTimeMs;
 			return elementStartsBeforeEnd && elementEndsAfterStart;
-		});
-		const frameTasks = activeTemporals.map((temporal) => temporal.frameTask);
+		}).map((temporal) => temporal.frameTask);
 		frameTasks.forEach((task) => {
 			task.run();
 		});
@@ -288,31 +300,45 @@ let EFTimegroup = class EFTimegroup$1 extends EFTemporal(LitElement) {
 		}
 	}
 	async waitForFrameTasks() {
-		const temporalElements = deepGetElementsWithFrameTasks(this);
-		const visibleElements = temporalElements.filter((element) => {
-			const animationState = evaluateTemporalStateForAnimation(element);
-			return animationState.isVisible;
+		return await withSpan("timegroup.waitForFrameTasks", {
+			timegroupId: this.id || "unknown",
+			mode: this.mode
+		}, void 0, async (span) => {
+			const innerStart = performance.now();
+			const temporalElements = deepGetElementsWithFrameTasks(this);
+			if (isTracingEnabled()) span.setAttribute("temporalElementsCount", temporalElements.length);
+			const visibleElements = temporalElements.filter((element) => {
+				return evaluateTemporalStateForAnimation(element).isVisible;
+			});
+			if (isTracingEnabled()) span.setAttribute("visibleElementsCount", visibleElements.length);
+			const promiseStart = performance.now();
+			await Promise.all(visibleElements.map((element) => element.frameTask.run()));
+			const promiseEnd = performance.now();
+			const innerEnd = performance.now();
+			if (isTracingEnabled()) {
+				span.setAttribute("actualInnerMs", innerEnd - innerStart);
+				span.setAttribute("promiseAwaitMs", promiseEnd - promiseStart);
+			}
 		});
-		await Promise.all(visibleElements.map((element) => element.frameTask.run()));
 	}
 	async waitForMediaDurations() {
 		if (!this.mediaDurationsPromise) this.mediaDurationsPromise = this.#waitForMediaDurations();
 		return this.mediaDurationsPromise;
 	}
-	/**
-	* Wait for all media elements to load their initial segments.
-	* Ideally we would only need the extracted index json data, but
-	* that caused issues with constructing audio data. We had negative durations
-	* in calculations and it was not clear why.
-	*/
 	async #waitForMediaDurations() {
-		await this.updateComplete;
-		const mediaElements = deepGetMediaElements(this);
-		await Promise.all(mediaElements.map((m) => m.mediaEngineTask.value ? Promise.resolve() : m.mediaEngineTask.run()));
-		flushStartTimeMsCache();
-		flushSequenceDurationCache();
-		this.requestUpdate("currentTime");
-		await this.updateComplete;
+		return withSpan("timegroup.waitForMediaDurations", {
+			timegroupId: this.id || "unknown",
+			mode: this.mode
+		}, void 0, async (span) => {
+			await this.updateComplete;
+			const mediaElements = deepGetMediaElements(this);
+			if (isTracingEnabled()) span.setAttribute("mediaElementsCount", mediaElements.length);
+			await Promise.all(mediaElements.map((m) => m.mediaEngineTask.value ? Promise.resolve() : m.mediaEngineTask.run()));
+			flushStartTimeMsCache();
+			flushSequenceDurationCache();
+			this.requestUpdate("currentTime");
+			await this.updateComplete;
+		});
 	}
 	get childTemporals() {
 		return shallowGetTemporalElements(this);
@@ -325,16 +351,9 @@ let EFTimegroup = class EFTimegroup$1 extends EFTemporal(LitElement) {
 		}
 		return null;
 	}
-	/**
-	* Returns true if the timegroup should be wrapped with a workbench.
-	*
-	* A timegroup should be wrapped with a workbench if it is the root-most timegroup
-	* and EF_INTERACTIVE is true.
-	*
-	* If the timegroup is already wrappedin a context provider like ef-preview,
-	* it should NOT be wrapped in a workbench.
-	*/
 	shouldWrapWithWorkbench() {
+		if (EF_RENDERING?.() === true) return this.closest("ef-timegroup") === this && this.closest("ef-preview") === null && this.closest("ef-workbench") === null && this.closest("test-context") === null;
+		if (!globalThis.EF_DEV_WORKBENCH) return false;
 		return EF_INTERACTIVE && this.closest("ef-timegroup") === this && this.closest("ef-preview") === null && this.closest("ef-workbench") === null && this.closest("test-context") === null;
 	}
 	wrapWithWorkbench() {
@@ -351,66 +370,12 @@ let EFTimegroup = class EFTimegroup$1 extends EFTemporal(LitElement) {
 	get efElements() {
 		return Array.from(this.querySelectorAll("ef-audio, ef-video, ef-image, ef-captions, ef-waveform"));
 	}
-	async #addAudioToContext(audioContext, fromMs, toMs) {
-		await this.waitForMediaDurations();
-		const abortController = new AbortController();
-		await Promise.all(deepGetMediaElements(this).map(async (mediaElement) => {
-			if (mediaElement.mute) return;
-			const mediaStartsBeforeEnd = mediaElement.startTimeMs <= toMs;
-			const mediaEndsAfterStart = mediaElement.endTimeMs >= fromMs;
-			const mediaOverlaps = mediaStartsBeforeEnd && mediaEndsAfterStart;
-			if (!mediaOverlaps) 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;
-			let audio;
-			try {
-				audio = await mediaElement.fetchAudioSpanningTime(mediaSourceFromMs, mediaSourceToMs, abortController.signal);
-			} catch (error) {
-				if (error instanceof Error && error.message.includes("No audio track available")) return;
-				throw error;
-			}
-			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 requestedSourceFromMs = mediaSourceFromMs;
-			const actualSourceStartMs = audio.startMs;
-			const offsetInBufferMs = requestedSourceFromMs - actualSourceStartMs;
-			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);
-		}));
+	getMediaElements() {
+		return deepGetMediaElements(this);
 	}
 	async renderAudio(fromMs, toMs) {
-		const durationMs = toMs - fromMs;
-		const duration = durationMs / 1e3;
-		const exactSamples = 48e3 * duration;
-		const aacFrames = exactSamples / 1024;
-		const alignedFrames = Math.round(aacFrames);
-		const contextSize = alignedFrames * 1024;
-		if (contextSize <= 0) throw new Error(`Duration must be greater than 0 when rendering audio. ${contextSize}ms`);
-		let audioContext;
-		try {
-			audioContext = new OfflineAudioContext(2, contextSize, 48e3);
-		} catch (error) {
-			throw new Error(`[EFTimegroup.renderAudio] Failed to create OfflineAudioContext(2, ${contextSize}, 48000) for renderAudio(${fromMs}, ${toMs}) with contextSize=${contextSize}: ${error instanceof Error ? error.message : String(error)}. This typically happens when audio parameters are invalid (e.g., contextSize <= 0).`);
-		}
-		await this.#addAudioToContext(audioContext, fromMs, toMs);
-		const renderedBuffer = await audioContext.startRendering();
-		return renderedBuffer;
-	}
-	/**
-	* TEMPORARY TEST METHOD: Renders audio and immediately plays it back
-	* Usage: timegroup.testPlayAudio(0, 5000) // Play first 5 seconds
-	*/
+		return renderTemporalAudio(this, fromMs, toMs);
+	}
 	async testPlayAudio(fromMs, toMs) {
 		const renderedBuffer = await this.renderAudio(fromMs, toMs);
 		const playbackContext = new AudioContext();
@@ -436,25 +401,17 @@ let EFTimegroup = class EFTimegroup$1 extends EFTemporal(LitElement) {
 			}
 		}
 		await Promise.all(loaderTasks);
-		efElements.map((el) => {
+		efElements.forEach((el) => {
 			if ("productionSrc" in el && el.productionSrc instanceof Function) el.setAttribute("src", el.productionSrc());
 		});
 	}
 };
-_decorate([provide({ context: timegroupContext })], EFTimegroup.prototype, "_timeGroupContext", void 0);
-_decorate([property({
-	type: String,
-	attribute: "mode"
-})], EFTimegroup.prototype, "mode", null);
-_decorate([property({
-	type: Number,
-	converter: durationConverter,
-	attribute: "overlap"
-})], EFTimegroup.prototype, "overlapMs", null);
-_decorate([property({ type: String })], EFTimegroup.prototype, "fit", void 0);
-_decorate([property({
+__decorate([provide({ context: timegroupContext })], EFTimegroup.prototype, "_timeGroupContext", void 0);
+__decorate([provide({ context: efContext })], EFTimegroup.prototype, "efContext", void 0);
+__decorate([property({ type: String })], EFTimegroup.prototype, "fit", void 0);
+__decorate([property({
 	type: Number,
 	attribute: "currenttime"
 })], EFTimegroup.prototype, "currentTime", null);
-EFTimegroup = _EFTimegroup = _decorate([customElement("ef-timegroup")], EFTimegroup);
+EFTimegroup = _EFTimegroup = __decorate([customElement("ef-timegroup")], EFTimegroup);
 export { EFTimegroup, flushSequenceDurationCache, shallowGetTimegroups };

package/dist/elements/EFVideo.d.ts

@@ -67,7 +67,11 @@ export declare class EFVideo extends EFVideo_base {
      * Set loading state for user feedback
      */
     private setLoadingState;
-    paintTask: Task<readonly [number], void>;
+    /**
+     * Paint the current video frame to canvas
+     * Called by frameTask after seek is complete
+     */
+    paint(seekToMs: number, parentSpan?: any): void;
     /**
      * Clear the canvas when element becomes inactive
      */
@@ -75,7 +79,7 @@ export declare class EFVideo extends EFVideo_base {
     /**
      * Display a video frame on the canvas
      */
-    displayFrame(frame: VideoFrame, seekToMs: number): number;
+    displayFrame(frame: VideoFrame, seekToMs: number, parentSpan?: any): void;
     /**
      * Check if we're in production rendering mode (EF_FRAMEGEN active) vs preview mode
      */
@@ -89,10 +93,20 @@ export declare class EFVideo extends EFVideo_base {
      * Still used by EFCaptions - maps to unified video seek task
      */
     get fragmentIndexTask(): Task<readonly [number], import('mediabunny').VideoSample | undefined>;
+    /**
+     * Helper method for tests: wait for the current frame to be ready
+     * This encapsulates the complexity of ensuring the video has updated
+     * and its frameTask has completed.
+     *
+     * @returns Promise that resolves when the frame is ready
+     */
+    waitForFrameReady(): Promise<void>;
     /**
      * Clean up resources when component is disconnected
      */
     disconnectedCallback(): void;
+    didBecomeRoot(): void;
+    didBecomeChild(): void;
 }
 declare global {
     interface HTMLElementTagNameMap {